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="selector" @change="agentChange" :value="agentIndex" :range="agentArray"
						range-key="title">
						<view class="picker">
							{{agentArray[agentIndex].title}}
						</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">
					<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 class="broKerForm-item">
				<view class="item-title">工作地点</view>
				<view class="item-area-column" style="background-color: #FFFFFF;">
					<view class="item-area-column-input">
						<input class="item-area-input" placeholder="详细地址" disabled :value="address"></input>
						<u-icon name="map-fill" color="#8e99a2" size="28" @tap="gpsmap()"></u-icon> 
					</view>
					<!-- <button class="cu-btn bg-blue margin-tb-sm lg" style="width: 100%;" @tap="gpsmap()">地图选位置</button> -->
				</view>
			</view>
		</view>

		<view class="bottomEmpty"></view>

		<view class="bottomArea">
			<view class="bottomButton" @tap="submit">立即提交</view>
		</view>


		<form v-if="false">
			<view class="cu-form-group margin-top">
				<view class="title"><text class="text-red text-bold padding-right-xs">*</text>姓名</view>
				<input placeholder="请输入姓名" data-val="title" @input="bindInput"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red text-bold padding-right-xs">*</text>手机号</view>
				<input placeholder="请输入手机号" data-val="mobile" @input="bindInput"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red text-bold padding-right-xs">*</text>代理门店</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"><text class="text-red text-bold padding-right-xs">*</text>镇街</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"><text class="text-red text-bold padding-right-xs">*</text>区域</view>
				<input placeholder="请输入区域" data-val="region" @input="bindInput"></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;">
					<input placeholder="详细地址" disabled :value="address" v-if="address"></input>
					<button class="cu-btn bg-blue margin-tb-sm lg" style="width: 100%;" @tap="gpsmap()">地图选位置</button>
				</view>
			</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,
				address: '',
				userinfo: {},
				forminfo: {
					title: '',
					mobile: '',
					region: '',
					latitude: 0,
					longitude: 0,
				},
				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
			},
			//打开地图
			gpsmap: function() {
				uni.chooseLocation({
					success: function(res) {
						console.log("选择位置", res)
						_this.address = res.address;
						_this.forminfo.latitude = res.latitude;
						_this.forminfo.longitude = res.longitude;
					}
				});
			},
			submit() {
				if (_this.isRotate) {
					return false;
				}
				_this.isRotate = true;

				let data = _this.forminfo;
				let validate = {
					"title": "姓名",
					"mobile": "手机号",
					"region": "区域",
					"latitude": "请点击地图选择位置"
				};
				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 lang="scss">
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.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;
		background-color: #FFFFFF;

		.broKerForm-item {
			margin-bottom: 35rpx;

			.item-area-column {
				margin-top: 15rpx;
				width: 100%;
				font-size: 28rpx;
				color: #979797;
				display: flex;
				flex-direction: column;

				.item-area-column-input {
					margin-bottom: 20rpx;
					padding: 0 36rpx;
					height: 100rpx;
					background: #F7F7F7;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.item-area-input {
						flex: 1;
						height: 100rpx;
					}
				}
			}

			.item-area {
				margin-top: 15rpx;
				padding: 0 36rpx;
				width: 100%;
				height: 100rpx;
				background: #F7F7F7;
				font-size: 28rpx;
				color: #979797;

				.item-area-input {
					height: 100rpx;
				}

				picker {
					flex: 1;
					padding-right: 40rpx;
					overflow: hidden;
					position: relative;

					.picker {
						line-height: 100rpx;
						font-size: 28rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						width: 100%;
						// text-align: right;
					}

				}

				picker::after {
					font-family: cuIcon;
					display: block;
					content: "\e6a3";
					position: absolute;
					font-size: 34rpx;
					color: #8799a3;
					line-height: 100rpx;
					width: 60rpx;
					text-align: center;
					top: 0;
					bottom: 0;
					right: -20rpx;
					margin: auto;
				}
			}
		}
	}


	.bottomEmpty {
		margin-top: 80rpx;
		height: 130rpx;
	}

	.bottomArea {
		position: fixed;
		bottom: 0;
		z-index: 100;
		width: 100%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		box-shadow: -10rpx -12rpx 12rpx 2rpx rgba(52, 85, 73, 0.16);

		.bottomButton {
			margin: 0 28rpx;
			width: 696rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #CA151C;
			font-size: 33rpx;
			text-align: center;
			color: #FFFFFF;
			border-radius: 10rpx;
		}
	}
</style>