Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
95c189bc 1 parent 82a13f16

feat(商品详情页): 添加图片预览功能并优化车辆描述展示 

重构商品详情页的图片展示组件，支持点击预览多张图片
优化车辆描述文本的换行显示，使用pre-line处理换行符
将封面图片字段从images改为cover_image以明确用途
Inline Side-by-side
Showing 3 changed files with 73 additions and 17 deletions
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-07 16:03:15
* @LastEditTime: 2025-07-07 17:25:54
* @FilePath: /jgdl/src/pages/productDetail/index.vue
* @Description: 商品详情页
-->
......@@ -11,7 +11,7 @@
<view class="image-carousel">
<nut-swiper :init-page="currentImageIndex" :pagination-visible="true" pagination-color="#426543"
auto-play="3000" @change="onSwiperChange">
<nut-swiper-item v-for="(image, index) in product.images" :key="index" style="height: 400rpx">
<nut-swiper-item v-for="(image, index) in product.cover_image" :key="index" style="height: 400rpx">
<image :src="image" :alt="product.name" mode="aspectFill" class="w-full h-full object-cover"
@error="onImageError" @load="onImageLoad" />
</nut-swiper-item>
......@@ -124,9 +124,30 @@
<!-- 车辆描述 -->
<view class="vehicle-description bg-white mt-2 p-4">
<text class="text-lg font-medium mb-3 block">车辆描述</text>
<rich-text :nodes="product.richDescription" class="rich-content"></rich-text>
<image :src="product.images[1]" alt="车辆细节" mode="aspectFill"
class="w-full h-40 object-cover rounded-lg mt-3" @error="onImageError" @load="onImageLoad" />
<rich-text :nodes="product.description" class="rich-content"></rich-text>
<!-- <rich-text :nodes="product.richDescription" class="rich-content"></rich-text> -->
<!-- 多张图片展示 -->
<view class="vehicle-images mt-3">
<!-- <text class="text-base font-medium mb-2 block">车辆图片</text> -->
<view class="flex flex-col gap-3">
<view
v-for="(image, index) in product.images"
:key="index"
class="image-item"
@click="previewImages(index)"
>
<image
:src="image"
:alt="`车辆图片${index + 1}`"
mode="aspectFill"
class="w-full h-48 object-cover rounded-lg cursor-pointer"
@error="onImageError"
@load="onImageLoad"
/>
</view>
</view>
</view>
</view>
<!-- 卖家信息 -->
......@@ -292,6 +313,9 @@ const product = ref({
name: '雅迪 豪华版',
price: 3200,
discountPercent: 8,
cover_image: [
'https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
],
images: [
'https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
......@@ -305,7 +329,7 @@ const product = ref({
brakeCondition: 4.5,
tireCondition: 4,
bodyCondition: 5,
description: '这辆雅迪豪华版电动车是我去年购买的，一直很爱惜。电池健康度保持在98%，行驶里程仅1200公里，车身几乎无划痕，配置齐全，包括原装充电器、车锁、后视镜等。因为毕业需要离开学校，所以忍痛出售，价格比市场价低8%，非常划算。',
description: '这辆雅迪豪华版电动车是我去年购买的，一直很爱惜。电池健康度保持在98%，行驶里程仅1200公里，车身几乎无划痕，配置齐全，包括原装充电器、车锁、后视镜等。\n因为毕业需要离开学校，所以忍痛出售，价格比市场价低8%，非常划算。',
richDescription: `
<div style="line-height: 1.6; color: #333;">
<p style="margin-bottom: 12px;">这辆<strong style="color: #f97316;">雅迪豪华版电动车</strong>是我去年购买的，一直很爱惜。</p>
......@@ -486,6 +510,17 @@ const onImageError = (e) => {
})
}
/**
* 预览图片
* @param {number} index - 当前图片索引
*/
const previewImages = (index) => {
Taro.previewImage({
current: product.value.images[index], // 当前显示图片的链接
urls: product.value.images // 需要预览的图片链接列表
})
}
// 分享功能
useShareAppMessage(() => {
let params = getCurrentPageParam();
......@@ -533,20 +568,40 @@ useShareAppMessage(() => {
margin-top: 0.75rem;
}
.grid {
display: grid;
.gap-4 {
gap: 1rem;
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
.gap-2 {
gap: 8rpx;
}
.gap-4 {
gap: 1rem;
.gap-3 {
gap: 12rpx;
}
.vehicle-images {
.image-item {
position: relative;
overflow: hidden;
border-radius: 12rpx;
image {
transition: transform 0.2s ease;
}
&:active {
image {
transform: scale(0.95);
}
}
}
}
.rich-content {
line-height: 1.6;
// 处理文本里面含有/n的情况
white-space: pre-line;
p {
margin-bottom: 12rpx;
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-04 16:26:47
* @LastEditTime: 2025-07-07 17:04:49
* @FilePath: /jgdl/src/pages/recommendCarList/index.vue
* @Description: 精品推荐页面
-->
......@@ -259,8 +259,10 @@ const toggleFavorite = (carId) => {
* @param {Object} car - 车辆信息
*/
const onCarClick = (car) => {
// TODO: 跳转到车辆详情页
showToast(`查看${car.name}详情`, 'success')
// 跳转到车辆详情页
Taro.navigateTo({
url: '/pages/productDetail/index?id=' + car.id
})
}
// Menu组件事件处理方法
......
......@@ -228,8 +228,7 @@
<!-- 车辆描述 -->
<view class="form-section">
<nut-textarea v-model="formData.description" placeholder="请描述车辆详情，如使用感受、车况特点等" :max-length="200"
:rows="4" show-word-limit />
<nut-textarea v-model="formData.description" placeholder="请描述车辆详情，如使用感受、车况特点等" />
</view>
</view>
......