91 lines
2.8 KiB
Vue
91 lines
2.8 KiB
Vue
<template>
|
|
<view class="page" :style="themePageStyle">
|
|
<ThemeNavbar title="收货地址" />
|
|
<view
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
class="card"
|
|
:style="{ background: themeSurface }"
|
|
@tap="pick(item)"
|
|
>
|
|
<view class="name" :style="{ color: themeText }">
|
|
{{ item.name }} {{ item.phone }}
|
|
<text v-if="item.is_default === 1" class="tag" :style="{ color: themePrimary }">默认</text>
|
|
</view>
|
|
<view class="addr" :style="{ color: themeTextSoft }">{{ item.address }}</view>
|
|
<view class="ops">
|
|
<text @tap.stop="edit(item)">编辑</text>
|
|
<text @tap.stop="setDefault(item)">设为默认</text>
|
|
<text @tap.stop="remove(item)">删除</text>
|
|
</view>
|
|
</view>
|
|
<view class="empty" v-if="!list.length" :style="{ color: themeTextSoft }">还没有地址</view>
|
|
<button class="add" :style="{ background: themePrimary, color: themeSurface }" @tap="edit({})">新增地址</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { deleteAddressApi, getAddressListApi, setDefaultAddressApi } from '@/api/page/address'
|
|
import ThemeNavbar from '@/components/theme/ThemeNavbar.vue'
|
|
import themeMixin from '@/mixins/theme'
|
|
|
|
export default {
|
|
components: { ThemeNavbar },
|
|
mixins: [themeMixin],
|
|
data() {
|
|
return { list: [], pickMode: false }
|
|
},
|
|
onLoad(options) {
|
|
this.pickMode = options.pick === '1'
|
|
},
|
|
async onShow() {
|
|
await this.applyThemeOnShow()
|
|
this.load()
|
|
},
|
|
methods: {
|
|
load() {
|
|
getAddressListApi().then((res) => {
|
|
this.list = res || []
|
|
})
|
|
},
|
|
pick(item) {
|
|
if (!this.pickMode) return
|
|
const pages = getCurrentPages()
|
|
const prev = pages[pages.length - 2]
|
|
if (prev && prev.$vm && prev.$vm.onPickAddress) {
|
|
prev.$vm.onPickAddress(item)
|
|
}
|
|
uni.navigateBack()
|
|
},
|
|
edit(item) {
|
|
const id = item.id ? `?id=${item.id}` : ''
|
|
uni.navigateTo({ url: `/pkg-more/address/form${id}` })
|
|
},
|
|
setDefault(item) {
|
|
setDefaultAddressApi(item.id).then(() => this.load())
|
|
},
|
|
remove(item) {
|
|
uni.showModal({
|
|
title: '删除地址',
|
|
content: '确定删除该地址吗？',
|
|
success: (res) => {
|
|
if (!res.confirm) return
|
|
deleteAddressApi(item.id).then(() => this.load())
|
|
},
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page { min-height: 100vh; padding-bottom: 160rpx; }
|
|
.card { margin: 24rpx; padding: 24rpx; border-radius: 16rpx; }
|
|
.name { font-size: 30rpx; }
|
|
.tag { margin-left: 12rpx; font-size: 22rpx; }
|
|
.addr { font-size: 26rpx; margin-top: 8rpx; }
|
|
.ops { display: flex; gap: 24rpx; margin-top: 16rpx; font-size: 24rpx; color: #999; }
|
|
.empty { text-align: center; padding: 80rpx 0; }
|
|
.add { position: fixed; left: 32rpx; right: 32rpx; bottom: 40rpx; }
|
|
</style>
|