Просмотр исходного кода

feat(ui): 登录后首页推荐商品对齐商城商品卡片样式

任务: logged-in-home-products-shop-style
- components/DimensionProducts.vue layout=mall(登录后首页/成长页推荐商品)按 商城 pages/shop/index 商品卡片对齐:
  - 新增 会员价(memberPrice → 会员¥xx)、🎁 赠品徽标(giftLevelName)、供应商名(vendorName || 平台官方)
  - 名称 26->28rpx、价格 28->32rpx、卡片 padding/行距、底部 margin 与商城一致
  - 封面回退 coverImage || image(与商城 image || coverImage 对齐)
  - 仅 layout=mall 生效;compact(member-detail 等)不受影响
- 登录前热门商品(一列列表)与登录后控件保持独立,未改动

验证:verify-vue-compile.js PASS;audit-mp-antipatterns ERROR 0
Agnes Agent 1 неделя назад
Родитель
Сommit
675cb64b47
1 измененных файлов с 24 добавлено и 5 удалено
  1. 24 5
      cfc-frontend/components/DimensionProducts.vue

+ 24 - 5
cfc-frontend/components/DimensionProducts.vue

@@ -5,14 +5,17 @@
     </view>
     <view v-else :class="['product-list', layout === 'mall' ? 'product-list-mall' : '']">
       <view :class="['product-card', layout === 'mall' ? 'product-card-mall' : '']" v-for="prod in displayProducts" :key="prod.id" @click="onProductClick(prod)">
-        <image class="product-img" :class="layout === 'mall' ? 'product-img-mall' : ''" :src="getImageUrl(prod.coverImage) || '/static/default-product.png'" mode="aspectFill"  lazy-load />
+        <image class="product-img" :class="layout === 'mall' ? 'product-img-mall' : ''" :src="getImageUrl(prod.coverImage || prod.image) || '/static/default-product.png'" mode="aspectFill"  lazy-load />
         <view class="product-body" :class="layout === 'mall' ? 'product-body-mall' : ''">
           <text class="product-name" :class="layout === 'mall' ? 'product-name-mall' : ''">{{ prod.name }}</text>
           <view class="price-row">
             <text class="product-price" :class="layout === 'mall' ? 'product-price-mall' : ''" v-if="prod.priceLabel">{{ prod.priceLabel }}</text>
             <text class="product-price" :class="layout === 'mall' ? 'product-price-mall' : ''" v-else-if="prod.price">{{ formatPriceWithSymbol(prod.price) }}</text>
             <text class="product-price" :class="layout === 'mall' ? 'product-price-mall' : ''" v-else>免费</text>
+            <text v-if="layout === 'mall' && prod.memberPrice" class="member-price-mall">会员{{ formatPriceWithSymbol(prod.memberPrice) }}</text>
+            <text v-if="layout === 'mall' && prod.giftLevelName" class="gift-badge-mall">🎁</text>
           </view>
+          <text v-if="layout === 'mall'" class="vendor-name-mall">{{ prod.vendorName || '平台官方' }}</text>
         </view>
       </view>
       <view v-if="loading" class="loading-state">
@@ -212,25 +215,41 @@ export default {
   width: 49%;
   border-radius: 16rpx;
   margin-right: 0;
+  margin-bottom: 20rpx;
 }
 .product-img-mall {
   height: 320rpx;
 }
 .product-body-mall {
-  padding: 16rpx 16rpx 14rpx;
+  padding: 16rpx;
 }
 .product-name-mall {
   display: -webkit-box;
-  font-size: calc(26rpx * var(--font-scale, 1));
+  font-size: calc(28rpx * var(--font-scale, 1));
   line-height: 1.4;
-  margin-bottom: 8rpx;
+  margin-bottom: 12rpx;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   white-space: normal;
 }
 .product-price-mall {
-  font-size: calc(28rpx * var(--font-scale, 1));
+  font-size: calc(32rpx * var(--font-scale, 1));
+}
+.member-price-mall {
+  font-size: calc(22rpx * var(--font-scale, 1));
+  color: $facade-text-muted;
+  margin-left: 8rpx;
+}
+.gift-badge-mall {
+  font-size: calc(24rpx * var(--font-scale, 1));
+  margin-left: 8rpx;
+}
+.vendor-name-mall {
+  display: block;
+  margin-top: 8rpx;
+  font-size: calc(22rpx * var(--font-scale, 1));
+  color: $facade-text-muted;
 }
 .empty-state {
   display: flex;