Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
54c7307b 1 parent 0e226c80

feat: 优化电动车列表和详情页的UI及交互 

- 调整收藏按钮样式和位置，统一视觉风格
- 增加电动车列表数据
- 修改详情页的布局和按钮样式
- 将点击事件改为跳转至详情页
- 优化卖家信息展示和联系方式按钮
Inline Side-by-side
Showing 3 changed files with 77 additions and 47 deletions
1 <!-- 1 <!--
2 * @Date: 2025-06-28 10:33:00 2 * @Date: 2025-06-28 10:33:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-04 10:30:39 4 + * @LastEditTime: 2025-07-04 12:45:13
5 * @FilePath: /jgdl/src/pages/index/index.vue 5 * @FilePath: /jgdl/src/pages/index/index.vue
6 * @Description: 捡个电驴首页 6 * @Description: 捡个电驴首页
7 --> 7 -->
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
75 <view class="relative p-2"> 75 <view class="relative p-2">
76 <image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill" 76 <image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill"
77 class="w-full h-36 object-cover rounded-lg" /> 77 class="w-full h-36 object-cover rounded-lg" />
78 - <view class="absolute top-4 right-3 w-7 h-7 rounded-full bg-white bg-opacity-90" @tap.stop="() => toggleFavorite(scooter.id)" style="padding-top: 12rpx; padding-left: 10rpx;"> 78 + <view class="absolute top-4 right-3 w-7 h-7 rounded-full bg-white bg-opacity-80" @tap.stop="() => toggleFavorite(scooter.id)" style="padding-top: 12rpx; padding-left: 10rpx;">
79 <Heart1 v-if="!favoriteIds.includes(scooter.id)" size="22" :color="'#9ca3af'" /> 79 <Heart1 v-if="!favoriteIds.includes(scooter.id)" size="22" :color="'#9ca3af'" />
80 <HeartFill v-else size="22" :color="'#ef4444'" /> 80 <HeartFill v-else size="22" :color="'#ef4444'" />
81 </view> 81 </view>
......
...@@ -44,8 +44,8 @@ ...@@ -44,8 +44,8 @@
44 </view> 44 </view>
45 <view class="flex-1 p-3 relative"> 45 <view class="flex-1 p-3 relative">
46 <view class="absolute top-3 right-4" @tap.stop="() => toggleFavorite(scooter.id)"> 46 <view class="absolute top-3 right-4" @tap.stop="() => toggleFavorite(scooter.id)">
47 - <Heart1 v-if="!favoriteIds.includes(scooter.id)" size="16" color="#9ca3af" /> 47 + <Heart1 v-if="!favoriteIds.includes(scooter.id)" size="22" color="#9ca3af" />
48 - <HeartFill v-else size="16" color="#ef4444" /> 48 + <HeartFill v-else size="22" color="#ef4444" />
49 </view> 49 </view>
50 <text class="font-medium text-sm block">{{ scooter.name }}</text> 50 <text class="font-medium text-sm block">{{ scooter.name }}</text>
51 <text class="text-xs text-gray-600 mt-1 block"> 51 <text class="text-xs text-gray-600 mt-1 block">
...@@ -54,9 +54,12 @@ ...@@ -54,9 +54,12 @@
54 <text v-if="scooter.mileage"> 行驶{{ scooter.mileage }}公里</text> 54 <text v-if="scooter.mileage"> 行驶{{ scooter.mileage }}公里</text>
55 </text> 55 </text>
56 <view class="mt-2"> 56 <view class="mt-2">
57 - <text class="text-orange-500 font-bold"> 57 + <text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
58 ¥{{ scooter.price.toLocaleString() }} 58 ¥{{ scooter.price.toLocaleString() }}
59 </text> 59 </text>
60 + <text v-if="scooter.isVerified" class="ml-2 text-xs px-1 py-0.5 bg-orange-100 text-orange-500 rounded">
61 + 低于市场价 10%
62 + </text>
60 <text class="text-xs text-gray-500 mt-1 block">{{ scooter.school }}</text> 63 <text class="text-xs text-gray-500 mt-1 block">{{ scooter.school }}</text>
61 </view> 64 </view>
62 </view> 65 </view>
...@@ -94,8 +97,8 @@ ...@@ -94,8 +97,8 @@
94 <view class="relative p-2"> 97 <view class="relative p-2">
95 <image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill" 98 <image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill"
96 class="w-full h-36 object-cover rounded-lg" /> 99 class="w-full h-36 object-cover rounded-lg" />
97 - <view class="absolute top-4 right-4 p-1" @tap.stop="() => toggleFavorite(scooter.id)"> 100 + <view class="absolute top-4 right-3 w-7 h-7 rounded-full bg-white bg-opacity-80" @tap.stop="() => toggleFavorite(scooter.id)" style="padding-top: 12rpx; padding-left: 10rpx;">
98 - <Heart1 v-if="!favoriteIds.includes(scooter.id)" size="20" color="#ffffff" /> 101 + <Heart1 v-if="!favoriteIds.includes(scooter.id)" size="20" color="#9ca3af" />
99 <HeartFill v-else size="20" color="#ef4444" /> 102 <HeartFill v-else size="20" color="#ef4444" />
100 </view> 103 </view>
101 <view v-if="scooter.isVerified" 104 <view v-if="scooter.isVerified"
...@@ -252,6 +255,26 @@ const featuredScooters = ref([ ...@@ -252,6 +255,26 @@ const featuredScooters = ref([
252 batteryHealth: 95, 255 batteryHealth: 95,
253 mileage: 1500, 256 mileage: 1500,
254 imageUrl: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60' 257 imageUrl: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
258 + },
259 + {
260 + id: '3',
261 + name: '绿源电动车',
262 + year: '2024年',
263 + school: '上海同济大学',
264 + price: 6000,
265 + batteryHealth: 98,
266 + mileage: 500,
267 + imageUrl: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
268 + },
269 + {
270 + id: '4',
271 + name: '新日电动车',
272 + year: '2024年',
273 + school: '上海同济大学',
274 + price: 6700,
275 + batteryHealth: 96,
276 + mileage: 500,
277 + imageUrl: 'https://images.unsplash.com/photo-1595941069915-4ebc5197c14a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
255 } 278 }
256 ]) 279 ])
257 280
...@@ -273,9 +296,8 @@ const toggleFavorite = (scooterId) => { ...@@ -273,9 +296,8 @@ const toggleFavorite = (scooterId) => {
273 * @param {Object} scooter - 电动车信息 296 * @param {Object} scooter - 电动车信息
274 */ 297 */
275 const onProductClick = (scooter) => { 298 const onProductClick = (scooter) => {
276 - Taro.showToast({ 299 + Taro.navigateTo({
277 - title: `查看${scooter.name}`, 300 + url: `/pages/productDetail/index?id=${scooter.id}`
278 - icon: 'none'
279 }) 301 })
280 } 302 }
281 303
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-03 12:45:36 4 + * @LastEditTime: 2025-07-04 13:00:25
5 * @FilePath: /jgdl/src/pages/productDetail/index.vue 5 * @FilePath: /jgdl/src/pages/productDetail/index.vue
6 * @Description: 商品详情页 6 * @Description: 商品详情页
7 --> 7 -->
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
49 <view style="height: 2.55rem;"> 49 <view style="height: 2.55rem;">
50 <Share size="18" color="#666" style="margin-bottom: 0.05rem;"/> 50 <Share size="18" color="#666" style="margin-bottom: 0.05rem;"/>
51 </view> 51 </view>
52 - <text class="text-xs text-gray-500 mt-1">分享</text> 52 + <text class="text-xs text-gray-500" style="margin-top: 0.35rem;">分享</text>
53 </button> 53 </button>
54 <view @tap="toggleFavorite" class="flex flex-col items-center ml-3"> 54 <view @tap="toggleFavorite" class="flex flex-col items-center ml-3">
55 <view class="p-2"> 55 <view class="p-2">
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
67 <text class="text-lg font-medium mb-3 block">基本信息</text> 67 <text class="text-lg font-medium mb-3 block">基本信息</text>
68 <view class="grid grid-cols-2 gap-4"> 68 <view class="grid grid-cols-2 gap-4">
69 <view class="flex items-center"> 69 <view class="flex items-center">
70 - <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-2"> 70 + <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
71 <text class="text-orange-500">📅</text> 71 <text class="text-orange-500">📅</text>
72 </view> 72 </view>
73 <view> 73 <view>
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
76 </view> 76 </view>
77 </view> 77 </view>
78 <view class="flex items-center"> 78 <view class="flex items-center">
79 - <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-2"> 79 + <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
80 <text class="text-orange-500">🔋</text> 80 <text class="text-orange-500">🔋</text>
81 </view> 81 </view>
82 <view> 82 <view>
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
85 </view> 85 </view>
86 </view> 86 </view>
87 <view class="flex items-center"> 87 <view class="flex items-center">
88 - <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-2"> 88 + <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
89 <text class="text-orange-500">🛣️</text> 89 <text class="text-orange-500">🛣️</text>
90 </view> 90 </view>
91 <view> 91 <view>
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
94 </view> 94 </view>
95 </view> 95 </view>
96 <view class="flex items-center"> 96 <view class="flex items-center">
97 - <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-2"> 97 + <view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
98 <text class="text-orange-500">⚡</text> 98 <text class="text-orange-500">⚡</text>
99 </view> 99 </view>
100 <view> 100 <view>
...@@ -157,7 +157,7 @@ ...@@ -157,7 +157,7 @@
157 </view> 157 </view>
158 158
159 <!-- 卖家信息 --> 159 <!-- 卖家信息 -->
160 - <view class="seller-info bg-white mt-2 p-4 mb-24"> 160 + <view class="seller-info bg-white mt-2 p-4 mb-2">
161 <text class="text-lg font-medium mb-3 block">卖家信息</text> 161 <text class="text-lg font-medium mb-3 block">卖家信息</text>
162 <view class="flex items-center justify-between"> 162 <view class="flex items-center justify-between">
163 <view class="flex items-center"> 163 <view class="flex items-center">
...@@ -172,38 +172,45 @@ ...@@ -172,38 +172,45 @@
172 <text class="text-xs text-gray-500 block">{{ product.seller.school }}</text> 172 <text class="text-xs text-gray-500 block">{{ product.seller.school }}</text>
173 </view> 173 </view>
174 </view> 174 </view>
175 - <view @tap="showWechatModal" class="text-green-500 font-medium flex items-center"> 175 + <view @tap="showWechatModal" class="text-green-500 flex items-center">
176 - <text>加微信</text> 176 + <nut-button type="success">
177 - <Right size="16" /> 177 + <template #icon>
178 + <Message size="16" />
179 + </template>
180 + <text>加微信</text>
181 + </nut-button>
182 + <!-- <text>加微信</text>
183 + <Right size="16" /> -->
178 </view> 184 </view>
179 </view> 185 </view>
180 </view> 186 </view>
181 187
182 <!-- 底部按钮 --> 188 <!-- 底部按钮 -->
183 <view class="bottom-actions"> 189 <view class="bottom-actions">
184 - <nut-row :gutter="10"> 190 + <nut-row :gutter="10">
185 - <nut-col :span="12"> 191 + <nut-col :span="12">
186 - <nut-button @click="handleContactSeller" 192 + <nut-button @click="handleContactSeller"
187 - block 193 + block
188 - type="default" 194 + type="default"
189 - shape="round" 195 + shape="round"
190 - style="border-color: #f97316; color: #f97316;" 196 + style="border-color: #f97316; color: #f97316;"
191 - > 197 + >
192 - 联系卖家 198 + 联系卖家
193 - </nut-button> 199 + </nut-button>
194 - </nut-col> 200 + </nut-col>
195 - <nut-col :span="12"> 201 + <nut-col :span="12">
196 - <nut-button 202 + <nut-button
197 - @click="handlePurchase" 203 + @click="handlePurchase"
198 - block 204 + block
199 - type="primary" 205 + type="primary"
200 - shape="round" 206 + shape="round"
201 - style="background-color: #f97316; border-color: #f97316;" 207 + color="#EB5305"
202 - > 208 + style="background-color: #f97316; border-color: #f97316;"
203 - 我想购买 209 + >
204 - </nut-button> 210 + 我想购买
205 - </nut-col> 211 + </nut-button>
206 - </nut-row> 212 + </nut-col>
213 + </nut-row>
207 </view> 214 </view>
208 215
209 <!-- 微信号弹框 --> 216 <!-- 微信号弹框 -->
...@@ -211,10 +218,11 @@ ...@@ -211,10 +218,11 @@
211 v-model:visible="showWechat" 218 v-model:visible="showWechat"
212 title="卖家微信号" 219 title="卖家微信号"
213 :close-on-click-overlay="true" 220 :close-on-click-overlay="true"
221 + :no-footer="true"
214 > 222 >
215 <view class="text-center p-4"> 223 <view class="text-center p-4">
216 <text class="text-lg font-medium block mb-2">{{ product.seller.wechat }}</text> 224 <text class="text-lg font-medium block mb-2">{{ product.seller.wechat }}</text>
217 - <text class="text-sm text-gray-500 block mb-4">长按复制微信号</text> 225 + <!-- <text class="text-sm text-gray-500 block mb-4">长按复制微信号</text> -->
218 <nut-button 226 <nut-button
219 @click="copyWechat" 227 @click="copyWechat"
220 type="primary" 228 type="primary"
...@@ -296,14 +304,14 @@ ...@@ -296,14 +304,14 @@
296 <script setup> 304 <script setup>
297 import { ref } from 'vue' 305 import { ref } from 'vue'
298 import Taro from '@tarojs/taro' 306 import Taro from '@tarojs/taro'
299 -import { Share, Heart1, HeartFill, Right } from '@nutui/icons-vue-taro' 307 +import { Share, Heart1, HeartFill, Message } from '@nutui/icons-vue-taro'
300 import payCard from '@/components/payCard.vue' 308 import payCard from '@/components/payCard.vue'
301 import avatarImg from '@/assets/images/avatar.png' 309 import avatarImg from '@/assets/images/avatar.png'
302 310
303 // 分享功能 311 // 分享功能
304 wx.showShareMenu({ 312 wx.showShareMenu({
305 - withShareTicket: true, 313 + withShareTicket: true,
306 - menus: ['shareAppMessage', 'shareTimeline'] 314 + menus: ['shareAppMessage', 'shareTimeline']
307 }) 315 })
308 316
309 // 响应式数据 317 // 响应式数据
......