store-list.vue
3.49 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<template>
<view class="page-shell store-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 class="subpage-hero glass-card">
<text class="hero-kicker">STORE COLLECTION</text>
<text class="hero-title">为每一次到店，预留恰好的距离与氛围</text>
<text class="hero-desc">不同门店有各自的护理节奏与空间气质，你可以先看看，再决定这次想去哪里。</text>
</view>
<view v-for="store in stores" :key="store.id" class="store-card glass-card" @tap="goDetail(store)">
<image class="store-image" :src="store.cover" mode="aspectFill" />
<view class="store-body">
<view class="store-top">
<text class="store-name">{{ store.name }}</text>
<text class="store-distance">{{ store.distance }}</text>
</view>
<text class="store-address">{{ store.address }}</text>
<view class="meta-grid store-pills">
<text class="meta-pill">{{ store.tag }}</text>
<text class="meta-pill rose">{{ store.hours }}</text>
</view>
<view class="store-actions">
<view class="mini-button" @tap.stop="callStore(store.phone)">电话</view>
<view class="mini-button" @tap.stop="openMap(store)">导航</view>
<view class="mini-button primary-mini" @tap.stop="bookStore(store)">预约</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { stores } from '@/data/mock'
export default {
data() {
return {
stores
}
},
methods: {
goBack() {
uni.navigateBack({
fail: () => {
uni.redirectTo({ url: '/pages/home/home' })
}
})
},
goDetail(store) {
uni.navigateTo({
url: `/pages/store-detail/store-detail?id=${store.id}`
})
},
callStore(phone) {
uni.makePhoneCall({ phoneNumber: phone })
},
openMap(store) {
uni.showToast({ title: `已为您准备 ${store.name} 导航`, icon: 'none' })
},
bookStore(store) {
uni.redirectTo({ url: `/pages/booking/booking?storeId=${store.id}` })
}
}
}
</script>
<style lang="scss" scoped>
@import '@/styles/mixins.scss';
@import '@/styles/subpage.scss';
.store-card {
overflow: hidden;
margin-bottom: 24rpx;
}
.store-image {
width: 100%;
height: 248rpx;
display: block;
}
.store-body {
padding: 30rpx;
}
.store-top {
display: flex;
justify-content: space-between;
gap: 16rpx;
}
.store-name {
flex: 1;
font-size: 34rpx;
line-height: 1.4;
font-weight: 700;
}
.store-distance {
font-size: 24rpx;
color: $brand-accent;
}
.store-address {
display: block;
margin-top: 14rpx;
font-size: 24rpx;
color: $text-secondary;
line-height: 1.7;
}
.store-pills {
margin-top: 18rpx;
}
.store-actions {
display: flex;
gap: 14rpx;
margin-top: 22rpx;
}
.mini-button {
@include secondary-button;
flex: 1;
min-width: 0;
height: 72rpx;
font-size: 24rpx;
}
.primary-mini {
color: #fff;
background: $brand-primary-deep;
}
</style>