From 5ce0d76154bf4c1d70543476cdfad9a30195b0f8 Mon Sep 17 00:00:00 2001
From: shinnosuke <tantao@1hoper.com>
Date: 星期六, 10 十月 2026 16:44:38 +0800
Subject: [PATCH] fix(miniapp): 调整首页圆角布局并隐藏滚动条
---
rencaika/pages/product-detail/product-detail.uvue | 70 +++++++++++++---------------------
1 files changed, 27 insertions(+), 43 deletions(-)
diff --git a/rencaika/pages/product-detail/product-detail.uvue b/rencaika/pages/product-detail/product-detail.uvue
index 61c724e..7ccf641 100644
--- a/rencaika/pages/product-detail/product-detail.uvue
+++ b/rencaika/pages/product-detail/product-detail.uvue
@@ -10,17 +10,13 @@
</view>
</view>
- <scroll-view class="content" scroll-y @scroll="handleScroll">
+ <scroll-view :show-scrollbar="false" class="content" scroll-y @scroll="handleScroll">
<view class="hero">
<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)
}, () => {})
}
@@ -149,31 +147,19 @@
const next: any[] = []
for (let index = 0; index < defaultPurchaseNotices.length; index++) {
const item = defaultPurchaseNotices[index]
- const content = notice != null && notice[item.type] != null && notice[item.type] != '' ? '' + notice[item.type] : '以商户说明为准'
+ let configured: any = null
+ if (notice != null) {
+ // The admin group-buy form stores these three fields under its own
+ // form names. Keep the old keys as a fallback for existing products.
+ if (item.type == 'validity') configured = notice.validPeriod != null ? notice.validPeriod : notice.validity
+ else if (item.type == 'usage') configured = notice.useMethod != null ? notice.useMethod : notice.usage
+ else if (item.type == 'otherRules') configured = notice.otherRule != null ? notice.otherRule : notice.otherRules
+ else configured = notice.availableTime
+ }
+ const content = configured != null && ('' + configured).trim() != '' ? '' + configured : '以商户说明为准'
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')
@@ -235,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; }
--
Gitblit v1.7.1