更新....

shinnosuke

5 天以前 e52934f6527027bd6008c2ade61c3083159efd4a

 rencaika/pages/product-detail/product-detail.uvue

@@ -15,12 +15,8 @@
            <image class="hero-image" :src="productImage" mode="aspectFill" @error="replaceProductImage"></image>
            <view class="hero-shade"></view>
         </view>
         <view v-if="detailImages.length > 0" class="product-image-gallery">
            <image v-for="(imageUrl, index) in detailImages" :key="index" :src="imageUrl" mode="widthFix" @error="replaceDetailImage(index)"></image>
         </view>

         <view class="product-summary">
            <view class="price-line"><text class="discount-label">折扣价</text><text class="price-symbol">¥</text><text class="price">{{productPrice}}</text><text class="old-price">¥{{productOriginalPrice}}</text><view class="summary-tags"><text class="coupon-tag">券</text><text class="discount-tag">{{productDiscount}}</text></view></view>
            <view class="price-line"><text class="discount-label">折扣价</text><text class="price-symbol">¥</text><text class="price">{{productPrice}}</text><text class="old-price">¥{{productOriginalPrice}}</text><view class="summary-tags"><text v-if="productHasCoupon" class="coupon-tag">券</text><text v-if="productDiscount != ''" class="discount-tag">{{productDiscount}}</text></view></view>
            <text class="product-name">{{productName}}</text>
            <text v-if="!productAvailable" class="product-status">商品已下架</text>
            <text v-else-if="productSoldOut" class="product-status">已售罄</text>
@@ -28,7 +24,7 @@

         <view v-if="detailText.length > 0" class="detail-card">
            <text class="card-title">商品详情</text>
            <text class="detail-description">{{detailText}}</text>
            <rich-text class="detail-description" :nodes="detailText"></rich-text>
         </view>

         <view class="notice-card">
@@ -51,6 +47,7 @@
<script setup lang="uts">
   import { isApiConfigured } from '../../config/api.uts'
   import { getProductDetail } from '../../services/portal.uts'
   import { sanitizeRichText } from '../../services/business.uts'
   import { resolveApiUrl } from '../../services/http.uts'
   import { getSession } from '../../services/session.uts'
   import { safeBack } from '../../utils/navigation.uts'
@@ -70,11 +67,11 @@
   const productPrice = ref('138')
   const productOriginalPrice = ref('266')
   const productDiscount = ref('6折')
   const productHasCoupon = ref(false)
   const productAvailable = ref(true)
   const productSoldOut = ref(false)

   // 后台分别返回图片数组与文字结构，不使用富文本 HTML。
   const detailImages = ref<any[]>([])
   // Sanitize and render backend-configured product details as rich text.
   const detailText = ref('')

   // 购买须知固定只有四项，后台只返回四项各自的内容文本。
