kailin_mp/pages/user/info.vue

<template>
	<view>
		<view class="alter_info">请选择您药店/诊所所在城市，选择后不可更改，请谨慎选择</view>
		<view class="form"  >
			<!-- 地区代表表单 -->
			<form class="info_form">
				<view class="form_group">
					<view class="group_title">所在城市：</view>
					<view class="group_box">
						<picker mode="multiSelector" class="form_ctrl" :range="cityArray"  @columnchange="cityChange" @change="cityFinish" >
							<view class="area_text">
								<text v-if="requestParam.province"> {{requestParam.province}} </text>
								<text v-if="requestParam.city"> / {{requestParam.city}} </text>
							</view>
						</picker>
					</view>
				</view>
				<button @click="toApply" class="submit_btn" >提交</button>
			</form>
		</view>
	</view>
</template>

<script>
	
	import {getProvinces,getMyCity} from "../../utils/city";
	
	export default {
		data() {
			return {
				requestParam:{
					province:"",
					city:"",
				},
				cityArray: [[],[]],
				cityValue: [0,0],
			}
		},
		onLoad(){
			// 替换对应的数据
			this.cityArray.splice(0,1,getProvinces());
			this.cityArray.splice(1,1,getMyCity(this.cityValue[0]));
			// 默认地址
			this.requestParam.province 	= this.cityArray[0][this.cityValue[0]]
			this.requestParam.city 		= this.cityArray[1][this.cityValue[1]];
		},
		onShow(){
			// 登录信息
			if( !this.$checkAccess.alterLogin() ) return ;
		},
		methods: {
			toApply(){
				// 登录信息
				if( !this.$checkAccess.alterLogin() ) return ;
				// 请求状态
				uni.showLoading({mask:true});
				// 授权成功以后，调用绑定
				this.$http.request('api/custom/set_city',this.requestParam,'post').then((re)=>{
					// 关闭
					uni.hideLoading();
					// 成功的话
					if( re.code != 'success' ){
						// 跳转
						uni.showToast({title: re.msg,icon:"none"});
						return;
					}
					uni.switchTab({url: '/pages/user/index'});
				});
			},
			cityChange(e){
				// 替换三个选项
				this.cityValue.splice(e.detail.column,1,e.detail.value);
				// 下一级设置为0
				if( e.detail.column == 0 ){
					this.cityValue.splice(1,1,0);
					this.cityValue.splice(2,1,0);
				}
				if( e.detail.column == 1 ){
					this.cityValue.splice(2,1,0);
				}
				// 替换对应的数据
				this.cityArray.splice(0,1,getProvinces());
				this.cityArray.splice(1,1,getMyCity(this.cityValue[0]));
			},
			cityFinish(e){
				this.requestParam.province 	= this.cityArray[0][this.cityValue[0]];
				this.requestParam.city 		= this.cityArray[1][this.cityValue[1]];
			},
		}
	}
</script>

<style lang="less">
	.alter_info{
		display: block;
		color: #E03519;
		font-size: 20rpx;
		overflow: hidden;
		margin: 20rpx auto;
		background: #FFFFFF;
		line-height: 40rpx;
		padding: 35rpx 35rpx;
		text-align: center;
	}
	.info_form{
		display: block;
		overflow: hidden;
		padding: 20rpx 0rpx;
		background: #FFFFFF;
		.form_group{
			display: block;
			overflow: hidden;
			line-height: 60rpx;
			padding: 20rpx 35rpx;
			.group_title{
				float: left;
				width: 160rpx;
				display: block;
				overflow: hidden;
				font-size: 30rpx;
				margin-right: 20rpx;
			}
			.group_box{
				width: 480rpx;
				float: left;
				display: block;
				.form_ctrl{
					height: 56rpx;
					font-size: 24rpx;
					padding: 0rpx 20rpx;
					line-height: 56rpx;;
					border: 2rpx solid #DDDDDD;
				}
				.area_text{
					width: 446rpx;
					font-size: 20rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.group_image{
					width: 200rpx;
					height: 200rpx;
				}
				.choose_image{
					display: block;
					width: 200rpx;
					height: 200rpx;
					font-size: 38rpx;
					text-align: center;
					line-height: 200rpx;
					border: 2rpx solid #DDDDDD;
				}
			}
		}
		.submit_btn{
			color: #FFFFFF;
			width: 220rpx;
			height: 80rpx;
			display: block;
			font-size: 30rpx;
			padding: 0rpx 0rpx;
			line-height: 80rpx;
			margin: 50rpx auto;
			background-color: forestgreen;
		}
	}
</style>