修改学习主页面及详情页面

src/styles/vant.scss

@@ -19,7 +19,7 @@
 
 // 修改导航相关样式
 .van-nav-bar {
-  background-color: #FE6347;
+  background-color: #fe6347;
   .van-nav-bar__left {
     .van-icon {
       color: #fff;
@@ -35,3 +35,29 @@
 .van-button {
   border-radius: 0.2rem;
 }
+
+// 修改van-tab的一级导航栏的背景色
+.van-tabs__wrap--scrollable .van-tabs__nav {
+  background-color: #f8e7d7;
+  .van-tab--active {
+    color: #fe6347;
+  }
+}
+.van-tabs--line .van-tabs__wrap {
+  height: 1.5rem;
+}
+.van-tabs__content .van-tabs__nav {
+  .van-tab {
+    .van-tab__text {
+      font-size: 0.55rem;
+      display: block;
+      padding: 0.05rem 0.15rem;
+    }
+  }
+  .van-tab--active {
+    .van-tab__text {
+      color: #fff;
+      background-color: #fe6347;
+    }
+  }
+}

src/views/home/answer/page-answer-recruit-result.vue

@@ -71,6 +71,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/mixin";
 .page-exam-item-result-box {
   width: 100%;
   height: 100%;

src/views/home/answer/page-answer-recruit.vue

@@ -442,6 +442,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/mixin";
 .page-exam-question-box {
   width: 100%;
   height: 100%;

src/views/home/exam/page-exam-item-detail.vue

@@ -115,6 +115,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/mixin";
 .page-exam-item-detial-box {
   width: 100%;
   height: 100%;

src/views/home/exam/page-exam-item-doing.vue

@@ -487,6 +487,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/mixin";
 .page-exam-question-box {
   width: 100%;
   height: 100%;

src/views/home/exam/page-exam-item-result.vue

@@ -38,6 +38,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/mixin";
 .page-exam-item-result-box {
   width: 100%;
   height: 100%;

src/views/home/exam/page-exam.vue

@@ -88,6 +88,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/mixin";
 .page-exam-box {
   width: 100%;
   height: 100%;

src/views/home/learn/page-learn-child.vue

@@ -23,9 +23,25 @@
           <van-cell
             v-for="(contentItem, contentIndex) in contentList"
             :key="contentIndex"
-            :title="contentItem.name"
             @click="chooseContent(contentIndex)"
-          />
+          >
+            <div slot="default" class="contentItemDiv">
+              <div class="contentItemTitle">{{ contentItem.name }}</div>
+              <div class="contentItemDescription">
+                <div>
+                  {{
+                    formateDateTimeFun(contentItem.createdTime) ||
+                      contentItem.createdTime
+                  }}
+                </div>
+                <div>
+                  所需学习时间：{{
+                    getTimeHoursMinuteSecondsFun(contentItem.readTimeInSec)
+                  }}
+                </div>
+              </div>
+            </div>
+          </van-cell>
         </van-list>
       </van-tab>
     </van-tabs>
@@ -89,7 +105,7 @@ export default {
           this.contentList = res.data;
           //   移除第一个
           this.contentList.shift();
-          console.log("--child--" + JSON.stringify(this.contentList));
+          console.log("--child--", this.contentList);
           this.finished = true;
         })
         .catch(() => {
@@ -102,6 +118,38 @@ export default {
         name: "learn-content",
         params: { materialId: this.contentList[index].id }
       });
+    },
+    formateDateTimeFun(time) {
+      // 获取当前日期
+      let date = new Date(time);
+      // 获取当前月份
+      let nowMonth = date.getMonth() + 1;
+      // 获取当前是几号
+      let strDate = date.getDate();
+      // 添加分隔符“-”
+      let seperator = "-";
+      // 对月份进行处理，1-9月在前面添加一个“0”
+      if (nowMonth >= 1 && nowMonth <= 9) {
+        nowMonth = "0" + nowMonth;
+      }
+      // 对月份进行处理，1-9号在前面添加一个“0”
+      if (strDate >= 0 && strDate <= 9) {
+        strDate = "0" + strDate;
+      }
+      // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
+      return date.getFullYear() + seperator + nowMonth + seperator + strDate;
+    },
+    // 方法：分别获取时-分-秒
+    getTimeHoursMinuteSecondsFun(time) {
+      let hours = Math.floor(time / (60 * 60));
+      let minutes = Math.floor((time - hours * 60 * 60) / 60);
+      let seconds = Math.floor(time - hours * 60 * 60 - minutes * 60);
+      let timeDiff = zero(hours) + ":" + zero(minutes) + ":" + zero(seconds);
+      // 数字补零
+      function zero(num) {
+        return num < 10 ? "0" + num : num;
+      }
+      return timeDiff;
     }
   }
 };
@@ -111,5 +159,16 @@ export default {
 @import "~@/styles/mixin";
 .contentBody {
   background-color: #fff;
+  .contentItemDiv {
+    .contentItemTitle {
+      font-size: 0.65rem;
+    }
+    .contentItemDescription {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #fe6347;
+    }
+  }
 }
 </style>

src/views/home/learn/page-learn-content.vue

@@ -1,14 +1,102 @@
 <template>
-  <div>
+  <div class="page-learn-content-box">
     <van-nav-bar title="学习" left-arrow @click-left="onClickLeft" />
-    <div v-if="seconds>0">剩余学习时间: 0:0:{{seconds}}</div>
-    <div>{{ contentObj.contents }}</div>
-    <div @click="clickCollection()">收藏</div>
-    <div @click="clickRemoveCollection()">取消收藏</div>
-    <div>阅读 {{contentObj.readerCount}}</div>
-    <div>点赞 {{contentObj.likesCount}}</div>
-    <div>评论：</div>
-    <div></div>
+    <div v-if="seconds > 0" class="learn-content-rest-time">
+      剩余学习时间: {{ getTimeHoursMinuteSecondsFun(seconds) }}
+    </div>
+    <!-- 内容 -->
+    <div class="learn-content-body">
+      <div class="learn-content-body-title">
+        {{ contentObj.name }}
+      </div>
+      <div class="learn-content-body-auther">编辑：{{ contentObj.userId }}</div>
+      <div class="learn-content-body-description">
+        {{ contentObj.contents }}
+      </div>
+      <div class="learn-content-body-time-row">
+        <div class="learn-content-body-time">
+          发布日期：
+          {{
+            formateDateTimeFun(contentObj.createdTime) || contentObj.createdTime
+          }}
+        </div>
+        <div class="learn-content-body-collect">
+          <div
+            v-show="!isCollected"
+            class="learn-content-body-collect-div"
+            @click="clickCollection"
+          >
+            <span>收藏</span>
+            <div class="learn-content-body-collect-img">
+              <van-image width="100%" height="100%" :src="collectImg" />
+            </div>
+          </div>
+          <div
+            v-show="isCollected"
+            class="learn-content-body-collect-div"
+            @click="clickRemoveCollection"
+          >
+            <span>取消收藏</span>
+            <div class="learn-content-body-collect-img">
+              <van-image width="100%" height="100%" :src="collectedImg" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="learn-content-body-count">
+        <div class="learn-content-body-count-btn">
+          阅读<span>{{ contentObj.readerCount }}</span>
+        </div>
+        <div class="learn-content-body-count-btn">
+          点赞<span>{{ contentObj.likesCount }}</span>
+        </div>
+      </div>
+    </div>
+    <!-- 评论 -->
+    <div class="learn-content-comment">
+      <div class="learn-content-comment-title">
+        <div class="learn-content-comment-title-icon"></div>
+        <span>评论</span>
+      </div>
+      <div class="learn-content-comment-list">
+        <div
+          class="learn-content-comment-item"
+          v-for="(item, index) in commentList"
+          :key="index"
+        >
+          <div class="learn-content-comment-item-userHead">
+            <van-image
+              width="100%"
+              height="100%"
+              round
+              alt="cover"
+              :src="item.headerUrl"
+            />
+          </div>
+          <div class="learn-content-comment-item-userInfo">
+            <div class="learn-content-comment-item-name">{{ item.userId }}</div>
+            <div class="learn-content-comment-item-content">
+              {{ item.content }}
+            </div>
+            <div class="learn-content-comment-item-createdtime">
+              {{ item.createdTime }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 发布评论 -->
+    <div class="learn-content-post-comment">
+      <input
+        v-model="commentValue"
+        maxlength="200"
+        placeholder="发表你的评论"
+      />
+      <div class="learn-content-post-comment-btn">
+        <div @click="postCommentFun">发布</div>
+        <div @click="canclePostCommentFun">取消</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -22,14 +110,18 @@ export default {
   data() {
     return {
       contentObj: { contents: "" },
-      seconds: 10
+      seconds: 0,
+      collectImg: require("@/assets/image/learn/collect.png"),
+      collectedImg: require("@/assets/image/learn/collected.png"),
+      isCollected: false, // 是否被收藏了
+      commentList: [], // 评论列表内容
+      commentValue: "" // 即将评论的内容
     };
   },
   computed: {},
   created() {},
   mounted() {
     this.getContent();
-    this.caculateTime();
   },
   methods: {
     //   查询具体内容
@@ -40,16 +132,51 @@ export default {
       this.$_http
         .get(this.$pathParams(this.$_API.JTXT_GET_MATERIAL_MATERIALID, path))
         .then(res => {
+          console.log("--content--", res.data);
           this.contentObj = res.data;
-          console.log("--content--" + JSON.stringify(this.contentObj));
+          // 开始倒计时
+          this.seconds = res.data.readTimeInSec;
+          this.caculateTime();
+          // ！！！需要查询该文章是否已被当前用户收藏！！！
+          // TODO...
+          // ！！！需要查询该文章是否已被当前用户点赞！！！
+          // TODO...
+          this.getCommentListFun(); // 查询：评论列表内容
         })
         .catch(() => {
           this.$store.commit("toggleLoading", false);
         });
     },
+    // 查询：评论列表内容
+    getCommentListFun() {
+      // ！！！需要查询评论列表内容！！！
+      // TODO...
+      this.commentList = [
+        {
+          headerUrl: "", // 头像路径
+          userId: "评论的用户ID1", // 用户名
+          content: "这里是评论的内容1", // 评论内容
+          createdTime: "2021-04-10" // 评论日期
+        },
+        {
+          headerUrl: "", // 头像路径
+          userId: "评论的用户ID2", // 用户名
+          content: "这里是评论的内容2", // 评论内容
+          createdTime: "2021-04-10" // 评论日期
+        },
+        {
+          headerUrl: "", // 头像路径
+          userId: "评论的用户ID3", // 用户名
+          content: "这里是评论的内容3", // 评论内容
+          createdTime: "2021-04-10" // 评论日期
+        }
+      ];
+    },
+    // 操作：返回
     onClickLeft() {
       this.$router.back();
     },
+    // 方法：获取阅读倒计时
     caculateTime() {
       var interval = setInterval(() => {
         if (this.seconds > 0) {
@@ -59,7 +186,7 @@ export default {
         }
       }, 1000);
     },
-    // 点击收藏
+    // 操作：收藏
     clickCollection() {
       let path = {
         userName: "testuser-ztdxxDGdNj"
@@ -72,13 +199,14 @@ export default {
           params
         })
         .then(res => {
-          console.log("--收藏--" + JSON.stringify(res.data));
+          console.log("--收藏--", res.data);
+          this.isCollected = true;
         })
         .catch(() => {
           this.$store.commit("toggleLoading", false);
         });
     },
-    // 移除收藏
+    // 操作：移除收藏
     clickRemoveCollection() {
       let path = {
         userName: "testuser-ztdxxDGdNj"
@@ -97,15 +225,211 @@ export default {
           }
         )
         .then(res => {
-          console.log("--取消收藏--" + JSON.stringify(res.data));
+          console.log("--取消收藏--", res.data);
+          this.isCollected = false;
         })
         .catch(() => {
           this.$store.commit("toggleLoading", false);
         });
+    },
+    // 操作：发布评论
+    postCommentFun() {
+      // TODO...
+      console.log("操作：发布评论", this.commentValue);
+    },
+    // 操作：取消评论
+    canclePostCommentFun() {
+      this.commentValue = "";
+    },
+    // 方法：过滤日期时间为 年-月-日
+    formateDateTimeFun(time) {
+      // 获取当前日期
+      let date = new Date(time);
+      // 获取当前月份
+      let nowMonth = date.getMonth() + 1;
+      // 获取当前是几号
+      let strDate = date.getDate();
+      // 添加分隔符“-”
+      let seperator = "-";
+      // 对月份进行处理，1-9月在前面添加一个“0”
+      if (nowMonth >= 1 && nowMonth <= 9) {
+        nowMonth = "0" + nowMonth;
+      }
+      // 对月份进行处理，1-9号在前面添加一个“0”
+      if (strDate >= 0 && strDate <= 9) {
+        strDate = "0" + strDate;
+      }
+      // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
+      return date.getFullYear() + seperator + nowMonth + seperator + strDate;
+    },
+    // 方法：根据秒数，获取时：分：秒
+    getTimeHoursMinuteSecondsFun(time) {
+      let hours = Math.floor(time / (60 * 60));
+      let minutes = Math.floor((time - hours * 60 * 60) / 60);
+      let seconds = Math.floor(time - hours * 60 * 60 - minutes * 60);
+      let timeDiff = zero(hours) + ":" + zero(minutes) + ":" + zero(seconds);
+      // 数字补零
+      function zero(num) {
+        return num < 10 ? "0" + num : num;
+      }
+      return timeDiff;
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+@import "~@/styles/mixin";
+.page-learn-content-box {
+  font-size: 0.6rem;
+  padding-bottom: 2rem;
+  .learn-content-rest-time {
+    height: 1.5rem;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-right: 1rem;
+  }
+  .learn-content-body {
+    padding: 0.5rem 0.5rem;
+    .learn-content-body-title {
+      font-size: 0.7rem;
+      font-weight: bold;
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+    .learn-content-body-auther {
+      margin-top: 0.5rem;
+      color: #666;
+    }
+    .learn-content-body-description {
+      margin-top: 1rem;
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+    .learn-content-body-time-row {
+      margin-top: 1rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .learn-content-body-time {
+        color: #666;
+      }
+      .learn-content-body-collect {
+        .learn-content-body-collect-div {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          .learn-content-body-collect-img {
+            margin-left: 0.5rem;
+            width: 0.7rem;
+            height: 0.7rem;
+          }
+        }
+      }
+    }
+    .learn-content-body-count {
+      width: 100%;
+      margin-top: 1rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .learn-content-body-count-btn {
+        width: calc(50% - 0.5rem);
+        height: 1.5rem;
+        padding: 0 0.5rem;
+        display: flex;
+        align-items: center;
+        background-color: #d9d9d9;
+        border-radius: 4px;
+        span {
+          margin-left: 0.5rem;
+        }
+      }
+    }
+  }
+  .learn-content-comment {
+    margin-top: 1rem;
+    .learn-content-comment-title {
+      padding: 0 0.5rem;
+      display: flex;
+      align-items: center;
+      height: 1.25rem;
+      .learn-content-comment-title-icon {
+        width: 0.15rem;
+        height: 100%;
+        background-color: #fe6347;
+      }
+      span {
+        font-size: 0.7rem;
+        margin-left: 0.4rem;
+      }
+    }
+    .learn-content-comment-list {
+      border-top: 1px solid #e5e5e5;
+      margin-top: 0.5rem;
+      padding: 0.5rem 0.5rem;
+      .learn-content-comment-item {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 0.5rem;
+        .learn-content-comment-item-userHead {
+          width: 1.5rem;
+          height: 1.5rem;
+          border-radius: 100%;
+          overflow: hidden;
+          border: 1px dashed #e5e5e5;
+        }
+        .learn-content-comment-item-userInfo {
+          width: calc(100% - 2rem);
+          padding-bottom: 0.25rem;
+          border-bottom: 1px solid #e5e5e5;
+          .learn-content-comment-item-name {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+          .learn-content-comment-item-content {
+            margin-top: 0.25rem;
+            word-break: break-all;
+            word-wrap: break-word;
+          }
+          .learn-content-comment-item-createdtime {
+            margin-top: 0.25rem;
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+  .learn-content-post-comment {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 2rem;
+    border-top: 1px solid #e5e5e5;
+    background-color: #f5f5f5;
+    padding: 0.2rem 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    input {
+      width: calc(100% - 4.5rem);
+      height: 100%;
+      font-size: 0.7rem;
+      padding: 0 0.3rem;
+      border-radius: 4px;
+      background-color: #d9d9d9;
+    }
+    .learn-content-post-comment-btn {
+      display: flex;
+      div {
+        margin-left: 0.5rem;
+        font-size: 0.7rem;
+      }
+    }
+  }
+}
 </style>

src/views/home/learn/page-learn.vue

@@ -7,17 +7,20 @@
         :key="index"
         :title="item.name"
       >
-        <page-learn-child :learnChildList="learnChildList"> </page-learn-child>
+        <PageLearnChild :learnChildList="learnChildList"> </PageLearnChild>
       </van-tab>
     </van-tabs>
   </div>
 </template>
 
 <script>
-import PageLearnChild from "./page-learn-child";
 export default {
   name: "page-learn",
-  components: { PageLearnChild },
+  components: {
+    PageLearnChild: resolve => {
+      require(["./page-learn-child"], resolve);
+    }
+  },
   data() {
     return {
       active: 0,