You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
hezhiying/pages/AddressEdit/AddressEdit.vue

158 lines
3.9 KiB

<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>