|
|
@@ -65,6 +65,29 @@
|
|
|
:refresher-triggered="refreshing"
|
|
|
@refresherrefresh="onRefresh"
|
|
|
>
|
|
|
+ <!-- 为你推荐 -->
|
|
|
+ <view class="recommend-section" v-if="recommended.length > 0">
|
|
|
+ <view class="recommend-header">
|
|
|
+ <text class="recommend-title">🔥 为你推荐</text>
|
|
|
+ </view>
|
|
|
+ <scroll-view scroll-x enable-flex show-scrollbar="false" class="recommend-scroll">
|
|
|
+ <view
|
|
|
+ v-for="item in recommended"
|
|
|
+ :key="item.id"
|
|
|
+ class="recommend-card"
|
|
|
+ @click="goDetail(item.id)"
|
|
|
+ >
|
|
|
+ <image
|
|
|
+ class="recommend-img"
|
|
|
+ :src="item.image || item.coverImage || '/static/default-product.png'"
|
|
|
+ mode="aspectFill"
|
|
|
+ />
|
|
|
+ <text class="recommend-name">{{ item.name }}</text>
|
|
|
+ <text class="recommend-price">{{ formatPriceWithSymbol(item.price) }}</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- Loading skeleton -->
|
|
|
<view v-if="loading && products.length === 0" class="skeleton-grid">
|
|
|
<view class="skeleton-card" v-for="n in 6" :key="n">
|
|
|
@@ -134,7 +157,8 @@ export default {
|
|
|
refreshing: false,
|
|
|
noMore: false,
|
|
|
isLoggedIn: false,
|
|
|
- isMember: false
|
|
|
+ isMember: false,
|
|
|
+ recommended: []
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
@@ -142,6 +166,7 @@ export default {
|
|
|
this.isLoggedIn = !!uni.getStorageSync('token')
|
|
|
this.loadCategories()
|
|
|
this.loadProducts()
|
|
|
+ this.loadRecommended()
|
|
|
},
|
|
|
onShow() {
|
|
|
this.checkMemberStatus()
|
|
|
@@ -242,6 +267,17 @@ export default {
|
|
|
},
|
|
|
goSearch() {
|
|
|
uni.navigateTo({ url: '/pages/shop/search/search' })
|
|
|
+ },
|
|
|
+ loadRecommended() {
|
|
|
+ productList({ page: 1, size: 6, sort: 'sales' }).then(res => {
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ this.recommended = res.data.records || []
|
|
|
+ }
|
|
|
+ }).catch(() => {})
|
|
|
+ },
|
|
|
+ formatPriceWithSymbol(price) {
|
|
|
+ if (price === null || price === undefined) return ''
|
|
|
+ return '¥' + parseFloat(price).toFixed(2)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -370,6 +406,54 @@ export default {
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
+/* 为你推荐 */
|
|
|
+.recommend-section {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin: 16rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+}
|
|
|
+.recommend-header {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+}
|
|
|
+.recommend-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.recommend-scroll {
|
|
|
+ white-space: nowrap;
|
|
|
+ padding-bottom: 8rpx;
|
|
|
+}
|
|
|
+.recommend-card {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 200rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.recommend-img {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ background: #f0f0f0;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+}
|
|
|
+.recommend-name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333;
|
|
|
+ lines: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+}
|
|
|
+.recommend-price {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #F97316;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
/* Level 2 子分类：横向滚动chips */
|
|
|
.cat-level2-scroll {
|
|
|
background: #fff;
|
iwt