技能推荐

pages/jingxuan/skill-detail.vue

@@ -1,46 +1,27 @@
 <template>
   <view class="skill-detail-page">
 
-    <custom-navbar 
+    <custom-navbar title="技能集市" backgroundColor="#ffffff" titleColor="#333" borderBottom="none">
-      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 
+        <video v-if="!tipShow" id="customVideo" class="main-video" :src="article.videoSrc" :poster="article.poster"
-          v-if="!tipShow"
+          :controls="showNativeControls" :show-center-play-btn="false" :muted="isMuted" object-fit="cover"
-          id="customVideo"
+          @timeupdate="onTimeUpdate" @loadedmetadata="onLoadedMetaData" @ended="onEnded" @play="onPlay" @pause="onPause"
-          class="main-video"
+          @fullscreenchange="onFullScreenChange">
-          :src="article.videoSrc"
+          <cover-image v-if="!isPlaying && !showNativeControls" class="center-play-icon"
-          :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"
+            @click.stop="togglePlay"></cover-image>
-          ></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>
@@ -56,20 +37,19 @@
 
               <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="iconSoundOn"
-              <cover-image v-if="isMuted" class="ctrl-icon mute-icon" :src="iconMute" @click.stop="toggleMute"></cover-image>
+                @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 class="ctrl-icon fullscreen-icon" :src="iconFullscreen"
+                @click.stop="toggleFullScreen"></cover-image>
             </cover-view>
           </cover-view>
         </video>
 
-        <image 
+        <image v-else class="main-video fallback-poster" :src="article.poster || article.videoSrc" mode="aspectFill">
-          v-else 
+        </image>
-          class="main-video fallback-poster" 
-          :src="article.poster || article.videoSrc" 
-          mode="aspectFill"
-        ></image>
       </view>
     </view>
 
@@ -83,10 +63,7 @@
         </view>
 
         <view class="favorite-btn" @click="toggleFavorite">
-          <image 
+          <image class="star-icon" :src="isFavorite ? filledStarUrl : emptyStarUrl" />
-            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 
+        <skill-card v-for="(item, index) in recommendList" :key="index" :item="item"></skill-card>
-          v-for="(item, index) in recommendList" 
-          :key="index" 
-          :item="item"
-        ></skill-card>
       </view>
     </view>
 
@@ -324,7 +299,18 @@ export default {
             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,7 +323,7 @@ export default {
 
     toggleFavorite() {
       if (!this.isLogin) {
-        if(this.isPlaying) {
+        if (this.isPlaying) {
           this.getVideoContext().pause();
         }
         this.tipsText = "您现在还未登录，是否确定前往登录？";
@@ -359,7 +345,7 @@ export default {
         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 {
@@ -373,7 +359,7 @@ export default {
     },
 
     refreshList() {
-      if(this.isRefreshing) return;
+      if (this.isRefreshing) return;
       this.isRefreshing = true;
       uni.showLoading({ title: '加载中' });
       setTimeout(() => {
@@ -519,11 +505,13 @@ export default {
           margin: 0 10rpx;
           flex-shrink: 0;
         }
+
         .mute-icon {
           width: 38rpx;
           height: 30rpx;
           flex-shrink: 0;
         }
+
         .fullscreen-icon {
           width: 30rpx;
           height: 30rpx;
@@ -621,23 +609,23 @@ export default {
     }
 
     .favorite-btn {
-        display: flex;
+      display: flex;
-        align-items: center;
+      align-items: center;
-        font-weight: 400;
+      font-weight: 400;
-        font-size: 24rpx;
+      font-size: 24rpx;
-        color: #999999;
+      color: #999999;
-        line-height: 33rpx;
+      line-height: 33rpx;
 
-        .star-icon {
+      .star-icon {
-            width: 26rpx;
+        width: 26rpx;
-            height: 26rpx;
+        height: 26rpx;
-            margin-right: 6rpx;
+        margin-right: 6rpx;
-            margin-top: -2rpx;
+        margin-top: -2rpx;
-        }
+      }
 
-        .active-fav {
+      .active-fav {
-            color: #FD5A8C ; 
+        color: #FD5A8C;
-        }
+      }
     }
   }
 }
@@ -654,6 +642,7 @@ export default {
       margin-bottom: 24rpx;
       line-height: 40rpx;
     }
+
     ::v-deep img {
       max-width: 100%;
       height: auto;