二 address/address-add.vue

<template>
	<view>
		<u--form :model="userInfo" labelWidth='180'>
			<u-form-item label="收货人" borderBottom >
				<u--input v-model="userInfo.name" border="none"></u--input>
			</u-form-item>
			
			<u-form-item label="手机号" borderBottom >
				<u--input v-model="userInfo.mobile" border="none"></u--input>
			</u-form-item>
			
			<!--三级联动-->
			<u-form-item>
				<u-cell :value="cityVal" @click='show=true'></u-cell>
				<u-picker 
					ref="uPicker"
					:show="show" 
					:columns="columns"
					@cancel='show=false'
					@confirm='confirm'
					@change='change'
				></u-picker>
			</u-form-item>
			
			<u-form-item label="详细地址" borderBottom >
				<u--textarea v-model="userInfo.address" placeholder="请输入内容" ></u--textarea>
			</u-form-item>
			
			<u-form-item label="设为默认收货地址">
				<u-switch v-model="userInfo.defaulted == 1 ? true : false " @change="switchChange"></u-switch>
			</u-form-item>
			
			<u-form-item>
				<button @click='submit'>{{ type==1 ? '修改' : "保存" }}</button>
			</u-form-item>
			
		</u--form>
	</view>
</template>

<script>
import { addressList } from '@/utils/address.js'
import { addressAdd , addressUpdate } from '@/utils/api/address.js'
export default{
	data () {
		return {
			show:false,
			cityVal:'省/市/区',
			columns: [], //三级联动数据
			userInfo:{  //表单数据
				name:'',
				mobile:'',
				defaulted:0,
			},
			type:0,//证明是修改
		}
	},
	onLoad( e ) {
		//初始化三级联动
		this.handelData();
		
		if( e.item ){
			
			this.type = 1;
			
			this.userInfo = JSON.parse( e.item );
			let { province , city , county } = this.userInfo;
			this.cityVal = province+ '-' + city + '-' + county
			uni.setNavigationBarTitle({
			    title: "修改收货地址"
			});
		}
		
	},
	methods:{
		//三级联动数据
		handelData(){
			let province = [],city=[],county=[];
			addressList.forEach(item=>{
				//一级
				province.push(item.value);
				//第一个一级的所有二级
				if( item.code =='110000' ){
					item.children.forEach(child=>{
						city.push( child.value );
						//第一个一级的第一个二级的所有三级
						if( child.code =='110100'){
							child.children.forEach(el=>{
								county.push( el.value );
							})
						}
					})
				}
			})
			this.columns.push(  province  , city , county );
		},
		//三级联动：确定
		confirm( e ){
			let [ province,city,county ] = e.value;
			this.cityVal = province + "-" + city + "-" + county;
			this.show = false;
			
			this.userInfo.province = province;
			this.userInfo.city = city;
			this.userInfo.county = county;
		},
		//三级联动：改变
		change( e ){
			let { columnIndex , value } = e;
			let picker = this.$refs.uPicker;
		
			//一级修改
			if( columnIndex == 0 ){
				addressList.forEach(item=>{
					if( value[0] == item.value ){
						let city = [];
						let flag = item.children[0].value;
						item.children.forEach(el=>{
							city.push( el.value );
							if( city[0] == flag ){
								flag = '';
								let county = [];
								el.children.forEach(v=>{
									county.push( v.value );
								})
								picker.setColumnValues(2,county);
							}
						})
						picker.setColumnValues(1,city);
					} 
				})
				return;
			}
			//二级修改
			if( columnIndex == 1 ){
				addressList.forEach(item=>{
					if(  value[0] == item.value ){
						let city = [];
						item.children.forEach( el=>{
							city.push( el.value );
							if( value[1] == el.value ){
								let county = [];
								el.children.forEach(v=>{
									county.push( v.value );
								})
								picker.setColumnValues(2,county);
							}
						})
					}
				})
				return;
			}
		},
		//开关
		switchChange( e ){
			e ? this.userInfo.defaulted = 1 : this.userInfo.defaulted = 0;
		},
		//保存 或 修改
		async submit(){
			if( this.type == 1 ){
				//修改操作
				let res = await addressUpdate(this.userInfo);
				if( res.code =='200') uni.navigateBack();
				return;
			}
			let res = await addressAdd(this.userInfo);
			if( res.code =='200'){
				uni.navigateBack()
			}
		}
	}
}
</script>

<style>
</style>