130 lines
4.1 KiB
Vue
130 lines
4.1 KiB
Vue
<template>
|
||
<view class="wrap">
|
||
<view class="header">
|
||
<button class="add" @click="toAdd">新增地址</button>
|
||
</view>
|
||
<view v-if="error" class="error">{{ error }}</view>
|
||
<view v-if="list.length === 0 && !loading" class="empty">暂无地址</view>
|
||
<view v-for="item in list" :key="item.id" class="addr">
|
||
<view class="addr-main">
|
||
<view class="addr-row">
|
||
<text class="name">姓名：{{ item.name || item.realname }}</text>
|
||
</view>
|
||
<view class="addr-row">
|
||
<text class="phone">手机号：{{ item.phone || item.mobile }}</text>
|
||
</view>
|
||
<view class="addr-row" v-if="item.is_default">
|
||
<text class="default">默认</text>
|
||
</view>
|
||
<view class="addr-row">
|
||
<text class="region">省市区：{{ item.province }}{{ item.city }}{{ item.district }}</text>
|
||
</view>
|
||
<view class="addr-row">
|
||
<text class="detail">详细地址：{{ item.address || item.detail }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="addr-actions">
|
||
<button size="mini" @click="toEdit(item)">编辑</button>
|
||
<button size="mini" type="warn" @click="onDelete(item)">删除</button>
|
||
<button size="mini" :disabled="item.is_default" @click="onSetDefault(item)">设为默认</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { listAddresses, deleteAddress, setDefaultAddress } from '../../api/appUser'
|
||
|
||
const list = ref([])
|
||
const loading = ref(false)
|
||
const error = ref('')
|
||
|
||
async function fetchList() {
|
||
const user_id = uni.getStorageSync('user_id')
|
||
const token = uni.getStorageSync('token')
|
||
const phoneBound = !!uni.getStorageSync('phone_bound')
|
||
if (!user_id || !token || !phoneBound) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先登录并绑定手机号',
|
||
confirmText: '去登录',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({ url: '/pages/login/index' })
|
||
}
|
||
}
|
||
})
|
||
return
|
||
}
|
||
loading.value = true
|
||
error.value = ''
|
||
try {
|
||
const data = await listAddresses(user_id)
|
||
list.value = Array.isArray(data) ? data : (data && (data.list || data.items)) || []
|
||
} catch (e) {
|
||
error.value = e && (e.message || e.errMsg) || '获取地址失败'
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function toAdd() {
|
||
uni.removeStorageSync('edit_address')
|
||
uni.navigateTo({ url: '/pages/address/edit' })
|
||
}
|
||
|
||
function toEdit(item) {
|
||
uni.setStorageSync('edit_address', item)
|
||
uni.navigateTo({ url: `/pages/address/edit?id=${item.id}` })
|
||
}
|
||
|
||
function onDelete(item) {
|
||
const user_id = uni.getStorageSync('user_id')
|
||
uni.showModal({
|
||
title: '确认删除',
|
||
content: '确定删除该地址吗？',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
try {
|
||
await deleteAddress(user_id, item.id)
|
||
fetchList()
|
||
} catch (e) {
|
||
uni.showToast({ title: '删除失败', icon: 'none' })
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
async function onSetDefault(item) {
|
||
try {
|
||
const user_id = uni.getStorageSync('user_id')
|
||
await setDefaultAddress(user_id, item.id)
|
||
fetchList()
|
||
} catch (e) {
|
||
uni.showToast({ title: '设置失败', icon: 'none' })
|
||
}
|
||
}
|
||
|
||
onLoad(() => {
|
||
fetchList()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.wrap { padding: 24rpx }
|
||
.header { display: flex; justify-content: flex-end; margin-bottom: 12rpx }
|
||
.add { font-size: 28rpx }
|
||
.addr { background: #fff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04) }
|
||
.addr-row { display: flex; align-items: center; margin-bottom: 8rpx }
|
||
.name { font-size: 30rpx; margin-right: 12rpx }
|
||
.phone { font-size: 28rpx; color: #666 }
|
||
.default { font-size: 24rpx; color: #007AFF; margin-left: 10rpx }
|
||
.region { font-size: 26rpx; color: #666 }
|
||
.detail { font-size: 26rpx; color: #333 }
|
||
.addr-actions { display: flex; justify-content: flex-end; gap: 12rpx; margin-top: 12rpx }
|
||
.empty { text-align: center; color: #999; margin-top: 40rpx }
|
||
.error { color: #e43; margin-bottom: 12rpx }
|
||
</style> |