jp-zeroWorkerStation/pages/packages/mine/employmentService/laborManagement/postMessage.vue

<template>
	<view>
		<u-navbar back-text="发布求职信息" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<!-- 基本信息 -->
		<view class="information-group">
			<view class="headline">
				基本信息
			</view>
			<!-- 职位名称 -->
			<view class="item">
				<view class="title">
					<text>*</text>职位名称
				</view>
				<view class="input">
					<u-input type="text" v-model="formData.positionName" placeholder="请填写职位名称"></u-input>

				</view>
			</view>
			<!--结算形式 -->
			<view class="item">
				<view class="title">
					<text>*</text>结算形式
				</view>
				<view class="input">

					<u-input type="select" v-model="settlementMethod" @click="showselect(1)"
						placeholder="请选择结算形式"></u-input>

				</view>

			</view>
			<!-- *薪资待遇 -->
			<view class="item">
				<view class="title">
					<text>*</text>薪资待遇
				</view>
				<view class="input2">
					<u-input type="text" v-model="formData.salary" placeholder="请填写薪资待遇"></u-input>

				</view>
				<view class="unit">
					{{getUnit(formData)}}
				</view>
				<!-- <view class="icon" @click="showselect(0)">
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view> -->

			</view>

			<!-- 行业 -->
			<view class="item">
				<view class="title">
					<text>*</text>行业
				</view>
				<view class="input">

					<u-input type="select" v-model="industry" @click="popupShow=true" readonly
						placeholder="请选择行业"></u-input>

				</view>

			</view>
			<!-- 招聘人数 -->
			<view class="item">
				<view class="title">
					<text>*</text>招聘人数
				</view>
				<view class="input">

					<u-input type="number" v-model="formData.recruitingNumbers" placeholder="请填写招聘人数"></u-input>
				</view>

			</view>
			<!-- 招聘人数 -->
			<view class="item">
				<view class="title">
					 年龄要求
				</view>
				<view class="input">
			
					<u-input type="text" v-model="formData.ageRequirement" placeholder="请填写年龄要求"></u-input>
				</view>
			
			</view>



		</view>
		<!-- 工作描述 -->
		<view class="job-description">
			<view class="title">
				<text>*</text>工作描述
			</view>
			<textarea class="textarea" v-model="formData.desc" placeholder="请简单描述工作内容及职位要求"></textarea>
		</view>
		<!-- 个人信息 -->
		<view class="information-group">
			<view class="headline">
				基本信息
			</view>
			<!-- 联系人 -->
			<view class="item">
				<view class="title">
					<text>*</text>联系人
				</view>
				<view class="input">

					<u-input type="text" v-model="formData.contacts" placeholder="请填写联系人"></u-input>

				</view>
			</view>
			<!-- 联系电话 -->
			<view class="item">
				<view class="title">
					<text>*</text>联系电话
				</view>
				<view class="input">
					<u-input type="text" v-model="formData.contactsPhone" placeholder="请填写联系电话"></u-input>

				</view>



			</view>
			<!--工作地区 -->
			<view class="item">
				<view class="title">
					<text>*</text>工作地区
				</view>
				<view class="input">

					<u-input type="select" v-model="workArea" @click="showselect(3)" placeholder="请选择工作地区"></u-input>

				</view>

			</view>
			<!-- 详细地址 -->

			<view class="item">
				<view class="title">
					<text>*</text>详细地址
				</view>
				<view class="input">
					<u-input type="text" v-model="formData.address" placeholder="请填写详细的工作地址"></u-input>

				</view>

			</view>


		</view>
		<view class="information-group">
			<view class="headline">
				展示图片<span>(最多上传5张)</span>
			</view>
			<u-upload  ref="uUpload" :action="action" name="photoFile" :file-list="listPic"
				:form-data="formDataUpload" :header="header" width="180"  max-count="5" @on-success="onSuccess">
			</u-upload>
			
		</view>
		<u-select v-model="show" value-name="value" label-name="name" :list="list" @confirm="confirm"></u-select>

		<button class="issue" @click="submit()" type="default">提交审核</button>


		<!-- 筛选框 -->
		<u-popup v-model="popupShow" @open="popupShowOpen" mode="bottom" border-radius="20" :closeable="true">
			<view class="popup-content">
				<view class="headline">
					筛选
				</view>

				<!-- 行业 -->
				<view class="industry">
					<view class="title">
						<u-search v-model="querypop"></u-search>
						<view>意向行业 <span
								style="color: #4696f6;">{{isChecked!=-1?'已选中:'+industryList[isChecked].name:''}}</span>
							(向下拉可滑动)</view>

					</view>
					<!-- 选项 -->

					<scroll-view class="scrollview" scroll-y="true" style="height: 620rpx;">

						<view class="options">

							<view :class="{item,checked:isChecked==index}" v-for="(item,index) in industryList"
								v-show="item.name.indexOf(querypop)!=-1" :key="index" @click="changeChecked(index)">
								<!-- 快递跑腿/配送/分拣 -->{{item.name}}
							</view>

						</view>
					</scroll-view>

				</view>
				<!-- 结算方式 -->
				<view class="clearing-form" v-if="false">
					<view class="title">
						结算方式
					</view>
					<!-- 选项 -->
					<view class="options">
						<view :class="{item,checked:wayChecked==index}" v-for="(item,index) in wayList" :key="index"
							@click="changeWayChecked(index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 薪资形式 -->
				<view class="salary-form" v-if="false">
					<view class="title">
						薪资形式
					</view>
					<!-- 选项 -->
					<view class="options ">
						<view :class="{item,checked:saralyChecked==index}" v-for="(item,index) in salaryList"
							:key="index" @click="changeSaralyChecked(index)">
							{{item.name}}
						</view>
					</view>
				</view>



				<view class="button">
					<button class="reset" @click="reset()">重置</button>
					<button class="confirm" @click="queryBtn()">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as API_weixin from '@/apis/weixin.js'
	import * as API from '@/apis/pagejs/packages.js'
	export default {
		data() {
			return {
				querypop: "",
				popupShow: false,
				isChecked: -1,
				industryList: [],

				selectIndex: 0,
				show: false,
				list: [],
				formData: {
					positionName: "",
					salary: "",
					settlementMethod: "",
					industry: "",
					recruitingNumbers: "",
					desc: "",
					contacts: "",
					contactsPhone: "",
					workArea: "",
					address: "",
					salaryForm: "2",
					ageRequirement:"",
					images:"",
				},
				settlementMethod: "",
				salaryForm: "计时",
				industry: "",
				workArea: "",
				sqlList: [
					[],
					[{
							"name": "日结",
							"value": "1",
						},
						{
							"name": "周结",
							"value": "2",
						},
						{

							"name": "月结",
							"value": "3",

						}
					],
					[],
					[],
					[],
					[],
					[]
				],
				valueList: [-1, -1, -1, -1, -1, -1],
				userInfo: {},
				id: "",
				formDataUpload:{},
				action: '',
				header: '',
				listPic: [],
			}
		},
		onLoad(op) {
			this.userInfo = this.carhelp.getPersonInfo()
			if (op.id) {
				this.id = op.id
				this.getInfo()
			} else {
				var enterpriseInfo = this.carhelp.getPersonInfoPlus().enterpriseInfo
				if(enterpriseInfo){
					this.formData.contacts = enterpriseInfo.contactsPersonId
					this.formData.address = enterpriseInfo.address
				}
				
			}
			
			this.action = process.car.BASE_URL+"uploadPicture";
			
			this.formDataUpload = {
				subFolder: "laborManagement"
			}
			var token = this.carhelp.getToken();
			this.header={
				'Authorization': token,
				'X-Requested-With': 'XMLHttpRequest'
			}

			//this.tel=this.userInfo.phone
		},
		methods: {
			onSuccess(data, index, lists, name) {
				
				 console.log(this.$refs.uUpload.lists)
				if(data.result) {
					
				}
			},
			reset() {
				this.isChecked = -1;


			},
			queryBtn() {
				this.formData.industry = this.industryList[this.isChecked].value
				this.industry = this.industryList[this.isChecked].name
				this.popupShow = false;
			},
			changeChecked(index) {
				this.isChecked = index;
			},
			popupShowOpen() {
				if (this.industryList.length == 0) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API_weixin.findListByCatalogName({
						name: '意向行业',

					}).then((res) => {
						uni.hideLoading();

						this.industryList = res.data.dictionaryList

					}).catch(error => {

						uni.showToast({
							icon: 'none',
							title: error
						})
						//this.getPhone()

					})
				}
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.recruitDetail({
					recruitId: this.id
				}).then((res) => {
					uni.hideLoading()
					if (res.data.recruitInformationInfo) {
						this.formData = res.data.recruitInformationInfo;
						var name = ["salaryForm", "settlementMethod", "industry", ]
						for (var i in name) {
							//.log(name[i]+'N')
							this[name[i]] = this.formData[(name[i] + 'N')]
						}
						this.workArea = this.formData.workArea
						
						this.listPic=JSON.parse(this.formData.images) 
						for(var i in this.listPic){
							var obj=this.listPic[i]
							obj.progress=100
							obj.error=false
							obj.response={
								code: 200,
								data: obj.url,
								message: null,
								result: true
							}
						}
						 this.$refs.uUpload.lists=this.listPic
						
					}

				}).catch(error => {
					uni.showToast({
						icon: 'none',
						title: error,
						icon: "none"
					})
				})
			},
			confirm(e) {
				this.show = false;
				var name = ["salaryForm", "settlementMethod",

					"industry",
					"workArea",
				]
				this[name[this.selectIndex]] = e[0].label
				this.formData[name[this.selectIndex]] = e[0].value
				//.log(e)
			},
			showselect(k) {
				this.selectIndex = k;
				if (this.sqlList[k].length == 0) {
					var name = ['薪资形式', '结算方式', '意向行业', '工作地区']
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API_weixin.findListByCatalogName({
						name: name[k],

					}).then((res) => {
						uni.hideLoading();
						this.sqlList[k] = res.data.dictionaryList
						this.list = this.sqlList[k];
						this.show = true

					}).catch(error => {

						uni.showToast({
							icon: 'none',
							title: error
						})
						//this.getPhone()

					})
				} else {
					this.list = this.sqlList[k];
					this.show = true
				}
			},
			submit() {
				this.formData.images="";
				var  imgs= this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				if(imgs&&imgs.length){
					var str =imgs.map(item=>{
						return {
							name:"1.jpg",
							url:item.response.data
						}
					})
					console.log(str)
					this.formData.images=JSON.stringify(str);
				}
				
				if (!this.formData.positionName) {
					uni.showToast({
						icon: 'none',
						title: "请填写职位名称"
					})
					return
				}
				if (!this.formData.salary) {
					uni.showToast({
						icon: 'none',
						title: "请填写薪资待遇"
					})
					return
				}
				if (!this.formData.settlementMethod) {
					uni.showToast({
						icon: 'none',
						title: "请选择结算形式"
					})
					return
				}
				if (!this.formData.industry) {
					uni.showToast({
						icon: 'none',
						title: "请选择行业"
					})
					return
				}
				if (!this.formData.recruitingNumbers) {
					uni.showToast({
						icon: 'none',
						title: "请填写招聘人数"
					})
					return
				}
				if (!this.formData.desc) {
					uni.showToast({
						icon: 'none',
						title: "请简单描述工作内容及职位要求"
					})
					return
				}
				if (!this.formData.contacts) {
					uni.showToast({
						icon: 'none',
						title: "请填写联系人"
					})
					return
				}
				if (!this.formData.contactsPhone) {
					uni.showToast({
						icon: 'none',
						title: "请填写联系电话"
					})
					return
				}
				if (!this.formData.workArea) {
					uni.showToast({
						icon: 'none',
						title: "请选择工作地区"
					})
					return
				}
				if (!this.formData.address) {
					uni.showToast({
						icon: 'none',
						title: "请填写详细的工作地址"
					})
					return
				}
				this.formData.workArea = this.workArea
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.createRecruit(this.formData).then((res) => {
					uni.hideLoading();

					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('refreshData');

					uni.showModal({
						title: '提示',
						content: '提交成功，等待审核！',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {

								uni.navigateBack()
							} else if (res.cancel) {
								//.log('用户点击取消');
							}
						}
					});

				}).catch(error => {

					uni.showToast({
						icon: 'none',
						title: error
					})
					//this.getPhone()

				})
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 150px;
	}
