From c54fb1f2a9c78fa2c52806d2d18995cd85df5118 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=81=E6=9D=B0?= <727475508@qq.com>
Date: Wed, 3 Jun 2026 11:40:40 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=80=E8=83=BD=E6=8E=A8=E8=8D=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/jingxuan/skill-detail.vue | 269 +++++++++++++++-----------------
 1 file changed, 129 insertions(+), 140 deletions(-)

diff --git a/pages/jingxuan/skill-detail.vue b/pages/jingxuan/skill-detail.vue
index ea0045c..87197a8 100644
--- a/pages/jingxuan/skill-detail.vue
+++ b/pages/jingxuan/skill-detail.vue
@@ -1,75 +1,55 @@
 <template>
   <view class="skill-detail-page">
-    
-    <custom-navbar 
-      title="技能集市" 
-      backgroundColor="#ffffff" 
-      titleColor="#333" 
-      borderBottom="none">
+
+    <custom-navbar title="技能集市" backgroundColor="#ffffff" titleColor="#333" borderBottom="none">
     </custom-navbar>
 
-  <!--  <view class="mock-switch" @click="toggleMockData">
+    <!--  <view class="mock-switch" @click="toggleMockData">
       <text>{{ useMockData ? '关闭模拟数据' : '开启模拟数据' }}</text>
     </view> -->
 
     <view class="video-section" v-if="article.videoSrc">
       <view class="video-wrapper">
-        
-        <video 
-          v-if="!tipShow"
-          id="customVideo"
-          class="main-video"
-          :src="article.videoSrc"
-          :poster="article.poster"
-          :controls="showNativeControls"
-          :show-center-play-btn="false"
-          :muted="isMuted"
-          object-fit="cover"
-          @timeupdate="onTimeUpdate"
-          @loadedmetadata="onLoadedMetaData"
-          @ended="onEnded"
-          @play="onPlay"
-          @pause="onPause"
-          @fullscreenchange="onFullScreenChange"
-        >
-          <cover-image 
-            v-if="!isPlaying && !showNativeControls" 
-            class="center-play-icon" 
-            src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bb720bb0-4ada-49f6-9ce5-38abfd613d5d.png" 
-            @click.stop="togglePlay"
-          ></cover-image>
+
+        <video v-if="!tipShow" id="customVideo" class="main-video" :src="article.videoSrc" :poster="article.poster"
+          :controls="showNativeControls" :show-center-play-btn="false" :muted="isMuted" object-fit="cover"
+          @timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetaData" @ended="onEnded" @play="onPlay" @pause="onPause"
+          @fullscreenchange="onFullScreenChange">
+          <cover-image v-if="!isPlaying && !showNativeControls" class="center-play-icon"
+            src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bb720bb0-4ada-49f6-9ce5-38abfd613d5d.png"
+            @click.stop="togglePlay"></cover-image>
 
           <cover-view class="custom-control-bar" v-if="!showNativeControls">
-            <cover-image class="bar-bg" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ce7f28f8-470d-4f5b-9c7e-ff2bf8635226.png"></cover-image>
-            
+            <cover-image class="bar-bg"
+              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ce7f28f8-470d-4f5b-9c7e-ff2bf8635226.png"></cover-image>
+
             <cover-view class="bar-content">
               <cover-image v-if="isPlaying" class="ctrl-icon" :src="iconPause" @click.stop="togglePlay"></cover-image>
               <cover-image v-if="!isPlaying" class="ctrl-icon" :src="iconPlay" @click.stop="togglePlay"></cover-image>
-              
+
               <cover-view class="time-text">{{ formatTime(currentTime) }}</cover-view>
-              
+
               <cover-view class="slider-track">
                 <cover-view class="slider-bg"></cover-view>
                 <cover-view class="slider-active" :style="activeStyle"></cover-view>
                 <cover-view class="slider-thumb" :style="thumbStyle"></cover-view>
               </cover-view>
