juliancheng/pages/index/joinInfo.vue

<template>
	<view class="container">
		<view class="main">
			<view class="list">
				<view class="list-left">
					<text class="list-left-name">姓名：</text>
				</view>
				<view class="list-right">
					<input type="text" v-model="name" placeholder="请输入姓名" class="list-right-input" />
				</view>
			</view>

			<view class="list">
				<view class="list-left">
					<text class="list-left-name">电话：</text>
				</view>
				<view class="list-right ">
					<input type="text" v-model="phone" placeholder="请输入电话" class="list-right-input" />
					<button type="default" open-type="getPhoneNumber" @click="userPhone" class="cu-btn yellowBtn">获取手机号</button>
				</view>
			</view>

			<view class="list">
				<view class="list-left">
					<text class="list-left-name">所属区域：</text>
				</view>
				<view class="list-right">
					<picker mode="multiSelector" class="picker-container" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange"
					 :value="multiIndex" :range="multiArray" range-key="name">
						<view class="picker">
							<view class="energy">
								{{areaname}}
								<!-- {{multiArray[0].length>0? multiArray[0][multiIndex[0]].name:'所在省份'}}, {{ multiArray[1].length>0? multiArray[1][multiIndex[1]].name:'所属区域' }} -->
							</view>
							<view class="energy-img">
								<uni-icons :size="30" class="uni-icon-wrapper" color="#F5CC57" type="arrowdown" style="padding-left:5px" />
							</view>
						</view>
					</picker>
				</view>
			</view>

		</view>
		<view class="foot-btn">
			<view class="sub" @click="submit">
				提交
			</view>
			<view class="quxiao" @click="cancel">
				取消
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				phone: '',
				multiArray: [
					[],
					[]
				], // 绑定数据
				multiIndex: [0, 0], // 绑定的下标
				partners: [], // 加盟商
				areaname: "请选择"
			}
		},
		onLoad(option) {
			this.getArea(0);
		},
		methods: {
			userPhone:function(e) {
				// console.log(e)
				// let data = await this.$request.post('/api/Common/getPhoneNumber', {
				// 	encryptData: e.detail.encryptedData,
				// 	iv: e.detail.iv
				// })
				// console.log(data)
				// if (data.code == 200) {
				// 	this.phone = data.data.phoneNumber
				// } else {
				// 	uni.showToast({
				// 		title: '获取手机号失败'
				// 	})
				// }
				this.phone = uni.getStorageSync('phone')
			},
			// 获取数据
			getArea: async function(parent_id) {
				let res = await this.$request.post('/api/common/areaList', {
					parent_id: parent_id
				});
				console.log(res)
				if (res.code == 200) {
					if (parent_id == 0) {
						this.$set(this.multiArray, 0, res.data);
						console.log(this.multiArray)
						this.getArea(this.multiArray[0][this.multiIndex[0]].id);
					} else {
						this.$set(this.multiArray, 1, res.data);
						// this.gePartners(this.multiArray[1][this.multiIndex[1]].id,2);
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: data.message
					});
				}
			},
			// gePartners: async function(area_id,level){
			// 	let data = await this.$request.post('/api/common/partnerList',{area_id:area_id,level:2});
			// 	if (data.code==200) {
			// 		this.partners=data.data;
			// 	} else {
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title: data.message
			// 		});
			// 	}
			// },
			// 选中后的值
			bindMultiPickerChange(e) {
				console.log(e)
				this.multiIndex = e.detail.value;
				this.areaname = this.multiArray[0][this.multiIndex[0]].name + '，' + this.multiArray[1][this.multiIndex[1]].name
			},
			// 选中切换后调用值
			bindMultiPickerColumnChange(e) {
				console.log(e)
				if (e.detail.column == 0) {
					this.$set(this.multiIndex, 1, 0);
					this.$set(this.multiIndex, e.detail.column, e.detail.value);
					this.getArea(this.multiArray[0][this.multiIndex[0]].id);
				} else {
					this.$set(this.multiIndex, e.detail.column, e.detail.value);
					// this.gePartners(this.multiArray[1][this.multiIndex[1]].id,2);
				}
			},
			// 提交
			submit: async function() {
				if (this.$util.isEmpty(this.name)) {
					uni.showModal({
						title: '错误信息',
						content: '姓名必须填写',
						showCancel: false
					});
					return false;
				}

				if (!this.$util.isPhoneNumber(this.phone)) {
					uni.showModal({
						title: '错误信息',
						content: '请输入正确格式的手机号码',
						showCancel: false
					});
					return false;
				}

				let params = {
					nick: this.name,
					phone: this.phone,
					province: this.multiArray[0][this.multiIndex[0]].id,
					city: this.multiArray[1][this.multiIndex[1]].id
				}

				let res = await this.$request.post('/api/PartnerAplye/addAplye', params);
				// console.log(res.code)
				console.log(res)
				if (res.code == 200) {
					uni.showToast({
						title: '提交申请信息成功',
						content: res.message,
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				} else {
					console.log(res)
					uni.showToast({
						title: res.message
					})
				}
			},
			// 取消订单
			cancel: function() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.container {
		width: 100vw;
		height: auto;
	}

	.container .main {
		width: 100%;
		height: auto;
		background: #fff;
		margin-bottom: 20px;
	}

	.list {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		padding: 5px 15px;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list-left {
		width: 27%;
		flex-shrink: 0;
	}

	.list-left .list-left-name {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 36rpx;
		font-weight: 300;
		font-family: PingFangSC-Regular, sans-serif;
		color: #555864;
	}

	.list-right {
		width: 73%;
		height: 40px;
		line-height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list-right .list-right-input {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, sans-serif;
		font-weight: 300;
		color: rgba(143, 143, 144, 1);
	}

	.list-right .picker {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1
	}

	.list-right .picker .energy {
		font-size: 30rpx;
		font-family: PingFangSC-Regular, sans-serif;
		font-weight: 300;
		color: rgba(143, 143, 144, 1);
	}

	.list-right .picker-container {
		width: 100%;
	}

	.quxiao,
	.sub {
		width: auto;
		height: 40px;
		line-height: 40px;
		padding: 0 20px;
		float: right;
		border-radius: 5px;
	}

	.foot-btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.foot-btn .sub {
		background: #F5CC57;
		color: #fff;
		margin: 10px;
	}

	.foot-btn .quxiao {
		border: 1px solid #979797;
		color: #979797;
		margin: 10px;
	}

	.yellowBtn {
		width: 296rpx;
		color: #FFFFFF !important;
		background: #f5cc57 !important;
	}
</style>