odd_job_applet/pages/broker/brokerform.vue

<template>
	<view>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">姓名</view>
				<input placeholder="请输入姓名" data-val="title" @input="bindInput"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input placeholder="请输入手机号" data-val="mobile" @input="bindInput"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">代理门店</view>
				<picker mode="selector" @change="agentChange" :value="agentIndex" :range="agentArray" range-key="title">
					<view class="picker">
						{{agentArray[agentIndex].title}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">镇街</view>
				<picker mode="multiSelector" @change="TownChange" @columnchange="TownColumnChange" :value="townIndex" :range="townArray">
					<view class="picker">
						{{townArray[0][townIndex[0]]}}，{{townArray[1][townIndex[1]]}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">区域</view>
				<input placeholder="请输入区域" data-val="region" @input="bindInput"></input>
			</view>
			<view class="padding flex flex-direction bg-white">
				<button class="cu-btn bg-blue margin-tb-sm lg" @tap="submit">立即提交</button>
			</view>
			<view class="bg-white padding-lr padding-bottom">申请经济人后等待后台审核</view>
		</form>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				isRotate: false,
				userinfo: {},
				forminfo: {
					title: '',
					mobile: '',
					region: '',
				},
				agentArray: [],
				agentIndex: 0,
				townArray: [
					[],
					[],
				],
				townIndex: [0,0],
				village: [],
			};
		},
		onLoad: function(){ 
			_this = this;
			_this.userinfo = _this.checkLogin("/pages/my/myinfo");
			//公司
			_this.$req.ajax({
				path: "index/getAgent",
				data: {}
			}).then((data) => {
				_this.agentArray = data;
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
			//镇街
			_this.$req.ajax({
				path: "index/getTown",
				data: {}
			}).then((data) => {
				_this.townArray = [data.town,data.village[0]];
				_this.village = data.village
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		methods: {
			bindInput(e) {
				var dataval = e.currentTarget.dataset.val;
				_this.forminfo[dataval] = e.detail.value;
			},
			agentChange(e) {
				this.agentIndex = e.detail.value
			},
			TownChange(e) {
				this.townIndex = e.detail.value
			},
			TownColumnChange(e) {
				let townIndex = _this.townIndex;
				//公司变更
				if (e.detail.column == 0) {
					_this.townArray[1] = _this.village[e.detail.value];
					_this.townIndex = [e.detail.value,0];
					_this.$forceUpdate();
				}
				
				//街道变更
				if (e.detail.column == 1) {
					townIndex[1] = e.detail.value;
					_this.townIndex = townIndex;
					_this.$forceUpdate();
				}
			},
			RegionChange(e) {
				this.region = e.detail.value
			},
			submit() {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;
				
				let data = _this.forminfo;
				let validate = {"title":"姓名","mobile":"手机号","region":"区域"};
				for (var i in validate) {
					if (data[i] == "") {
						uni.showModal({
							title: '信息提示',
							content: validate[i]+"不能为空",
							showCancel: false
						});
						_this.isRotate = false;
						return false;
					}
				}
				
				data.userid = _this.userinfo.id;
				data.workerid = _this.agentArray[_this.agentIndex].workerid;
				data.agentid = _this.agentArray[_this.agentIndex].id;
				data.town = _this.townArray[0][_this.townIndex[0]];
				data.village = _this.townArray[1][_this.townIndex[1]];
				
				_this.$req.ajax({
					path: "broker/apply",
					data: data
				}).then((data) => {
					uni.showModal({
						title: '信息提示',
						content: '提交成功，等待管理员审核',
						showCancel: false,
						success: function() {
							uni.reLaunch({
							    url: '/pages/index/index'
							});
						},
					});
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>