-              
+
               <cover-view class="time-text">{{ formatTime(duration) }}</cover-view>
-              
-              <cover-image v-if="!isMuted" class="ctrl-icon mute-icon" :src="iconSoundOn" @click.stop="toggleMute"></cover-image>
-              <cover-image v-if="isMuted" class="ctrl-icon mute-icon" :src="iconMute" @click.stop="toggleMute"></cover-image>
-              
-              <cover-image class="ctrl-icon fullscreen-icon" :src="iconFullscreen" @click.stop="toggleFullScreen"></cover-image>
+
+              <cover-image v-if="!isMuted" class="ctrl-icon mute-icon" :src="iconSoundOn"
+                @click.stop="toggleMute"></cover-image>
+              <cover-image v-if="isMuted" class="ctrl-icon mute-icon" :src="iconMute"
+                @click.stop="toggleMute"></cover-image>
+
+              <cover-image class="ctrl-icon fullscreen-icon" :src="iconFullscreen"
+                @click.stop="toggleFullScreen"></cover-image>
             </cover-view>
           </cover-view>
         </video>
-        
-        <image 
-          v-else 
-          class="main-video fallback-poster" 
-          :src="article.poster || article.videoSrc" 
-          mode="aspectFill"
-        ></image>
+
+        <image v-else class="main-video fallback-poster" :src="article.poster || article.videoSrc" mode="aspectFill">
+        </image>
       </view>
     </view>
 
@@ -81,12 +61,9 @@
           <text class="author-name">{{ article.authorName }}</text>
           <text class="date">{{ article.date }}</text>
         </view>
-        
+
         <view class="favorite-btn" @click="toggleFavorite">
-          <image 
-            class="star-icon" 
-            :src="isFavorite ? filledStarUrl : emptyStarUrl"
-            />
+          <image class="star-icon" :src="isFavorite ? filledStarUrl : emptyStarUrl" />
           <text :class="{ 'active-fav': isFavorite }">{{ isFavorite ? '已收藏' : '收藏' }}</text>
         </view>
       </view>
@@ -105,17 +82,15 @@
       <view class="section-header">
         <text class="section-title">相关推荐</text>
         <view class="refresh-btn" @click="refreshList">
-          <image class="refresh-icon" :class="{'is-rotating': isRefreshing}" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/f2152145-df2a-49ab-87f5-f66b3207d0b0.png"></image>
+          <image class="refresh-icon" :class="{ 'is-rotating': isRefreshing }"
+            src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/f2152145-df2a-49ab-87f5-f66b3207d0b0.png">
+          </image>
           <text>换一批</text>
         </view>
       </view>
-      
+
       <view class="list-container">
-        <skill-card 
-          v-for="(item, index) in recommendList" 
-          :key="index" 
-          :item="item"
-        ></skill-card>
+        <skill-card v-for="(item, index) in recommendList" :key="index" :item="item"></skill-card>
       </view>
     </view>
 
@@ -129,7 +104,7 @@
 <script>
 import request from "@/utils/request";
 import SkillCard from "@/pages/home/components/skill-card.vue";
