consumer模块完成度95%,准备部署消费者端测试
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<template>
|
||||
<view class="address-list-page">
|
||||
<view class="address-list">
|
||||
<view v-if="addresses.length === 0" class="empty-state">
|
||||
<text class="empty-icon">📍</text>
|
||||
<text class="empty-text">暂无收货地址</text>
|
||||
<text class="empty-icon">馃搷</text>
|
||||
<text class="empty-text">鏆傛棤鏀惰揣鍦板潃</text>
|
||||
</view>
|
||||
|
||||
<view v-else v-for="(item, index) in addresses" :key="item.id" class="address-item" @click="selectAddress(item)">
|
||||
@@ -11,24 +11,24 @@
|
||||
<view class="item-header">
|
||||
<text class="user-name">{{ item.name }}</text>
|
||||
<text class="user-phone">{{ item.phone }}</text>
|
||||
<text v-if="item.isDefault" class="default-tag">默认</text>
|
||||
<text v-if="item.isDefault" class="default-tag">榛樿</text>
|
||||
<text v-if="item.label" class="label-tag">{{ item.label }}</text>
|
||||
</view>
|
||||
<text class="address-text">{{ getFullAddress(item) }}</text>
|
||||
</view>
|
||||
<view class="item-actions">
|
||||
<view class="action-item" @click.stop="editAddress(item.id)">
|
||||
<text class="action-icon">📝</text>
|
||||
<text class="action-icon">馃摑</text>
|
||||
</view>
|
||||
<view class="action-item" @click.stop="deleteAddress(item.id)">
|
||||
<text class="action-icon"><EFBFBD>️</text>
|
||||
<text class="action-icon">锟斤笍</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer-btn">
|
||||
<button class="add-btn" @click="addAddress">新建收货地址</button>
|
||||
<button class="add-btn" @click="addAddress">鏂板缓鏀惰揣鍦板潃</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -81,18 +81,18 @@ const loadAddresses = () => {
|
||||
addresses.value = []
|
||||
}
|
||||
} else {
|
||||
// 初始Mock数据
|
||||
// 鍒濆Mock鏁版嵁
|
||||
addresses.value = [
|
||||
{
|
||||
id: 'addr_001',
|
||||
name: '张三',
|
||||
name: '寮犱笁',
|
||||
phone: '13800138000',
|
||||
province: '北京市',
|
||||
city: '北京市',
|
||||
district: '朝阳区',
|
||||
detail: '三里屯SOHO A座',
|
||||
province: '鍖椾含甯?,
|
||||
city: '鍖椾含甯?,
|
||||
district: '鏈濋槼鍖?,
|
||||
detail: '涓夐噷灞疭OHO A搴?,
|
||||
isDefault: true,
|
||||
label: '公司'
|
||||
label: '鍏徃'
|
||||
}
|
||||
]
|
||||
uni.setStorageSync('addresses', JSON.stringify(addresses.value))
|
||||
@@ -109,11 +109,11 @@ const addAddress = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 删除地址
|
||||
// 鍒犻櫎鍦板潃
|
||||
const deleteAddress = (id: string) => {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定要删除该地址吗?',
|
||||
title: '鎻愮ず',
|
||||
content: '纭畾瑕佸垹闄よ鍦板潃鍚楋紵',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const index = addresses.value.findIndex(addr => addr.id === id)
|
||||
@@ -121,7 +121,7 @@ const deleteAddress = (id: string) => {
|
||||
addresses.value.splice(index, 1)
|
||||
uni.setStorageSync('addresses', JSON.stringify(addresses.value))
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
title: '鍒犻櫎鎴愬姛',
|
||||
icon: 'success'
|
||||
})
|
||||
}
|
||||
@@ -160,7 +160,7 @@ const selectAddress = (item: Address) => {
|
||||
padding: 10px;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: column; /* 竖向排列图标 */
|
||||
flex-direction: column; /* 绔栧悜鎺掑垪鍥炬爣 */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
@@ -176,7 +176,7 @@ const selectAddress = (item: Address) => {
|
||||
padding-bottom: calc(10px + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
|
||||
display: flex;
|
||||
justify-content: center; /* 居中显示 */
|
||||
justify-content: center; /* 灞呬腑鏄剧ず */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -188,11 +188,11 @@ const selectAddress = (item: Address) => {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
border: none;
|
||||
width: 100%; /* 默认占满 */
|
||||
width: 100%; /* 榛樿鍗犳弧 */
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 响应式布局优化 */
|
||||
/* 鍝嶅簲寮忓竷灞€浼樺寲 */
|
||||
@media screen and (min-width: 768px) {
|
||||
.address-list {
|
||||
max-width: 800px;
|
||||
@@ -209,11 +209,13 @@ const selectAddress = (item: Address) => {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
|
||||
border-radius: 12px 12px 0 0; /* 桌面端加点圆角更美观 */
|
||||
border-radius: 12px 12px 0 0; /* 妗岄潰绔姞鐐瑰渾瑙掓洿缇庤 */
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 300px; /* 桌面端限制宽度 */
|
||||
width: 300px; /* 妗岄潰绔檺鍒跺搴?*/
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user