CBB3/pages/user/userinfo/area.vue

<style>
	page{background: #f1f1f1f1;}
	.user-line {padding: 0 15px;height: 50px;background: #fff;border-top: 1px #f5f5f5 solid;display: flex;align-items: center}
	.ul-left {color: #585858;font-size: 14px}
	.ul-right {width: 60%;margin-left: auto;display: flex;align-items: center;justify-content: flex-end}
	.ulr-name {color: #9b9b9b;font-size: 13px}
	.ulr-img {width: 16px;
		height: 16px;
		margin-left: 10px}
	.ulr-img image {width: 100%;height: 100%;}
	
	.update-btn {
		width: 90%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		margin: 30px auto;
		background: #db292b;
		color: #fff;
		border-radius: 100px;
		font-size: 16px;
	}
</style>
<template>
	<view class="m-app">
		<view class="user-line" @tap="showMulLinkageThreePicker">
			<view class="ul-left"><text>所在地区</text></view>
			<view class="ul-right">
				<view class="ulr-name">
					<text>{{data.region ? data.region : "请选择:省-市-区"}}</text>
				</view>
				<view class="ulr-img">
					<image src="/static/img/ic_next.png"></image>
				</view>
			</view>
		</view>
		
		<button class="nt update-btn" @tap="formSubmit" >确认保存</button>
	
		
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		components: {
			'mpvue-city-picker': mpvueCityPicker
		},
		computed: mapState(['user']),
		data() {
			return {
				val:0,
				cityPickerValueDefault: [0, 0, 0],
				themeColor: '#db292b',
				data: {region:"",City:0}
			}
		},
		onLoad(options) {
			var val = options.val || "";
			this.val = val;
			this.data.region = val;
			
		},
		methods: {
			// 省市区选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onCancel(e) {
				this.data.region = "";
			},
			onConfirm(e) {
				this.data.region = e.label;
				this.data.City = e.cityCode;
			},
			radioChange:function(e){
				this.val = parseInt(e.detail.value);
			},
			formSubmit:function(){
				var that = this  , token = this.user.token;
				if(this.data.region == ""){
					this.utils.Tip("请选择省市区");
					return;
				}
				let formData = {};
				formData.val = this.data.City;
				formData.token = token;
				formData.code = "region_id";
				this.utils.loadIng("提交中..");
				this
					.request
					.post("userInfoSave",formData)
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							this.utils.Tip(res.msg);
							setTimeout(function(){ uni.navigateBack();},1000);
						}else{
							that.utils.Tip(res.msg);
						}
					}).catch(function(){
						uni.hideLoading();
						that.utils.Tip("网络错误，请稍后尝试");
					});
			}
			
		},
		onBackPress() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel();
			}
		},
		onUnload() {
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		}
	}
</script>