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.
239 lines
5.8 KiB
239 lines
5.8 KiB
<template>
|
|
<view class="personal-address">
|
|
<view v-if="addressList.length>0" class="personal-address-list">
|
|
<view v-for="(item,index) in addressList" :key="index">
|
|
<view class="personal-address-list-item">
|
|
<view class="personal-address-info">
|
|
<view class="personal-address-text">
|
|
{{item.province == item.city ? item.province : ''}}
|
|
{{item.city}}
|
|
{{item.district}}
|
|
{{item.detailAddress}}
|
|
</view>
|
|
<view class="personal-address-people">
|
|
<view>
|
|
{{item.name}}
|
|
</view>
|
|
<view style="border: solid #7D8196 1px; margin: 0 10px; height: 12px;"> </view>
|
|
<view>
|
|
{{item.phoneHidden}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="personal-address-info-btns">
|
|
<u-radio-group v-if="item.isDefault" v-model="value" >
|
|
<u-radio activeColor="#ffbf60" name="默认地址" labelColor="#ffbf60" label="默认地址"></u-radio>
|
|
</u-radio-group>
|
|
<view class="" v-else></view>
|
|
<view class="personal-address-info-btns-2">
|
|
<view class="personal-address-info-btn" @click="editAddress(item)">
|
|
<u-icon name="edit-pen" color="#7d8196" size="16" style="margin-right: 5px;"></u-icon>
|
|
<view style="margin-left: 5px;">
|
|
编辑
|
|
</view>
|
|
</view>
|
|
<view class="personal-address-info-btn" @click="deleteAddress(item)">
|
|
<u-icon name="trash" color="#7d8196" size="16"></u-icon>
|
|
<view style="margin-left: 5px;">
|
|
删除
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="personal-address-none">
|
|
<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/address.png" alt="pet"
|
|
style="width: 243px;height: 147px;" mode="widthFix"/>
|
|
<view class="personal-address-none-text">这里还没有您的地址,请点击添加吧~</view>
|
|
</view>
|
|
|
|
<view class="personal-address-add">
|
|
<button class="personal-address-add-btn" @click="addAddress">添加地址</button>
|
|
</view>
|
|
|
|
<u-modal :show="showDel" @confirm="confirmDel" @cancel="cancelDel" ref="uModal" showCancelButton :asyncClose="true" :content='delContent'></u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getDictList } from "@/api/system/user.js"
|
|
import { getAddressList,delAddress } from "@/api/system/address"
|
|
export default{
|
|
data(){
|
|
return{
|
|
addressList:[],
|
|
value:"默认地址",
|
|
show:false,
|
|
showDel:false,
|
|
delContent:'',
|
|
deleteId:''
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getAddressList();
|
|
},
|
|
onPullDownRefresh() {
|
|
this.getAddressList();
|
|
},
|
|
mounted() {
|
|
this.getAddressList();
|
|
},
|
|
methods:{
|
|
getAddressList(){
|
|
getAddressList({openId:this.openIdStr}).then(res=>{
|
|
if(res&&res.content){
|
|
this.addressList=res.content
|
|
this.showDel = false;
|
|
}
|
|
})
|
|
},
|
|
addAddress(){
|
|
uni.navigateTo({
|
|
url: `/pages/personalCenter/addressInfo?optionType=add`
|
|
});
|
|
},
|
|
editAddress(item){
|
|
uni.navigateTo({
|
|
url: `/pages/personalCenter/addressInfo?optionType=edit&addressId=${item.id}`
|
|
});
|
|
},
|
|
deleteAddress(item){
|
|
this.delContent = "确定要删除该地址吗?";
|
|
this.showDel = true;
|
|
this.deleteId=item.id;
|
|
},
|
|
confirmDel(){
|
|
delAddress(this.deleteId).then(res=>{
|
|
console.log(res);
|
|
this.$modal.showToast('删除成功');
|
|
this.getAddressList()
|
|
})
|
|
},
|
|
cancelDel(){
|
|
this.showDel = false;
|
|
this.deleteId='';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
::v-deep .wx-radio-input.wx-radio-input-checked {
|
|
background-color: #ffbf60 !important;
|
|
border-color: #ffbf60 !important;
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
//选中之后的样式
|
|
|
|
.personal-address{
|
|
position: relative;
|
|
height: 100%;
|
|
padding-bottom: 90px;
|
|
.personal-address-add{
|
|
background-color: #FFFFFF;
|
|
padding: 10px 20px 40px;
|
|
width: 100%;
|
|
height: 90px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
.personal-address-add-btn{
|
|
width: 100%;
|
|
border-radius: 6px;
|
|
background: #FFB13F;
|
|
font-size: 16px;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.personal-address-list{
|
|
.personal-address-list-add{
|
|
width: 100%;
|
|
height: 44px;
|
|
background-color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 15px;
|
|
.personal-address-list-add-btn{
|
|
font-size: 14px;
|
|
color:#AAA;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
}
|
|
.personal-address-list-item{
|
|
margin: 10px 10px 0 10px;
|
|
border-radius: 5px;
|
|
padding: 20px 10px 10px;
|
|
background-color: #FFF;
|
|
.personal-address-info{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
.personal-address-text{
|
|
color: #333;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
}
|
|
.personal-address-people{
|
|
color: #7D8196;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin: 10px 0 10px;
|
|
}
|
|
|
|
}
|
|
.personal-address-info-btns{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
font-size: 14px;
|
|
padding-top: 10px;
|
|
border-top:solid 1px #efefef;
|
|
|
|
.personal-address-info-btns-2{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
.personal-address-info-btn{
|
|
display: flex;
|
|
color: #7D8196;
|
|
margin-left: 20px;
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
.personal-address-none{
|
|
display:flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin-top: 40%;
|
|
.personal-address-none-text{
|
|
color: #666;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|