-import tipsPopup2 from "@/components/tips-popup/tips-popup2"; 
+import tipsPopup2 from "@/components/tips-popup/tips-popup2";
 
 export default {
   components: {
@@ -139,7 +114,7 @@ export default {
   data() {
     return {
       useMockData: false,
-      
+
       articleId: null,
       isFavorite: false,
       emptyStarUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/53378402-5456-4a80-b2ec-7c18d43d970e.png',
@@ -154,19 +129,19 @@ export default {
       videoContext: null,
       isPlaying: false,
       isMuted: false,
-      
-      showNativeControls: false, 
-      
+
+      showNativeControls: false,
+
       currentTime: 0,
       duration: 0,
       sliderValue: 0,
-      
-      iconPlay: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/88ca4fe3-645c-48a9-abda-1f9b45714970.png', 
-      iconPause: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cf9d6dd6-e9df-4c46-bafa-e1a72f7ddbcd.png', 
+
+      iconPlay: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/88ca4fe3-645c-48a9-abda-1f9b45714970.png',
+      iconPause: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cf9d6dd6-e9df-4c46-bafa-e1a72f7ddbcd.png',
       iconSoundOn: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/9f13a630-7efd-4c61-b6fe-b6b282e28e42.png',
       iconMute: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/80f856c1-3d66-4b11-b21a-8eb6a3272a3c.png',
       iconFullscreen: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4286ef33-6849-4851-8866-4230d2523a33.png',
-      
+
       article: {},
       recommendList: []
     }
@@ -190,7 +165,7 @@ export default {
     if (options && options.id) {
       this.articleId = parseInt(options.id, 10);
     } else {
-      this.articleId = 1; 
+      this.articleId = 1;
     }
     this.getPageData();
   },
@@ -207,7 +182,7 @@ export default {
       const count = this.article.authorVideoCount || 0;
 
       uni.navigateTo({
-        url: `/pages/jingxuan/selected-skills?showAuthor=1&isOfficial=${isOfficial}&linkId=${linkId}&authorName=${name}&authorAvatar=${avatar}&videoCount=${count}` 
+        url: `/pages/jingxuan/selected-skills?showAuthor=1&isOfficial=${isOfficial}&linkId=${linkId}&authorName=${name}&authorAvatar=${avatar}&videoCount=${count}`
       });
     },
 
@@ -224,10 +199,10 @@ export default {
     okBtn() {
       if (this.tipType == "login") {
         uni.navigateTo({
-          url: "/pages/blogPopup/blogPopup", 
+          url: "/pages/blogPopup/blogPopup",
         });
       }
-      this.tipShow = false; 
+      this.tipShow = false;
     },
 
     formatTime(sec) {
@@ -260,7 +235,7 @@ export default {
     },
     onPlay() { this.isPlaying = true; },
     onPause() { this.isPlaying = false; },
-    
+
     onFullScreenChange(e) {
       const isFull = e.detail.fullScreen;
       if (!isFull) {
@@ -269,7 +244,7 @@ export default {
         this.showNativeControls = true;
       }
     },
-    
+
     togglePlay() {
       const ctx = this.getVideoContext();
       if (!ctx) return;
@@ -282,7 +257,7 @@ export default {
     toggleMute() {
       this.isMuted = !this.isMuted;
     },
-    
+
     toggleFullScreen() {
       const ctx = this.getVideoContext();
       if (!ctx) return;
@@ -304,27 +279,38 @@ export default {
         return;
       }
       uni.showLoading({ title: '加载中...' });
-      request.post("/sj/skill/details", { 
-        id: this.articleId 
+      request.post("/sj/skill/details", {
+        id: this.articleId
       }).then((res) => {
         if (res.code == 200 && res.data) {
           const data = res.data;
           this.article = {
-            title: data.name || '暂无标题', 
+            title: data.name || '暂无标题',
             // 【预留接口字段解析】：这里需要后端配合返回以下字段，如果没有的话目前会使用默认值
             linkType: data.link_type || 1,        // 1=官方 2=品牌
             linkId: data.link_id || 0,
-            authorName: data.author_name || '美融融平台', 
+            authorName: data.author_name || '美融融平台',
             authorAvatar: data.author_avatar || 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/bbe832bf-aae6-4579-b3cc-246d252488c3',
             authorVideoCount: data.link_publish_num || 0, // 关联者发布数
 
-            date: data.create_time ? data.create_time.substring(0, 10).replace(/-/g, '.') : '', 
+            date: data.create_time ? data.create_time.substring(0, 10).replace(/-/g, '.') : '',
             videoSrc: data.video || '',
             poster: data.cover_img || '',
             htmlContent: data.detail || ''
           };
           this.isFavorite = data.collect_state === 1;
-          this.loadMockRecommend(); 
+          request.post("/sj/skill/list", {
+            page: 1,
+            limit: 10,
+            link_type: data.link_type,
+            link_id: data.link_id
+          }).then((listRes) => {
+            if (listRes.code == 200 && listRes.data && listRes.data.list) {
+              this.recommendList = listRes.data.list;
+            }
+          }).catch((err) => {
+            console.error('获取推荐列表异常', err);
+          });
         } else {
           uni.showToast({ title: res.msg || '获取数据失败', icon: 'none' });
         }
@@ -337,13 +323,13 @@ export default {
 
     toggleFavorite() {
       if (!this.isLogin) {
-        if(this.isPlaying) {
+        if (this.isPlaying) {
           this.getVideoContext().pause();
         }
         this.tipsText = "您现在还未登录，是否确定前往登录？";
         this.tipShow = true;
         this.tipType = "login";
-        return; 
+        return;
       }
 
       if (this.useMockData) {
@@ -351,15 +337,15 @@ export default {
         uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' });
         return;
       }
-      
+
       uni.showLoading({ title: '处理中' });
       const targetState = this.isFavorite ? 2 : 1;
-      
-      request.post("/sj/skill/collect", { 
-        id: this.articleId, 
-        state: targetState 
+
+      request.post("/sj/skill/collect", {
+        id: this.articleId,
+        state: targetState
       }).then(res => {
-        if(res.code == 200) {
+        if (res.code == 200) {
           this.isFavorite = !this.isFavorite;
           uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' });
         } else {
@@ -371,9 +357,9 @@ export default {
         uni.hideLoading();
       });
     },
-    
+
     refreshList() {
-      if(this.isRefreshing) return;
+      if (this.isRefreshing) return;
       this.isRefreshing = true;
       uni.showLoading({ title: '加载中' });
       setTimeout(() => {
@@ -387,10 +373,10 @@ export default {
       this.isFavorite = false;
       this.article = {
         title: '穿戴甲的操作视频扫码验券操作',
-        
+
         // Mock作者相关数据(测试品牌跳转，将linkType改为2)
         linkType: 2,
-        linkId: 101, 
+        linkId: 101,
         authorName: '蜜丝卡伦官方品牌',
         authorAvatar: 'https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80',
         authorVideoCount: 658,
@@ -457,12 +443,12 @@ export default {
 .video-section {
   width: 100%;
   height: 420rpx;
-  
+
   .video-wrapper {
     position: relative;
     width: 100%;
     height: 100%;
-    
+
     .main-video {
       width: 100%;
       height: 100%;
@@ -490,7 +476,7 @@ export default {
       width: 100%;
       height: 70rpx;
       z-index: 99;
-      
+
       .bar-bg {
         position: absolute;
         top: 0;
@@ -499,43 +485,45 @@ export default {
         height: 70rpx;
         z-index: 100;
       }
-      
+
       .bar-content {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 70rpx;
-        z-index: 101; 
+        z-index: 101;
         display: flex;
         flex-direction: row;
         align-items: center;
         padding: 0 10rpx;
         box-sizing: border-box;
-        
+
         .ctrl-icon {
           width: 25rpx;
           height: 30rpx;
           margin: 0 10rpx;
           flex-shrink: 0;
         }
+
         .mute-icon {
           width: 38rpx;
           height: 30rpx;
           flex-shrink: 0;
         }
+
         .fullscreen-icon {
           width: 30rpx;
           height: 30rpx;
           flex-shrink: 0;
         }
-        
+
         .time-text {
           font-size: 22rpx;
           color: #ffffff;
           line-height: 70rpx;
         }
-        
+
         .slider-track {
           flex: 1;
           height: 70rpx;
@@ -544,16 +532,16 @@ export default {
           display: flex;
           flex-direction: column;
           justify-content: center;
-          
+
           .slider-bg {
             position: absolute;
-            top: 33rpx; 
+            top: 33rpx;
             left: 0;
             width: 100%;
             height: 4rpx;
             background-color: rgba(255, 255, 255, 0.4);
           }
-          
+
           .slider-active {
             position: absolute;
             top: 33rpx;
@@ -561,11 +549,11 @@ export default {
             height: 4rpx;
             background-color: #FF4767;
           }
-          
+
           .slider-thumb {
             position: absolute;
-            top: 25rpx; 
-            margin-left: -10rpx; 
+            top: 25rpx;
+            margin-left: -10rpx;
             width: 20rpx;
             height: 20rpx;
             border-radius: 50%;
@@ -579,7 +567,7 @@ export default {
 
 .article-header {
   padding: 30rpx 30rpx 20rpx;
-  
+
   .title {
     font-weight: 500;
     font-size: 32rpx;
@@ -587,23 +575,23 @@ export default {
     line-height: 45rpx;
     margin-bottom: 24rpx;
   }
-  
+
   .meta-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    
+
     .author-info {
       display: flex;
       align-items: center;
-      
+
       .avatar {
         width: 28rpx;
         height: 28rpx;
         border-radius: 50%;
         margin-right: 12rpx;
       }
-      
+
       .author-name {
         font-weight: 400;
         font-size: 24rpx;
@@ -611,7 +599,7 @@ export default {
         line-height: 33rpx;
         margin-right: 16rpx;
       }
-      
+
       .date {
         font-weight: 400;
         font-size: 24rpx;
@@ -619,25 +607,25 @@ export default {
         line-height: 33rpx;
       }
     }
-    
+
     .favorite-btn {
-        display: flex;
-        align-items: center;
-        font-weight: 400;
-        font-size: 24rpx;
-        color: #999999;
-        line-height: 33rpx;
-        
-        .star-icon {
-            width: 26rpx;
-            height: 26rpx;
-            margin-right: 6rpx;
-            margin-top: -2rpx;
-        }
-        
-        .active-fav {
-            color: #FD5A8C ; 
-        }
+      display: flex;
+      align-items: center;
+      font-weight: 400;
+      font-size: 24rpx;
+      color: #999999;
+      line-height: 33rpx;
+
+      .star-icon {
+        width: 26rpx;
+        height: 26rpx;
+        margin-right: 6rpx;
+        margin-top: -2rpx;
+      }
+
+      .active-fav {
+        color: #FD5A8C;
+      }
     }
   }
 }
@@ -649,11 +637,12 @@ export default {
     font-size: 28rpx;
     color: #2A2A2A;
     line-height: 40rpx;
-    
+
     ::v-deep p {
       margin-bottom: 24rpx;
       line-height: 40rpx;
     }
+
     ::v-deep img {
       max-width: 100%;
       height: auto;
@@ -669,14 +658,14 @@ export default {
     align-items: center;
     justify-content: center;
     padding: 50rpx 0 80rpx;
-    
+
     .empty-icon {
       width: 140rpx;
       height: 140rpx;
       margin-bottom: 24rpx;
       opacity: 0.8;
     }
-    
+
     .empty-text {
       font-size: 26rpx;
       color: #A9A9A9;
@@ -686,32 +675,32 @@ export default {
 
 .recommend-section {
   padding: 0 30rpx;
-  
+
   .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 30rpx;
-    
+
     .section-title {
       font-weight: 500;
       font-size: 30rpx;
       color: #333333;
       line-height: 42rpx;
     }
-    
+
     .refresh-btn {
       display: flex;
       align-items: center;
       font-size: 26rpx;
       color: #999999;
-      
+
       .refresh-icon {
         width: 24rpx;
         height: 28rpx;
         margin-right: 8rpx;
         transition: transform 0.5s ease;
-        
+
         &.is-rotating {
           transform: rotate(360deg);
         }