|
|
@@ -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;
|