|
|
@@ -1,28 +1,39 @@
|
|
|
<template>
|
|
|
<view class="section">
|
|
|
<view class="section-header">
|
|
|
- <text class="section-title">🛍️ 推荐商品</text>
|
|
|
- <text class="section-more" @click="$emit('moreProducts')">更多 ›</text>
|
|
|
+ <text class="section-title">🛍️ {{ title }}</text>
|
|
|
+ <text class="section-more" v-if="showMore" @click="$emit('moreProducts')">更多 ›</text>
|
|
|
</view>
|
|
|
- <view v-if="!displayProducts || displayProducts.length === 0" class="empty-state">
|
|
|
- <text class="empty-tip">{{ isLoggedIn ? '暂无商品' : '登录后查看更多商品' }}</text>
|
|
|
+ <view v-if="!loading && displayProducts.length === 0" class="empty-state">
|
|
|
+ <text class="empty-tip">{{ emptyText }}</text>
|
|
|
</view>
|
|
|
- <view class="product-list" v-if="displayProducts && displayProducts.length > 0">
|
|
|
- <view class="product-card" v-for="prod in displayProducts" :key="prod.id" @click="$emit('productClick', prod)">
|
|
|
+ <view class="product-list" v-if="displayProducts.length > 0">
|
|
|
+ <view class="product-card" v-for="prod in displayProducts" :key="prod.id" @click="onProductClick(prod)">
|
|
|
<image class="product-img" :src="prod.coverImage || '/static/default-product.png'" mode="aspectFill" />
|
|
|
<text class="product-name line-clamp-2">{{ prod.name }}</text>
|
|
|
<view class="weight-badges" v-if="prod._badges && prod._badges.length">
|
|
|
<text class="weight-badge" v-for="badge in prod._badges" :key="badge.name" :style="{ background: badge.color + '20', color: badge.color }">{{ badge.name }}{{ badge.weight }}%</text>
|
|
|
</view>
|
|
|
- <text class="product-price" v-if="prod.priceLabel">{{ prod.priceLabel }}</text>
|
|
|
- <text class="product-price" v-else-if="prod.price">{{ formatPriceWithSymbol(prod.price) }}</text>
|
|
|
- <text class="product-price" v-else>免费</text>
|
|
|
+ <view class="price-row">
|
|
|
+ <text class="product-price" v-if="prod.priceLabel">{{ prod.priceLabel }}</text>
|
|
|
+ <text class="product-price" v-else-if="prod.price">{{ formatPriceWithSymbol(prod.price) }}</text>
|
|
|
+ <text class="product-price" v-else>免费</text>
|
|
|
+ <text class="product-reason" v-if="prod.reason">{{ prod.reason }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="match-badge" v-if="prod.matchScore">
|
|
|
+ <text class="match-score">{{ prod.matchScore }}分</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="loading-state" v-if="loading">
|
|
|
+ <text class="loading-text">加载中...</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { getDimensionProducts, clickRepurchaseReminder } from '../utils/api.js'
|
|
|
+
|
|
|
var DIMENSION_MAP = {
|
|
|
body: { name: '身', color: '#FF8C42' },
|
|
|
mind: { name: '心', color: '#FF6B9D' },
|
|
|
@@ -34,27 +45,82 @@ var DIMENSION_MAP = {
|
|
|
export default {
|
|
|
props: {
|
|
|
dimensionCode: { type: String, default: '' },
|
|
|
+ // 兼容模式:父组件直接传入商品数组(member-detail 等页面)
|
|
|
products: { type: Array, default: function() { return [] } },
|
|
|
- isLoggedIn: { type: Boolean, default: false }
|
|
|
+ // 自加载模式:传入 familyId 后组件内部调用 getDimensionProducts
|
|
|
+ familyId: { type: [Number, String], default: null },
|
|
|
+ isLoggedIn: { type: Boolean, default: false },
|
|
|
+ title: { type: String, default: '推荐商品' },
|
|
|
+ showMore: { type: Boolean, default: true }
|
|
|
},
|
|
|
data: function() {
|
|
|
return {
|
|
|
+ selfProducts: [],
|
|
|
+ loading: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
displayProducts: function() {
|
|
|
+ var list = this.products && this.products.length > 0 ? this.products : this.selfProducts
|
|
|
var self = this
|
|
|
- return (this.products || []).map(function(item) {
|
|
|
+ return (list || []).map(function(item) {
|
|
|
item._badges = self.parseWeights(item.dimensionWeights)
|
|
|
return item
|
|
|
})
|
|
|
+ },
|
|
|
+ emptyText: function() {
|
|
|
+ // 有 familyId(已登录且选中孩子)但推荐接口无数据
|
|
|
+ if (this.familyId) {
|
|
|
+ return '暂无推荐商品'
|
|
|
+ }
|
|
|
+ return this.isLoggedIn ? '暂无商品' : '登录后查看更多商品'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
+ // 自加载模式:有 familyId 且父组件未传入 products 时才请求推荐接口
|
|
|
+ if (this.familyId && (!this.products || this.products.length === 0)) {
|
|
|
+ this.loadDimensionProducts()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ familyId: function(val) {
|
|
|
+ // 切换孩子/登录态变化时重新加载
|
|
|
+ if (val && (!this.products || this.products.length === 0)) {
|
|
|
+ this.loadDimensionProducts()
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
-formatPriceWithSymbol: function(price) {
|
|
|
-if (price == null) return '免费'
|
|
|
-return '¥' + (Number(price) / 100).toFixed(2)
|
|
|
-},
|
|
|
+ loadDimensionProducts: function() {
|
|
|
+ var self = this
|
|
|
+ self.loading = true
|
|
|
+ var params = {
|
|
|
+ dimensionCode: self.dimensionCode,
|
|
|
+ familyId: self.familyId,
|
|
|
+ limit: 6
|
|
|
+ }
|
|
|
+ getDimensionProducts(params).then(function(res) {
|
|
|
+ self.loading = false
|
|
|
+ if (res.code === 200 && res.data) {
|
|
|
+ self.selfProducts = Array.isArray(res.data) ? res.data : (res.data.records || [])
|
|
|
+ }
|
|
|
+ }).catch(function() {
|
|
|
+ self.loading = false
|
|
|
+ self.selfProducts = []
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onProductClick: function(prod) {
|
|
|
+ if (!prod || !prod.id) return
|
|
|
+ // 复购提醒追踪(推荐商品点击行为上报)
|
|
|
+ if (prod.source === 'repurchase' && prod.id) {
|
|
|
+ clickRepurchaseReminder(prod.id).catch(function() {})
|
|
|
+ }
|
|
|
+ this.$emit('productClick', prod)
|
|
|
+ },
|
|
|
+ formatPriceWithSymbol: function(price) {
|
|
|
+ if (price == null) return '免费'
|
|
|
+ return '¥' + (Number(price) / 100).toFixed(2)
|
|
|
+ },
|
|
|
parseWeights: function(str) {
|
|
|
if (!str) return []
|
|
|
try {
|
|
|
@@ -132,12 +198,37 @@ return '¥' + (Number(price) / 100).toFixed(2)
|
|
|
border-radius: 6rpx;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
+.price-row {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 8rpx 16rpx 16rpx;
|
|
|
+}
|
|
|
.product-price {
|
|
|
font-size: 28rpx;
|
|
|
color: #F97316;
|
|
|
font-weight: bold;
|
|
|
- padding: 8rpx 16rpx 16rpx;
|
|
|
- display: block;
|
|
|
+}
|
|
|
+.product-reason {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #999;
|
|
|
+ max-width: 60%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+.match-badge {
|
|
|
+ display: inline-block;
|
|
|
+ background: linear-gradient(135deg, #6366F1, #818CF8);
|
|
|
+ padding: 4rpx 16rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin: 0 16rpx 16rpx;
|
|
|
+}
|
|
|
+.match-score {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
.line-clamp-2 {
|
|
|
overflow: hidden;
|
|
|
@@ -155,4 +246,13 @@ return '¥' + (Number(price) / 100).toFixed(2)
|
|
|
font-size: 24rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
+.loading-state {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 40rpx 0;
|
|
|
+}
|
|
|
+.loading-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
</style>
|