mrr.sj.front/pages/jingxuan/skill-detail.vue

<template>
  <view class="skill-detail-page">

    <custom-navbar title="技能集市" backgroundColor="#ffffff" titleColor="#333" borderBottom="none">
    </custom-navbar>

    <!--  <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>

          <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-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" v-if="currentTime > 0" :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-view>
          </cover-view>
        </video>

        <image v-else class="main-video fallback-poster" :src="article.poster || article.videoSrc" mode="aspectFill">
        </image>
      </view>
    </view>

    <view class="article-header" v-if="article.title">
      <view class="title">{{ article.title }}</view>
      <view class="meta-row">
        <view class="author-info" @click="goToAuthorMarket">
          <image class="avatar" :src="article.authorAvatar" mode="aspectFill"></image>
          <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" />
          <text :class="{ 'active-fav': isFavorite }">{{ isFavorite ? '已收藏' : '收藏' }}</text>
        </view>
      </view>
    </view>

    <view class="article-content-wrapper">
      <view class="article-content">
        <rich-text :nodes="formattedHtmlContent"></rich-text>
      </view>
    </view>

    <view class="recommend-section" v-if="recommendList.length > 0">
      <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>
          <text>换一批</text>
        </view>
      </view>

      <view class="list-container">
        <skill-card v-for="(item, index) in recommendList" :key="index" :item="item"></skill-card>
      </view>
    </view>

    <tipsPopup2 :show="tipShow" @closePopup="closePopup" sureText="确认" @okBtn="okBtn">
      {{ tipsText }}
    </tipsPopup2>

  </view>
</template>

<script>
import request from "@/utils/request";
import SkillCard from "@/pages/home/components/skill-card.vue";
import tipsPopup2 from "@/components/tips-popup/tips-popup2";

