odd_job_applet/pages/broker/brokerform.vue

<template>
	<view>
		<view class="header" :style="'background-image:url('+$getImageUrl('static/images/applet/bg/broker.png')+');'">
			<image class="header-icon" :src="$getImageUrl('static/images/applet/index/topApplyIcon.png')"></image> 
		</view>
		
		<view class="broKerForm">
			<view class="broKerForm-item">
				<view class="item-title">姓名</view>
				<view class="item-area">
					<input class="item-area-input" placeholder="请输入姓名" data-val="title" @input="bindInput" placeholder-style="color: #979797;"></input>
				</view>
			</view>
			<view class="broKerForm-item">
				<view class="item-title">手机号</view>
				<view class="item-area">
					<input class="item-area-input" placeholder="请输入手机号" data-val="mobile" @input="bindInput" placeholder-style="color: #979797;"></input>
				</view>
			</view>
			<view class="broKerForm-item">
				<view class="item-title">代理门店</view>
				<view class="item-area">
					<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray" range-key="title">
						<view class="picker">
							{{multiArray[0][multiIndex[0]].title}}，{{multiArray[1][multiIndex[1]].title}}
						</view>
					</picker>
					<u-icon name="arrow-right" color="#747474" size="15" @click="MultiColumnChange"></u-icon>
				</view>
			</view>
			<view class="broKerForm-item">
				<view class="item-title">镇/街道</view>
				<view class="item-area">
					<picker mode="multiSelector" @change="TownChange" @columnchange="TownColumnChange" :value="townIndex" :range="townArray">
						<view class="picker">
							{{townArray[0][townIndex[0]]}}，{{townArray[1][townIndex[1]]}}
						</view>
					</picker>
					<u-icon name="arrow-right" color="#747474" size="15"></u-icon>
				</view>
			</view>
			<view class="broKerForm-item">
				<view class="item-title">区域</view>
				<view class="item-area">
					<input class="item-area-input" placeholder="请输入区域" data-val="region" @input="bindInput" placeholder-style="color: #979797;"></input>
				</view>
			</view>
		</view>
		
		<view class="bottomArea"></view>
		<view class="bottomButton" @tap="submit">立即提交</view>
		
		
		<form v-if="false">
			<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="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :value="multiIndex" :range="multiArray" range-key="title">
					<view class="picker">
						{{multiArray[0][multiIndex[0]].title}}，{{multiArray[1][multiIndex[1]].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>
		</form>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				isRotate: false,
				userinfo: {},
				forminfo: {
					title: '',
					mobile: '',
					region: '',
				},
				multiArray: [
					[],
					[],
				],
				multiIndex: [0, 0],
				townArray: [
					[],
					[],
				],
				townIndex: [0,0],
				village: [],
			};
		},
		onLoad: function(){ 
			_this = this;
			_this.userinfo = _this.checkLogin("/pages/my/myinfo");
			//公司
			_this.$req.ajax({
				path: "index/getWorker",
				data: {}
			}).then((data) => {
				_this.multiArray = 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;
			},
			MultiChange(e) {
				this.multiIndex = e.detail.value
			},
			TownChange(e) {
				this.townIndex = e.detail.value
			},
			MultiColumnChange(e) {
				let multi = _this.multiIndex;
				//公司变更
				if (e.detail.column == 0) {
					let workerid = _this.multiArray[0][e.detail.value].id;
					_this.$req.ajax({
						path: "index/getAgentByWorker",
						data: {workerid:workerid}
					}).then((data) => {
						let multiArray = _this.multiArray;
						multiArray[1] = data;
						_this.multiArray = multiArray;
						multi = [e.detail.value,0];
						_this.multiIndex = multi;
						_this.$forceUpdate();
					}).catch((err) => {
						uni.showModal({
							title: '信息提示',
							content: err,
							showCancel: false
						});
					});
				}
				
				//门店变更
				if (e.detail.column == 1) {
					multi[1] = e.detail.value;
					_this.multiIndex = multi;
					_this.$forceUpdate();
				}
			},
			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;
				console.log(data,22);
				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.multiArray[0][_this.multiIndex[0]].id;
				data.agentid = _this.multiArray[1][_this.multiIndex[1]].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 lang="scss">
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	
	page {
		background-color: #FFFFFF
	}
	
	.header {
		width: 100%;
		height: 266rpx;
		padding-left: 46rpx;
		background: linear-gradient(270deg, #484353 0%, #6F6F6F 100%);
		opacity: 1;
		display: flex;
		align-items: center;
		background-size: cover;
		background-position: center;
		
		.header-icon {
			width: 97rpx;
			height: 97rpx;
		}
	}
	
	.broKerForm {
		padding: 40rpx 70rpx;
		
		.broKerForm-item {
			margin-bottom: 35rpx;
			
			.item-area {
				margin-top: 15rpx;
				padding: 15rpx 36rpx;
				width: 100%;
				// height: 66rpx;
				background: #F7F7F7;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: #979797;
				line-height: 66rpx;
				
				.item-area-input {
					width: 100%;
					display: flex;
					align-items: center;
				}
				
				.picker {
					// width: 97%;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
	
	.bottomArea {
		height: 120rpx;
	}
	
	.bottomButton {
		position: fixed;
		bottom: 30rpx;
		z-index: 100;
		margin: 0 28rpx;
		width: 696rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #CA151C;
		font-size: 33rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 10rpx;
	}
</style>