@@ -87,13 +84,13 @@
   const purchaseNotices = ref<any[]>(defaultPurchaseNotices)

   const loadProduct = (id: string) => {
      if (id == 'food-set-002') { productName.value = '【川香四溢】川菜4人餐'; productImage.value = '/static/food-assets/food-2.jpg'; productPrice.value = '118'; productOriginalPrice.value = '198'; productDiscount.value = '6折'; return }
      if (id == 'food-set-003') { productName.value = '【欢聚时光】招牌菜6人餐'; productImage.value = '/static/food-assets/food-1.jpg'; productPrice.value = '168'; productOriginalPrice.value = '248'; productDiscount.value = '6.8折'; return }
      if (id == 'food-set-004') { productName.value = '【暖心小聚】特色菜双人餐'; productImage.value = '/static/food-assets/food-2.jpg'; productPrice.value = '88'; productOriginalPrice.value = '126'; productDiscount.value = '7折'; return }
      if (id == 'food-set-005') { productName.value = '【家庭聚餐】经典川菜8人餐'; productImage.value = '/static/food-assets/food-1.jpg'; productPrice.value = '238'; productOriginalPrice.value = '366'; productDiscount.value = '6.5折'; return }
      if (id == 'food-set-006') { productName.value = '【人气必点】招牌菜4人餐'; productImage.value = '/static/food-assets/food-2.jpg'; productPrice.value = '128'; productOriginalPrice.value = '188'; productDiscount.value = '6.8折'; return }
      if (id == 'food-set-007') { productName.value = '【周末欢聚】特色菜10人餐'; productImage.value = '/static/food-assets/food-1.jpg'; productPrice.value = '298'; productOriginalPrice.value = '498'; productDiscount.value = '6折'; return }
      if (id == 'food-set-008') { productName.value = '【一人食】暖心工作餐'; productImage.value = '/static/food-assets/food-2.jpg'; productPrice.value = '39'; productOriginalPrice.value = '49'; productDiscount.value = '8折'; return }
      if (id == 'food-set-002') { productName.value = '【川香四溢】川菜4人餐'; productImage.value = '/static/common/image-placeholder.png'; productPrice.value = '118'; productOriginalPrice.value = '198'; productDiscount.value = '6折'; return }
      if (id == 'food-set-003') { productName.value = '【欢聚时光】招牌菜6人餐'; productImage.value = '/static/common/image-placeholder.png'; productPrice.value = '168'; productOriginalPrice.value = '248'; productDiscount.value = '6.8折'; return }
      if (id == 'food-set-004') { productName.value = '【暖心小聚】特色菜双人餐'; productImage.value = '/static/common/image-placeholder.png'; productPrice.value = '88'; productOriginalPrice.value = '126'; productDiscount.value = '7折'; return }
      if (id == 'food-set-005') { productName.value = '【家庭聚餐】经典川菜8人餐'; productImage.value = '/static/common/image-placeholder.png'; productPrice.value = '238'; productOriginalPrice.value = '366'; productDiscount.value = '6.5折'; return }
      if (id == 'food-set-006') { productName.value = '【人气必点】招牌菜4人餐'; productImage.value = '/static/common/image-placeholder.png'; productPrice.value = '128'; productOriginalPrice.value = '188'; productDiscount.value = '6.8折'; return }
      if (id == 'food-set-007') { productName.value = '【周末欢聚】特色菜10人餐'; productImage.value = '/static/common/image-placeholder.png'; productPrice.value = '298'; productOriginalPrice.value = '498'; productDiscount.value = '6折'; return }
      if (id == 'food-set-008') { productName.value = '【一人食】暖心工作餐'; productImage.value = '/static/common/image-placeholder.png'; productPrice.value = '39'; productOriginalPrice.value = '49'; productDiscount.value = '8折'; return }
   }

   onLoad((options: any) => {
@@ -128,12 +125,13 @@
         const original = hasOriginal ? Number(data.originalPrice) : 0
         if (hasSale && !isNaN(sale)) productPrice.value = sale.toFixed(2).replace(/\.00$/, '')
         if (hasOriginal && !isNaN(original) && original > 0) productOriginalPrice.value = original.toFixed(2).replace(/\.00$/, '')
         if (data != null && data.discountText != null && data.discountText != '') productDiscount.value = data.discountText as string
         productHasCoupon.value = data != null && (data.couponAvailable === true || Number(data.couponAvailable) == 1)
         if (data != null && data.discountText != null) productDiscount.value = data.discountText as string
         else if (original > 0 && sale < original) productDiscount.value = '' + Math.round(sale / original * 100) / 10 + '折'
         productAvailable.value = data == null || data.available !== false
         productSoldOut.value = data != null && (data.soldOut === true || Number(data.stock) == 0)
         detailText.value = data != null && data.detailText != null ? data.detailText as string : ''
         detailImages.value = getProductImages(data != null ? data.productImages : null)
         const rawDetailText = data != null && data.detailText != null ? data.detailText as string : ''
         detailText.value = sanitizeRichText(rawDetailText)
         purchaseNotices.value = buildPurchaseNotices(data != null ? data.purchaseNotice : null)
      }, () => {})
   }
@@ -162,27 +160,6 @@
         next.push({ type: item.type, title: item.title, icon: item.icon, content: content })
      }
      return next
   }

   const getProductImages = (value: any): string[] => {
      let images: any = value
      if (typeof images == 'string') {
         try {
            images = JSON.parse(images)
         } catch (_) {
            return []
         }
      }
      if (!(images instanceof Array)) return []
      const result: string[] = []
      for (let index = 0; index < images.length; index++) {
         const image = images[index]
         if (typeof image == 'string' && image.length > 0) result.push(resolveApiUrl(image))
      }
      return result
   }
   const replaceDetailImage = (index: number) => {
      if (index >= 0 && index < detailImages.value.length) detailImages.value[index] = fallbackImage
   }

   const goBack = () => safeBack('/pages/benefits/benefits')
@@ -244,8 +221,6 @@
   .product-status { display: block; margin-top: 11rpx; color: #E45D3C; font-size: 24rpx; }
   .detail-card, .notice-card { margin: 16rpx 25rpx 0; padding: 27rpx 27rpx 30rpx; border-radius: 15rpx; background-color: #FFFFFF; }
   .card-title { display: block; margin-bottom: 23rpx; color: #55575B; font-size: 30rpx; font-weight: 700; }
   .product-image-gallery { display: flex; padding: 16rpx 25rpx 0; box-sizing: border-box; background-color: #F7F7F7; flex-direction: column; }
   .product-image-gallery image { display: block; width: 100%; margin-bottom: 16rpx; border-radius: 12rpx; }
   .detail-description { display: block; color: #626870; font-size: 25rpx; line-height: 43rpx; white-space: pre-wrap; }
   .notice-item { display: flex; min-height: 105rpx; padding: 19rpx 0; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #EEEEEE; flex-direction: row; align-items: flex-start; }
   .notice-item:last-child { border-bottom-width: 0; }