组件抽取

src/pages/person-center/learn-center/GoodsItem.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="goods-item">
+    <div class="goods-item-top">
+      <img :src="backImg" alt="" />
+      <p v-html="backLearnStatus(goodsInfo)"></p>
+      <p class="l_1" style="width: 70%">上次观看：节名称节名称</p>
+      <!-- <p>{{ goodsInfo.studyCount }}学时</p> -->
+    </div>
+    <div class="goods-item-main">
+      <h2>{{ goodsInfo.goodsName }}</h2>
+      <div>
+        周期：
+        <p>
+          {{ $tools.timestampToTime(goodsInfo.serviceStartTime) }} -
+          {{ $tools.timestampToTime(goodsInfo.serviceEndTime) }}
+        </p>
+        <p style="margin: 0 8px">|</p>
+        <p>
+          {{ goodsInfo.courseNum }}课程
+          {{ goodsInfo.secAllNum + goodsInfo.examNum }}节
+          {{ goodsInfo.classHours }}学时
+        </p>
+      </div>
+      <div>
+        学习进度：
+        <p style="width: 40px">{{ progressText() }}</p>
+        <el-progress
+          style="width: 65%"
+          :show-text="false"
+          :stroke-width="8"
+          :format="() => {}"
+          :percentage="
+            ((goodsInfo.stuAllNum + goodsInfo.recordNum) /
+              (goodsInfo.secAllNum + goodsInfo.examNum) || 0) * 100
+          "
+        ></el-progress>
+      </div>
+      <div>
+        班级状态：
+        <p>{{ backClassStatus() }}</p>
+      </div>
+      <div>
+        班级有效期：
+        <p>{{ goodsInfo.classStartTime }}-{{ goodsInfo.classEndTime }}</p>
+      </div>
+      <div class="goods-item-main-tips">
+        温馨提示：本课程有效期至{{
+          $tools.timestampToTime(goodsInfo.validityEndTime, true, true)
+        }}，超期学时无效，为防审核异常请于{{
+          $tools.timestampToTime(goodsInfo.validityEndTime, true, true)
+        }}
+        00:00:00前完成学习，当前剩余有效学习时间为200天
+      </div>
+    </div>
+    <div class="goods-item-bom">
+      <el-button type="text" :disabled="checkCanLearn != -1">{{
+        checkCanLearn == -1 ? "进入学习" : "已过期"
+      }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+const mapImg = {
+  1: "tag-video.png",
+  2: "tag-live.png",
+  6: "tag-bank.png",
+};
+export default {
+  props: {
+    goodsInfo: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return { time: this.$tools.timest() };
+  },
+  methods: {
+    progressText() {
+      let item = this.goodsInfo;
+      return (
+        item.stuAllNum + item.recordNum + "/" + (item.secAllNum + item.examNum)
+      );
+    },
+    backLearnStatus(data) {
+      let {
+        stuAllNum,
+        recordNum,
+        secAllNum,
+        examNum,
+        rebuild,
+        goodsType,
+        liveStatus,
+      } = data;
+      if (goodsType == 1) {
+        let stuNum = stuAllNum + recordNum;
+        let type = [
+          this.checkCanLearn != -1,
+          rebuild > 0,
+          stuNum == 0,
+          stuNum >= secAllNum + examNum,
+          stuNum < secAllNum + examNum,
+        ].findIndex((e) => e);
+        return `<span style='font-size: 12px;color:${
+          type == 0 || type == 3 ? "#666666" : "#3f8dfd"
+        }'>${["已过期", "待重修", "未学习", "已学习", "学习中"][type]}</span>`;
+      } else {
+        // this.sysTime>validityEndTime
+        // liveStatus
+        return `<span style='font-size: 12px;color:${
+          true ? "#666666" : "#FA8C16"
+        }'>${["已过期", "待重修", "未学习", "已学习", "学习中"][type]}</span>`;
+      }
+    },
+    backClassStatus() {
+      let { classStartTime, classEndTime, classStatus } = this.goodsInfo;
+      let time = this.time;
+      if (
+        (classStartTime && time <= classStartTime) ||
+        (classEndTime && time >= classEndTime)
+      ) {
+        return "已过期";
+      }
+      return ["未开班", "已开班"][classStatus] || "-";
+    },
+  },
+  computed: {
+    goodsType() {
+      return this.goodsInfo.goodsType;
+    },
+    checkCanLearn() {
+      let time = this.$tools.timest();
+      let {
+        interfaceAccountId,
+        serviceStartTime,
+        serviceEndTime,
+        classStartTime,
+        classEndTime,
+        classStatus,
+        learningStatus,
+        learningTimeStart,
+      } = this.goodsInfo;
+      return [
+        interfaceAccountId > 0,
+        time <= serviceStartTime || time >= serviceEndTime,
+        (classStartTime && time <= classStartTime) ||
+          (classEndTime && time >= classEndTime),
+        learningStatus == 2,
+        classStatus == 0,
+        learningStatus == 3 && time < learningTimeStart,
+      ].findIndex((e) => e);
+    },
+    backImg() {
+      return require("@/assets/" + mapImg[this.goodsType]);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.goods-item {
+  border: 1px solid #ebebeb;
+  border-radius: 4px;
+  margin-bottom: 18px;
+  .goods-item-top {
+    background: #f7f9fa;
+    height: 40px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    padding-left: 16px;
+    font-size: 12px;
+    p {
+      line-height: 12px;
+      font-size: 12px;
+      color: #999999;
+      &:nth-of-type(1) {
+        color: #3f8dfd;
+        margin: 0 10px 0 4px;
+      }
+    }
+  }
+  .goods-item-main {
+    padding: 0 16px;
+    h2 {
+      margin: 10px 0;
+      font-size: 16px;
+      font-weight: 500;
+      color: #222222;
+    }
+    div {
+      display: flex;
+      align-items: center;
+      color: #99a0a7;
+      font-size: 12px;
+      p {
+        line-height: 28px;
+        font-size: 12px;
+      }
+    }
+    .goods-item-main-tips {
+      background: #fffaf2;
+      padding: 10px;
+      color: #494339;
+      margin: 8px 0 24px;
+    }
+  }
+  .goods-item-bom {
+    height: 44px;
+    border-top: 1px solid #ebebeb;
+    .el-button {
+      width: 100%;
+      &:not([disabled="disabled"]) {
+        color: #666666;
+      }
+    }
+  }
+}
+</style>

src/pages/person-center/learn-center/ListBox.vue

@@ -1,74 +1,12 @@
 <template>
   <el-row :gutter="20">
     <el-col :span="8" v-for="(item, index) in list" :key="index">
-      <div class="goods-item">
-        <div class="goods-item-top">
-          <img :src="backImg(item.goodsType)" alt="" />
-          <p v-html="backLearnStatus(item)"></p>
-          <p class="l_1" style="width: 70%">上次观看：节名称节名称</p>
-          <p>{{ item.studyCount }}学时</p>
-        </div>
-        <div class="goods-item-main">
-          <h2>{{ item.goodsName }}</h2>
-          <div>
-            周期：
-            <p>
-              {{ $tools.timestampToTime(item.serviceStartTime) }} -
-              {{ $tools.timestampToTime(item.serviceEndTime) }}
-            </p>
-            <p style="margin: 0 8px">|</p>
-            <p>
-              {{ item.courseNum }}课程 {{ item.secAllNum + item.examNum }}节
-              {{ item.classHours }}学时
-            </p>
-          </div>
-          <div>
-            学习进度：
-            <p style="width: 40px">{{ progressText(item) }}</p>
-            <el-progress
-              style="width: 65%"
-              :show-text="false"
-              :stroke-width="8"
-              :format="() => {}"
-              :percentage="
-                ((item.stuAllNum + item.recordNum) /
-                  (item.secAllNum + item.examNum) || 0) * 100
-              "
-            ></el-progress>
-          </div>
-          <div>
-            班级状态：
-            <p>{{ backClassStatus(item) }}</p>
-          </div>
-          <div>
-            班级有效期：
-            <p>{{ item.classStartTime }}-{{ item.classEndTime }}</p>
-          </div>
-          <div class="goods-item-main-tips">
-            温馨提示：本课程有效期至{{
-              $tools.timestampToTime(item.validityEndTime, true, true)
-            }}，超期学时无效，为防审核异常请于{{
-              $tools.timestampToTime(item.validityEndTime, true, true)
-            }}
-            00:00:00前完成学习，当前剩余有效学习时间为200天
-          </div>
-        </div>
-        <div class="goods-item-bom">
-          <el-button type="text" :disabled="checkCanLearn(item) != -1">{{
-            checkCanLearn(item) == -1 ? "进入学习" : "已过期"
-          }}</el-button>
-        </div>
-      </div>
+      <GoodsItem :goodsInfo="item"></GoodsItem>
     </el-col>
   </el-row>
 </template>
-
 <script>
-const mapImg = {
-  1: "tag-video.png",
-  2: "tag-live.png",
-  6: "tag-bank.png",
-};
+import GoodsItem from "./GoodsItem.vue";
 export default {
   props: {
     list: {
@@ -79,142 +17,11 @@ export default {
     },
   },
   data() {
-    return {
-      sysTime: this.$tools.timest(),
-    };
+    return {};
   },
-  methods: {
-    backLearnStatus(data) {
-      let {
-        stuAllNum,
-        recordNum,
-        secAllNum,
-        examNum,
-        rebuild,
-        goodsType,
-        liveStatus,
-      } = data;
-      if (goodsType == 1) {
-        let stuNum = stuAllNum + recordNum;
-        let type = [
-          this.checkCanLearn(data) != -1,
-          rebuild > 0,
-          stuNum == 0,
-          stuNum >= secAllNum + examNum,
-          stuNum < secAllNum + examNum,
-        ].findIndex((e) => e);
-        return `<span style='font-size: 12px;color:${
-          type == 0 || type == 3 ? "#666666" : "#3f8dfd"
-        }'>${["已过期", "待重修", "未学习", "已学习", "学习中"][type]}</span>`;
-      } else {
-        // this.sysTime>validityEndTime
-        // liveStatus
-        return `<span style='font-size: 12px;color:${
-          true ? "#666666" : "#FA8C16"
-        }'>${["已过期", "待重修", "未学习", "已学习", "学习中"][type]}</span>`;
-      }
-    },
-    checkCanLearn(data) {
-      let time = this.sysTime;
-      let {
-        interfaceAccountId,
-        serviceStartTime,
-        serviceEndTime,
-        classStartTime,
-        classEndTime,
-        classStatus,
-        learningStatus,
-        learningTimeStart,
-      } = data;
-      return [
-        interfaceAccountId > 0,
-        time <= serviceStartTime || time >= serviceEndTime,
-        (classStartTime && time <= classStartTime) ||
-          (classEndTime && time >= classEndTime),
-        learningStatus == 2,
-        classStatus == 0,
-        learningStatus == 3 && time < learningTimeStart,
-      ].findIndex((e) => e);
-    },
-    progressText(item) {
-      return (
-        item.stuAllNum + item.recordNum + "/" + (item.secAllNum + item.examNum)
-      );
-    },
-    backClassStatus({ classStartTime, classEndTime, classStatus }) {
-      let time = this.sysTime;
-      if (
-        (classStartTime && time <= classStartTime) ||
-        (classEndTime && time >= classEndTime)
-      ) {
-        return "已过期";
-      }
-      return ["未开班", "已开班"][classStatus] || "-";
-    },
-    backImg(type) {
-      return require("@/assets/" + mapImg[type]);
-    },
+  components: {
+    GoodsItem,
   },
 };
 </script>
-
-<style scoped lang="scss">
-.goods-item {
-  border: 1px solid #ebebeb;
-  border-radius: 4px;
-  margin-bottom: 18px;
-  .goods-item-top {
-    background: #f7f9fa;
-    height: 40px;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    padding-left: 16px;
-    font-size: 12px;
-    p {
-      line-height: 12px;
-      font-size: 12px;
-      color: #999999;
-      &:nth-of-type(1) {
-        color: #3f8dfd;
-        margin: 0 10px 0 4px;
-      }
-    }
-  }
-  .goods-item-main {
-    padding: 0 16px;
-    h2 {
-      margin: 10px 0;
-      font-size: 16px;
-      font-weight: 500;
-      color: #222222;
-    }
-    div {
-      display: flex;
-      align-items: center;
-      color: #99a0a7;
-      font-size: 12px;
-      p {
-        line-height: 28px;
-        font-size: 12px;
-      }
-    }
-    .goods-item-main-tips {
-      background: #fffaf2;
-      padding: 10px;
-      color: #494339;
-      margin: 8px 0 24px;
-    }
-  }
-  .goods-item-bom {
-    height: 44px;
-    border-top: 1px solid #ebebeb;
-    .el-button {
-      width: 100%;
-      &:not([disabled="disabled"]) {
-        color: #666666;
-      }
-    }
-  }
-}
-</style>
+