1

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

@@ -3,15 +3,60 @@
     <el-col :span="8" v-for="(item, index) in list" :key="index">
       <div class="goods-item">
         <div class="goods-item-top">
-          <img src="@/assets/tag-video.png" alt="" />
-          <p>未学习</p>
-          <p>上次观看：节名称节名称节名称</p>
+          <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>已过期</el-button>
+          <el-button type="text" :disabled="checkCanLearn(item) != -1">{{
+            checkCanLearn(item) == -1 ? "进入学习" : "已过期"
+          }}</el-button>
         </div>
       </div>
     </el-col>
@@ -19,6 +64,11 @@
 </template>
 
 <script>
+const mapImg = {
+  1: "tag-video.png",
+  2: "tag-live.png",
+  6: "tag-bank.png",
+};
 export default {
   props: {
     list: {
@@ -29,7 +79,81 @@ export default {
     },
   },
   data() {
-    return {};
+    return {
+      sysTime: this.$tools.timest(),
+    };
+  },
+  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]);
+    },
   },
 };
 </script>
@@ -49,6 +173,7 @@ export default {
     font-size: 12px;
     p {
       line-height: 12px;
+      font-size: 12px;
       color: #999999;
       &:nth-of-type(1) {
         color: #3f8dfd;
@@ -58,12 +183,28 @@ export default {
   }
   .goods-item-main {
     padding: 0 16px;
-    margin: 10px 0;
     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;

src/style.css

@@ -1,37 +1,63 @@
-html,body,div,section,article,header,p,footer,span,ul,ol,li,h1,h2,h3,h4,h5,h6 {
-    padding:0;
-    margin:0;
+html,
+body,
+div,
+section,
+article,
+header,
+p,
+footer,
+span,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    padding: 0;
+    margin: 0;
     font-size: 14px;
     box-sizing: border-box;
 }
 
 a {
-  text-decoration: none;
-  cursor: pointer;
+    text-decoration: none;
+    cursor: pointer;
 }
 
-select,input {
-    background:none;
-    border:0;
-    padding:0;
+select,
+input {
+    background: none;
+    border: 0;
+    padding: 0;
     outline: none;
 }
 
-ul,ol {
+ul,
+ol {
     list-style: none;
 }
 
-body,html {
-    background:#fff;
+body,
+html {
+    background: #fff;
 }
 
 .container {
-    width:1272px;
-    margin:0 auto;
+    width: 1272px;
+    margin: 0 auto;
 }
 
 .clearfix:after {
-    content:""; 
-    display: block; 
-    clear:both; 
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.l_1 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }