quzhou/pages/AddressEdit/AddressEdit.vue

<template>
	<view class="page">
		<view class="address-input">
			<view class="list-input">
				<view class="title">
					<text>收货人</text>
				</view>
				<view class="content">
					<input type="text" v-model="form.consignee" placeholder="请填写收货人姓名">
				</view>
			</view>
			<view class="list-input">
				<view class="title">
					<text>手机号</text>
				</view>
				<view class="content">
					<input type="tel" v-model="form.mobile" placeholder="请填写收货人手机号">
				</view>
			</view>
			<view class="list-input" @click="show=true">
				<view class="title">
					<text>所在地区</text>
				</view>
				<view class="content" style="color:#aaaaaa" @click.native.stop="show=true"> 
					<!-- 省市区县/乡镇等 -->
					<input type="text"  v-model="addressText" style="pointer-events:none" placeholder="省市区县/乡镇等">
				</view>
			</view>
			<view class="list-textarea">
				<view class="title">
					<text>详细地址</text>
				</view>
				<view class="content">
					<textarea v-model="form.address" type="tel" placeholder="街道/楼牌号等" />
				</view>
			</view>
		</view>
		<view class="tag-default">
			
			<view class="default-address">
				<view class="title">
					<text>默认地址</text>
				</view>
				<view class="switch-default">
					<switch class="red sm" color="#236030 !important" :checked="form.is_default"></switch>
				</view>
			</view>
		</view>
		<view class="footer-btn" @click="submitHandle">
			<view class="btn">
				<text>确认</text>
			</view>
		</view>

		<data-picker :show="show" @confirm='confirmAddress' @cancel='show=false'
			@close='show = false' :defaultNames="defaultNames"  :sourceData="areaList" :showToolbar="false" :showBottombar="true"
			:labelName="'name'"></data-picker>
		
	</view>
</template>

<script>
	import {getArea,addAddr,editAddr,getAddrDesc} from '@/common/api.js'
	
	export default {
		data() {
			return {
				addressType: '2',
				show: false,
				columns:[],
				defaultIds:[],
				areaList:[],
				form:{
					id:null,
					consignee:null,
					mobile:null,
					province_name:null,
					city_name:null,
					district_name:null,
					address:null,
					is_default:true,
				},
				addressText:'',
				defaultNames:[]
			
			};
		},
		methods:{
			confirmAddress(val) {
				this.addressText = [...new Set(val.value)].join('')
				let value = val.value;
				this.form.province_name=value[0];
				this.form.city_name=value[1];
				this.form.district_name=value[2];
				this.show = false
			},
			getAreaHandle(){
				getArea().then(res=>{
					this.areaList = res.data;
				})
			},
			submitHandle(){
				
				let params=JSON.parse(JSON.stringify(this.form))
				if(params.is_default){
					params.is_default = 1;
				}else{
					params.is_default = 0;
				}
				if(this.addressType==2){
					addAddr(params).then(res=>{
						if(res.code==1){
							uni.navigateTo({
								url:'/pages/AddressList/AddressList'
							})
						}
					})
				}
				if(this.addressType==1){
					editAddr(params).then(res=>{
						if(res.code==1){
							uni.navigateTo({
								url:'/pages/AddressList/AddressList'
							})
						}
					})
				}
				
			},
			getAddrDescHandle(id){
				getAddrDesc({id:id}).then(res=>{
					console.log(res)
					Object.keys(this.form).forEach(item=>{
						this.form[item]=res.data[item]
					})
					this.defaultNames.push(this.form.province_name,this.form.city_name,this.form.district_name)
					this.addressText = this.form.province_name+this.form.city_name+this.form.district_name
				})
			}
		},
		onLoad(params) {
			console.log(params)
			this.addressType = params.type||'2';
			uni.setNavigationBarTitle({
				title: this.addressType === '1' ? '编辑收货地址':'新建收货地址'
			})
			if(params.item&&params.item!='null'){
				this.getAddrDescHandle(JSON.parse(params.item).id)
			}
			this.getAreaHandle()
		}
	}
</script>

<style scoped lang="scss">
	@import 'AddressEdit.scss';
	
</style>