odd_job_applet/pages/supply/supplyform.vue

<template>
	<view>
		<view class="solids-bottom margin-bottom-sm">
			<view class="bg-white padding">
				<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 type="number" placeholder="请输入" data-field="mnumber" name="mnumber" :value="supplyinfo.mnumber" @input="setInput"></input>
					<view>人</view>
				</view>
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 现有女性</view>
					<input type="number" placeholder="请输入" data-field="wnumber" name="wnumber" :value="supplyinfo.wnumber" @input="setInput"></input>
					<view>人</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="supplyinfo.agegroup" @input="setInput"></input>
				</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="请选择期望工作地" data-field="descity" data-modalname="descityModal" name="descity" :value="supplyinfo.descity" @tap="showModal" disabled="true"></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="supplyinfo.candate" @change="bindDateChange">
						<view class="picker">{{supplyinfo.candate!='' ? supplyinfo.candate : "请选择可到岗日期"}}</view>
					</picker>
				</view>
				<view class="cu-form-group margin-top-sm">
					<view class="title">咨询电话</view>
					<input placeholder="请输入联系人电话" data-field="telephone" name="telephone" :value="supplyinfo.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="supplyinfo.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="editSupply">立即提交</button>
					<view class="padding"></view>
				</view>
			</view>
				
		</form>
		
		<view class="echo-formmain padding bg-white" v-if="stepsnum==1">
			<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/supply/wsupplylist?status=1">我发布的供人</navigator>
						<navigator class="cu-btn lg" open-type="redirect" url="/pages/supply/supplyform">继续发布</navigator>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal bottom-modal" :class="modalName=='descityModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="action text-green" @tap="hideModal">确定</view>
				</view>
				<view class="grid col-3 padding-sm">
					<view v-for="(item,index) in descitylist" class="padding-xs" :key="index">
						<button class="cu-btn orange block text-sm" style="padding: 0rpx !important;" :class="supplyinfo.descity.indexOf(item) > -1?'bg-orange':'line-orange'" :data-value="item" @tap="setDescity"> {{item}}</button>
					</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,
				supplyinfo: {
					id: 0,
					workerid: 0,
					mnumber: "",
					wnumber: "",
					agegroup: "",
					
					province: "",
					city: "",
					district: "",
					descity: "",
					
					candate: "",
					telephone: "",
					remark: ""
				},
				region: "请选择人员所在地",
				
				modalName: null,
				descitylist: ["全国", "北京市", "天津市", "河北省", "山西省", "内蒙古自治区", "辽宁省", "吉林省", "黑龙江省", "上海市", "江苏省", "浙江省", "安徽省", "福建省", "江西省", "山东省", "河南省", "湖北省", "湖南省", "广东省", "广西壮族自治区", "海南省", "重庆市", "四川省", "贵州省", "云南省", "西藏自治区", "陕西省", "甘肃省", "青海省", "宁夏回族自治区", "新疆维吾尔自治区", "台湾省", "香港特别行政区", "澳门特别行政区"]
			}
		},
		onLoad: function(option) {
			_this = this;
			var supplyid = option.supplyid || 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: "wsupply/getsupply",
				data: {
					supplyid: supplyid,
					userid: _this.userinfo.id,
					workerid: _this.workerinfo.id
				}
			}).then((data) => {
				_this.catelist = data.catelist;
				if (data.supply != "NULL") {
					_this.supplyinfo = data.supply;
					_this.region = _this.supplyinfo.province + " " + _this.supplyinfo.city + " " + _this.supplyinfo.district;
				}
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		methods: {
			// 填写字段
			setInput: function(e) {
				var field = e.currentTarget.dataset.field;
				_this.supplyinfo[field] = e.detail.value;
			},
			bindDateChange: function(e) {
				_this.supplyinfo.candate = e.target.value;
			},
			regionChange: function(data) {
				console.log("data: " + JSON.stringify(data));
				_this.supplyinfo.province = data.data[0];
				_this.supplyinfo.city = data.data[1];
				_this.supplyinfo.district = data.data[2];
				_this.region = data.data.join(' ');
			},
			
			showModal: function(e) {
				_this.modalName = e.currentTarget.dataset.modalname;
			},
			hideModal: function(e) {
				_this.modalName = null
			},
			setDescity: function(e) {
				var value = e.currentTarget.dataset.value;
				if(_this.supplyinfo.descity.indexOf(value) > -1){
					_this.supplyinfo.descity = _this.supplyinfo.descity.replace(value+",","");
				    _this.supplyinfo.descity = _this.supplyinfo.descity.replace(value,"");
				}else{
					_this.supplyinfo.descity = _this.supplyinfo.descity + "," + value;
				}
				if (value=="全国"){
					_this.supplyinfo.descity = "全国";
				}else{
					_this.supplyinfo.descity = _this.supplyinfo.descity.replace("全国,","");
					_this.supplyinfo.descity = _this.supplyinfo.descity.replace("全国","");
				}
				
			},

			// 提交信息
			editSupply: function() {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				_this.$req.ajax({
					path: "wsupply/editsupply",
					title: "正在提交信息",
					data: {
						userid: _this.userinfo.id,
						id: _this.supplyinfo.id,
						workerid: _this.workerinfo.id,
						wnumber: _this.supplyinfo.wnumber,
						agegroup: _this.supplyinfo.agegroup,
						province: _this.supplyinfo.province,
						city: _this.supplyinfo.city,
						district: _this.supplyinfo.district,
						descity: _this.supplyinfo.descity,
						agegroup: _this.supplyinfo.agegroup,
						candate: _this.supplyinfo.candate,
						telephone: _this.supplyinfo.telephone,
						remark: _this.supplyinfo.remark
					}
				}).then((data) => {
					_this.stepsNum(1);
					_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;
	}
</style>