feat(frontend): 文章详情页关联商品推荐（article-detail.vue + api.js）

cfc-frontend/pages/article-center/article-detail.vue

@@ -41,6 +41,28 @@
         <view class="divider"></view>
         <view class="detail-body"><mp-html :content="article.content" :domain="config.API_BASE_URL" :tag-style="contentTagStyle" /></view>
 
+        <!-- 关联商品（文章标签匹配推荐） -->
+        <view class="related-section" v-if="relatedProducts.length > 0">
+          <view class="related-header">
+            <text class="related-title">相关商品</text>
+            <text class="related-sub">与本文内容相关</text>
+          </view>
+          <scroll-view scroll-x class="related-scroll" :show-scrollbar="false">
+            <view class="related-list">
+              <view class="related-item" v-for="p in relatedProducts" :key="p.id" @click="goProduct(p)">
+                <image class="related-img" :src="getImageUrl(p.coverImage)" mode="aspectFill" />
+                <view class="related-info">
+                  <text class="related-name">{{ p.name }}</text>
+                  <view class="related-price-row">
+                    <text class="related-price">¥{{ p.memberPrice }}</text>
+                    <text class="related-match">匹配{{ p.tagMatchCount }}标签</text>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </scroll-view>
+        </view>
+
         <!-- 评论区（已屏蔽） -->
         <view style="height: 200rpx;"></view>
       </scroll-view>
@@ -87,7 +109,7 @@
 </template>
 
 <script>
-import { getArticleDetail, reportReadingTime, getShareQrCode, completeArticleRead, generateQuiz, submitQuiz } from '@/utils/api.js'
+import { getArticleDetail, reportReadingTime, getShareQrCode, completeArticleRead, generateQuiz, submitQuiz, getArticleRelatedProducts } from '@/utils/api.js'
 import shareMixin from '../../components/share-mixin.js'
 import ContentSharePoster from '@/components/ContentSharePoster.vue'
 import MpHtml from '@/components/mp-html/mp-html.vue'
@@ -99,6 +121,7 @@ export default {
   data() {
     return {
       articleId: '', article: null, loading: true, error: false, errorMsg: '',
+      relatedProducts: [],
       readingSeconds: 0, lastReportedSeconds: 0, readingCompleted: false,
       isTimerRunning: false, timerHandle: null, syncHandle: null,
       currentChildId: null, isLogin: false,
@@ -155,11 +178,30 @@ export default {
           this.article.content = this.resolveContentUrls(this.article.content)
           this.setShareInfo('推荐阅读: ' + (res.data.title || ''), '/pages/article-center/article-detail?id=' + id)
           this.startReadingTimer()
+          this.loadRelatedProducts(id)
         } else { this.error = true; this.errorMsg = '文章不存在或无权限查看' }
       } catch (e) { this.error = true; this.errorMsg = '加载失败' }
       finally { this.loading = false }
     },
     formatDate(d) { return d ? d.slice(0, 10) : '' },
+    loadRelatedProducts: function(id) {
+      var self = this
+      getArticleRelatedProducts({ articleId: id, size: 6 }).then(function(res) {
+        if (res && res.code === 200 && res.data) {
+          var list = res.data
+          var i
+          for (i = 0; i < list.length; i++) {
+            list[i].coverImage = self.getImageUrl(list[i].coverImage)
+          }
+          self.relatedProducts = list
+        }
+      }).catch(function() {})
+    },
+    goProduct: function(p) {
+      if (p && p.id) {
+        uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + p.id })
+      }
+    },
     getImageUrl: function(path) {
       if (!path) return ''
       if (path.indexOf('http://') === 0 || path.indexOf('https://') === 0) return path
@@ -351,6 +393,21 @@ export default {
 .divider { height: 1rpx; background: #eee; margin: 24rpx 30rpx; }
 .detail-body { padding: 0 30rpx; font-size: 32rpx; color: #444; line-height: 1.8; }
 
+/* 关联商品 */
+.related-section { padding: 30rpx 0 20rpx; }
+.related-header { display: flex; align-items: baseline; padding: 0 30rpx; margin-bottom: 20rpx; }
+.related-title { font-size: 30rpx; font-weight: 700; color: #333; }
+.related-sub { font-size: 22rpx; color: #999; margin-left: 16rpx; }
+.related-scroll { white-space: nowrap; padding-left: 30rpx; }
+.related-list { display: inline-flex; }
+.related-item { width: 240rpx; margin-right: 20rpx; background: #fff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06); display: inline-block; vertical-align: top; }
+.related-img { width: 240rpx; height: 240rpx; display: block; background: #f5f5f5; }
+.related-info { padding: 14rpx 16rpx 18rpx; }
+.related-name { font-size: 24rpx; color: #333; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; min-height: 68rpx; }
+.related-price-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10rpx; }
+.related-price { font-size: 26rpx; font-weight: 700; color: #F97316; }
+.related-match { font-size: 18rpx; color: #999; }
+
 .detail-footer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 20rpx 30rpx; display: flex; align-items: center; gap: 16rpx; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.06); z-index: 10; }
 .share-btn { height: 72rpx; padding: 0 30rpx; background: linear-gradient(135deg, #F97316, #FB923C); border-radius: 36rpx; display: flex; align-items: center; justify-content: center; border: none; }
 .share-btn::after { border: none; }

cfc-frontend/utils/api.js

@@ -1954,6 +1954,7 @@ export const getUnlockStatus = () => {
 export const getArticleCategories = () => request('/api/articles/categories', 'POST')
 export const getArticleList = (data) => request('/api/articles/list', 'POST', data)
 export const getArticleDetail = (data) => request('/api/articles/detail', 'POST', data)
+export const getArticleRelatedProducts = (data) => request('/api/articles/related-products', 'POST', data)
 export const getFeaturedArticles = (data) => request('/api/articles/featured', 'POST', data)
 export const recordArticleRead = (data) => request('/api/articles/record-read', 'POST', data)
 export const reportReadingTime = (data) => request('/api/articles/report-reading-time', 'POST', data)