修改样式

src/api/modules/user.js

@@ -17,6 +17,8 @@ export default {
     // 删除收藏
     JTXT_DELETE_REMOVE_FAVORITE_MATERIALID: "user/{userName}/favorites",
     // 查看总榜
-    JTXT_GET_LEADERBOARD: "leaderboard"
+    JTXT_GET_LEADERBOARD: "leaderboard",
+    // 查看总榜
+    JTXT_GET_EVENTS_USERNAME_DATE: "/events/{userName}/{date}"
   }
 };

src/views/home/person/exam-history.vue

@@ -1,42 +1,37 @@
 <template>
-  <div class="contentBody">
-    <van-nav-bar title="成绩" left-arrow @click-left="onClickLeft" />
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      finished-text="没有更多了"
-      @load="onLoad"
-    >
-      <van-cell
-        v-for="(item, index) in examHistoryList"
-        :key="index"
-        @click="chooseExam(index)"
-      >
-        <div slot="default" class="contentItemDiv">
-          <div class="contentBox">
-            <div>
-              <div class="contentItemTitle">{{ item.examName }}</div>
-              <div class="contentItemDescription">
-                考试时间:
-                <span>{{
-                  formateDatesFun(item.startTime) || item.startTime
-                }}</span>
+  <div class="exam-history-box">
+    <van-nav-bar title="考试" left-arrow @click-left="onClickLeft" />
+    <div class="exam-history-div">
+      <div class="exam-history-grades-div">
+        <div class="exam-history-grades">{{ userTotalPonits }}</div>
+      </div>
+
+      <div class="exam-history-list">
+        <div
+          v-for="(item, index) in examHistoryList"
+          :key="index"
+          class="exam-history-item"
+        >
+          <div class="exam-history-item-left">
+            <div class="exam-history-item-left-title">{{ item.examName }}</div>
+            <div class="exam-history-item-left-percentage">
+              <div class="exam-history-item-left-schedule">
+                <van-progress
+                  :percentage="formatePercentageFun(item.points, 10)"
+                  :show-pivot="false"
+                />
+              </div>
+              <div class="exam-history-item-left-schedule-text">
+                {{ item.points }}分 / 满分10分
               </div>
             </div>
-            <div
-              :class="{
-                'exam-point': true,
-                'exam-point-green': item.points >= 90,
-                'exam-point-yellow': item.points >= 60 && item.points < 90,
-                'exam-point-red': item.points < 60
-              }"
-            >
-              {{ item.points }}
-            </div>
+          </div>
+          <div class="exam-history-item-right">
+            <div class="exam-history-item-btn">{{ item.points }}</div>
           </div>
         </div>
-      </van-cell>
-    </van-list>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -47,9 +42,65 @@ export default {
   components: {},
   data() {
     return {
-      examHistoryList: [],
       loading: false,
-      finished: false
+      userManualType: {
+        ONE: 1,
+        TWO: 2,
+        THREE: 3
+      }, // 类型
+      examHistoryList: [],
+      eventList: [
+        {
+          name: "进入应用",
+          rule: "2分/每次进入应用",
+          isFinish: false,
+          getPoints: 2,
+          totaPonits: 6,
+          type: 1
+        },
+        {
+          name: "观看视频",
+          rule: "2分/每有效观看一个视频",
+          isFinish: false,
+          getPoints: 0,
+          totaPonits: 6,
+          type: 1
+        },
+        {
+          name: "发表观点",
+          rule: "2分/每发表一个有效观点",
+          isFinish: false,
+          getPoints: 0,
+          totaPonits: 6,
+          type: 1
+        },
+        {
+          name: "阅读文章",
+          rule: "2分/每有效阅读一篇文章",
+          isFinish: false,
+          getPoints: 0,
+          totaPonits: 6,
+          type: 1
+        },
+        {
+          name: "文章学习时长",
+          rule: "2分/有效阅读文章累计1分钟",
+          isFinish: false,
+          getPoints: 0,
+          totaPonits: 6,
+          type: 2
+        },
+        {
+          name: "基础训练",
+          rule: "2分/每训练一次",
+          isFinish: false,
+          getPoints: 0,
+          totaPonits: 6,
+          type: 3
+        }
+      ],
+      userTotalPonits: 165, // 用户的总积分
+      todayEarnPoints: 6 // 今日已累计的积分
     };
   },
   mounted() {
@@ -61,6 +112,14 @@ export default {
     })
   },
   methods: {
+    // 格式化已获得的积分/总积分的数
+    formatePercentageFun(getPoints, totaPonits) {
+      return Math.round((getPoints / totaPonits) * 100);
+    },
+    // 操作：返回
+    onClickLeft() {
+      this.$router.back();
+    },
     // 查询：考试记录
     getExamHistory() {
       this.$store.commit("toggleLoading", true);
@@ -97,51 +156,82 @@ export default {
           this.$store.commit("toggleLoading", false);
         });
     },
