Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
abfa9a57 1 parent fc38c33e

fix: 为车辆列表添加默认封面图片处理 

在多个页面中为车辆数据添加默认封面图片处理，当front_photo为空时使用DEFAULT_COVER_IMG
同时优化了首页的代码格式和分享功能缩进
Inline Side-by-side
Showing 3 changed files with 57 additions and 29 deletions
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-10 22:49:42
* @LastEditTime: 2025-07-11 10:11:35
* @FilePath: /jgdl/src/pages/authCar/index.vue
* @Description: 认证车源
-->
......@@ -95,7 +95,7 @@ import { useFavorite } from '@/composables/useFavorite'
import './index.less'
// 接口导入
import { getVehicleListAPI } from '@/api/car';
import { DEFAULT_COVER_IMG } from '@/utils/config'
// Banner图片数据
const bannerImages = ref([
'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=800&h=400&fit=crop',
......@@ -174,6 +174,7 @@ const loadAuthCarData = async (isLoadMore = false) => {
// 处理图片数据
const processedData = vehicleList.map(item => ({
...item,
front_photo: item.front_photo || DEFAULT_COVER_IMG,
}))
if (isLoadMore) {
......
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-10 21:30:57
* @LastEditTime: 2025-07-11 10:09:02
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
......@@ -16,7 +16,8 @@
</nut-col>
<nut-col span="18">
<!-- Search Bar -->
<nut-searchbar v-model="searchValue" placeholder="搜索更多商品" :disabled="true" @click-input="onSearchHandle" shape="round" background="transparent" input-background="#ffffff">
<nut-searchbar v-model="searchValue" placeholder="搜索更多商品" :disabled="true" @click-input="onSearchHandle"
shape="round" background="transparent" input-background="#ffffff">
<template #leftin>
<Search2 />
</template>
......@@ -40,19 +41,22 @@
<view class="px-4 mt-2">
<view class="flex justify-around py-4">
<view class="flex flex-col items-center" @tap="onNewCarClick">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center" style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"
style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
<Clock size="20" color="#f97316" />
</view>
<text class="text-xs mt-1 text-gray-700">最新上架</text>
</view>
<view class="flex flex-col items-center" @tap="onGoodCarClick">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center" style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"
style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
<Star size="20" color="#f97316" />
</view>
<text class="text-xs mt-1 text-gray-700">特价好车</text>
</view>
<view class="flex flex-col items-center" @tap="onCertifiedClick">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center" style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
<view class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center"
style="background: linear-gradient( 135deg, rgba(255,161,53,0.15) 0%, rgba(235,83,5,0.25) 100%); box-shadow: 0px 2px 8px 0px rgba(235,83,5,0.15);">
<Shop size="20" color="#f97316" />
</view>
<text class="text-xs mt-1 text-gray-700">认证车源</text>
......@@ -73,14 +77,16 @@
<view v-for="scooter in featuredScooters" :key="scooter.id"
class="bg-white rounded-lg shadow-sm overflow-hidden" @tap="() => onProductClick(scooter)">
<view class="relative p-2">
<image :src="scooter.front_photo" 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-80 flex items-center justify-center" @tap.stop="() => toggleFavorite(scooter)">
<image :src="scooter.front_photo" 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-80 flex items-center justify-center"
@tap.stop="() => toggleFavorite(scooter)">
<Heart1 v-if="!scooter.is_favorite" size="22" :color="'#9ca3af'" />
<HeartFill v-else size="22" :color="'#ef4444'" />
</view>
<view v-if="scooter.verification_status === 5"
class="absolute bottom-4 right-4 text-white text-xs px-1.5 py-0.5 rounded flex items-center" style="background-color: #EB5305;">
class="absolute bottom-4 right-4 text-white text-xs px-1.5 py-0.5 rounded flex items-center"
style="background-color: #EB5305;">
<Check size="12" color="#ffffff" class="mr-0.5" />
<text class="text-white">认证</text>
</view>
......@@ -123,7 +129,8 @@
<image :src="scooter.front_photo" :alt="scooter.name" mode="aspectFill"
class="w-full flex-1 object-cover rounded-lg" />
<view v-if="scooter.verification_status === 5"
class="absolute bottom-3 right-3 text-white text-xs px-1 rounded flex items-center" style="background-color: #EB5305;">
class="absolute bottom-3 right-3 text-white text-xs px-1 rounded flex items-center"
style="background-color: #EB5305;">
<Check size="12" color="#ffffff" class="mr-0.5" />
<text class="text-white">认证</text>
</view>
......@@ -170,7 +177,7 @@ import "./index.less";
// 导入接口
import { getRecommendVehicleAPI, getVehicleListAPI } from '@/api/car';
import { useFavorite } from '@/composables/useFavorite'
import { DEFAULT_COVER_IMG } from '@/utils/config'
// 响应式数据
const searchValue = ref('')
// favoriteIds 已移除，现在使用基于对象属性的收藏模式
......@@ -289,11 +296,30 @@ onMounted(async () => {
const res2 = await getRecommendVehicleAPI({ section: 3 })
if (res2.code) {
featuredScooters.value = res2.data
// 处理图片数据
const processedData = res2.data.map(item => ({
...item,
front_photo: item.front_photo || DEFAULT_COVER_IMG,
// 确保价格为数字类型
price: Number(item.price) || 0,
market_price: Number(item.market_price) || 0
}))
featuredScooters.value = processedData
}
// 获取最新上架
const res3 = await getVehicleListAPI({ page: 0, limit: 5 })
if (res3.code) {
latestScooters.value = res3.data.list
// 处理图片数据
const processedData = res3.data.list.map(item => ({
...item,
front_photo: item.front_photo || DEFAULT_COVER_IMG,
// 确保价格为数字类型
price: Number(item.price) || 0,
market_price: Number(item.market_price) || 0,
}))
latestScooters.value = processedData
}
})
......@@ -305,19 +331,19 @@ wx.showShareMenu({
// 分享功能
useShareAppMessage(() => {
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: '捡个电驴-分享给好友', // 默认是小程序的名称(可以写slogan等)
path: `pages/index/index`, // 默认是当前页面，必须是以'/'开头的完整路径
imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
}
// 来自页面内的按钮的转发
// if (options.from == 'button') {
// var eData = options.target.dataset;
// // 此处可以修改 shareObj 中的内容
// shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
// }
// 返回shareObj
return shareObj;
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: '捡个电驴-分享给好友', // 默认是小程序的名称(可以写slogan等)
path: `pages/index/index`, // 默认是当前页面，必须是以'/'开头的完整路径
imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
}
// 来自页面内的按钮的转发
// if (options.from == 'button') {
// var eData = options.target.dataset;
// // 此处可以修改 shareObj 中的内容
// shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
// }
// 返回shareObj
return shareObj;
})
</script>
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-10 22:47:45
* @LastEditTime: 2025-07-11 10:10:56
* @FilePath: /jgdl/src/pages/newCarList/index.vue
* @Description: 最新上架页面
-->
......@@ -121,7 +121,7 @@ import './index.less'
// 接口导入
import { getVehicleBrandsAPI, getSchoolsAPI } from '@/api/other';
import { getVehicleListAPI } from '@/api/car';
import { DEFAULT_COVER_IMG } from '@/utils/config'
// 响应式数据
const searchValue = ref('')
/**
......@@ -268,6 +268,7 @@ const loadVehicleData = async (isLoadMore = false) => {
// 处理图片数据
const processedData = vehicleList.map(item => ({
...item,
front_photo: item.front_photo || DEFAULT_COVER_IMG,
// 添加新车标签（7天内发布的车辆）
isNew: new Date() - new Date(item.created_time) < 7 * 24 * 60 * 60 * 1000
}))
......