97 lines
2.9 KiB
Vue
97 lines
2.9 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-lg">
|
|
<view class="padding margin-lr-sm margin-top-sm bg-white flex justify-between align-center" v-for="(item, index) in myAddressList">
|
|
<view>
|
|
<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">{{item.area}}</view>
|
|
</view>
|
|
<view class="text-lg margin-tb-sm">{{item.address}}</view>
|
|
<view class="text-gray">
|
|
<text class="margin-right">{{item.person2Contact}}</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="showAddressDetail(item)"></view>
|
|
<view class="cuIcon-close padding-lr-xs padding-tb" @click="confirm2DelAddress(item, index)"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 模态框 -->
|
|
<view class="cu-modal" :class="modalName=='delAddress'?'show':''">
|
|
<view class="cu-dialog">
|
|
<view class="padding-xl">
|
|
是否删除该地址？
|
|
</view>
|
|
<view class="cu-bar bg-white">
|
|
<view class="action margin-0 flex-sub text-black" @tap="hideModal">取消</view>
|
|
<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal"
|
|
@click="delAddress">确定</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<confirm-modal ref="confirmModal" :content="'是否确定删除？'" :confirm="delAddress.bind(this, 1)"></confirm-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
myAddressList: [],
|
|
modalName: '',
|
|
delAddressInfo: {},
|
|
delAddressIndex: 0
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.loadData();
|
|
this.bindEvent();
|
|
},
|
|
onUnload() {
|
|
this.offBindEvent();
|
|
},
|
|
methods: {
|
|
async loadData() {
|
|
this.myAddressList = await this.$api.data('myAddressList');
|
|
},
|
|
bindEvent() {
|
|
uni.$on(this.$globalFun.CONFIRM, this.delAddress);
|
|
},
|
|
offBindEvent() {
|
|
uni.$off(this.globalFun.CONFIRM);
|
|
},
|
|
showAddressDetail(addressInfo) {
|
|
uni.navigateTo({
|
|
url: '/pages/my/edit-address?addressInfo=' + encodeURIComponent(JSON.stringify(addressInfo))
|
|
})
|
|
},
|
|
confirm2DelAddress(addressInfo, index) {
|
|
this.delAddressInfo = addressInfo;
|
|
this.delAddressIndex = index;
|
|
this.$refs.confirmModal.showModal();
|
|
},
|
|
delAddress() {
|
|
this.myAddressList = this.myAddressList.slice(0, this.delAddressIndex).concat(this.myAddressList.slice(++this.delAddressIndex));
|
|
},
|
|
showModal(e) {
|
|
this.modalName = typeof e === 'string' ? e : e.currentTarget.dataset.target
|
|
},
|
|
hideModal(e) {
|
|
this.modalName = null
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|