mrr.sj.front/pages/home/components/skill-card.vue

<template>
  <view class="skill-item" @click="handleClick">
    <view class="cover-box">
      <image class="cover" :src="item.coverSrc" mode="aspectFill"></image>
      <image 
        class="play-icon" 
        src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5c1ddfef-a200-424a-a9dc-03d9395568f6.png"
      ></image>
    </view>
    <view class="skill-info">
      <view class="skill-title line-2">{{ item.title }}</view>
      <view class="skill-type" :class="typeClass">
        <image class="type-icon" :src="item.typeIcon || defaultTypeIcon"></image>
        <text class="type-text">{{ item.type || '平台课程' }}</text>
      </view>
      <view class="skill-stats">
        <image 
          class="view-icon" 
          src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/2409b64a-56bb-4d9e-a4cc-5b3444fcf097.png"
        ></image>
        {{ formatViews(item.views) }}观看 · {{ item.time }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SkillItem',
  props: {
    item: {
      type: Object,
      required: true,
      default: () => ({
        id: null,
        title: '',
        coverSrc: '',
        type: '平台课程',
        views: 0,
        time: '',
        typeIcon: ''
      })
    }
  },
  data() {
    return {
      defaultTypeIcon: 'https://dummyimage.com/30x30/ccc/fff.png&text=I'  // 用于占位
    }
  },
  computed: {
    typeClass() {
      const typeMap = {
        '平台课程': 'platform-course',
        '脸缘品牌': 'brand-course',
        '品牌课程': 'brand-course'
      }
      return typeMap[this.item.type] || 'platform-course'
    }
  },
  methods: {
    formatViews(views) {
      if (!views) return '0'
      if (views >= 10000) {
        return (views / 10000).toFixed(1) + 'w'
      }
      return views.toString()
    },
    handleClick() {
      // 1. 保留 emit，方便外层如果有特殊需求可以监听到
      this.$emit('click', this.item);
      
      // 2. 直接在此处处理跳转逻辑
      if (this.item && this.item.id) {
        uni.navigateTo({
          url: `/pages/jingxuan/skill-detail?id=${this.item.id}`
        });
      }
      // 跳转到技能/课程详情页
    }
  }
}
</script>

<style lang="scss" scoped>
.skill-item {
  display: flex;
  margin-bottom: 20rpx;
  
  &:last-child {
    margin-bottom: 0;
  }

  .cover-box {
    position: relative;
    width: 224rpx;
    height: 126rpx;
    border-radius: 16rpx;
    overflow: hidden;
    margin-right: 24rpx;
    flex-shrink: 0;

    .cover { 
      width: 100%; 
      height: 100%; 
    }
    
    .play-icon {
      position: absolute;
      top: 50%; 
      left: 50%;
      transform: translate(-50%, -50%);
      width: 39rpx; 
      height: 39rpx;
    }
  }

  .skill-info {
    flex: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: space-between;

    .skill-title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 28rpx;
      color: #333;
      font-weight: 400;
      line-height: 40rpx;
    }
    
    .skill-type {
      display: flex;
      align-items: center;
      font-size: 22rpx;
      margin-top: 10rpx;
      
      .type-icon { 
        width: 26rpx; 
        height: 26rpx; 
        margin-right: 8rpx; 
        border-radius: 50%;
      }
      
      .type-text {
        border-radius: 7rpx;
        font-weight: 400;
        font-size: 24rpx;
        line-height: 33rpx;
        padding: 2rpx 10rpx;
      }
      
      &.platform-course .type-text {
        background: #f9d3d760;
        color: #E55463;
      }
      
      &.brand-course .type-text {
        background: #f9d3d760;
        color: #E55463;
      }
    }
    
    .skill-stats {
      font-size: 22rpx;
      color: #999;
      margin-top: 10rpx;
      display: flex;
      align-items: center;
      
      .view-icon {
        width: 26rpx;
        height: 22rpx;
        margin-right: 8rpx;
        margin-top: -2rpx;
      }
    }
  }
}

.line-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

</style>