-    // 操作：返回
-    onClickLeft() {
-      this.$router.back();
-    },
-    onLoad() {},
-    chooseExam(index) {
-      console.log("---exam-index---" + index);
+    // 操作：点击了去看看、去学习、去训练
+    toManualEarnFun(item) {
+      console.log(item);
+      switch (item.type) {
+        case this.userManualType.ONE:
+          //  TODO..
+          break;
+        case this.userManualType.TWO:
+          //  TODO..
+          break;
+        case this.userManualType.THREE:
+          //  TODO..
+          break;
+        default:
+          break;
+      }
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.contentBody {
+.exam-history-box {
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 0.6rem;
   background-color: #fff;
-  .contentItemDiv {
-    .contentBox {
+  .exam-history-div {
+    padding: 0 0.5rem;
+    .exam-history-grades-div {
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
+      justify-content: center;
       align-items: center;
-    }
-    .contentItemTitle {
-      font-size: 0.65rem;
-      font-weight: bold;
-    }
-    .contentItemDescription {
-      margin-top: 0.5rem;
-      color: #696969;
-      span {
-        margin-left: 0.5rem;
+      .exam-history-grades {
+        margin-top: 1rem;
+        font-size: 1rem;
+        color: #0088e9;
       }
     }
-    .exam-point {
-      font-size: 1rem;
-      font-weight: bold;
-      margin-top: 0.5rem;
-    }
-    .exam-point-green {
-      color: green;
-    }
-    .exam-point-yellow {
-      color: yellow;
-    }
-    .exam-point-red {
-      color: red;
+    .exam-history-list {
+      padding: 0.5rem 0;
+      .exam-history-item {
+        padding: 0.5rem 0;
+        border-top: 1px solid #e5e5e5;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .exam-history-item-left {
+          .exam-history-item-left-title {
+            font-weight: bold;
+          }
+          .exam-history-item-left-percentage {
+            display: flex;
+            align-items: center;
+            .exam-history-item-left-schedule {
+              width: 100px;
+            }
+            .exam-history-item-left-schedule-text {
+              color: #999;
+              font-size: 0.55rem;
+              margin-left: 0.5rem;
+            }
+          }
+        }
+        .exam-history-item-right {
+          .exam-history-item-btn {
+            border-radius: 0.1rem;
+            color: #0088e9;
+            background-color: #d8e9f5;
+            padding: 0.1rem 0.25rem;
+          }
+        }
+      }
     }
   }
 }

src/views/home/person/user-manual.vue

@@ -37,31 +37,13 @@
                 />
               </div>
               <div class="user-manual-item-left-schedule-text">
-                已获得{{ item.getPoints }}分 / 上线{{ item.totaPonits }}分
+                已获得{{ item.getPoints }}分 / 上限{{ item.totaPonits }}分
               </div>
             </div>
           </div>
           <div class="user-manual-item-right">
-            <div
-              v-if="item.type === userManualType.ONE"
-              class="user-manual-item-btn"
-              @click="toManualEarnFun(item)"
-            >
-              去看看
-            </div>
-            <div
-              v-else-if="item.type === userManualType.TWO"
-              class="user-manual-item-btn"
-              @click="toManualEarnFun(item)"
-            >
-              去学习
-            </div>
-            <div
-              v-else-if="item.type === userManualType.THREE"
-              class="user-manual-item-btn"
-              @click="toManualEarnFun(item)"
-            >
-              去训练
+            <div class="user-manual-item-btn" @click="toManualEarnFun(item)">
+              {{ item.rightButton }}
             </div>
           </div>
         </div>
@@ -71,73 +53,67 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
   name: "user-manual",
   components: {},
   data() {
     return {
       loading: false,
-      userManualType: {
-        ONE: 1,
-        TWO: 2,
-        THREE: 3
-      }, // 类型
       eventList: [
         {
-          name: "进入应用",
+          name: "今日必答",
           rule: "2分/每次进入应用",
           isFinish: false,
           getPoints: 2,
           totaPonits: 6,
-          type: 1
+          rightButton: "去答题"
         },
         {
-          name: "观看视频",
+          name: "今日必读",
           rule: "2分/每有效观看一个视频",
           isFinish: false,
           getPoints: 0,
           totaPonits: 6,
-          type: 1
+          rightButton: "去看看"
         },
         {
-          name: "发表观点",
+          name: "每周必答",
           rule: "2分/每发表一个有效观点",
           isFinish: false,
           getPoints: 0,
           totaPonits: 6,
-          type: 1
-        },
-        {
-          name: "阅读文章",
-          rule: "2分/每有效阅读一篇文章",
-          isFinish: false,
-          getPoints: 0,
-          totaPonits: 6,
-          type: 1
-        },
-        {
-          name: "文章学习时长",
-          rule: "2分/有效阅读文章累计1分钟",
-          isFinish: false,
-          getPoints: 0,
-          totaPonits: 6,
-          type: 2
-        },
-        {
-          name: "基础训练",
-          rule: "2分/每训练一次",
-          isFinish: false,
-          getPoints: 0,
-          totaPonits: 6,
-          type: 3
+          rightButton: "去答题"
         }
       ],
       userTotalPonits: 165, // 用户的总积分
       todayEarnPoints: 6 // 今日已累计的积分
     };
   },
-  mounted() {},
+  mounted() {
+    this.getEvents();
+  },
+  computed: {
+    ...mapState({
+      user: state => state.user
+    })
+  },
   methods: {
+    getEvents() {
+      let path = {
+        userName: this.user.userInfo.userName,
+        date: "20210506"
+      };
+      this.$_http
+        .get(this.$pathParams(this.$_API.JTXT_GET_EVENTS_USERNAME_DATE, path))
+        .then(res => {
+          console.log("--event--" + JSON.stringify(res));
+          this.todayPoints = res.data;
+        })
+        .catch(() => {
+          this.$store.commit("toggleLoading", false);
+        });
+    },
     // 格式化已获得的积分/总积分的数
     formatePercentageFun(getPoints, totaPonits) {
       return Math.round((getPoints / totaPonits) * 100);
@@ -153,19 +129,6 @@ export default {
     // 操作：点击了去看看、去学习、去训练
     toManualEarnFun(item) {
       console.log(item);
-      switch (item.type) {
-        case this.userManualType.ONE:
-          //  TODO..
-          break;
-        case this.userManualType.TWO:
-          //  TODO..
-          break;
-        case this.userManualType.THREE:
-          //  TODO..
-          break;
-        default:
-          break;
-      }
     }
   }
 };