Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
bab9e7c7 1 parent c5a7b236

feat: 添加精品推荐页面及导航功能 

实现精品推荐页面，包含车辆列表展示、筛选和收藏功能
在首页和帖子页添加跳转到精品推荐页面的导航
更新搜索框占位文本和收藏按钮样式
Expand all
Inline Side-by-side
Showing 8 changed files with 339 additions and 22 deletions
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-04 10:34:25
* @LastEditTime: 2025-07-04 16:18:21
* @FilePath: /jgdl/src/app.config.js
* @Description: 配置文件
*/
......@@ -27,6 +27,7 @@ export default {
'pages/feedBack/index',
'pages/helpCenter/index',
'pages/search/index',
'pages/recommendCarList/index',
],
subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
{
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 21:10:36
* @LastEditTime: 2025-07-04 16:27:02
* @FilePath: /jgdl/src/pages/goodCarList/index.vue
* @Description: 特价好车页面
-->
......@@ -17,7 +17,7 @@
</nut-col>
<nut-col span="18">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
<nut-searchbar v-model="searchValue" placeholder="搜索商品名称、品牌、型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
</template>
......@@ -67,8 +67,8 @@
</view>
<view class="flex-1 p-3 relative">
<view class="absolute top-3 right-4" @tap.stop="() => toggleFavorite(car.id)">
<Heart1 v-if="!favoriteIds.includes(car.id)" size="16" color="#9ca3af" />
<HeartFill v-else size="16" color="#ef4444" />
<Heart1 v-if="!favoriteIds.includes(car.id)" size="22" color="#9ca3af" />
<HeartFill v-else size="22" color="#ef4444" />
</view>
<text class="font-medium text-sm block">{{ car.name }}</text>
<text class="text-xs text-gray-600 mt-1 block">
......@@ -82,7 +82,7 @@
<text v-if="car.originalPrice" class="text-xs text-gray-400 line-through mr-2">
¥{{ car.originalPrice.toLocaleString() }}
</text>
<text class="text-orange-500 font-bold">
<text class="text-orange-500 font-bold" style="font-size: 1.2rem;">
¥{{ car.price.toLocaleString() }}
</text>
</view>
......@@ -111,7 +111,7 @@
</view>
<!-- 自定义TabBar -->
<TabBar />
<!-- <TabBar /> -->
<!-- 成功提示 -->
<nut-toast
......
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-04 16:04:15
* @LastEditTime: 2025-07-04 16:26:05
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
......@@ -64,10 +64,10 @@
<view class="px-4 mt-4">
<view class="flex justify-between items-center mb-2">
<text class="text-lg font-medium">精品推荐</text>
<!-- <view class="text-sm text-gray-500 flex items-center">
<view class="text-sm text-gray-500 flex items-center" @tap="onMoreRecommendClick">
<text>更多</text>
<RectRight size="12" />
</view> -->
</view>
</view>
<view class="grid grid-cols-2 gap-3">
<view v-for="scooter in featuredScooters" :key="scooter.id"
......@@ -284,6 +284,12 @@ const toggleFavorite = (scooterId) => {
}
}
const onMoreRecommendClick = () => {
Taro.navigateTo({
url: '/pages/recommendCarList/index'
})
}
/**
* 点击产品卡片
* @param {Object} scooter - 电动车信息
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-02 22:59:12
* @LastEditTime: 2025-07-04 16:26:55
* @FilePath: /jgdl/src/pages/newCarList/index.vue
* @Description: 最新上架页面
-->
......@@ -17,7 +17,7 @@
</nut-col>
<nut-col span="18">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索品牌型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
<nut-searchbar v-model="searchValue" placeholder="搜索商品名称、品牌、型号" @blur="onBlurSearch" shape="round" background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
</template>
......@@ -62,8 +62,8 @@
</view>
<view class="flex-1 p-3 relative">
<view class="absolute top-3 right-4" @tap.stop="() => toggleFavorite(car.id)">
<Heart1 v-if="!favoriteIds.includes(car.id)" size="16" color="#9ca3af" />
<HeartFill v-else size="16" color="#ef4444" />
<Heart1 v-if="!favoriteIds.includes(car.id)" size="22" color="#9ca3af" />
<HeartFill v-else size="22" color="#ef4444" />
</view>
<text class="font-medium text-sm block">{{ car.name }}</text>
<text class="text-xs text-gray-600 mt-1 block">
......@@ -72,7 +72,7 @@
<text v-if="car.mileage"> 行驶{{ car.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;">
¥{{ car.price.toLocaleString() }}
</text>
<text class="text-xs text-gray-500 mt-1 block">{{ car.school }}</text>
......@@ -100,7 +100,7 @@
</view>
<!-- 自定义TabBar -->
<TabBar />
<!-- <TabBar /> -->
<!-- 成功提示 -->
<nut-toast
......
......@@ -86,10 +86,10 @@
<view class="mt-6 mb-20 ml-4 mr-4">
<view class="flex justify-between items-center mb-3">
<text class="text-lg font-medium">精品推荐</text>
<!-- <view class="text-sm text-gray-500 flex items-center" @tap="onViewMore">
<view class="text-sm text-gray-500 flex items-center" @tap="onMoreRecommendClick">
<text>更多</text>
<RectRight size="12" />
</view> -->
</view>
</view>
<view class="grid grid-cols-2 gap-3">
<view v-for="scooter in featuredScooters" :key="scooter.id"
......@@ -304,10 +304,9 @@ const onProductClick = (scooter) => {
/**
* 查看更多点击事件
*/
const onViewMore = () => {
Taro.showToast({
title: '查看更多精品推荐',
icon: 'none'
const onMoreRecommendClick = () => {
Taro.navigateTo({
url: '/pages/recommendCarList/index'
})
}
......
/*
* @Date: 2025-07-02 22:16:48
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-02 22:17:11
* @FilePath: /jgdl/src/pages/newCarList/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '',
usingComponents: {
},
}
/* 精品推荐页面样式 */
.recommend-car-list {
width: 100%;
box-sizing: border-box;
/* 滚动条样式 */
&::-webkit-scrollbar {
width: 6rpx;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3rpx;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3rpx;
&:hover {
background: #a8a8a8;
}
}
}
/* 车辆卡片样式 */
.recommend-car-list .bg-white {
background-color: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
overflow: hidden;
margin-bottom: 24rpx;
transition: all 0.3s ease;
}
.recommend-car-list .bg-white:hover {
transform: translateY(-2rpx);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
border-color: #e5e7eb;
}
.recommend-car-list .bg-white:active {
transform: scale(0.98);
transition: transform 0.1s ease;
}
/* 车辆图片容器 */
.recommend-car-list .w-32 {
width: 200rpx;
height: 150rpx;
flex-shrink: 0;
}
.recommend-car-list image {
border-radius: 12rpx;
object-fit: cover;
}
/* 推荐标识样式优化 */
.recommend-car-list .absolute.bottom-3.right-3 {
background: linear-gradient(45deg, #ef4444, #dc2626);
box-shadow: 0 2rpx 4rpx rgba(239, 68, 68, 0.3);
border-radius: 8rpx;
padding: 4rpx 8rpx;
font-size: 20rpx;
font-weight: 600;
}
/* 车辆信息区域 */
.recommend-car-list .flex-1 {
flex: 1;
min-width: 0;
}
/* 收藏按钮样式 */
.recommend-car-list .absolute {
transition: transform 0.2s ease;
}
.recommend-car-list .absolute:active {
transform: scale(0.9);
}
/* 价格样式 */
.recommend-car-list .text-orange-500 {
color: #f97316;
font-weight: bold;
}
/* 推荐理由样式 */
.recommend-car-list .text-green-600 {
color: #10b981;
font-weight: 500;
}
/* 文字省略 */
.recommend-car-list .font-medium {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 加载状态样式 */
.loading-container {
padding: 32rpx 0 100rpx 0; /* 增加底部间距避免被TabBar遮挡 */
text-align: center;
.loading-text {
color: #9ca3af;
font-size: 28rpx;
}
}
/* 无更多数据样式 */
.no-more-container {
padding: 32rpx 0 100rpx 0; /* 增加底部间距避免被TabBar遮挡 */
text-align: center;
text {
color: #d1d5db;
font-size: 24rpx;
}
}
/* 动画效果 */
.recommend-car-list .bg-white {
animation: fadeInUp 0.3s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20rpx);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式适配 */
@media screen and (max-width: 750rpx) {
.recommend-car-list .w-32 {
width: 180rpx;
height: 135rpx;
}
.recommend-car-list .text-xl {
font-size: 32rpx;
}
.recommend-car-list .text-sm {
font-size: 24rpx;
}
.recommend-car-list .text-xs {
font-size: 20rpx;
}
}
/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
.recommend-car-list .bg-white {
background-color: #1f2937;
border-color: #374151;
}
.recommend-car-list .text-gray-600 {
color: #9ca3af;
}
.recommend-car-list .text-gray-500 {
color: #6b7280;
}
.recommend-car-list .text-gray-400 {
color: #9ca3af;
}
}
/* NutUI组件样式覆盖 */
:deep(.nut-sticky) {
z-index: 999;
}
:deep(.nut-searchbar) {
.nut-searchbar__content {
border-radius: 50rpx;
background: #fff;
.nut-searchbar__input {
font-size: 28rpx;
color: #374151;
&::placeholder {
color: #9ca3af;
}
}
}
}
:deep(.nut-menu) {
background: #fff;
border-bottom: 1rpx solid #e5e7eb;
.nut-menu__item {
font-size: 28rpx;
color: #374151;
&.active {
color: #f97316;
}
}
.nut-menu__title {
font-size: 28rpx;
&::after {
border-color: #9ca3af;
}
}
}
:deep(.nut-toast) {
.nut-toast__inner {
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 16rpx;
font-size: 28rpx;
}
}
/* 响应式适配 */
@media (max-width: 750rpx) {
.car-image-container {
width: 200rpx;
height: 150rpx;
padding: 12rpx;
}
.car-info {
padding: 20rpx;
.car-name {
font-size: 26rpx;
}
.car-details {
font-size: 22rpx;
}
.car-price {
font-size: 28rpx;
}
.car-school {
font-size: 20rpx;
}
.listing-time {
font-size: 20rpx;
}
}
}
/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
.car-card {
background: #1f2937;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
&:hover {
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
}
}
.car-info {
.car-name {
color: #f9fafb;
}
.car-details {
color: #d1d5db;
}
.car-school {
color: #9ca3af;
}
}
.loading-container .loading-text {
color: #6b7280;
}
.no-more-container text {
color: #4b5563;
}
}
This diff is collapsed. Click to expand it.