kly_uniapp/pages/merchant/releaseInfo.vue

<!-- 商家-发布/编辑招聘信息-完工即结 -->

<template>
	<!-- sub_data.settle_catalog==1为发布单次招聘，默认只有发布单次招聘 -->
	<view>
		<view class="contain">
			<!-- 招聘模式选择 -->
			<view v-if="trader_level=='1'" style="margin-top: 15upx;float: right;font-weight: bold;color: #01bcc3;"
				@click="chenge_settle_catalog(sub_data.settle_catalog==0?1:0)">
				{{sub_data.settle_catalog==1?'当前批量招聘 切换单次招聘':'当前单次招聘 切换批量招聘'}}
			</view>
			<view style="clear: both;"></view>

			<!-- 标题等基本信息录入 -->
			<view :key="index"
				v-for="(item,index) in (sub_data.settle_catalog==1?releaseInfo.sub_arr0.concat(...releaseInfo.sub_arr1_s): releaseInfo.sub_arr0.concat(...releaseInfo.sub_arr1))">
				<view class="item">
					<view class="item_left">{{item.name}}</view>
					<input :type="item.type" @input="ipt" :data-key="item.key" :value="sub_data[item.key]"
						:placeholder="'请输入'+item.name" class="item_right" />
				</view>
				<view class="instr" v-if="item.mention">
					<view>{{item.mention}}</view>
				</view>
			</view>

			<!-- 总金额/人 -->
			<view v-if="sub_data.settle_catalog==1">
				<view class="item">
					<view class="item_left">总金额/人</view>
					<input type="number" @input="ipt" :data-key="'feetotal'" :value="sub_data['feetotal']"
						:placeholder="'请输入总金额/人'" class="item_right" />
				</view>
			</view>
			<view v-else>
				<view class="item">
					<view class="item_left">日金额/人</view>
					<input type="number" @input="ipt" :data-key="'eve_feetotal'" :value="sub_data['eve_feetotal']"
						:placeholder="'请输入单日金额'" class="item_right" />
				</view>
			</view>

			<!-- 开始和截至日期 -->
			<view style="justify-content: space-between;" class="item">
				<view class="item_date_picker">
					<uni-datetime-picker placeholder="起始日期" clear-icon=false type='date'
						:value="sub_data.begin_datetime" :start="begin_start" end="2050-12-31" @change="date_change1" />
				</view>
				<view v-if="sub_data.settle_catalog==0" class="item_date_picker">
					<uni-datetime-picker placeholder="结束日期" clear-icon=false type='date'
						:value="sub_data.finish_datetime" :start="end_start" end="2050-12-31" @change="date_change2" />
				</view>
				<view v-if="sub_data.settle_catalog==0" class="bold_tit">
					共{{calc_date(sub_data.begin_datetime,sub_data.finish_datetime)}}天</view>
			</view>

			<!-- 开始和结束时间 -->
			<view class="item">
				<view class="item_left">工作时间</view>
				<picker mode="time" :value="sub_data.begin_hour" start="00:00" end="23:59" data-key="begin_hour"
					@change="bindTimeChange">
					<view style="margin-right: 10upx;" class="uni-input choose_add choose_add4">{{sub_data.begin_hour}}
					</view>
				</picker>
				~
				<picker mode="time" :value="sub_data.finish_hour" start="00:00" end="23:59" data-key="finish_hour"
					@change="bindTimeChange">
					<view style="margin-left: 10upx;" class="uni-input choose_add choose_add4">{{sub_data.finish_hour}}
					</view>
				</picker>
				<view style="margin-left: 15upx;">共{{calc_hours(sub_data.begin_hour, sub_data.finish_hour)}}小时</view>
			</view>
			<view style="clear: both;height: 10upx;"></view>

			<!-- 单次招聘显示每天费用 -->
			<view v-if="sub_data.settle_catalog==0">
				<view class="item">
					<view class="item_left">总金额/人</view>
					<view class="item_right">{{total_sal}}元</view>
				</view>
				<view class="instr">
					<view style="text-indent: 20upx;">平台会因供需情况收取相应的服务费再支付给应聘者</view>
				</view>
			</view>

			<view style="margin-top: 30upx;" class="bold_tit">要求</view>
			<!-- 性别&年龄&管饭 -->
			<view class="item">
				<view class="item_left">性别</view>
				<view class="item_right">
					<radio-group @change="radio_change" data-key="gender_mode">
						<label>
							<radio color="#2bcfb4" value="0" :checked="sub_data.gender_mode==0" />
							<text>不限</text>
						</label>
						<label style="margin-left: 30upx;">
							<radio color="#2bcfb4" value="1" :checked="sub_data.gender_mode==1" />
							<text>仅男</text>
						</label>
						<label style="margin-left: 30upx;">
							<radio color="#2bcfb4" value="2" :checked="sub_data.gender_mode==2" />
							<text>仅女</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="item">
				<view class="item_left">年龄</view>
				<view class="item_right">
					<radio-group @change="radio_change" data-key="age_mode">
						<label>
							<radio color="#2bcfb4" value="0" :checked="sub_data.age_mode==0" />
							<text>不限</text>
						</label>
						<label style="margin-left: 30upx;">
							<radio color="#2bcfb4" value="1" :checked="sub_data.age_mode==1" />
							<text>选择年龄</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view v-if="sub_data.age_mode==1" class="item">
				<view class="item_left">年龄范围</view>
				<view class="item_right age_range">
					<input style="text-align: center;" type="number" @input="ipt" data-key="age_min"
						:value="sub_data.age_min" placeholder="最小年龄(>16)" />
					<view>—</view>
					<input style="text-align: center;" type="number" @input="ipt" data-key="age_max"
						:value="sub_data.age_max" placeholder="最大年龄(<65)" />
				</view>
			</view>
			<view class="item">
				<view class="item_left">管饭</view>
				<view class="item_right">
					<radio-group @change="radio_change" data-key="meals_providing">
						<label>
							<radio color="#2bcfb4" value="0" :checked="sub_data.meals_providing==0" />
							<text>不管饭</text>
						</label>
						<label style="margin-left: 30upx;">
							<radio color="#2bcfb4" value="1" :checked="sub_data.meals_providing==1" />
							<text>管饭</text>
						</label>
					</radio-group>
				</view>
			</view>

			<!-- 选择工作地点 -->
			<view class="item">
				<view class="item_left">工作地点</view>
				<view @click="openAddress" style="display: flex;align-items: center;justify-content: flex-end;"
					class="item_right">
					<view style="max-width: 450upx;" class="nowrap">
						{{sub_data.work_addr?sub_data.work_addr :'选择工作地点'}}
					</view>
					<image style="width: 16upx;height: 32upx;margin-left: 12upx;margin-right: 20upx;"
						src="../../static/arrow_grey2.png">
					</image>
				</view>
			</view>

			<!-- 岗位详情&工作要求 -->
			<view class="item">
				<view style="width: 100%;">
					<view
						style="padding-bottom: 15upx;display: flex;align-items: center;justify-content: space-between;">
						<view class="item_left bold_tit">岗位详情</view>
						<image @click="upload_img" style="width: 40upx;height: 40upx;margin-right: 15upx;"
							src="../../static/add_img.png">
						</image>
					</view>

					<textarea style="width: 100%;margin-top: 15upx;" @input="ipt" :data-key="'work_desc'"
						:value="sub_data['work_desc']" placeholder='请输入岗位详情' class="item_right" />
					<image @click="delete_img" v-if="sub_data.profile_photo" style="width: 100%;margin-top: 15upx;"
						mode="widthFix" :src="sub_data.profile_photo"></image>
				</view>
			</view>
			<view class="item">
				<view style="width: 100%;">
					<view class="item_left bold_tit">工作要求</view>
					<textarea style="width: 100%;margin-top: 15upx;" @input="ipt" :data-key="'requirements'"
						:value="sub_data['requirements']" placeholder='请输入工作要求' class="item_right" />
				</view>
			</view>
		</view>

		<view @click="sub()" style="margin-top: 60upx;" class="main_btn_m main_width">提交</view>
		<view style="height: 60upx;"></view>
		<uni-popup ref="popup" :mask-click="false">
			<view class="modal_box">
				<view style="color: #313131;text-align: center;font-size: 38upx;line-height: 90upx;">注意事项</view>
				<view class="mention">
					<view>1、商家在平台对应聘者的报名需及时处理，长时间不处理会被其他商家录用。</view>
					<view>2、免费发布招聘，录取应聘者需将工资垫付在平台，完工后请及时在平台内确认。</view>
					<view>3、每个报名者已把报名押金预付到平台，未到协定岗位者报名押金将全部补偿给商家。</view>
					<view>4、录取应聘者后因自身原因违约，取消工作，则扣除相应工资补偿给应聘者。</view>
				</view>
				<view class="modal_btn">
					<view @click="close_modal()" class="modal_btn_cancel">取消</view>
					<view @click="sub_data_req()" class="modal_btn_confirm">发布</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import commonData from '../../commonData.js'
	import commonFun from '../../commonFun.js'

	export default {
		data() {
			return {
				id: null,
				url: '&WsAjaxBiz=Trader&WsAjaxAction=entityDataHandle',
				releaseInfo: commonData.releaseInfo,
				calc_hours: commonFun.calc_hours,
				calc_date: commonFun.calc_date,
				sub_data: { //提交的数据
					settle_catalog: 0, //是否批量招聘
					age_mode: 0, //年龄， 0-不限；1-限制
					gender_mode: 0, //性别， 0-不限；1-限男；2-限女；
					meals_providing: 0, //是否管饭 0-不管；1-管饭；
					enroll_audit: 1, //是否需要审核
					settle_mode: 0, //核销模式
					begin_hour: '08:00',
					finish_hour: '17:00',

					work_addr1: '',
					work_addr: '', //工作地点
					work_addr_lng: '', //经度117.333
					work_addr_lat: '', //纬度39.33

					linker_name: '联系人',
				},
				begin_start: '', //开始日期的可选开始日期
				end_start: '', //截止日期的可选开始日期
				total_sal: '', //计算页面总金额
				trader_level: 0, //是否vip
			}
		},
		onLoad(e) {
			this.begin_start = commonFun.formatDate2(new Date())
			this.end_start = commonFun.formatDate2(new Date())
			this.trader_level = e.trader_level || 0 //是否vip

			// e.id = 399
			if (e.id) {
				this.get_data(e.id)
			} else {
				let sub_data = {
					...this.sub_data,
				}
				this.sub_data = sub_data
				let DRAFT = uni.getStorageSync('DRAFT0')
				if (DRAFT && DRAFT.title) {
					uni.showModal({
						title: '是否使用草稿内容？',
						content: '草稿标题：' + DRAFT.title,
						success: (res) => {
							if (res.confirm) {
								DRAFT.id = ''
								this.sub_data = {
									...DRAFT,
								}
								setTimeout(() => {
									this.cal_every_salary()
								}, 1000)
							} else {
								// 不使用草稿，则清空草稿
								uni.setStorageSync('DRAFT0', '')
							}
						}
					})
				}
			}
		},
		methods: {
			// 获取数据
			get_data(bizId) {
				commonFun.requestUrl(this.url, {
					bizCatalog: 'RecruitEntity',
					handleMode: 'fetch',
					bizId
				}, res => {
					if (res.status) {
						let sub_data = res.data.Result
						if (sub_data.settle_catalog == 0) {
							sub_data.eve_feetotal = sub_data.feetotal
						}
						this.sub_data = sub_data
						setTimeout(() => {
							this.cal_every_salary()
						}, 1500)
						console.log('编辑页面获取发布详情')
						console.log(this.sub_data)
					}

				})
			},
			// 提交数据
			sub_data_req() {
				this.close_modal()
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let sub_data = this.sub_data
				if (sub_data.settle_catalog == 0) {
					sub_data.feetotal = this.total_sal
				}
				sub_data.id = ''
				sub_data.urgent_level = 0
				let params = {
					bizCatalog: 'RecruitEntity',
					handleMode: 'upsertLaunchAudit',
					bizData: sub_data
				}
				console.log('发布请求数据')
				console.log(params.bizData)
				// return
				commonFun.requestUrl(this.url, params, res => {
					console.log('发布返回数据')
					console.log(res)
					uni.hideLoading()
					if (res.status) {
						uni.showModal({
							content: '发布成功',
							showCancel: false,
							success: () => {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					} else {
						if (res.data && res.data.ErrCode && res.data.ErrCode == 'NoEnoughCount') {
							uni.showModal({
								title: '剩余发布人数不足',
								content: '发布扣除' + this.sub_data.need_total + '人，当前剩余' + (res.data
									.ErrMsg.useFreeCount + res.data.ErrMsg
									.balance) + '人',
								confirmText: '去充值',
								success: (res2) => {
									if (res2.confirm) {
										uni.navigateTo({
											url: '/pages/personal/wallet?dvalue=' + res.data
												.ErrMsg.dvalue
										})
									}
								}
							})
						}
					}
				})
			},
			// 点击提交数据
			sub() {
				let sub_data = {
					...this.sub_data,
				}
				console.log(this.sub_data)

				// 检测输入是否为空
				let form_collect = sub_data.settle_catalog == 1 ? commonData.releaseInfo.sub_arr0
					.concat(...
						commonData
						.releaseInfo.sub_arr1_s) :
					commonData.releaseInfo.sub_arr0.concat(...commonData.releaseInfo.sub_arr1)
				for (let i in form_collect) {
					let item = form_collect[i]
					if (!sub_data[item['key']]) {
						uni.showModal({
							title: '输入错误',
							content: item['name'] + '不允许为空',
							showCancel: false,
							success: function(res) {}
						});
						return
					}
				}

				if (!sub_data.begin_datetime) {
					uni.showModal({
						content: '请选择起始日期',
						showCancel: false,
					});
					return
				}

				// 非批量招聘需要结束日期
				if (sub_data.settle_catalog != 1 && !sub_data.finish_datetime) {
					uni.showModal({
						content: '请选择截至日期',
						showCancel: false,
					});
					return
				}

				if (sub_data.begin_datetime == commonFun.formatDate2(new Date())) {
					uni.showModal({
						content: '当日工作请到【今日零工】发布',
						showCancel: false,
					});
					return
				}

				if (sub_data.settle_catalog != 1 && (sub_data.begin_datetime > sub_data.finish_datetime)) {
					uni.showModal({
						content: '起始日期不能大于截止日期',
						showCancel: false,
					});
					return
				}

				if (sub_data.work_addr == '') {
					uni.showModal({
						content: '请选择工作地点',
						showCancel: false,
					});
					return
				}
				if (!sub_data.work_desc) {
					uni.showModal({
						content: '岗位详情不允许为空',
						showCancel: false,
					});
					return
				}

				if (sub_data.age_mode == 1) {
					let age_min = Number(sub_data.age_min)
					let age_max = Number(sub_data.age_max)
					if (isNaN(age_min) || isNaN(age_max) || age_min < 1 || age_max < 1 || age_min >= age_max) {
						uni.showModal({
							content: '请输入正确的年龄范围！',
							showCancel: false,
						});
						return
					}
				}

				this.sub_data = sub_data
				this.open_modal()
			},

			// 计算每天工资
			cal_every_salary() {
				//起始/截至跨越天数
				let total_date = this.calc_date(this.sub_data.begin_datetime, this.sub_data.finish_datetime)
				let eve_feetotal = Number(this.sub_data.eve_feetotal)

				if (total_date != '--' && !isNaN(eve_feetotal)) {
					this.total_sal = (total_date * eve_feetotal).toFixed(2)
				} else {
					this.total_sal = ''
				}
			},
			// 选择单次/批量招聘按钮事件
			chenge_settle_catalog(settle_catalog) {
				let sub_data = {
					...this.sub_data,
				}
				sub_data['settle_catalog'] = settle_catalog
				this.sub_data = sub_data
				uni.setStorageSync('DRAFT0', sub_data)
			},
			// 单选事件
			radio_change(e) {
				let key = e.currentTarget.dataset.key
				let sub_data = {
					...this.sub_data,
				}
				sub_data[key] = e.target.value
				this.sub_data = sub_data
				uni.setStorageSync('DRAFT0', sub_data)
			},
			// 开始日期改变事件
			date_change1(e) {
				let sub_data = {
					...this.sub_data
				}
				sub_data.begin_datetime = e
				this.sub_data = sub_data
				this.end_start = e
				uni.setStorageSync('DRAFT0', sub_data)
				this.cal_every_salary()
			},
			// 截至日期改变事件                                         
			date_change2(e) {
				let sub_data = {
					...this.sub_data
				}
				sub_data.finish_datetime = e
				this.sub_data = sub_data
				uni.setStorageSync('DRAFT0', sub_data)
				this.cal_every_salary()
			},
			// input和textarea的输入框输入事件
			ipt(e) {
				let key = e.currentTarget.dataset.key
				let sub_data = {
					...this.sub_data
				}
				sub_data[key] = e.target.value
				this.sub_data = sub_data
				this.cal_every_salary()
				uni.setStorageSync('DRAFT0', sub_data)
			},
			// 删除招聘图片
			delete_img() {
				uni.showModal({
					content: '确认删除头图？',
					success: (res) => {
						if (res.confirm) {
							let sub_data = {
								...this.sub_data
							}
							sub_data.profile_photo = ''
							this.sub_data = sub_data
							uni.setStorageSync('DRAFT0', sub_data)
						}
					}
				})
			},
			// 上传招聘图片
			upload_img(e) {
				commonFun.uploadFileApiOSS(res => {
					if (res.status) {
						let sub_data = {
							...this.sub_data
						}
						sub_data.profile_photo = res.data
						this.sub_data = sub_data
						uni.setStorageSync('DRAFT0', sub_data)
					}
				})
			},
			// 时间选择
			bindTimeChange(e) {
				const key = e.currentTarget.dataset.key
				const value = e.target.value
				let sub_data = {
					...this.sub_data
				}
				sub_data[key] = value
				this.sub_data = sub_data
				uni.setStorageSync('DRAFT0', sub_data)
			},
			// 打开窗口
			open_modal() {
				this.$refs.popup.open('top')
			},
			// 关闭窗口
			close_modal() {
				this.$refs.popup.close('top')
			},
			// 打开地图
			openAddress() {
				uni.chooseLocation({
					success: (res) => {
						let sub_data = {
							...this.sub_data,
						}
						sub_data['work_addr1'] = res.name
						sub_data['work_addr'] = res.address
						sub_data['work_addr_lng'] = res.longitude
						sub_data['work_addr_lat'] = res.latitude
						this.sub_data = sub_data
						uni.setStorageSync('DRAFT0', sub_data)
					},
					fail: (res) => {
						if (res.errMsg.indexOf('cancel') == -1) {
							uni.showModal({
								title: '打开地图失败',
								content: JSON.stringify(res)
							})
						}
					}
				});
			},
		}
	}
</script>

<style>
	.bold_tit {
		font-size: 30upx;
		color: #666666;
		font-weight: bold;
	}

	.item_date_picker {
		width: 280upx;
	}

	.choose_add4 {
		background-color: #ffffff;
		color: #2bcfb4;
		border: 4upx solid #2bcfb4;

	}

	.choose_add3 {
		width: 180upx !important;
	}

	.choose_add2 {
		background-color: #22a58f;
	}

	.instr {
		background-color: #fffaf6;
		padding: 20upx 0;
	}

	.instr view {
		color: #FE7632;
		font-size: 26upx;
	}

	.age_range {
		display: flex;
		align-items: center;
	}

	.item {
		border-bottom: 2upx solid #ececec;
		display: flex;
		align-items: center;
		width: 100%;
		padding: 30upx 0;
	}

	.item input.item_right {
		height: 70upx;
		font-size: 30upx !important;
		color: #000000;
	}

	.item textarea {
		font-size: 30upx;
		/* text-indent: 20upx; */
		height: 240upx;
		background-color: #fafafa;
		color: #000000;
	}

	.item_right {
		width: 70%;
		font-size: 28upx;
	}

	.item_left {
		width: 30%;
		color: #585858;
		font-size: 28upx !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.contain {
		background-color: #ffffff;
		width: 94%;
		padding: 0 3% 3%;
		border-radius: 15upx;
	}

	page {
		background-color: #f3f5f4;
	}
</style>