147 lines
3.9 KiB
Vue
147 lines
3.9 KiB
Vue
<template>
|
|
<div>
|
|
<joyful-selection-address-list-skeleton v-if="loading" />
|
|
<main v-else class="address-page">
|
|
<van-nav-bar title="地址管理" left-arrow @click-left="$router.back()" />
|
|
<van-address-list
|
|
v-model="chosenAddressId"
|
|
:list="addressList"
|
|
:disabled-list="disabledList"
|
|
disabled-text="以下地址超出配送范围"
|
|
default-tag-text="默认"
|
|
@add="onAdd"
|
|
@edit="onEdit"
|
|
@select="onSelect"
|
|
/>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapState } from 'pinia'
|
|
import { Toast } from 'vant'
|
|
import { postFunction } from '@/api/supplied-service'
|
|
import { useUserStore } from '@/store/user'
|
|
import { formatAddress, readChosenAddressId, saveChosenAddressId } from './address-data'
|
|
import JoyfulSelectionAddressListSkeleton from '@/skeleton-view/joyful-selection/address/index.vue'
|
|
|
|
export default {
|
|
name: 'JoyfulSelectionAddressList',
|
|
components: {
|
|
JoyfulSelectionAddressListSkeleton
|
|
},
|
|
data: () => ({
|
|
loading: true,
|
|
chosenAddressId: '',
|
|
addresses: [],
|
|
disabledList: []
|
|
}),
|
|
computed: {
|
|
...mapState(useUserStore, ['supplierId', 'userId']),
|
|
addressList() {
|
|
return this.addresses.map(item => ({
|
|
id: item.id,
|
|
name: item.name,
|
|
tel: item.tel,
|
|
address: formatAddress(item),
|
|
isDefault: item.isDefault
|
|
}))
|
|
}
|
|
},
|
|
created() {
|
|
this.loadAddresses()
|
|
},
|
|
methods: {
|
|
...mapActions(useUserStore, ['fetchBridgeToken']),
|
|
async loadAddresses() {
|
|
this.loading = true
|
|
try {
|
|
await this.fetchBridgeToken()
|
|
|
|
if (!this.supplierId || !this.userId) {
|
|
Toast('用户信息不完整，请重新进入商城')
|
|
this.addresses = []
|
|
return
|
|
}
|
|
|
|
const data = await postFunction('address-list', {
|
|
supplierId: this.supplierId,
|
|
userId: this.userId
|
|
})
|
|
this.addresses = data?.addresses || []
|
|
this.chosenAddressId = readChosenAddressId() || this.addresses.find(item => item.isDefault)?.id || this.addresses[0]?.id || ''
|
|
} catch (error) {
|
|
Toast(error.message || '查询地址失败，请稍后再试')
|
|
this.addresses = []
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
async onSelect(item) {
|
|
this.chosenAddressId = item.id
|
|
saveChosenAddressId(item.id)
|
|
|
|
if (['checkout', 'after-sale'].includes(this.$route.query.from)) {
|
|
const address = this.addresses.find(addressItem => addressItem.id === item.id)
|
|
if (address) {
|
|
try {
|
|
await postFunction('address-save', {
|
|
...address,
|
|
supplierId: this.supplierId,
|
|
userId: this.userId,
|
|
addressId: address.id,
|
|
isDefault: true
|
|
})
|
|
} catch (error) {
|
|
Toast(error.message || '璁剧疆榛樿鍦板潃澶辫触锛岃绋嶅悗鍐嶈瘯')
|
|
return
|
|
}
|
|
}
|
|
this.$router.back()
|
|
}
|
|
},
|
|
onAdd() {
|
|
this.$router.push({ path: '/joyful-selection/address/edit', query: { from: this.$route.query.from } })
|
|
},
|
|
onEdit(item) {
|
|
this.$router.push({ path: '/joyful-selection/address/edit', query: { id: item.id, from: this.$route.query.from } })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.address-page {
|
|
min-height: 100vh;
|
|
padding-top: 46px;
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.address-page ::v-deep .van-nav-bar {
|
|
position: fixed;
|
|
z-index: 20;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
|
|
}
|
|
|
|
.address-page ::v-deep .van-address-list {
|
|
padding: 12px 12px 86px;
|
|
}
|
|
|
|
.address-page ::v-deep .van-address-item {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.address-page ::v-deep .van-address-item .van-radio__icon--checked .van-icon,
|
|
.address-page ::v-deep .van-address-list__add {
|
|
border-color: #ff5b20;
|
|
background: #ff5b20;
|
|
}
|
|
|
|
.address-page ::v-deep .van-tag--danger {
|
|
background: #ff5b20;
|
|
}
|
|
</style>
|