export default {
  components: {
    SkillCard,
    tipsPopup2
  },
  data() {
    return {
      useMockData: false,

      articleId: null,
      isFavorite: false,
      emptyStarUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/53378402-5456-4a80-b2ec-7c18d43d970e.png',
      filledStarUrl: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/10461305-6bf8-4016-ae76-3415e055ec63.png',
      isRefreshing: false,

      isLogin: false,
      tipShow: false,
      tipsText: "",
      tipType: "",

      videoContext: null,
      isPlaying: false,
      isMuted: 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',
      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: [],
      recommendPage: 1
    }
  },
  computed: {
    formattedHtmlContent() {
      if (!this.article.htmlContent) return '';
      let html = this.article.htmlContent;
      html = html.replace(/<img/gi, '<img style="max-width:100%; height:auto; display:block; border-radius:10px; margin: 20rpx 0;"');
      html = html.replace(/<p/gi, '<p style="margin-bottom: 24rpx; line-height: 40rpx;"');
      return html;
    },
    activeStyle() {
      return `width: ${this.sliderValue}%;`;
    },
    thumbStyle() {
      return `left: ${this.sliderValue}%;`;
    }
  },
  onLoad(options) {
    if (options && options.id) {
      this.articleId = parseInt(options.id, 10);
    } else {
      this.articleId = 1;
    }
    this.getPageData();
  },
  onShow() {
    this.isLogin = uni.getStorageSync("accessToken") ? true : false;
  },
  methods: {
    // 点击跳回集市专属页面（兼容官方和品牌方）
    goToAuthorMarket() {
      const isOfficial = this.article.linkType === 1 ? '1' : '0';
      const linkId = this.article.linkId || '';
      const name = encodeURIComponent(this.article.authorName || '');
      const avatar = encodeURIComponent(this.article.authorAvatar || '');
      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}`
      });
    },

    getVideoContext() {
      if (!this.videoContext) {
        this.videoContext = uni.createVideoContext('customVideo', this);
      }
      return this.videoContext;
    },

    closePopup() {
      this.tipShow = false;
    },
    okBtn() {
      if (this.tipType == "login") {
        uni.navigateTo({
          url: "/pages/blogPopup/blogPopup",
        });
      }
      this.tipShow = false;
    },

    formatTime(sec) {
      if (!sec) return '00:00';
      sec = Math.round(sec);
      let m = Math.floor(sec / 60);
      let s = sec % 60;
      return (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
    },
    onLoadedMetaData(e) {
      this.duration = e.detail.duration;
    },
    onTimeUpdate(e) {
      if (e.detail.duration && this.duration === 0) {
        this.duration = e.detail.duration;
      }
      this.currentTime = e.detail.currentTime;
      if (this.duration > 0) {
        this.sliderValue = Number(((this.currentTime / this.duration) * 100).toFixed(2));
      }
    },
    onEnded() {
      this.isPlaying = false;
      this.currentTime = 0;
      this.sliderValue = 0;
      if (this.showNativeControls) {
        const ctx = this.getVideoContext();
        if (ctx) ctx.exitFullScreen();
      }
    },
    onPlay() { this.isPlaying = true; },
    onPause() { this.isPlaying = false; },

    onFullScreenChange(e) {
      const isFull = e.detail.fullScreen;
      if (!isFull) {
        this.showNativeControls = false;
      } else {
        this.showNativeControls = true;
      }
    },

    togglePlay() {
      const ctx = this.getVideoContext();
      if (!ctx) return;
      if (this.isPlaying) {
        ctx.pause();
      } else {
        ctx.play();
      }
    },
    toggleMute() {
      this.isMuted = !this.isMuted;
    },

    toggleFullScreen() {
      const ctx = this.getVideoContext();
      if (!ctx) return;
      this.showNativeControls = true;
      this.$nextTick(() => {
        ctx.requestFullScreen({ direction: 90 });
      });
    },

    toggleMockData() {
      this.useMockData = !this.useMockData;
      uni.showToast({ title: this.useMockData ? 'Mock已开启' : 'Mock已关闭', icon: 'none' });
      this.getPageData();
    },

    getPageData() {
      if (this.useMockData) {
        this.injectMockData();
        return;
      }
      uni.showLoading({ title: '加载中...' });
      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 || '暂无标题',
            // 【预留接口字段解析】：这里需要后端配合返回以下字段，如果没有的话目前会使用默认值
            linkType: data.link_type || 1,        // 1=官方 2=品牌
            linkId: data.link_id || 0,
            authorName: data.link_name || '美融融平台',
            authorAvatar: data.link_logo || '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, '.') : '',
            videoSrc: data.video || '',
            poster: data.cover_img || '',
            htmlContent: data.detail || ''
          };
          this.isFavorite = data.collect_state === 1;
          request.post("/sj/skill/list", {
            page: 1,
            limit: 3,
            skill_id: data.id
          }).then((listRes) => {
            if (listRes.code == 200 && listRes.data && listRes.data.list) {
              // 使用 map 遍历数组，将后端返回的字段一对一映射成组件需要的字段
              this.recommendList = listRes.data.list.map(item => {
                return {
                  id: item.id,
                  title: item.name || '暂无标题',                 // 映射标题
                  coverSrc: item.cover_img || '',               // 映射封面图
                  type: item.link_name || '平台课程',             // 映射来源（平台/品牌）
                  typeIcon: item.link_logo || '',               // 映射来源图标
                  // 浏览量优先取总浏览量，如果没有则取实际/初始浏览量
                  views: item.total_browse_num || item.real_browse_num || item.browse_num || 0,
                  // 截取时间并格式化
                  time: item.create_time ? item.create_time.substring(0, 10).replace(/-/g, '-') : ''
                };
              });
            }
          }).catch((err) => {
            console.error('获取推荐列表异常', err);
          });
        } else {
          uni.showToast({ title: res.msg || '获取数据失败', icon: 'none' });
        }
      }).catch((err) => {
        console.error('获取技能集市详情异常', err);
      }).finally(() => {
        uni.hideLoading();
      });
    },

    toggleFavorite() {
      if (!this.isLogin) {
        if (this.isPlaying) {
          this.getVideoContext().pause();
        }
        this.tipsText = "您现在还未登录，是否确定前往登录？";
        this.tipShow = true;
        this.tipType = "login";
        return;
      }

      if (this.useMockData) {
        this.isFavorite = !this.isFavorite;
        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
      }).then(res => {
        if (res.code == 200) {
          this.isFavorite = !this.isFavorite;
          uni.showToast({ title: this.isFavorite ? '收藏成功' : '已取消收藏', icon: 'none' });
        } else {
          uni.showToast({ title: res.msg || '操作失败', icon: 'none' });
        }
      }).catch(err => {
        uni.showToast({ title: '网络异常', icon: 'none' });
      }).finally(() => {
        uni.hideLoading();
      });
    },

    refreshList() {
      if (this.isRefreshing) return;
      this.isRefreshing = true;
      uni.showLoading({ title: '加载中' });

      // 页码逻辑：到达10重置为1，否则+1
      if (this.recommendPage >= 10) {
        this.recommendPage = 1;
      } else {
        this.recommendPage++;
      }

      request.post("/sj/skill/list", {
        page: this.recommendPage,
        limit: 3,
        skill_id: this.article.id
      }).then((res) => {
        if (res.code == 200 && res.data && res.data.list && res.data.list.length > 0) {
          this.recommendList = res.data.list.map(item => ({
            id: item.id,
            title: item.name || '暂无标题',
            coverSrc: item.cover_img || '',
            type: item.link_name || '平台课程',
            views: item.browse_num || 0,
            time: item.create_time ? item.create_time.split(' ')[0] : '',
            typeIcon: item.link_logo || '',
            video: item.video || ''
          }));
        } else {
          // 下一页没有数据，重置为1重新请求
          this.recommendPage = 1;
          request.post("/sj/skill/list", {
            page: 1,
            limit: 3,
            skill_id: this.article.id
          }).then((res2) => {
            if (res2.code == 200 && res2.data && res2.data.list) {
              this.recommendList = res2.data.list.map(item => ({
                id: item.id,
                title: item.name || '暂无标题',
                coverSrc: item.cover_img || '',
                type: item.link_name || '平台课程',
                views: item.browse_num || 0,
                time: item.create_time ? item.create_time.split(' ')[0] : '',
                typeIcon: item.link_logo || '',
                video: item.video || ''
              }));
            }
          });
        }
        this.isRefreshing = false;
        uni.hideLoading();
      }).catch(() => {
        this.isRefreshing = false;
        uni.hideLoading();
      });
    },

    injectMockData() {
      this.isFavorite = false;
      this.article = {
        title: '穿戴甲的操作视频扫码验券操作',

        // Mock作者相关数据(测试品牌跳转，将linkType改为2)
        linkType: 2,
        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,

        date: '2026.03.03',
        videoSrc: 'https://vjs.zencdn.net/v/oceans.mp4',
        poster: 'https://images.unsplash.com/photo-1610992015732-2449b76344bc?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
        htmlContent: `
          <p>最近，一向以平价、良心、宠粉著称的胖东来，突然因为一条毛巾被推上风口浪尖。</p>
          <p>4月下旬，抖音博主“惊梦人-”连续发布多条探店视频，称自己跑遍许昌5家胖东来门店，发现一边是几块钱的玻璃水、洗衣液等亲民好物，另一边却摆着标价249元的高端毛巾，价格形成反差。</p>
          <img src="https://dummyimage.com/800x400/ff6b81/ffffff.png&text=占位图" alt="会员权益"/>
        `
      };
      this.loadMockRecommend();
    },

    loadMockRecommend() {
      this.recommendList = [
        {
          id: 1,
          title: '穿戴甲的操作视频扫码验券操作教程...',
          coverSrc: 'https://images.unsplash.com/photo-1604654894610-df63bc536371?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          type: '平台课程',
          typeIcon: 'https://dummyimage.com/100x100/e6505f/fff.png&text=融',
          views: 836000,
          time: '7小时前'
        },
        {
          id: 2,
          title: '脸部按摩操作步骤详情',
          coverSrc: 'https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          type: '脸缘品牌',
          typeIcon: 'https://dummyimage.com/100x100/e6505f/fff.png&text=缘',
          views: 8334,
          time: '1天前'
        }
      ];
    }
  }
}
</script>

<style lang="scss" scoped>
.skill-detail-page {
  background-color: #ffffff;
  min-height: 100vh;
  padding-bottom: 60rpx;
  position: relative;
}

.mock-switch {
  position: fixed;
  right: 20rpx;
  top: 200rpx;
  background: #E5505F;
  color: #fff;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  z-index: 999;
  box-shadow: 0 4rpx 10rpx rgba(229, 80, 95, 0.4);
}

.video-section {
  width: 100%;
  height: 420rpx;

  .video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    .main-video {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .fallback-poster {
      z-index: 1;
    }

    .center-play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80rpx;
      height: 80rpx;
      z-index: 99;
    }

    .custom-control-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 70rpx;
      z-index: 99;

      .bar-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 70rpx;
        z-index: 100;
      }

      .bar-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 70rpx;
        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;
          margin: 0 20rpx;
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;

          .slider-bg {
            position: absolute;
            top: 33rpx;
            left: 0;
            width: 100%;
            height: 4rpx;
            background-color: rgba(255, 255, 255, 0.4);
          }

          .slider-active {
            position: absolute;
            top: 33rpx;
            left: 0;
            height: 4rpx;
            background-color: #FF4767;
          }

          .slider-thumb {
            position: absolute;
            top: 25rpx;
            margin-left: -10rpx;
            width: 20rpx;
            height: 20rpx;
            border-radius: 50%;
            background-color: #FF4767;
          }
        }
      }
    }
  }
}

.article-header {
  padding: 30rpx 30rpx 20rpx;

  .title {
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    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;
        color: #666666;
        line-height: 33rpx;
        margin-right: 16rpx;
      }

      .date {
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        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;
      }
    }
  }
}

.article-content-wrapper {
  .article-content {
    padding: 0 30rpx 40rpx;
    font-weight: 400;
    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;
      display: block;
      border-radius: 10rpx;
      margin: 20rpx 0;
    }
  }

  .empty-content {
    display: flex;
    flex-direction: column;
    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;
    }
  }
}

.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);
        }
      }
    }
  }
}
</style>