92 lines
3.0 KiB
Vue
92 lines
3.0 KiB
Vue
<template>
|
|
<view class="addr-list-page">
|
|
<uni-nav-bar left-icon="left" title="地址管理" fixed color="#8B2316" height="180rpx" :border="false" backgroundColor="#ffffff" @clickLeft="goBack" />
|
|
|
|
<scroll-view scroll-y class="list-wrap">
|
|
<view v-if="!list.length" class="empty">暂无收货地址</view>
|
|
<view v-for="item in list" :key="item.id" class="addr-item" @click="select(item)">
|
|
<view class="addr-main">
|
|
<view class="row">
|
|
<text class="name">{{ item.receiver }}</text>
|
|
<text class="mobile">{{ item.mobile }}</text>
|
|
</view>
|
|
<view class="row small">{{ item.fullAddress || (item.region + ' ' + item.detail) }}</view>
|
|
</view>
|
|
<view class="addr-actions">
|
|
<text class="act" @click.stop="edit(item)">编辑</text>
|
|
<text class="act danger" @click.stop="remove(item)">删除</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view class="footer-bar">
|
|
<view class="add-btn" @click="addNew">新增地址</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
|
|
const STORAGE_KEY = 'goods_addresses'
|
|
const SELECTED_KEY = 'goods_selected_address'
|
|
const list = ref([])
|
|
|
|
const goBack = () => uni.navigateBack()
|
|
|
|
const load = () => {
|
|
try {
|
|
const cached = uni.getStorageSync(STORAGE_KEY)
|
|
list.value = Array.isArray(cached) ? cached : []
|
|
} catch (e) {
|
|
list.value = []
|
|
}
|
|
}
|
|
|
|
onShow(() => load())
|
|
|
|
const addNew = () => uni.navigateTo({ url: '/pages_goods/exchange/address' })
|
|
|
|
const edit = (item) => {
|
|
uni.navigateTo({ url: `/pages_goods/exchange/address?id=${item.id}` })
|
|
}
|
|
|
|
const remove = (item) => {
|
|
uni.showModal({
|
|
title: '删除地址',
|
|
content: '确定删除该地址吗？',
|
|
success: (r) => {
|
|
if (r.confirm) {
|
|
list.value = list.value.filter(a => a.id !== item.id)
|
|
uni.setStorageSync(STORAGE_KEY, list.value)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const select = (item) => {
|
|
uni.setStorageSync(SELECTED_KEY, item)
|
|
uni.showToast({ title: '已选择该地址', icon: 'none' })
|
|
setTimeout(() => uni.navigateBack(), 300)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.addr-list-page { min-height: 100vh; background: #fff; }
|
|
.list-wrap { position: absolute; top: 180rpx; bottom: 120rpx; left: 0; right: 0; }
|
|
.empty { text-align: center; color: #999; padding: 80rpx 24rpx; }
|
|
.addr-item { display: flex; align-items: center; justify-content: space-between; padding: 24rpx; border-bottom: 1rpx solid #f0f0f0; }
|
|
.addr-main { flex: 1; }
|
|
.row { display: flex; align-items: center; gap: 20rpx; margin-bottom: 8rpx; }
|
|
.row.small { color: #666; font-size: 26rpx; }
|
|
.name { color: #333; font-size: 30rpx; }
|
|
.mobile { color: #333; font-size: 30rpx; }
|
|
.addr-actions { display: flex; align-items: center; gap: 24rpx; margin-left: 24rpx; }
|
|
.act { color: #38c1b1; font-size: 28rpx; }
|
|
.act.danger { color: #ff4d4f; }
|
|
.footer-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 120rpx; background: #27c5b8; display: flex; align-items: center; justify-content: center; }
|
|
.add-btn { color: #fff; font-size: 34rpx; font-weight: 700; }
|
|
</style>
|
|
|