161 lines
3.6 KiB
Vue
161 lines
3.6 KiB
Vue
<template>
|
|
<view class="address-container">
|
|
<list-page-temp
|
|
class="address-list-inner"
|
|
:getDataPromise="getAddressList"
|
|
:reloadFlag="reloadFlag"
|
|
:requestData="requestData"
|
|
>
|
|
<template v-slot:item="{ data }">
|
|
<address-item
|
|
:data="data"
|
|
@toDetails="toDetails(data)"
|
|
@delete="deleteAction"
|
|
@refresh="handleRefresh"
|
|
/>
|
|
</template>
|
|
<view slot="bottom" class="place-view"></view>
|
|
</list-page-temp>
|
|
|
|
<view class="flex-center address-list-bottom">
|
|
<view class="flex-row-center address-add" @click="jumpToAdd">
|
|
<text class="fs-60 app-fc-white PingFangSC-Semibold add-icon">+</text>
|
|
<text class="fs-30 app-fc-white PingFangSC-Semibold add-icon">
|
|
添加地址
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<pop-up-modal
|
|
v-if="showModal"
|
|
content="确定要删除该地址信息吗？"
|
|
@confirm="deleteAddress(data)"
|
|
@cancel="showModal = false"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AddressItem from "./components/AddressItem.vue";
|
|
import PopUpModal from "../../../components/PopUpModal.vue";
|
|
import { delAddress, getAddressList } from "../../../api/address";
|
|
|
|
export default {
|
|
components: {
|
|
AddressItem,
|
|
PopUpModal,
|
|
},
|
|
data() {
|
|
return {
|
|
reloadFlag: 0,
|
|
requestData: {},
|
|
deleteData: {},
|
|
showModal: false,
|
|
isSelectAddress: false, // 从订单页跳转过来选择地址的标识
|
|
selectAddressId: "", // 选中的地址id
|
|
};
|
|
},
|
|
computed: {
|
|
userInfo() {
|
|
return this.$store.state?.user?.userInfo || {};
|
|
}
|
|
},
|
|
watch: {
|
|
userInfo: {
|
|
immediate: true,
|
|
handler(newVal) {
|
|
if (newVal && newVal.userID) {
|
|
this.requestData = {
|
|
user_id: newVal.userID
|
|
};
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.reloadFlag = Math.random();
|
|
},
|
|
onLoad(options) {
|
|
const { typeSelect, addressId } = options;
|
|
this.isSelectAddress = typeSelect;
|
|
this.selectAddressId = addressId;
|
|
},
|
|
methods: {
|
|
getAddressList,
|
|
toDetails(data) {
|
|
if (this.isSelectAddress) {
|
|
this.selectAddressId = data?.id || "";
|
|
uni.navigateBack();
|
|
uni.$emit('selectAddress', data)
|
|
return;
|
|
}
|
|
uni.navigateTo({
|
|
url: `/pages/client/address/edit?id=${data?.id || ""}`,
|
|
});
|
|
},
|
|
jumpToAdd() {
|
|
uni.navigateTo({
|
|
url: `/pages/client/address/edit?isAdd=1`,
|
|
});
|
|
},
|
|
deleteAction(data) {
|
|
this.deleteData = data;
|
|
this.showModal = true;
|
|
},
|
|
deleteAddress() {
|
|
this.showModal = false;
|
|
console.log("this.deleteData", this.deleteData);
|
|
delAddress(this.deleteData.id).then(() => {
|
|
this.reloadFlag = Math.random();
|
|
});
|
|
},
|
|
handleRefresh() {
|
|
// 刷新地址列表
|
|
this.reloadFlag = Math.random();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.address-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: #fbf8fc;
|
|
padding-bottom: 0;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
padding-top: 20rpx;
|
|
|
|
.address-list-inner {
|
|
height: 100%;
|
|
}
|
|
|
|
.place-view {
|
|
height: 90rpx;
|
|
}
|
|
|
|
.address-list-bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
bottom: constant(safe-area-inset-bottom);
|
|
bottom: env(safe-area-inset-bottom);
|
|
left: 0;
|
|
width: 100%;
|
|
|
|
.address-add {
|
|
width: 630rpx;
|
|
height: 90rpx;
|
|
background: $app_color_main;
|
|
border-radius: 45rpx 45rpx 45rpx 45rpx;
|
|
|
|
.add-icon {
|
|
margin-right: 20rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|