odd_job_applet/pages/worker/outjobform.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">
				<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="form.title" @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="company_name" name="company_name" :value="form.company_name" @input="setInput"></input>
				</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="num" name="num" :value="form.num" @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>
					<picker mode="region" @change="RegionChange">
						<view class="picker">
							{{form.province}}，{{form.city}}，{{form.district}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title"> <text class="text-red text-bold padding-right-xs">*</text> 地址</view>
					<input placeholder="请输入" data-field="address" name="address" :value="form.address" @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="例如：18岁到50岁" data-field="agegroup" name="agegroup" :value="form.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="telephone" name="telephone" :value="form.telephone" @input="setInput"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">招聘标签</view>
					<input placeholder="空格分隔。例如：包吃住 包住宿" data-field="tags" name="tags" :value="form.tags" @input="setInput"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">工资</view>
					<input placeholder="5000/月" data-field="salary" name="salary" :value="form.salary" @input="setInput"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">岗位要求</view>
					<view class="textareabox">
						<textarea maxlength="-1" placeholder-class="placeholder" placeholder="请输入..." data-field="requirement" name="requirement" :value="form.requirement"
					 @input="setInput"></textarea>
					 </view>
				</view>
				<view class="cu-form-group">
					<view class="title">企业简介</view>
					<view class="textareabox">
						<textarea maxlength="-1" placeholder-class="placeholder" placeholder="请输入..." data-field="comdetails" name="comdetails" :value="form.comdetails"
					 @input="setInput"></textarea>
					 </view>
				</view>
				<view class="cu-form-group">
					<view class="title">补充说明</view>
					<view class="textareabox">
						<textarea maxlength="-1" placeholder-class="placeholder" placeholder="请输入..." data-field="remark" name="remark" :value="form.remark"
					 @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 form.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="form.picall.length <= 12">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="padding flex flex-direction bg-white">
					<button class="cu-btn bg-blue margin-tb-sm lg" @tap="getMarket">获取市场行情</button>
				</view>
				<view class="cu-form-group">
					<view class="title" style="min-width: calc(10em + 15px);"> <text class="text-red text-bold padding-right-xs">*</text> 可否议价</view>
					<radio-group class="block" @change="isBargainChange">
					<view class="flex justify-start">
						<label class="flex align-center"> <radio class='red' :class="form.is_bargain==1?'checked':''" :checked="form.is_bargain==1?true:false" value="1"></radio> <text> 是</text></label>
						<label class="flex align-center"> <radio class='red' :class="form.is_bargain==2?'checked':''" :checked="form.is_bargain==2?true:false" value="2"></radio> <text> 否</text></label>
					</view>
					</radio-group>
				</view>
				<view class="cu-form-group">
					<view class="title">行情内容</view>
					<view class="textareabox">
						<textarea maxlength="-1" placeholder-class="placeholder" placeholder="例如：一次性交通补贴：1000元；入职前3个月，每个月600元。" data-field="market_content" name="market_content" :value="form.market_content"
					 @input="setInput"></textarea>
					 </view>
				</view>
				<view class="padding flex flex-direction bg-white">
					<button class="cu-btn bg-themeBtn margin-tb-sm lg" @tap="editRecruit">立即提交</button>
					<view class="padding"></view>
				</view>
			</view>
				
		</form>
		
		<view class="cu-modal bottom-modal" :class="modalName=='marketModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">关闭</view>
				</view>
				<view class="padding-xl">
					<block v-for="(item,index) in market" :key="index">
						<view class="cu-card dynamic no-card solid-bottom echo-comjobs-item margin-tb-sm">
							<view class="cu-item shadow padding-top-sm padding-bottom">
								<view class="padding-lr padding-bottom-xs flex justify-between align-left">
									<view class="basis-xl text-bold text-lg text-cut">
										{{item.name}}
										<text class="text-red margin-left">{{item.mobile}}</text>
									</view>
									<view class="basis-xs text-cut text-right text-gray text-sm">{{item.is_bargain == 1 ? '可议价' : '不可议价'}}</view>
								</view>
								<view class="padding-lr flex justify-between align-bottom">
									<view><text class="text-red text-bold">{{item.content}}</text></view>
								</view>
								
								<view class="grid solids-top text-center col-2">
									<view @tap="selectMarket" :data-index="index" class="padding-top"><text class="cuIcon-write padding-right-xs"></text> 选择 </view>
									<view @tap="callMobile" :data-mobile="item.mobile" class="text-red padding-top"><text class="cuIcon-pulldown padding-right-xs"></text> 拔打电话 </view>
								</view>
							</view>
						</view>
					</block>
				</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,
				
				userinfo: false,
				workerinfo: false,
				form: {
					id: 0,
					worker_id: 0,
					title: "",
					company_name: "",
					num: 1,
					
					province: "福建省",
					city: "泉州市",
					district: "晋江市",
					address: "",
					
					agegroup: "",
					tags: "",
					requirement: "",
					comdetails: "",
					picall: [],
					salary: "",
					telephone: "",
					remark: "",
					priority: "",
					market_content: "",
					is_bargain: 1,
				},
				
				modalName: null,
				
				market: [],
			}
		},
		onLoad: function(option) {
			_this = this;
			_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;
			}
			
			var id = option.id || 0;
			if (id > 0) {
				_this.$req.ajax({
					path: "woutjobs/getrecruit",
					data: {
						id: id
					}
				}).then((data) => {
					_this.form = data;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			}
		},
		methods: {
			// 填写字段
			setInput: function(e) {
				var field = e.currentTarget.dataset.field;
				_this.form[field] = e.detail.value;
			},
			bindDateChange: function(e) {
				_this.form.candate = e.target.value;
			},
			
			showModal: function(e) {
				_this.modalName = e.currentTarget.dataset.modalname;
			},
			hideModal: function(e) {
				_this.modalName = null
			},
			
			RegionChange(e) {
				this.form.province = e.detail.value[0];
				this.form.city = e.detail.value[1];
				this.form.district = e.detail.value[2];
			},
			isBargainChange(e) {
				_this.form.is_bargain = e.detail.value;
			},
			getMarket() {
				_this.$req.ajax({
					path: "woutjobs/getmarket",
					data: {}
				}).then((data) => {
					_this.market = data.list;
					_this.modalName = 'marketModal';
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			callMobile(e) {
				let mobile = e.currentTarget.dataset.mobile;
				uni.makePhoneCall({phoneNumber: mobile});
			},
			selectMarket(e) {
				let index = e.currentTarget.dataset.index;
				let market = this.market[index];
				this.form.is_bargain = market.is_bargain;
				this.form.market_content = market.content;
				this.modalName = null
			},

			// 提交信息
			editRecruit: function() {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				_this.form.worker_id = _this.workerinfo.id;
				_this.$req.ajax({
					path: "woutjobs/editrecruit",
					title: "正在提交信息",
					data: _this.form,
				}).then((data) => {
					_this.isRotate = false;
					uni.navigateBack();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
			// 图片上传
			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.form.picall.push(data.data.src);
						}).catch((err) => {
							uni.showModal({
								title: '信息提示',
								content: err,
								showCancel: false
							});
						});
					}
				});
			},
		}
	}
</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>