kly_uniapp/pages/merchant/releaseInfoUrgent.vue

<!-- 商家-发布/编辑招聘信息-今日零工 -->

<template>
	<view>
		<view class="contain">
			<view class="item">
				<view class="item_left">标题</view>
				<input type="text" @input="ipt" :data-key="'title'" :value="sub_data['title']" placeholder="请填写标题"
					class="item_right" />
			</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 class="item_left">需求人数</view>
				<input type="number" @input="ipt" :data-key="'need_total'" :value="sub_data['need_total']"
					placeholder="请填写需求人数" class="item_right" />
			</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="#f7942e" value="0" :checked="sub_data.gender_mode==0" />
							<text>不限</text>
						</label>
						<label style="margin-left: 30upx;">
							<radio color="#f7942e" value="1" :checked="sub_data.gender_mode==1" />
							<text>仅男</text>
						</label>
						<label style="margin-left: 30upx;">
							<radio color="#f7942e" 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="#f7942e" value="0" :checked="sub_data.age_mode==0" />
							<text>不限</text>
						</label>
						<label style="margin-left: 30upx;">
							<radio color="#f7942e" 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>
				<input type="number" @input="ipt" :data-key="'eve_feetotal'" :value="sub_data['eve_feetotal']"
					:placeholder="'请填写日金额'" class="item_right" />
			</view>
			<view class="instr">
				<view style="text-indent: 20upx;">平台会因供需情况收取相应的服务费再支付给应聘者</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>
			<text
				style="color: #56c6b0;background-color: #e4fffa;padding: 6upx 20upx;border-radius: 8upx;">请预留充足时间，以供应聘者选择</text>

			<view class="item">
				<view class="item_left">联系电话</view>
				<input type="text" @input="ipt" :data-key="'linker_phone'" :value="sub_data['linker_phone']"
					placeholder="请填写联系电话" class="item_right" />
			</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>

		<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
				},
				total_sal: '', //计算页面总金额
			}
		},
		onLoad(e) {
			// 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('DRAFT1')
				if (DRAFT && DRAFT.title) {
					uni.showModal({
						title: '是否使用草稿内容？',
						content: '草稿标题：' + DRAFT.title,
						success: (res) => {
							if (res.confirm) {
								DRAFT.id = ''
								this.sub_data = {
									...DRAFT,
								}
							} else {
								// 不使用草稿，则清空草稿
								uni.setStorageSync('DRAFT1', '')
							}
						}
					})
				}
			}
		},
		methods: {
			// 获取数据
			get_data(bizId) {
				console.log('发布招聘请求id',bizId)
				// return
				commonFun.requestUrl(this.url, {
					bizCatalog: 'RecruitEntity',
					handleMode: 'fetch',
					bizId
				}, res => {
					console.log('发布招聘获取招聘详情',res)
					if (res.status) {
						let sub_data = res.data.Result
						sub_data.eve_feetotal = sub_data.feetotal
						this.sub_data = sub_data
						console.log('编辑页面获取发布详情')
						console.log(this.sub_data)
					}
				})
			},
			// 提交数据
			sub_data_req() {
				this.close_modal()
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let sub_data = this.sub_data
				sub_data.feetotal = sub_data.eve_feetotal
				sub_data.urgent_level = 1
				sub_data.linker_name = '今日零工'
				sub_data.id = ''
				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,
				}
				sub_data.begin_datetime = commonFun.formatDate2(new Date())
				sub_data.finish_datetime = commonFun.formatDate2(new Date())
				console.log(this.sub_data)

				if (!sub_data.work_desc || !sub_data.title || !sub_data.need_total || !sub_data.eve_feetotal || !sub_data
					.linker_phone) {
					uni.showModal({
						content: '标题、详情、需求人数、金额/人、联系电话不允许为空',
						showCancel: false,
					});
					return
				}
				if (sub_data.work_addr == '') {
					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()
			},
			// 单选事件
			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('DRAFT1', sub_data)
			},
			// 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
				console.log(sub_data)
				uni.setStorageSync('DRAFT1', 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('DRAFT1', 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('DRAFT1', 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('DRAFT1', 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('DRAFT1', sub_data)
					},
					fail: (res) => {
						if (res.errMsg.indexOf('cancel') == -1) {
							uni.showModal({
								title: '打开地图失败',
								content: JSON.stringify(res)
							})
						}
					}
				});
			},
		}
	}
</script>

<style>
	.main_btn_m {
		background: #f7942e;
		color: white;
		line-height: 90upx;
		text-align: center;
		border-radius: 15upx;
	}
	.bold_tit {
		font-size: 30upx;
		color: #666666;
		font-weight: bold;
	}

	.item_date_picker {
		width: 280upx;
	}

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

	}

	.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: #ffffff;
	}
</style>