dingdong-mall/pages/my/my-address.vue

129 lines
3.6 KiB
Vue

<template>
<view>
<!-- 顶部操作条 -->
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">地址列表</block>
</cu-custom>
<!-- 地址列表 -->
<view class="margin-bottom-with-bar">
<view class="padding margin-lr-sm margin-top-sm bg-white flex justify-between align-center" v-for="(item, index) in myAddressList">
<view @click="chooseAddress(item)">
<view class="flex justify-start align-center">
<view class='cu-tag bg-yellow margin-right-sm' v-if="item.isDefault">默认</view>
<view class="text-gray margin-right-xs">{{item.countryName}}</view>
<view class="text-gray margin-right-xs">{{item.provinceName}}</view>
<view class="text-gray margin-right-xs">{{item.cityName}}</view>
</view>
<view class="text-lg margin-tb-sm">{{item.address}}</view>
<view class="text-gray">
<text class="margin-right">{{item.name}}</text>
<text>{{item.phone}}</text>
</view>
</view>
<view class="oper-column text-xl flex justify-end">
<view class="cuIcon-edit padding-lr-xs padding-tb" @click="addEditAddress(item)"></view>
<view class="cuIcon-close padding-lr-xs padding-tb" @click="confirm2DelAddress(item)"></view>
</view>
</view>
</view>
<!-- 底部新增地址按钮 -->
<view class="cu-bar tabbar border shop fixed-bottom-bar bg-back">
<button class="cu-btn bg-main-color long-btn margin-lr-sm shadow-blur" @click="addEditAddress(null)">新增地址</button>
</view>
<!-- 模态框 -->
<confirm-modal ref="confirmModal" :content="'是否确定删除?'" @confirm="delAddress"></confirm-modal>
</view>
</template>
<script>
export default {
data() {
return {
myAddressList: [],
modalName: '',
delAddressInfo: {},
chooseMode: false
}
},
onLoad(options) {
if (Boolean(options)) {
this.chooseMode = options.chooseMode === 'true' ? true : false;
}
},
onShow() {
this.loadData();
},
methods: {
async loadData() {
// this.myAddressList = await this.$api.data('myAddressList');
let res = await this.$request.getAddressList({
customerId: this.$request.getCurUserInfo().customerId
});
this.myAddressList = res.data;
},
addEditAddress(addressInfo) {
let url = null;
let params = null;
if (addressInfo) {
// 修改
addressInfo.area = [{
areaId: addressInfo.countryId,
areaName: addressInfo.countryName
}, {
areaId: addressInfo.provinceId,
areaName: addressInfo.provinceName
}, {
areaId: addressInfo.cityId,
areaName: addressInfo.cityName
}]
params = {
addressInfo: addressInfo,
mode: 0
}
} else {
// 新增
params = {
mode: 1
}
}
uni.navigateTo({
url: '/pages/my/edit-address?params=' + encodeURIComponent(JSON.stringify(params))
})
},
confirm2DelAddress(addressInfo) {
this.delAddressInfo = addressInfo;
this.$refs.confirmModal.showModal();
},
async delAddress() {
let res = await this.$request.delAddressList(this.delAddressInfo.customerAddressId);
if (res.code === 0) {
uni.showToast({
title: '删除成功',
icon: 'success',
mask: true
})
this.loadData();
} else {
uni.showToast({
title: '删除失败',
icon: 'error',
mask: true
})
}
},
chooseAddress(addressInfo) {
if (this.chooseMode) {
uni.$emit(this.$globalFun.CHOOSE_ADDRESS, addressInfo);
uni.navigateBack({
delta: -1
})
}
}
}
}
</script>
<style scoped>
</style>