<template>
<div class="address">
<nav-bar :if_left_arrow="true" title="收货地址"></nav-bar>
<van-address-list
v-model="active_id"
:list="list"
add-button-text="+添加地址"
@select="click_active"
@add="$router.push('add_address')"
@edit="onEdit" />
<no-data type="1" v-show="!dataShow"></no-data>
</div>
</template>
<script>
export default {
data() {
return {
dataShow:true,
active_id: '',//默认地址id
list: [],//列表数据
}
},
mounted() {
this.axios.post('/api/Ucenter/my_address').then(res=>{
if(res.status == 1){
if(res.data.address.length == 0){
this.dataShow = false;//没有数据
}else{
this.dataShow = true;
res.data.address.forEach((item,i)=>{
this.list.push({
id:item.id,
name:item.consigner,
tel:item.phone,
address:item.address_detail,
address_code:item.address_code,
is_default:item.is_default,
add:item.address,
})
//默认选择
if(item.is_default == 1){
this.active_id = item.id
}
})
}
}
})
},
methods: {
//点击列表
click_active(item,index){
this.axios.post('/api/Ucenter/default_address',{
address_id:item.id,
}).then(res=>{
if(res.status == 1){
this.active_id = item.id;
}
})
},
//点击编辑地址
onEdit(item) {
this.$router.push({
name:'address_modify',
params:{
item:item
}
})
},
},
}
</script>
<style scoped lang="less">
.address {
min-height: 100vh;
background: @bgColor;
/deep/.van-address-list{
margin-top: 5px;
.van-address-item .van-radio__icon--checked .van-icon{
background: @mainColor;
border-color: @mainColor;
}
.van-button--danger{
background: @mainColor;
}
}
}
</style>
1、关于地区选择:AddressList 地址列表
最新推荐文章于 2023-01-17 15:10:10 发布