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

重构商品详情页的图片展示组件，支持点击预览多张图片优化车辆描述文本的换行显示，使用pre-line处理换行符将封面图片字段从images改为cover_image以明确用途

feat(商品详情页): 添加图片预览功能并优化车辆描述展示
重构商品详情页的图片展示组件，支持点击预览多张图片优化车辆描述文本的换行显示，使用pre-line处理换行符将封面图片字段从images改为cover_image以明确用途
hookehuyr
Commit 95c189bc60e179d083d87ef0c1247d75c9aaa1ec 95c189bc 1 parent 82a13f16
Showing 3 changed files with 73 additions and 17 deletions
src/pages/productDetail/index.vue
src/pages/recommendCarList/index.vue
src/pages/sell/index.vue
--- a/src/pages/productDetail/index.vue
View file @95c189b
+++ b/src/pages/productDetail/index.vue
View file @95c189b
 <!--
  * @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>
+            <rich-text :nodes="product.description" class="rich-content"></rich-text>
-            <image :src="product.images[1]" alt="车辆细节" mode="aspectFill"
+            <!-- <rich-text :nodes="product.richDescription" class="rich-content"></rich-text> -->
-                class="w-full h-40 object-cover rounded-lg mt-3" @error="onImageError" @load="onImageLoad" />
+
+            <!-- 多张图片展示 -->
+            <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 {
+.gap-4 {
-    display: grid;
+    gap: 1rem;
 }
-.grid-cols-2 {
+.gap-2 {
-    grid-template-columns: repeat(2, 1fr);
+    gap: 8rpx;
 }
-.gap-4 {
+.gap-3 {
-    gap: 1rem;
+    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;
--- a/src/pages/recommendCarList/index.vue
View file @95c189b
+++ b/src/pages/recommendCarList/index.vue
View file @95c189b
 <!--
  * @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组件事件处理方法
--- a/src/pages/sell/index.vue
View file @95c189b
+++ b/src/pages/sell/index.vue
View file @95c189b
@@ -228,8 +228,7 @@
             <!-- 车辆描述 -->
             <view class="form-section">
-                <nut-textarea v-model="formData.description" placeholder="请描述车辆详情，如使用感受、车况特点等" :max-length="200"
+                <nut-textarea v-model="formData.description" placeholder="请描述车辆详情，如使用感受、车况特点等" />
-                    :rows="4" show-word-limit />
             </view>
         </view>