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
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-04 10:30:39
* @LastEditTime: 2025-07-04 12:45:13
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
......@@ -75,7 +75,7 @@
<view class="relative p-2">
<image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill"
class="w-full h-36 object-cover rounded-lg" />
<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;">
<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;">
<Heart1 v-if="!favoriteIds.includes(scooter.id)" size="22" :color="'#9ca3af'" />
<HeartFill v-else size="22" :color="'#ef4444'" />
</view>
......
......@@ -44,8 +44,8 @@
</view>
<view class="flex-1 p-3 relative">
<view class="absolute top-3 right-4" @tap.stop="() => toggleFavorite(scooter.id)">
<Heart1 v-if="!favoriteIds.includes(scooter.id)" size="16" color="#9ca3af" />
<HeartFill v-else size="16" color="#ef4444" />
<Heart1 v-if="!favoriteIds.includes(scooter.id)" size="22" color="#9ca3af" />
<HeartFill v-else size="22" color="#ef4444" />
</view>
<text class="font-medium text-sm block">{{ scooter.name }}</text>
<text class="text-xs text-gray-600 mt-1 block">
......@@ -54,9 +54,12 @@
<text v-if="scooter.mileage"> 行驶{{ scooter.mileage }}公里</text>
</text>
<view class="mt-2">
<text class="text-orange-500 font-bold">
<text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
¥{{ scooter.price.toLocaleString() }}
</text>
<text v-if="scooter.isVerified" class="ml-2 text-xs px-1 py-0.5 bg-orange-100 text-orange-500 rounded">
低于市场价 10%
</text>
<text class="text-xs text-gray-500 mt-1 block">{{ scooter.school }}</text>
</view>
</view>
......@@ -94,8 +97,8 @@
<view class="relative p-2">
<image :src="scooter.imageUrl" :alt="scooter.name" mode="aspectFill"
class="w-full h-36 object-cover rounded-lg" />
<view class="absolute top-4 right-4 p-1" @tap.stop="() => toggleFavorite(scooter.id)">
<Heart1 v-if="!favoriteIds.includes(scooter.id)" size="20" color="#ffffff" />
<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;">
<Heart1 v-if="!favoriteIds.includes(scooter.id)" size="20" color="#9ca3af" />
<HeartFill v-else size="20" color="#ef4444" />
</view>
<view v-if="scooter.isVerified"
......@@ -252,6 +255,26 @@ const featuredScooters = ref([
batteryHealth: 95,
mileage: 1500,
imageUrl: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
},
{
id: '3',
name: '绿源电动车',
year: '2024年',
school: '上海同济大学',
price: 6000,
batteryHealth: 98,
mileage: 500,
imageUrl: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
},
{
id: '4',
name: '新日电动车',
year: '2024年',
school: '上海同济大学',
price: 6700,
batteryHealth: 96,
mileage: 500,
imageUrl: 'https://images.unsplash.com/photo-1595941069915-4ebc5197c14a?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
}
])
......@@ -273,9 +296,8 @@ const toggleFavorite = (scooterId) => {
* @param {Object} scooter - 电动车信息
*/
const onProductClick = (scooter) => {
Taro.showToast({
title: `查看${scooter.name}`,
icon: 'none'
Taro.navigateTo({
url: `/pages/productDetail/index?id=${scooter.id}`
})
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 12:45:36
* @LastEditTime: 2025-07-04 13:00:25
* @FilePath: /jgdl/src/pages/productDetail/index.vue
* @Description: 商品详情页
-->
......@@ -49,7 +49,7 @@
<view style="height: 2.55rem;">
<Share size="18" color="#666" style="margin-bottom: 0.05rem;"/>
</view>
<text class="text-xs text-gray-500 mt-1">分享</text>
<text class="text-xs text-gray-500" style="margin-top: 0.35rem;">分享</text>
</button>
<view @tap="toggleFavorite" class="flex flex-col items-center ml-3">
<view class="p-2">
......@@ -67,7 +67,7 @@
<text class="text-lg font-medium mb-3 block">基本信息</text>
<view class="grid grid-cols-2 gap-4">
<view class="flex items-center">
<view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-2">
<view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
<text class="text-orange-500">📅</text>
</view>
<view>
......@@ -76,7 +76,7 @@
</view>
</view>
<view class="flex items-center">
<view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-2">
<view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
<text class="text-orange-500">🔋</text>
</view>
<view>
......@@ -85,7 +85,7 @@
</view>
</view>
<view class="flex items-center">
<view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-2">
<view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
<text class="text-orange-500">🛣️</text>
</view>
<view>
......@@ -94,7 +94,7 @@
</view>
</view>
<view class="flex items-center">
<view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-2">
<view class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-4">
<text class="text-orange-500">⚡</text>
</view>
<view>
......@@ -157,7 +157,7 @@
</view>
<!-- 卖家信息 -->
<view class="seller-info bg-white mt-2 p-4 mb-24">
<view class="seller-info bg-white mt-2 p-4 mb-2">
<text class="text-lg font-medium mb-3 block">卖家信息</text>
<view class="flex items-center justify-between">
<view class="flex items-center">
......@@ -172,38 +172,45 @@
<text class="text-xs text-gray-500 block">{{ product.seller.school }}</text>
</view>
</view>
<view @tap="showWechatModal" class="text-green-500 font-medium flex items-center">
<text>加微信</text>
<Right size="16" />
<view @tap="showWechatModal" class="text-green-500 flex items-center">
<nut-button type="success">
<template #icon>
<Message size="16" />
</template>
<text>加微信</text>
</nut-button>
<!-- <text>加微信</text>
<Right size="16" /> -->
</view>
</view>
</view>
<!-- 底部按钮 -->
<view class="bottom-actions">
<nut-row :gutter="10">
<nut-col :span="12">
<nut-button @click="handleContactSeller"
block
type="default"
shape="round"
style="border-color: #f97316; color: #f97316;"
>
联系卖家
</nut-button>
</nut-col>
<nut-col :span="12">
<nut-button
@click="handlePurchase"
block
type="primary"
shape="round"
style="background-color: #f97316; border-color: #f97316;"
>
我想购买
</nut-button>
</nut-col>
</nut-row>
<nut-row :gutter="10">
<nut-col :span="12">
<nut-button @click="handleContactSeller"
block
type="default"
shape="round"
style="border-color: #f97316; color: #f97316;"
>
联系卖家
</nut-button>
</nut-col>
<nut-col :span="12">
<nut-button
@click="handlePurchase"
block
type="primary"
shape="round"
color="#EB5305"
style="background-color: #f97316; border-color: #f97316;"
>
我想购买
</nut-button>
</nut-col>
</nut-row>
</view>
<!-- 微信号弹框 -->
......@@ -211,10 +218,11 @@
v-model:visible="showWechat"
title="卖家微信号"
:close-on-click-overlay="true"
:no-footer="true"
>
<view class="text-center p-4">
<text class="text-lg font-medium block mb-2">{{ product.seller.wechat }}</text>
<text class="text-sm text-gray-500 block mb-4">长按复制微信号</text>
<!-- <text class="text-sm text-gray-500 block mb-4">长按复制微信号</text> -->
<nut-button
@click="copyWechat"
type="primary"
......@@ -296,14 +304,14 @@
<script setup>
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import { Share, Heart1, HeartFill, Right } from '@nutui/icons-vue-taro'
import { Share, Heart1, HeartFill, Message } from '@nutui/icons-vue-taro'
import payCard from '@/components/payCard.vue'
import avatarImg from '@/assets/images/avatar.png'
// 分享功能
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
// 响应式数据
......