address-list.vue
2.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<template>
<view class="page-shell address-list-page">
<view class="page-blur"></view>
<view class="page-blur-secondary"></view>
<view class="page-blur-tertiary"></view>
<view class="page-content subpage-content">
<view class="subpage-nav">
<view class="subpage-back" @tap="goBack">‹</view>
<view class="subpage-title-wrap">
<text class="subpage-title">地址管理</text>
<text class="subpage-subtitle">让配送信息保持简洁清晰，也保持足够从容</text>
</view>
</view>
<view v-for="item in addresses" :key="item.id" class="address-card glass-card" @tap="editAddress(item)">
<view class="address-top">
<text class="address-name">{{ item.name }}</text>
<text class="address-phone">{{ item.phone }}</text>
<text v-if="item.default" class="default-chip">默认</text>
</view>
<text class="address-tag">{{ item.tag }}</text>
<text class="address-detail">{{ item.full }}</text>
</view>
<view class="primary-button add-button" @tap="addAddress">新增地址</view>
</view>
</view>
</template>
<script>
import { addresses } from '@/data/mock'
export default {
data() {
return {
addresses
}
},
methods: {
goBack() {
uni.navigateBack({ fail: () => uni.redirectTo({ url: '/pages/profile/profile' }) })
},
editAddress(item) {
uni.navigateTo({ url: `/packageProfile/address-edit/address-edit?id=${item.id}` })
},
addAddress() {
uni.navigateTo({ url: '/packageProfile/address-edit/address-edit?mode=create' })
}
}
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';
.address-card {
padding: 30rpx;
margin-bottom: 22rpx;
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
animation: lfRevealUp 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.address-card:nth-of-type(1) { animation-delay: 0.08s; }
.address-card:nth-of-type(2) { animation-delay: 0.16s; }
.address-card:nth-of-type(3) { animation-delay: 0.24s; }
.address-card:active {
transform: translateY(-4rpx);
}
.address-top {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12rpx;
}
.address-name {
font-size: 30rpx;
font-weight: 700;
}
.address-phone {
font-size: 24rpx;
color: $text-secondary;
}
.default-chip {
@include chip-soft;
padding: 8rpx 18rpx;
animation: lfPulseSoft 4.8s ease-in-out infinite;
}
.address-tag,
.address-detail {
display: block;
}
.address-tag {
margin-top: 18rpx;
font-size: 22rpx;
color: $brand-accent;
letter-spacing: 2rpx;
}
.address-detail {
margin-top: 10rpx;
font-size: 25rpx;
line-height: 1.8;
color: $text-primary;
}
.add-button {
width: 100%;
animation: lfRevealUp 780ms cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
</style>