</style>

<style lang="scss" scoped>
	.information-group {
		margin: 32rpx;
		padding: 24rpx 32rpx;
		background-color: #fff;
		border-radius: 24rpx;

		.headline {
			color: rgba(16, 16, 16, 1);
			font-size: 36rpx;
			margin-bottom: 24rpx;

			font-family: 'PingFangSC-medium';
			span{
				    font-size: 24rpx;
				    color: #9E9E9E;
			}
		}

		.item {
			display: flex;
			align-items: center;
			padding: 12rpx 0;
			border-bottom: 1px solid #f1f1f1;

			.title {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				width: 148rpx;

				text {
					color: #EE3138
				}
			}

			.input {
				width: 450rpx;
				margin-left: 24rpx;

				/deep/.uni-input-input {
					color: rgba(51, 51, 51, 1);
				}
			}

			.input2 {
				width: 350rpx;
				margin-left: 24rpx;

				/deep/.uni-input-input {
					color: rgba(51, 51, 51, 1);
				}
			}

			.icon {
				margin-left: auto;
			}

			.unit {
				margin-left: auto;
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
			}
		}
	}

	// 工作描述
	.job-description {
		margin: 24rpx 32rpx;
		background-color: #fff;
		border-radius: 12px;
		padding: 24rpx 32rpx;

		.title {
			color: #333333;
			font-size: 18px;
			font-family: 'PingFangSC-medium';
		}

		text {
			color: #FF0000;
		}

		.textarea {
			margin-top: 24rpx;
			line-height: 40rpx;
			width: 100%;
			height: 200rpx;

		}

	}

	/* 发布 */
	.issue {
		background-color: rgba(34, 149, 255, 1);
		color: rgba(241, 241, 241, 1);
		font-size: 18px;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 50px;
		position: fixed;
		left: 32rpx;
		right: 32rpx;
		bottom: 20rpx;
		z-index: 999;
	}

	// 筛选框
	.popup-content {
		padding: 32rpx;

		.headline {
			color: #101010;
			font-size: 40rpx;
			text-align: center;
		}

		//行业
		.industry,
		.clearing-form,
		.salary-form {
			margin-top: 16rpx;

			.title {
				font-size: 32rpx;
				color: #111111;
			}

			// 选项
			.options {
				display: flex;
				
				flex-wrap: wrap;
				margin-top: 24rpx;

				.item {
					height: 56rpx;
					line-height: 56rpx;
					min-width: 210rpx;
					text-align: center;
					margin-bottom: 16rpx;
					margin-right: 16rpx;
					color: #999999;
					background-color: #F3F3F4;
					border-radius: 4px;
						padding: 0 6rpx;
				}

				.checked {
					background-color: #2795FD;
					color: #fff;
				}
			}
		}

		.button {
			display: flex;

			margin-top: 8rpx;

			.reset:after {
				border: 0
			}

			.reset {
				color: #999999;
				background-color: #F3F3F4;
				width: 200rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 8px;

			}

			.confirm {
				width: 440rpx;
				background-color: #2795FD;
				color: #fff;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 8px;
			}
		}
	}

	.salary-form,
	.clearing-form {
		.options {
			justify-content: start !important;
		}

		.item {
			margin-right: 24rpx;
		}
	}

	.scrollview {
		border: 1px #101010 dashed;
	}
</style>