gdy_app_8/src/view/course/components/courseList.vue

<template>
  <div class="listOuer">
    <div class="listInner">
      <template v-if="dataList.length > 0">
        <div
          class="listLi"
          v-for="(item, index) in dataList"
          :key="index"
          :class="{ marginGap: listType == 2 }"
          :style="{ background: outBg }"
        >
          <div class="courseBtm" v-if="showNum == 2">
            <p>剩余名额</p>
            <span>{{ item.amount }}套</span>
          </div>
          <div class="listLiTit" v-if="item.toUserId && listType == 2">
            <p>
              {{ item.toUserId == user_info.id ? "收到" : "转出"
              }}<span>【{{ item.dealAmount }}套】</span>课程
            </p>
          </div>
          <div
            class="listLiTop"
            :class="{ listLiTopT: showNum == 2 }"
            @click="toUrl(item)"
          >
            <img :src="item.subjectThumb" />
            <div class="liInfo">
              <div class="courseLiTit">
                <p>{{ item.subjectName }}</p>
              </div>
              <div class="courseLiDesc">
                <span v-if="showNum == 1">剩余{{ item.amount }}套</span>
                <span v-else-if="showNum == 4">{{ item.clickNum }}次浏览</span>
                <span v-else>共{{ item.sectionsNum }}节</span>
                <span style="color: #F76146;">{{ item.subjectPrice }}</span>
              </div>
            </div>
          </div>
          <!-- <div class="courseBtm" v-if="showNum == 1">
            <span>剩余名额:{{ item.amount }}套</span>
            <span>已卖出:{{ item.statistics.saleAmount }}套</span>
          </div> -->
          <!-- <div
            v-if="showNum == 0 && !(item.status && item.status !== 4)"
            style="height: .2rem;"
          ></div> -->
          <div
            class="dealComfirm"
            @click="comfirm(item)"
            v-if="item.status && item.status == 1 && listType == 2"
            :class="payClass(item) ? '' : 'dealTo'"
          >
            <span>{{
              item.toUserId == user_info.id ? "确认接收" : "待对方确认"
            }}</span>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="noData">
          <van-empty :description="courseNodata" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "courseList",
  components: {},
  props: {
    //数组列表
    dataList: {
      type: Array,
      default: []
    },
    //背景色
    outBg: {
      type: String,
      default: "#FFF"
    },
    //提示
    fixedTitle: {
      type: String,
      default: ""
    },
    //是否有底部剩余数量
    showNum: {
      type: Number,
      default: 0
    },
    //是否需要展示课程接收按钮（1不需要2需要）
    listType: {
      type: Number,
      default: 1
    },
    // 是否是推广的课程
    isNoAd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      user_info: JSON.parse(localStorage.getItem("wx_user_info"))
    };
  },
  computed: {
    payClass(item) {
      return function(item) {
        if (item.toUserId == this.user_info.id && item.status == 1) {
          return true;
        }
        return false;
      };
    },
    courseNodata(){
      return this.isNoAd?'暂无学习课程...':"暂无推广课程..."
    },
  },
  created() {},
  methods: {
    // 查看课程详情
    toUrl(item) {
      if(this.isNoAd){
        this.$router.push(`/courseDetail/${item.subjectId}`);
      }else if(this.showNum == 1 ){
        this.$router.push({
          path: `/courseAdDetail/${item.id}-${item.subjectId}`
        });
      }else if(this.showNum == 2 ){
        this.$router.push({
          path: `/courseDetail/${item.subjectId}`
        });
      }else if(this.showNum == 3 ){
        // this.$router.push({
        //   path: `/courseAdDetail/${item.subjectId}`
        // });
      }else if(this.showNum == 4 ){
        this.$router.push({
          path: `/courseDetail/${item.subjectId}`
        });
      }else if(item.status == 1 && this.listType == 2){
        this.comfirm(item)
      }
    },
    // 接受名额转入
    comfirm(item) {
      this.$router.push({
        path: `/course/transfer/${item.id}`,
        query: item
      });
    }
  }
};
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.listOuer {
  border-radius: 0.1rem;
  overflow: hidden;
  // padding: 0.1rem 0;
  .listTit {
    display: flex;
    align-items: center;
    padding: 0 0.2rem;
    justify-content: space-between;
    p {
      font-size: 0.3rem;
      color: #000;
      line-height: 2;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: no-warp;
    }
    span {
      font-size: 0.23rem;
      color: #0075fc;
    }
  }
  .listInner {
    .noData {
      width: 100%;
      background: #fff;
    }
    .listLi {
      // padding-top: 0.2rem;
      // padding-bottom: 0.2rem;
      padding: 0.2rem 0.15rem;
      &:not(:nth-last-child(1)) {
        // padding-bottom: 0.2rem;
        border-bottom: 1px solid #efefef;
      }
      &.marginGap {
        margin-bottom: 0.2rem;
        border: 0;
        border-radius: 0.1rem;
        padding-bottom: 0;
        &:not(:nth-last-child(1)) {
          border-bottom: 0;
        }
      }
      .listLiTit {
        font-size: 0.3rem;
        color: #000;
        line-height: 2;
        font-weight: 600;
        span {
          color: #0075fc;
        }
      }
      .dealComfirm {
        text-align: center;
        span {
          font-size: 0.3rem;
          color: rgb(41, 121, 255);
          line-height: 3;
        }
        &.dealTo {
          span {
            color: rgb(253, 209, 67);
          }
        }
      }
      .listLiTop {
        display: flex;
        justify-content: space-between;
        &.listLiTopT {
          padding: 0.2rem 0.1rem;
          background: linear-gradient(90deg, #F3F2EE, #E7EFF9);
          border-radius: 0.1rem;
        }
        & > img {
          width: 2.5rem;
          height: 1.5rem;
          display: block;
          border-radius: 0.1rem;
        }
        .liInfo {
          flex: 1;
          margin-left: 0.15rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .courseLiTit {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            p {
              font-size: 0.3rem;
              color: #333;
              line-height: 1.5;
              font-weight: 600;
            }
          }
          .courseLiDesc {
            display: flex;
            justify-content: space-between;
            span {
              font-size: 0.28rem;
              color: #888;
              line-height: 1.3;
              &:nth-child(1) {
                margin-right: 0.3rem;
              }
            }
          }
        }
      }
      .courseBtm {
        padding: 0.6rem;
        text-align: center;
        p {
              font-size: 0.26rem;
              color: #000;
              line-height: 0.5rem;
            }
            span {
              color: #000;
              font-size: 0.45rem;
              font-weight: 600;
              line-height: 1.5;
            }
      }
    }
  }
}
</style>