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.
94 lines
1.9 KiB
94 lines
1.9 KiB
<template>
|
|
<div class="address_list">
|
|
<!-- 导航栏 -->
|
|
<div class="header_body">
|
|
<header-nav titelText="地址列表"></header-nav>
|
|
</div>
|
|
|
|
<!-- 中间 -->
|
|
<div class="warp_body">
|
|
<lodding-card :isLodding="isLodding">
|
|
<van-address-list
|
|
v-model="chosenAddressId"
|
|
:list="data?.list"
|
|
:disabled-list="data?.disabledList"
|
|
disabled-text="以下地址超出配送范围"
|
|
default-tag-text="默认"
|
|
@add="onAdd"
|
|
@edit="onEdit"
|
|
@select="selectDefault"
|
|
/>
|
|
</lodding-card>
|
|
</div>
|
|
|
|
<!-- 底部 -->
|
|
<div class="footer_body"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="addressList">
|
|
|
|
const { useMy } = $globalStore
|
|
|
|
const router = useRouter();
|
|
let chosenAddressId = ref("");
|
|
let isLodding = ref(true);
|
|
const data = reactive({
|
|
list: [],
|
|
disabledList: [],
|
|
});
|
|
|
|
// 获取列表数据
|
|
const getList = async () => {
|
|
const res = await useMy.getAddersslist();
|
|
isLodding.value = false;
|
|
if (res?.code === 20000) {
|
|
chosenAddressId = res.data.list.filter((item) => {
|
|
return item?.isDefault;
|
|
})?.[0].id;
|
|
data.list = res?.data?.list;
|
|
data.disabledList = res?.data?.disabledList;
|
|
}
|
|
};
|
|
|
|
// 添加地址
|
|
const onAdd = () => {
|
|
router.replace({ path: "/addressedit" });
|
|
};
|
|
|
|
// 修改地址
|
|
const onEdit = (item) => {
|
|
router.replace({
|
|
path: "/addressedit",
|
|
query: { addressId: item?.id },
|
|
});
|
|
};
|
|
|
|
// 切换地址触发
|
|
const selectDefault = (item) => {
|
|
const dataArr = data.list.map((it) => {
|
|
return {
|
|
...it,
|
|
isDefault: it?.id === item?.id ? true : false,
|
|
};
|
|
});
|
|
data.list = dataArr;
|
|
};
|
|
|
|
onMounted(() => {
|
|
$globalConfigure(() => {
|
|
console.log("缓存页面时--总监听事件接收--用于初始化操作");
|
|
getList();
|
|
});
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.address_list {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: #f4f4f4;
|
|
}
|
|
</style>
|
|
|