修改积分

src/main.js

@@ -27,10 +27,13 @@ import {
   Icon,
   List,
   Cell,
+  CellGroup,
   Swipe,
   SwipeItem,
   DropdownMenu,
-  DropdownItem
+  DropdownItem,
+  Progress,
+  Skeleton
 } from "vant";
 
 window.$_http = axios;
@@ -57,6 +60,9 @@ Vue.component("VanSwipe", Swipe);
 Vue.component("VanSwipeItem", SwipeItem);
 Vue.component("VanDropdownMenu", DropdownMenu);
 Vue.component("VanDropdownItem", DropdownItem);
+Vue.component("VanProgress", Progress);
+Vue.component("VanCellGroup", CellGroup);
+Vue.component("VanSkeleton", Skeleton);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

src/router/index.js

@@ -65,7 +65,12 @@ let routes = [
     name: "user-manual",
     props: true,
     component: () => import("@/views/home/person/user-manual")
-  } // 使用手册
+  }, // 使用手册
+  {
+    path: "/learn-point-rule",
+    name: "LearnPointRule",
+    component: () => import("@/views/home/person/learn-point-rule")
+  } // 学习积分规则
 ];
 
 export default new Router({

src/views/home/person/learn-point-rule.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="contentBody">
+    <van-nav-bar title="积分说明" left-arrow @click-left="onClickLeft" />
+    <div>
+      <span>积分规则如下:</span>
+      <div v-for="(item, index) in ruleList" :key="index">
+        <div>{{ item.name }}</div>
+        <div>{{ item.content }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "learn-point-rule",
+  components: {},
+  data() {
+    return {
+      ruleList: [
+        { name: "登录", content: "每日首次登录1积分" },
+        {
+          name: "今日必读",
+          content:
+            "每次阅读完成今日必读获取1积分，每篇文章只能获取1次积分，只有在今日必读时才能够获取积分，其他情况不能获取积分，切记切记切记"
+        },
+        {
+          name: "今日必考",
+          content:
+            "每次考试完成今日必考获取1积分，每次考试只能获取1次积分，只有在今日必考时才能够获取积分，其他情况不能获取积分，切记切记切记"
+        },
+        { name: "今日必学", content: "学习上线5积分" }
+      ]
+    };
+  },
+  mounted() {
+    console.log("--收藏--");
+  },
+  methods: {
+    onClickLeft() {
+      this.$router.back();
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.contentBody {
+  background-color: #fff;
+}
+</style>

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

@@ -106,7 +106,7 @@ export default {
           src: require("@/assets/image/personal/leaderboard .png")
         },
         {
-          title: "使用手册",
+          title: "学习积分",
           icon: "photo-o",
           to: "user-manual",
           src: require("@/assets/image/personal/manual.png")

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

@@ -1,6 +1,39 @@
 <template>
-  <div>
-    <van-nav-bar title="使用手册" left-arrow @click-left="onClickLeft" />
+  <div class="contentBody">
+    <van-nav-bar title="学习积分" left-arrow @click-left="onClickLeft" />
+    <div>
+      <div class="contentHeader">165</div>
+      <div class="contentHeader" @click="clickLearnRule()">积分说明</div>
+      <div class="contentHeader">
+        <div>赚积分</div>
+        <div>今日已累计：6积分</div>
+      </div>
+    </div>
+    <div>
+      <van-list
+        v-model="loading"
+        finished="true"
+        finished-text=""
+        @load="onLoad"
+      >
+        <van-cell v-for="(item, index) in eventList" :key="index">
+          <div slot="default" class="contentItemDiv">
+            <div class="contentItem">
+              <div class="contentItemTitle">
+                <div>{{ item.name || "今日必做" }}</div>
+                <div>{{ item.rule }}</div>
+                <div style="width: 100px">
+                  <van-progress :percentage="50" :show-pivot="false" />
+                </div>
+              </div>
+              <div class="contentItemDescription">
+                <span>去看看</span>
+              </div>
+            </div>
+          </div>
+        </van-cell>
+      </van-list>
+    </div>
   </div>
 </template>
 
@@ -9,7 +42,13 @@ export default {
   name: "user-manual",
   components: {},
   data() {
-    return {};
+    return {
+      eventList: [
+        { name: "今日必学", rule: "1分/学习完成一篇文章", isFinish: false },
+        { name: "今日必练", rule: "1分/完成一次练习", isFinish: false },
+        { name: "今日必考", rule: "1分/完成一次考试", isFinish: false }
+      ]
+    };
   },
   mounted() {
     console.log("--收藏--");
@@ -17,10 +56,39 @@ export default {
   methods: {
     onClickLeft() {
       this.$router.back();
+    },
+    clickLearnRule() {
+      this.$router.push({ name: "LearnPointRule" });
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+.contentBody {
+  background-color: #fff;
+  .contentHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .contentItemDiv {
+    .contentItem {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .contentItemTitle {
+      font-size: 0.65rem;
+      font-weight: bold;
+    }
+    .contentItemDescription {
+      margin-top: 0.5rem;
+      color: #696969;
+      span {
+        margin-left: 0.5rem;
+      }
+    }
+  }
+}
 </style>