odd_job_applet/pages/demand/demandform.vue

<template>
	<view>
		<view class="solids-bottom margin-bottom-sm">
			<view class="bg-white padding">
				<view class="cu-steps">
					<view class="cu-item" :class="0>stepsnum?'':'text-red'">
						<text class="num" data-index="1"></text> 基本信息
					</view>
					<view class="cu-item" :class="1>stepsnum?'':'text-red'">
						<text class="num" data-index="2"></text> 详细信息
					</view>
					<view class="cu-item" :class="2>stepsnum?'':'text-red'">
						<text class="num" data-index="3"></text> 提交成功
					</view>
				</view>
				<view class="text-gray text-sm padding-top">
					请填写真是有效的信息，如有发现诈骗、虚假信息，我们会协助公安与相关法律部门进行调查。
				</view>
			</view>
		</view>

		<form>
			<view class="echo-formmain" v-if="stepsnum==0">
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 订单标题</view>
					<input placeholder="比如：郑州富士康招聘普工" data-field="title" name="title" :value="demandinfo.title" @input="setInput"></input>
				</view>
				<view class="cu-form-group margin-top-sm">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 招聘人数</view>
					<input placeholder="请输入招聘人数" data-field="num" name="num" :value="demandinfo.num" @input="setInput"></input>
				</view>
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 岗位类型</view>
					<picker mode="selector" range-key="title" name="cateid" @change="cateidChange" :value="cateidindex" :range="catelist">
						<view class="picker">{{cateidindex>-1 ? catelist[cateidindex].title : "请选择岗位类型"}}</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 类型</view>
					<radio-group class="block" @change="typeChange">
					<view class="flex justify-start">
						<label class="flex align-center"> <radio class='red' :class="demandinfo.type==1?'checked':''" :checked="demandinfo.type==1?true:false" value="1"></radio> <text> 代招</text></label>
						<label class="flex align-center"> <radio class='red' :class="demandinfo.type==2?'checked':''" :checked="demandinfo.type==2?true:false" value="2"></radio> <text> 劳务派遣</text></label>
					</view>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 工作地点</view>
					<view style="flex: 1; font-size: 30rpx; color: #AAAAAA; line-height: 100rpx;">
						<pickerAddress @change="regionChange">{{region}}</pickerAddress>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 招工年龄</view>
					<input placeholder="比如：16-35岁" data-field="agegroup" name="agegroup" :value="demandinfo.agegroup" @input="setInput"></input>
				</view>
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 招聘标签</view>
					<input placeholder="比如：包食宿 高工资" data-field="tags" name="tags" :value="demandinfo.tags" @input="setInput"></input>
				</view>
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 截止日期</view>
					<picker mode="date" :value="demandinfo.enddate" @change="bindDateChange">
						<view class="picker">{{demandinfo.enddate!='' ? demandinfo.enddate : "请选择本次招聘截止日期"}}</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">任职要求</view>
					<view class="textareabox">
						<textarea maxlength="-1" placeholder="请输入..." data-field="requirement" name="requirement" :value="demandinfo.requirement"
							@input="setInput"></textarea>
					</view>
				</view>
				<view class="cu-form-group align-start">
					<view class="title">企业简介</view>
					<view class="textareabox">
						<textarea maxlength="-1" placeholder="请输入..." data-field="comdetails" name="comdetails" :value="demandinfo.comdetails"
							@input="setInput"></textarea>
					</view>
				</view>
				<view class="padding-tb padding-lr-xs bg-white solids-top">
					<view class="title padding-bottom-sm text-lg">环境照片</view>
					<view class="grid col-4 grid-square flex-sub">
						<block v-for="(picitem,picindex) in demandinfo.picall" :key="picindex">
							<view class="bg-img" @tap="viewImage" :data-url="picitem">
								<image :src="picitem" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="delImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
						</block>
						<view class="solids" @tap="chooseImage" v-if="demandinfo.picall.length <= 12">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				
				<view class="padding-tb padding-lr-xs bg-white solids-top">
					<view class="title padding-bottom-sm text-lg">上传视频</view>
					<view class="grid col-4 grid-square flex-sub" v-if="demandinfo.video==''">
						<view class="solids" @click="chooseVideo">
							<text class='cuIcon-record'></text>
						</view> 
					</view>
					
					<view class="grid col-1 grid-square flex-sub" v-if="demandinfo.video!=''">
						<view class="bg-img">
							<video v-if="video!==null" id="myVideo" class="myVideo" :src="demandinfo.video" @error="videoErrorCallback" enable-danmu controls></video>
							<view class="cu-tag bg-red" @tap.stop="delVideo">
								<text class='cuIcon-close'></text>
							</view>
						</view>
					</view>
				</view>
				
				<view class="padding flex flex-direction bg-white">
					<button class="cu-btn bg-themeBtn margin-tb-sm lg" @tap="stepsNum(1)">下一步</button>
					<view class="padding"></view>
				</view>
			</view>
				
			<view class="echo-formmain" v-if="stepsnum==1">
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 薪资类型</view>
					<radio-group class="block" @change="wtypeChange">
					<view class="flex justify-start">
						<label class="flex align-center"> <radio class='red' :class="demandinfo.wtype==1?'checked':''" :checked="demandinfo.wtype==1?true:false" value="1"></radio> <text> 按月</text></label>
						<label class="flex align-center"> <radio class='red' :class="demandinfo.wtype==2?'checked':''" :checked="demandinfo.wtype==2?true:false" value="2"></radio> <text> 按时</text></label>
						<label class="flex align-center"> <radio class='red' :class="demandinfo.wtype==3?'checked':''" :checked="demandinfo.wtype==3?true:false" value="3"></radio> <text> 按件</text></label>
						<label class="flex align-center"> <radio class='red' :class="demandinfo.wtype==4?'checked':''" :checked="demandinfo.wtype==4?true:false" value="4"></radio> <text> 按项目</text></label>
						<label class="flex align-center"> <radio class='red' :class="demandinfo.wtype==5?'checked':''" :checked="demandinfo.wtype==5?true:false" value="5"></radio> <text> 其他</text></label>
					</view>
					</radio-group>
				</view>
				<view class="cu-form-group" v-if="demandinfo.wtype!=4">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> {{demandinfo.wtype==1?'基本':demandinfo.wtype==2?'每日':'每时'}}工资</view>
					<input placeholder="请输入" data-field="bwagall" name="bwagall" :value="demandinfo.bwagall" @input="setInput"></input>
					<view class="unit">元</view>
				</view>
				<view class="cu-form-group" v-if="demandinfo.wtype==1">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 综合月薪</view>
					<input placeholder="请输入" data-field="zwagall" name="zwagall" :value="demandinfo.zwagall" @input="setInput"></input>
					<view class="unit">元</view>
				</view>
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 返利类型</view>
					<radio-group class="block" @change="ftypeChange">
					<view class="flex justify-start">
						<label class="flex align-center"> <radio class='red' :class="demandinfo.ftype==1?'checked':''" :checked="demandinfo.ftype==1?true:false" value="1"></radio> <text> 一次性</text></label>
						<label class="flex align-center"> <radio class='red' :class="demandinfo.ftype==2?'checked':''" :checked="demandinfo.ftype==2?true:false" value="2"></radio> <text> 小时工</text></label>
						<label class="flex align-center"> <radio class='red' :class="demandinfo.ftype==3?'checked':''" :checked="demandinfo.ftype==3?true:false" value="3"></radio> <text> 管理费</text></label>
						<label class="flex align-center"> <radio class='red' :class="demandinfo.ftype==4?'checked':''" :checked="demandinfo.ftype==4?true:false" value="4"></radio> <text> 其他</text></label>
					</view>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 返费政策</view>
					<input placeholder="比如：入职满一个月返2000元" data-field="fwagall" name="fwagall" :value="demandinfo.fwagall" @input="setInput"></input>
				</view>
				<view class="cu-form-group margin-top-sm">
					<view class="title">手机号码</view>
					<input placeholder="请输入联系人手机号码" data-field="telephone" name="telephone" :value="demandinfo.telephone" @input="setInput"></input>
				</view>
				<view class="cu-form-group align-start">
					<view class="title">补充说明</view>
					<view class="textareabox">
					<textarea maxlength="-1" placeholder="请输入..." data-field="remark" name="remark" :value="demandinfo.remark"
					 @input="setInput"></textarea>
					 </view>
				</view>
				<view class="padding flex flex-direction bg-white">
					<button class="cu-btn bg-themeBtn margin-tb-sm lg" @tap="editDemand">立即提交</button>
					<button class="cu-btn lg" @tap="stepsNum(0)">返回上一步</button>
					<view class="padding"></view>
				</view>
			</view>
		</form>
		
		<view class="echo-formmain padding bg-white" v-if="stepsnum==2">
			<view class="padding">
				<view class="flex-sub text-center padding-tb">
					<view class="solid-bottom text-xsl padding">
						<text class="cuIcon-emoji text-green"></text>
					</view>
					<view class="text-xl padding-tb">
						<text class="text-black text-bold">招聘订单信息提交成功，请耐心等待审核！</text>
					</view>
					<view class="flex flex-direction padding-tb">
						<navigator class="cu-btn bg-themeBtn margin-tb-sm lg" open-type="redirect" url="/pages/demand/wdemandlist?status=1">我发布的订单</navigator>
						<navigator class="cu-btn lg" open-type="redirect" url="/pages/demand/demandform">继续发布</navigator>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var _this;
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import pickerAddress from "@/components/pickerAddress/pickerAddress.vue";
	export default {
		components: {
			avatar,
			pickerAddress
		},
		data() {
			return {
				isRotate: false,
				stepsnum: 0,
				
				userinfo: false,
				workerinfo: false,
				demandinfo: {
					id: 0,
					workerid: 0,
					type: 1,
					title: "",
					num: 1,
					cateid: 0,
					province: "",
					city: "",
					district: "",
					agegroup: "",
					tags: "",
					enddate: "",
					requirement: "",
					picall: [],
					video: "",
					comdetails: "",
					wtype: 1,
					bwagall: "",
					zwagall: "",
					ftype: 1,
					fwagall: "",
					telephone: "",
					remark: ""
				},
				
				cateidindex: -1,
				region: "请选择工作地点",
				
				catelist: []
			}
		},
		onLoad: function(option) {
			_this = this;
			var demandid = option.demandid || 0;
			_this.userinfo = _this.checkLogin("/pages/my/my");
			_this.workerinfo = uni.getStorageSync('workerinfo') || false;
			if (_this.userinfo === false || _this.workerinfo === false) {
				uni.reLaunch({
					url: "/pages/my/my"
				});
				return false;
			}
			_this.$req.ajax({
				path: "wdemand/getdemand",
				data: {
					demandid: demandid,
					workerid: _this.workerinfo.id
				}
			}).then((data) => {
				_this.catelist = data.catelist;
				if (data.demand != "NULL") {
					_this.demandinfo = data.demand;
					_this.region = _this.demandinfo.province + " " + _this.demandinfo.city + " " + _this.demandinfo.district;
					if ( _this.demandinfo.fwagall=="" ){
						_this.isfwagall = 2;
					}
					for( var i=0,len=_this.catelist.length; i<len; i++ ){
						if(_this.demandinfo.cateid == _this.catelist[i].id){
							_this.cateidindex = i;
						}
					}
				}
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		methods: {
			// 视频上传
			chooseVideo: function(e) {
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (res) => {
						_this.$req.ajaxFile({
							path: "attachment/tplfieldvideo",
							title: '正在上传',
							filePath: res.tempFilePath,
							fileName: 'file',
						}).then((vfiledata) => {
							var vdata = JSON.parse(vfiledata.data);
							_this.demandinfo.video = vdata.data.src;
						}).catch((err) => {
							uni.showModal({
								title: '信息提示',
								content: err,
								showCancel: false
							});
						});
					}
				});
			},
			
			delVideo: function(e) {
				uni.showModal({
					title: '信息提示',
					content: "删除后不可恢复，确认要删除吗？",
					showCancel: true,
					success: function (res) {
						if (res.confirm) {
							_this.demandinfo.video = "";
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			// 图片上传
			chooseImage: function(e) {
				uni.chooseImage({
					count: 12,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						_this.$req.ajaxFile({
							path: "attachment/tplfieldimage",
							title: '正在上传',
							filePath: res.tempFilePaths[0],
							fileName: 'file',
						}).then((filedata) => {
							var data = JSON.parse(filedata.data);
							_this.demandinfo.picall.push(data.data.src);
							
							console.log("_this.demandinfo.picall: " + JSON.stringify(_this.demandinfo.picall));
						}).catch((err) => {
							uni.showModal({
								title: '信息提示',
								content: err,
								showCancel: false
							});
						});
					}
				});
			},
			viewImage: function(e) {
				uni.previewImage({
					urls: _this.demandinfo.picall,
					current: e.currentTarget.dataset.url
				});
			},
			delImg: function(e) {
				_this.demandinfo.picall.splice(e.currentTarget.dataset.index, 1);
			},
			
			// 填写字段
			setInput: function(e) {
				var field = e.currentTarget.dataset.field;
				_this.demandinfo[field] = e.detail.value;
			},
			bindDateChange: function(e) {
				_this.demandinfo.enddate = e.target.value;
			},
			cateidChange: function(e) {
				_this.cateidindex = e.detail.value;
				_this.demandinfo.cateid = _this.catelist[_this.cateidindex].id;
			},
			regionChange: function(data) {
				console.log("data: " + JSON.stringify(data));
				_this.demandinfo.province = data.data[0];
				_this.demandinfo.city = data.data[1];
				_this.demandinfo.district = data.data[2];
				_this.region = data.data.join(' ');
			},
			typeChange: function(e) {
				_this.demandinfo.type = e.detail.value;
			},
			wtypeChange: function(e) {
				_this.demandinfo.wtype = e.detail.value;
			},
			ftypeChange: function(e) {
				_this.demandinfo.ftype = e.detail.value;
			},
	
			// 提交信息
			editDemand: function() {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "wdemand/editdemand",
					title: "正在提交信息",
					data: {
						userid: _this.userinfo.id,
						id: _this.demandinfo.id,
						workerid: _this.workerinfo.id,
						title: _this.demandinfo.title,
						num: _this.demandinfo.num,
						cateid: _this.demandinfo.cateid,
						province: _this.demandinfo.province,
						city: _this.demandinfo.city,
						district: _this.demandinfo.district,
						agegroup: _this.demandinfo.agegroup,
						tags: _this.demandinfo.tags,
						enddate: _this.demandinfo.enddate,
						requirement: _this.demandinfo.requirement,
						comdetails: _this.demandinfo.comdetails,
						picall: _this.demandinfo.picall.join(","),
						video: _this.demandinfo.video,
						wtype: _this.demandinfo.wtype,
						bwagall: _this.demandinfo.bwagall,
						zwagall: _this.demandinfo.zwagall,
						ftype: _this.demandinfo.ftype,
						fwagall: _this.demandinfo.fwagall,
						telephone: _this.demandinfo.telephone,
						remark: _this.demandinfo.remark
					}
				}).then((data) => {
					_this.stepsNum(2);
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
			
			stepsNum: function(num) {
				_this.stepsnum = num;
			}
		}
	}
</script>

<style>
	.echo-formmain {
		min-height: calc(100vh - 290rpx);
		background-color: #FFFFFF;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	
	.cu-form-group{ display: flex; flex-wrap: wrap; padding: 40rpx 10rpx 0rpx 10rpx; }
	.cu-form-group .title{ width: 100%; }
	.cu-form-group>input{ display: block; width: 670rpx; height: 100rpx; color: #AAAAAA; }
	
	.cu-form-group>radio-group{ width: 670rpx; height: 100rpx; line-height: 100rpx; color: #AAAAAA; text-align: left; }
	
	.cu-form-group .textareabox{ width: 670rpx; }
	.cu-form-group .textareabox textarea{ width: 670rpx; margin-top: 20rpx !important; margin-bottom: 0rpx; }
	
	.cu-form-group .placeholder{ color: #AAAAAA; }
	
	.cu-form-group picker .picker{ text-align: left; color: #AAAAAA; }
		
	.fieldpic {
		width: 150rpx;
		height: 150rpx;
	}

	.fieldpictil {
		width: 230rpx;
		text-align: center;
	}
	
	.myVideo{ width: 670rpx; height: 670rpx; }
</style>