130 lines
3.7 KiB
Vue
130 lines
3.7 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" :key="index">
|
|
<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.provinceName}}</view>
|
|
<view class="text-gray margin-right-xs">{{item.cityName}}</view>
|
|
<view class="text-gray margin-right-xs">{{item.countryName}}</view>
|
|
<view class="text-gray margin-right-xs">{{item.streetName || ''}}</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) {
|
|
this.loadData();
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'success',
|
|
mask: true
|
|
})
|
|
} 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>
|