feat(商品详情): 重构商品详情页以适配后端数据接口
- 替换静态数据为动态接口获取 - 更新字段映射以匹配后端返回结构 - 添加数据加载和空值处理逻辑 - 使用nut-rate组件替代手动星级显示
Showing
3 changed files
with
76 additions
and
136 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-07-10 17:47:49 | 4 | + * @LastEditTime: 2025-07-11 12:18:58 |
| 5 | * @FilePath: /jgdl/src/pages/myCar/index.vue | 5 | * @FilePath: /jgdl/src/pages/myCar/index.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -57,8 +57,8 @@ | ... | @@ -57,8 +57,8 @@ |
| 57 | <nut-ellipsis direction="end" :content="car.note" :rows="2"></nut-ellipsis> | 57 | <nut-ellipsis direction="end" :content="car.note" :rows="2"></nut-ellipsis> |
| 58 | </view> | 58 | </view> |
| 59 | <view class="price-section"> | 59 | <view class="price-section"> |
| 60 | - <view class="current-price">¥{{ car.price }}</view> | 60 | + <view v-if="car.price" class="current-price">¥{{ car.price }}</view> |
| 61 | - <view class="market-price">市场价 ¥{{ car.market_price }}</view> | 61 | + <view v-if="car.market_price" class="market-price">市场价 ¥{{ car.market_price }}</view> |
| 62 | </view> | 62 | </view> |
| 63 | </view> | 63 | </view> |
| 64 | </nut-col> | 64 | </nut-col> | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-07-10 22:03:48 | 4 | + * @LastEditTime: 2025-07-11 14:56:02 |
| 5 | * @FilePath: /jgdl/src/pages/productDetail/index.vue | 5 | * @FilePath: /jgdl/src/pages/productDetail/index.vue |
| 6 | * @Description: 商品详情页 | 6 | * @Description: 商品详情页 |
| 7 | --> | 7 | --> |
| ... | @@ -12,8 +12,8 @@ | ... | @@ -12,8 +12,8 @@ |
| 12 | <nut-swiper :init-page="currentImageIndex" :pagination-visible="true" pagination-color="#426543" | 12 | <nut-swiper :init-page="currentImageIndex" :pagination-visible="true" pagination-color="#426543" |
| 13 | auto-play="3000" @change="onSwiperChange"> | 13 | auto-play="3000" @change="onSwiperChange"> |
| 14 | <nut-swiper-item v-for="(image, index) in product.cover_image" :key="index" style="height: 400rpx"> | 14 | <nut-swiper-item v-for="(image, index) in product.cover_image" :key="index" style="height: 400rpx"> |
| 15 | - <image :src="image" :alt="product.name" mode="aspectFill" class="w-full h-full object-cover" | 15 | + <image :src="image" mode="aspectFill" class="w-full h-full object-cover" @error="onImageError" |
| 16 | - @error="onImageError" @load="onImageLoad" /> | 16 | + @load="onImageLoad" /> |
| 17 | </nut-swiper-item> | 17 | </nut-swiper-item> |
| 18 | </nut-swiper> | 18 | </nut-swiper> |
| 19 | </view> | 19 | </view> |
| ... | @@ -21,7 +21,7 @@ | ... | @@ -21,7 +21,7 @@ |
| 21 | <!-- 商品信息 --> | 21 | <!-- 商品信息 --> |
| 22 | <view class="product-info bg-white p-4"> | 22 | <view class="product-info bg-white p-4"> |
| 23 | <view class="flex items-center justify-between mb-3"> | 23 | <view class="flex items-center justify-between mb-3"> |
| 24 | - <text class="text-xl font-bold">{{ product.name }}</text> | 24 | + <text class="text-xl font-bold">{{ product.brand }} {{ product.model }}</text> |
| 25 | <view class="flex space-x-3"> | 25 | <view class="flex space-x-3"> |
| 26 | <view class="w-8 h-8 bg-gray-100 rounded-full relative"> | 26 | <view class="w-8 h-8 bg-gray-100 rounded-full relative"> |
| 27 | <button open-type="share" class="absolute inset-0 w-full h-full" style="border-radius: 50%;"> | 27 | <button open-type="share" class="absolute inset-0 w-full h-full" style="border-radius: 50%;"> |
| ... | @@ -39,11 +39,11 @@ | ... | @@ -39,11 +39,11 @@ |
| 39 | </view> | 39 | </view> |
| 40 | <view class="flex items-center mb-3"> | 40 | <view class="flex items-center mb-3"> |
| 41 | <text class="text-2xl font-bold text-orange-500 mr-2"> | 41 | <text class="text-2xl font-bold text-orange-500 mr-2"> |
| 42 | - ¥{{ product.price.toLocaleString() }} | 42 | + ¥{{ product?.price?.toLocaleString() }} |
| 43 | </text> | 43 | </text> |
| 44 | - <view class="ml-2 text-xs px-2 py-1 bg-orange-100 text-orange-600 rounded"> | 44 | + <!-- <view class="ml-2 text-xs px-2 py-1 bg-orange-100 text-orange-600 rounded"> |
| 45 | 低于市场价{{ product.discountPercent }}% | 45 | 低于市场价{{ product.discountPercent }}% |
| 46 | - </view> | 46 | + </view> --> |
| 47 | </view> | 47 | </view> |
| 48 | </view> | 48 | </view> |
| 49 | 49 | ||
| ... | @@ -57,7 +57,7 @@ | ... | @@ -57,7 +57,7 @@ |
| 57 | </view> | 57 | </view> |
| 58 | <view> | 58 | <view> |
| 59 | <text class="text-xs text-gray-500 block">出厂年份</text> | 59 | <text class="text-xs text-gray-500 block">出厂年份</text> |
| 60 | - <text class="text-sm block">{{ product.year }}</text> | 60 | + <text class="text-sm block">{{ product.manufacture_year }}</text> |
| 61 | </view> | 61 | </view> |
| 62 | </view> | 62 | </view> |
| 63 | <view class="flex items-center"> | 63 | <view class="flex items-center"> |
| ... | @@ -66,7 +66,7 @@ | ... | @@ -66,7 +66,7 @@ |
| 66 | </view> | 66 | </view> |
| 67 | <view> | 67 | <view> |
| 68 | <text class="text-xs text-gray-500 block">续航里程</text> | 68 | <text class="text-xs text-gray-500 block">续航里程</text> |
| 69 | - <text class="text-sm block">{{ product.range }}</text> | 69 | + <text class="text-sm block">{{ product.range_km }}</text> |
| 70 | </view> | 70 | </view> |
| 71 | </view> | 71 | </view> |
| 72 | <view class="flex items-center"> | 72 | <view class="flex items-center"> |
| ... | @@ -75,7 +75,7 @@ | ... | @@ -75,7 +75,7 @@ |
| 75 | </view> | 75 | </view> |
| 76 | <view> | 76 | <view> |
| 77 | <text class="text-xs text-gray-500 block">行驶里程</text> | 77 | <text class="text-xs text-gray-500 block">行驶里程</text> |
| 78 | - <text class="text-sm block">{{ product.mileage }}</text> | 78 | + <text class="text-sm block">{{ product.total_mileage_km }}</text> |
| 79 | </view> | 79 | </view> |
| 80 | </view> | 80 | </view> |
| 81 | <view class="flex items-center"> | 81 | <view class="flex items-center"> |
| ... | @@ -84,7 +84,7 @@ | ... | @@ -84,7 +84,7 @@ |
| 84 | </view> | 84 | </view> |
| 85 | <view> | 85 | <view> |
| 86 | <text class="text-xs text-gray-500 block">最高时速</text> | 86 | <text class="text-xs text-gray-500 block">最高时速</text> |
| 87 | - <text class="text-sm block">{{ product.maxSpeed }}</text> | 87 | + <text class="text-sm block">{{ product.max_speed_kmh }}</text> |
| 88 | </view> | 88 | </view> |
| 89 | </view> | 89 | </view> |
| 90 | </view> | 90 | </view> |
| ... | @@ -97,25 +97,19 @@ | ... | @@ -97,25 +97,19 @@ |
| 97 | <view class="flex justify-between items-center"> | 97 | <view class="flex justify-between items-center"> |
| 98 | <text>车辆成色</text> | 98 | <text>车辆成色</text> |
| 99 | <view class="flex"> | 99 | <view class="flex"> |
| 100 | - <text v-for="star in 5" :key="star" class="text-orange-400">★</text> | 100 | + <nut-rate v-model="product.new_level" active-color="orange" /> |
| 101 | </view> | 101 | </view> |
| 102 | </view> | 102 | </view> |
| 103 | <view class="flex justify-between items-center"> | 103 | <view class="flex justify-between items-center"> |
| 104 | <text>刹车磨损度</text> | 104 | <text>刹车磨损度</text> |
| 105 | <view class="flex"> | 105 | <view class="flex"> |
| 106 | - <text v-for="star in 5" :key="star" | 106 | + <nut-rate v-model="product.brake_wear_level" active-color="orange" /> |
| 107 | - :class="star <= Math.round(product.brakeCondition) ? 'text-orange-400' : 'text-gray-300'"> | ||
| 108 | - ★ | ||
| 109 | - </text> | ||
| 110 | </view> | 107 | </view> |
| 111 | </view> | 108 | </view> |
| 112 | <view class="flex justify-between items-center"> | 109 | <view class="flex justify-between items-center"> |
| 113 | <text>轮胎磨损度</text> | 110 | <text>轮胎磨损度</text> |
| 114 | <view class="flex"> | 111 | <view class="flex"> |
| 115 | - <text v-for="star in 5" :key="star" | 112 | + <nut-rate v-model="product.tire_wear_level" active-color="orange" /> |
| 116 | - :class="star <= product.tireCondition ? 'text-orange-400' : 'text-gray-300'"> | ||
| 117 | - ★ | ||
| 118 | - </text> | ||
| 119 | </view> | 113 | </view> |
| 120 | </view> | 114 | </view> |
| 121 | </view> | 115 | </view> |
| ... | @@ -124,27 +118,18 @@ | ... | @@ -124,27 +118,18 @@ |
| 124 | <!-- 车辆描述 --> | 118 | <!-- 车辆描述 --> |
| 125 | <view class="vehicle-description bg-white mt-2 p-4"> | 119 | <view class="vehicle-description bg-white mt-2 p-4"> |
| 126 | <text class="text-lg font-medium mb-3 block">车辆描述</text> | 120 | <text class="text-lg font-medium mb-3 block">车辆描述</text> |
| 127 | - <rich-text :nodes="product.description" class="rich-content"></rich-text> | 121 | + <rich-text :nodes="product.note" class="rich-content"></rich-text> |
| 128 | <!-- <rich-text :nodes="product.richDescription" class="rich-content"></rich-text> --> | 122 | <!-- <rich-text :nodes="product.richDescription" class="rich-content"></rich-text> --> |
| 129 | 123 | ||
| 130 | <!-- 多张图片展示 --> | 124 | <!-- 多张图片展示 --> |
| 131 | <view class="vehicle-images mt-3"> | 125 | <view class="vehicle-images mt-3"> |
| 132 | <!-- <text class="text-base font-medium mb-2 block">车辆图片</text> --> | 126 | <!-- <text class="text-base font-medium mb-2 block">车辆图片</text> --> |
| 133 | <view class="flex flex-col gap-3"> | 127 | <view class="flex flex-col gap-3"> |
| 134 | - <view | 128 | + <view v-for="(image, index) in product.images" :key="index" class="image-item" |
| 135 | - v-for="(image, index) in product.images" | 129 | + @click="previewImages(index)"> |
| 136 | - :key="index" | 130 | + <image :src="image" :alt="`车辆图片${index + 1}`" mode="aspectFill" |
| 137 | - class="image-item" | 131 | + class="w-full h-48 object-cover rounded-lg cursor-pointer" @error="onImageError" |
| 138 | - @click="previewImages(index)" | 132 | + @load="onImageLoad" /> |
| 139 | - > | ||
| 140 | - <image | ||
| 141 | - :src="image" | ||
| 142 | - :alt="`车辆图片${index + 1}`" | ||
| 143 | - mode="aspectFill" | ||
| 144 | - class="w-full h-48 object-cover rounded-lg cursor-pointer" | ||
| 145 | - @error="onImageError" | ||
| 146 | - @load="onImageLoad" | ||
| 147 | - /> | ||
| 148 | </view> | 133 | </view> |
| 149 | </view> | 134 | </view> |
| 150 | </view> | 135 | </view> |
| ... | @@ -155,20 +140,20 @@ | ... | @@ -155,20 +140,20 @@ |
| 155 | <text class="text-lg font-medium mb-3 block">卖家信息</text> | 140 | <text class="text-lg font-medium mb-3 block">卖家信息</text> |
| 156 | <view class="flex items-center justify-between"> | 141 | <view class="flex items-center justify-between"> |
| 157 | <view class="flex items-center"> | 142 | <view class="flex items-center"> |
| 158 | - <image :src="product.seller.avatar || defaultAvatar" :alt="product.seller.name" mode="aspectFill" | 143 | + <image :src="product.seller?.avatar_url || defaultAvatar" mode="aspectFill" |
| 159 | class="w-10 h-10 rounded-full object-cover mr-3" /> | 144 | class="w-10 h-10 rounded-full object-cover mr-3" /> |
| 160 | <view> | 145 | <view> |
| 161 | <view class="flex items-center"> | 146 | <view class="flex items-center"> |
| 162 | - <text class="font-medium">{{ product.seller.name }}</text> | 147 | + <text class="font-medium">{{ product.seller?.nickname }}</text> |
| 163 | - <view v-if="product.seller.verified" | 148 | + <view v-if="product.seller?.real_name_verified" |
| 164 | class="ml-1 text-xs text-blue-500 bg-blue-50 px-1 py-0.5 rounded"> | 149 | class="ml-1 text-xs text-blue-500 bg-blue-50 px-1 py-0.5 rounded"> |
| 165 | 已认证卖家 | 150 | 已认证卖家 |
| 166 | </view> | 151 | </view> |
| 167 | </view> | 152 | </view> |
| 168 | - <text class="text-xs text-gray-500 block">{{ product.seller.school }}</text> | 153 | + <text class="text-xs text-gray-500 block">{{ product.seller?.school_name }}</text> |
| 169 | </view> | 154 | </view> |
| 170 | </view> | 155 | </view> |
| 171 | - <view v-if="product.seller.wechat" @tap="showWechatModal" class="text-green-500 flex items-center"> | 156 | + <view v-if="product.seller?.wechat_id" @tap="showWechatModal" class="text-green-500 flex items-center"> |
| 172 | <nut-button type="success"> | 157 | <nut-button type="success"> |
| 173 | <template #icon> | 158 | <template #icon> |
| 174 | <Message size="16" /> | 159 | <Message size="16" /> |
| ... | @@ -202,7 +187,7 @@ | ... | @@ -202,7 +187,7 @@ |
| 202 | <!-- 微信号弹框 --> | 187 | <!-- 微信号弹框 --> |
| 203 | <nut-dialog v-model:visible="showWechat" title="卖家微信号" :close-on-click-overlay="true" :no-footer="true"> | 188 | <nut-dialog v-model:visible="showWechat" title="卖家微信号" :close-on-click-overlay="true" :no-footer="true"> |
| 204 | <view class="text-center"> | 189 | <view class="text-center"> |
| 205 | - <text class="text-lg font-medium block mb-4">{{ product.seller.wechat }}</text> | 190 | + <text class="text-lg font-medium block mb-4">{{ product.seller?.wechat_id }}</text> |
| 206 | <!-- <text class="text-sm text-gray-500 block mb-4">长按复制微信号</text> --> | 191 | <!-- <text class="text-sm text-gray-500 block mb-4">长按复制微信号</text> --> |
| 207 | <nut-button @click="copyWechat" type="primary" color="orange"> | 192 | <nut-button @click="copyWechat" type="primary" color="orange"> |
| 208 | 复制微信号 | 193 | 复制微信号 |
| ... | @@ -219,11 +204,11 @@ | ... | @@ -219,11 +204,11 @@ |
| 219 | </view> | 204 | </view> |
| 220 | <view class="seller-card bg-gray-50 rounded-lg p-3 mb-4"> | 205 | <view class="seller-card bg-gray-50 rounded-lg p-3 mb-4"> |
| 221 | <view class="flex items-center"> | 206 | <view class="flex items-center"> |
| 222 | - <image :src="product.seller.avatar || defaultAvatar" :alt="product.seller.name" | 207 | + <image :src="product.seller?.avatar || defaultAvatar" :alt="product.seller?.nickname" |
| 223 | mode="aspectFill" class="w-12 h-12 rounded-full object-cover mr-3" /> | 208 | mode="aspectFill" class="w-12 h-12 rounded-full object-cover mr-3" /> |
| 224 | <view> | 209 | <view> |
| 225 | - <text class="font-medium block">{{ product.seller.name }}</text> | 210 | + <text class="font-medium block">{{ product.seller?.nickname }}</text> |
| 226 | - <text class="text-sm text-gray-500 block">{{ product.seller.school }}</text> | 211 | + <text class="text-sm text-gray-500 block">{{ product.seller?.school_name }}</text> |
| 227 | </view> | 212 | </view> |
| 228 | </view> | 213 | </view> |
| 229 | </view> | 214 | </view> |
| ... | @@ -260,7 +245,7 @@ | ... | @@ -260,7 +245,7 @@ |
| 260 | </template> | 245 | </template> |
| 261 | 246 | ||
| 262 | <script setup> | 247 | <script setup> |
| 263 | -import { ref } from 'vue' | 248 | +import { ref, onMounted } from 'vue' |
| 264 | import Taro, { useShareAppMessage } from '@tarojs/taro' | 249 | import Taro, { useShareAppMessage } from '@tarojs/taro' |
| 265 | import { Share, Heart1, HeartFill, Message } from '@nutui/icons-vue-taro' | 250 | import { Share, Heart1, HeartFill, Message } from '@nutui/icons-vue-taro' |
| 266 | import payCard from '@/components/payCard.vue' | 251 | import payCard from '@/components/payCard.vue' |
| ... | @@ -268,6 +253,9 @@ import { useFavorite } from '@/composables/useFavorite' | ... | @@ -268,6 +253,9 @@ import { useFavorite } from '@/composables/useFavorite' |
| 268 | import avatarImg from '@/assets/images/avatar.png' | 253 | import avatarImg from '@/assets/images/avatar.png' |
| 269 | import { getCurrentPageParam } from "@/utils/weapp" | 254 | import { getCurrentPageParam } from "@/utils/weapp" |
| 270 | import { checkPermission, PERMISSION_TYPES } from '@/utils/permission' | 255 | import { checkPermission, PERMISSION_TYPES } from '@/utils/permission' |
| 256 | +// 导入接口 | ||
| 257 | +import { getVehicleDetailAPI } from '@/api/car' | ||
| 258 | +import { DEFAULT_COVER_IMG } from '@/utils/config' | ||
| 271 | 259 | ||
| 272 | // 默认头像 | 260 | // 默认头像 |
| 273 | const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg' | 261 | const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg' |
| ... | @@ -310,61 +298,15 @@ const fallbackImages = ref([ | ... | @@ -310,61 +298,15 @@ const fallbackImages = ref([ |
| 310 | const imageLoadErrors = ref(new Set()) | 298 | const imageLoadErrors = ref(new Set()) |
| 311 | 299 | ||
| 312 | // 模拟商品数据 | 300 | // 模拟商品数据 |
| 313 | -const product = ref({ | 301 | +const product = ref({}) |
| 314 | - id: '5', | ||
| 315 | - name: '雅迪 豪华版', | ||
| 316 | - price: 3200, | ||
| 317 | - discountPercent: 8, | ||
| 318 | - cover_image: [ | ||
| 319 | - 'https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60', | ||
| 320 | - ], | ||
| 321 | - images: [ | ||
| 322 | - 'https://images.unsplash.com/photo-1558981806-ec527fa84c39?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60', | ||
| 323 | - 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60', | ||
| 324 | - 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60' | ||
| 325 | - ], | ||
| 326 | - year: '2023年', | ||
| 327 | - range: '60km', | ||
| 328 | - mileage: '1200公里', | ||
| 329 | - maxSpeed: '25km/h', | ||
| 330 | - batteryHealth: 98, | ||
| 331 | - brakeCondition: 4.5, | ||
| 332 | - tireCondition: 4, | ||
| 333 | - bodyCondition: 5, | ||
| 334 | - description: '这辆雅迪豪华版电动车是我去年购买的,一直很爱惜。电池健康度保持在98%,行驶里程仅1200公里,车身几乎无划痕,配置齐全,包括原装充电器、车锁、后视镜等。\n因为毕业需要离开学校,所以忍痛出售,价格比市场价低8%,非常划算。', | ||
| 335 | - richDescription: ` | ||
| 336 | - <div style="line-height: 1.6; color: #333;"> | ||
| 337 | - <p style="margin-bottom: 12px;">这辆<strong style="color: #f97316;">雅迪豪华版电动车</strong>是我去年购买的,一直很爱惜。</p> | ||
| 338 | - <p style="margin-bottom: 12px;">🔋 电池健康度保持在<span style="color: #10b981; font-weight: bold;">98%</span></p> | ||
| 339 | - <p style="margin-bottom: 12px;">🛣️ 行驶里程仅<span style="color: #3b82f6; font-weight: bold;">1200公里</span></p> | ||
| 340 | - <p style="margin-bottom: 12px;">✨ 车身几乎无划痕,配置齐全</p> | ||
| 341 | - <ul style="margin: 12px 0; padding-left: 20px;"> | ||
| 342 | - <li style="margin-bottom: 6px;">✅ 原装充电器</li> | ||
| 343 | - <li style="margin-bottom: 6px;">✅ 车锁</li> | ||
| 344 | - <li style="margin-bottom: 6px;">✅ 后视镜</li> | ||
| 345 | - <li style="margin-bottom: 6px;">✅ 脚踏板</li> | ||
| 346 | - </ul> | ||
| 347 | - <p style="margin-bottom: 12px; background: #fef3c7; padding: 8px; border-radius: 6px;">💰 因为毕业需要离开学校,所以忍痛出售,价格比市场价低8%,非常划算!</p> | ||
| 348 | - </div> | ||
| 349 | - `, | ||
| 350 | - seller: { | ||
| 351 | - name: '李同学', | ||
| 352 | - verified: true, | ||
| 353 | - school: '上海理工大学-本部', | ||
| 354 | - avatar: 'https://randomuser.me/api/portraits/men/32.jpg', | ||
| 355 | - wechat: 'li_student_2023', | ||
| 356 | - phone: '138****8888' | ||
| 357 | - }, | ||
| 358 | - is_favorite: false | ||
| 359 | -}) | ||
| 360 | 302 | ||
| 361 | /** | 303 | /** |
| 362 | * 轮播图切换事件 | 304 | * 轮播图切换事件 |
| 363 | * @param {number} index - 当前图片索引 | 305 | * @param {number} index - 当前图片索引 |
| 364 | */ | 306 | */ |
| 365 | -const onSwiperChange = (index) => { | 307 | +// const onSwiperChange = (index) => { |
| 366 | - currentImageIndex.value = index | 308 | +// currentImageIndex.value = index |
| 367 | -} | 309 | +// } |
| 368 | 310 | ||
| 369 | // 使用收藏功能composables | 311 | // 使用收藏功能composables |
| 370 | const { toggleFavorite } = useFavorite() | 312 | const { toggleFavorite } = useFavorite() |
| ... | @@ -381,7 +323,7 @@ const showWechatModal = () => { | ... | @@ -381,7 +323,7 @@ const showWechatModal = () => { |
| 381 | */ | 323 | */ |
| 382 | const copyWechat = () => { | 324 | const copyWechat = () => { |
| 383 | Taro.setClipboardData({ | 325 | Taro.setClipboardData({ |
| 384 | - data: product.value.seller.wechat, | 326 | + data: product.value.seller?.wechat_id, |
| 385 | success: () => { | 327 | success: () => { |
| 386 | Taro.showToast({ | 328 | Taro.showToast({ |
| 387 | title: '微信号已复制', | 329 | title: '微信号已复制', |
| ... | @@ -479,39 +421,6 @@ const onPayClose = () => { | ... | @@ -479,39 +421,6 @@ const onPayClose = () => { |
| 479 | } | 421 | } |
| 480 | 422 | ||
| 481 | /** | 423 | /** |
| 482 | - * 图片加载成功 | ||
| 483 | - */ | ||
| 484 | -const onImageLoad = () => { | ||
| 485 | - // 图片加载成功 | ||
| 486 | -} | ||
| 487 | - | ||
| 488 | -/** | ||
| 489 | - * 图片加载失败处理 | ||
| 490 | - */ | ||
| 491 | -const onImageError = (e) => { | ||
| 492 | - const target = e.target || e.currentTarget | ||
| 493 | - const src = target.src | ||
| 494 | - | ||
| 495 | - // 记录加载失败的图片 | ||
| 496 | - imageLoadErrors.value.add(src) | ||
| 497 | - | ||
| 498 | - // 如果不是备用图片,则替换为备用图片 | ||
| 499 | - if (!src.includes('avatar.png')) { | ||
| 500 | - const imageIndex = product.value.images.findIndex(img => img === src) | ||
| 501 | - if (imageIndex !== -1 && fallbackImages.value[imageIndex]) { | ||
| 502 | - // 替换为备用图片 | ||
| 503 | - product.value.images[imageIndex] = fallbackImages.value[imageIndex] | ||
| 504 | - } | ||
| 505 | - } | ||
| 506 | - | ||
| 507 | - Taro.showToast({ | ||
| 508 | - title: '图片加载失败,已使用备用图片', | ||
| 509 | - icon: 'none', | ||
| 510 | - duration: 2000 | ||
| 511 | - }) | ||
| 512 | -} | ||
| 513 | - | ||
| 514 | -/** | ||
| 515 | * 预览图片 | 424 | * 预览图片 |
| 516 | * @param {number} index - 当前图片索引 | 425 | * @param {number} index - 当前图片索引 |
| 517 | */ | 426 | */ |
| ... | @@ -540,6 +449,37 @@ useShareAppMessage(() => { | ... | @@ -540,6 +449,37 @@ useShareAppMessage(() => { |
| 540 | // 返回shareObj | 449 | // 返回shareObj |
| 541 | return shareObj; | 450 | return shareObj; |
| 542 | }) | 451 | }) |
| 452 | + | ||
| 453 | +// 过滤数组中的非空值(包括空字符串、null、undefined、空数组、空对象) | ||
| 454 | +function filterEmptyValues(arr) { | ||
| 455 | + return arr.filter(item => { | ||
| 456 | + // 处理 null 和 undefined | ||
| 457 | + if (item == null) return false; | ||
| 458 | + | ||
| 459 | + // 处理空字符串 | ||
| 460 | + if (typeof item === 'string') return item.trim().length > 0; | ||
| 461 | + | ||
| 462 | + // 处理数组 | ||
| 463 | + if (Array.isArray(item)) return item.length > 0; | ||
| 464 | + | ||
| 465 | + // 处理对象 | ||
| 466 | + if (typeof item === 'object') return Object.keys(item).length > 0; | ||
| 467 | + | ||
| 468 | + // 其他情况(数字、布尔值等)保留 | ||
| 469 | + return true; | ||
| 470 | + }); | ||
| 471 | +} | ||
| 472 | + | ||
| 473 | +onMounted(async () => { | ||
| 474 | + // 获取商品详情 | ||
| 475 | + let params = getCurrentPageParam(); | ||
| 476 | + const { code, data } = await getVehicleDetailAPI({ id: params.id }) | ||
| 477 | + if (code) { | ||
| 478 | + product.value = data | ||
| 479 | + product.value.cover_image = [data.front_photo || DEFAULT_COVER_IMG] | ||
| 480 | + product.value.images = filterEmptyValues([data.front_photo, data.other_photo, data.left_photo, data.right_photo]) | ||
| 481 | + } | ||
| 482 | +}) | ||
| 543 | </script> | 483 | </script> |
| 544 | 484 | ||
| 545 | <style lang="less"> | 485 | <style lang="less"> | ... | ... |
| ... | @@ -219,7 +219,7 @@ | ... | @@ -219,7 +219,7 @@ |
| 219 | </view> | 219 | </view> |
| 220 | <view class="form-item-right"> | 220 | <view class="form-item-right"> |
| 221 | <text class="price-symbol">¥</text> | 221 | <text class="price-symbol">¥</text> |
| 222 | - <input v-model="formData.price" placeholder="3200" type="text" class="price-input" /> | 222 | + <input v-model="formData.price" placeholder="请输入" type="text" class="price-input" /> |
| 223 | </view> | 223 | </view> |
| 224 | </view> | 224 | </view> |
| 225 | 225 | ||
| ... | @@ -230,7 +230,7 @@ | ... | @@ -230,7 +230,7 @@ |
| 230 | </view> | 230 | </view> |
| 231 | <view class="form-item-right"> | 231 | <view class="form-item-right"> |
| 232 | <text class="market-price-symbol">¥</text> | 232 | <text class="market-price-symbol">¥</text> |
| 233 | - <input v-model="formData.market_price" placeholder="6500" type="text" | 233 | + <input v-model="formData.market_price" placeholder="请输入" type="text" |
| 234 | class="market-price-input" /> | 234 | class="market-price-input" /> |
| 235 | </view> | 235 | </view> |
| 236 | </view> | 236 | </view> |
| ... | @@ -381,8 +381,8 @@ const formData = reactive({ | ... | @@ -381,8 +381,8 @@ const formData = reactive({ |
| 381 | // batteryWear: '', | 381 | // batteryWear: '', |
| 382 | brake_wear_level: '', | 382 | brake_wear_level: '', |
| 383 | tire_wear_level: '', | 383 | tire_wear_level: '', |
| 384 | - price: '3200', | 384 | + price: '', |
| 385 | - market_price: '6500', | 385 | + market_price: '', |
| 386 | note: '', | 386 | note: '', |
| 387 | // 车辆照片字段 | 387 | // 车辆照片字段 |
| 388 | front_photo: '', | 388 | front_photo: '', | ... | ... |
-
Please register or login to post a comment