修改学习积分、积分说明的页面样式

src/router/index.js

@@ -61,7 +61,8 @@ let routes = [
     component: () => import("@/views/home/person/rank")
   }, // 排行榜
   {
-    path: "/user-manual/:userId",
+    // path: "/user-manual/:userId",
+    path: "/user-manual",
     name: "user-manual",
     props: true,
     component: () => import("@/views/home/person/user-manual")

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

@@ -1,11 +1,18 @@
 <template>
-  <div class="contentBody">
+  <div class="learn-point-rule-box">
     <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 class="learn-point-rule-top">积分规则如下:</div>
+      <div
+        v-for="(item, index) in ruleList"
+        :key="index"
+        class="learn-point-rule-row-item"
+      >
+        <div class="learn-point-rule-row">
+          <div class="learn-point-rule-row-icon">{{ " " }}</div>
+          <div class="learn-point-rule-row-title">{{ item.name }}</div>
+        </div>
+        <div class="learn-point-rule-content">{{ item.content }}</div>
       </div>
     </div>
   </div>
@@ -33,10 +40,9 @@ export default {
       ]
     };
   },
-  mounted() {
-    console.log("--收藏--");
-  },
+  mounted() {},
   methods: {
+    // 操作：返回
     onClickLeft() {
       this.$router.back();
     }
@@ -45,7 +51,42 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.contentBody {
+.learn-point-rule-box {
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 0.6rem;
   background-color: #fff;
+  .learn-point-rule-top {
+    padding: 0.5rem 0.5rem 0;
+    font-size: 0.7rem;
+  }
+  .learn-point-rule-row-item {
+    width: 100%;
+    padding: 0 0.5rem;
+    margin-top: 0.5rem;
+    .learn-point-rule-row {
+      display: flex;
+      align-items: center;
+      .learn-point-rule-row-icon {
+        width: 3px;
+        height: 0.55rem;
+        background-color: #df371e;
+      }
+      .learn-point-rule-row-title {
+        font-size: 0.75rem;
+        font-weight: bold;
+        margin-left: 0.25rem;
+      }
+    }
+    .learn-point-rule-content {
+      margin-top: 0.25rem;
+      padding-left: 0.5rem;
+      color: #696969;
+      word-break: break-all;
+      word-wrap: break-word;
+    }
+  }
 }
 </style>

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

@@ -1,38 +1,71 @@
 <template>
-  <div class="contentBody">
+  <div class="user-manual-box">
     <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 class="user-manual-div">
+      <div class="user-manual-grades-div">
+        <div class="user-manual-grades">{{ userTotalPonits }}</div>
+        <div class="user-manual-description" @click="clickLearnRule">
+          积分说明
+        </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 class="user-manual-earn-points-row">
+        <div class="user-manual-earn-points">赚积分</div>
+        <div class="user-manual-earn-points-text">
+          今日已累计<span class="user-manual-earn-points-today">{{
+            todayEarnPoints
+          }}</span
+          ><span>积分</span>
+        </div>
+      </div>
+
+      <div class="user-manual-list">
+        <div
+          v-for="(item, index) in eventList"
+          :key="index"
+          class="user-manual-item"
+        >
+          <div class="user-manual-item-left">
+            <div class="user-manual-item-left-title">{{ item.name }}</div>
+            <div>{{ item.rule }}</div>
+            <div class="user-manual-item-left-percentage">
+              <div class="user-manual-item-left-schedule">
+                <van-progress
+                  :percentage="
+                    formatePercentageFun(item.getPoints, item.totaPonits)
+                  "
+                  :show-pivot="false"
+                />
               </div>
-              <div class="contentItemDescription">
-                <span>去看看</span>
+              <div class="user-manual-item-left-schedule-text">
+                已获得{{ item.getPoints }}分 / 上线{{ item.totaPonits }}分
               </div>
             </div>
           </div>
-        </van-cell>
-      </van-list>
+          <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>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -43,50 +76,184 @@ export default {
   components: {},
   data() {
     return {
+      loading: false,
+      userManualType: {
+        ONE: 1,
+        TWO: 2,
+        THREE: 3
+      }, // 类型
       eventList: [
-        { name: "今日必学", rule: "1分/学习完成一篇文章", isFinish: false },
-        { name: "今日必练", rule: "1分/完成一次练习", isFinish: false },
-        { name: "今日必考", rule: "1分/完成一次考试", isFinish: false }
-      ]
+        {
+          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() {
-    console.log("--收藏--");
-  },
+  mounted() {},
   methods: {
+    // 格式化已获得的积分/总积分的数
+    formatePercentageFun(getPoints, totaPonits) {
+      return Math.round((getPoints / totaPonits) * 100);
+    },
+    // 操作：返回
     onClickLeft() {
       this.$router.back();
     },
+    // 操作：点击积分说明按钮
     clickLearnRule() {
       this.$router.push({ name: "LearnPointRule" });
+    },
+    // 操作：点击了去看看、去学习、去训练
+    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 {
+.user-manual-box {
+  width: 100%;
+  height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 0.6rem;
   background-color: #fff;
-  .contentHeader {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .contentItemDiv {
-    .contentItem {
+  .user-manual-div {
+    padding: 0 0.5rem;
+    .user-manual-grades-div {
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
+      justify-content: center;
       align-items: center;
+      .user-manual-grades {
+        margin-top: 1rem;
+        font-size: 1rem;
+        color: #0088e9;
+      }
+      .user-manual-description {
+        margin-top: 0.5rem;
+        padding: 0.15rem 0.5rem;
+        border: 1px solid #7cc8ff;
+        border-radius: 0.25rem;
+        color: #7cc8ff;
+      }
     }
-    .contentItemTitle {
-      font-size: 0.65rem;
-      font-weight: bold;
+    .user-manual-earn-points-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 1rem;
+      .user-manual-earn-points {
+        font-size: 0.7rem;
+        font-weight: bold;
+      }
+      .user-manual-earn-points-text {
+        color: #696969;
+        display: flex;
+        align-items: center;
+        span {
+          color: #df371e;
+        }
+        .user-manual-earn-points-today {
+          font-size: 0.8rem;
+          margin: 0 0.25rem;
+        }
+      }
     }
-    .contentItemDescription {
-      margin-top: 0.5rem;
-      color: #696969;
-      span {
-        margin-left: 0.5rem;
+    .user-manual-list {
+      padding: 0.5rem 0;
+      .user-manual-item {
+        padding: 0.5rem 0;
+        border-top: 1px solid #e5e5e5;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .user-manual-item-left {
+          .user-manual-item-left-title {
+            font-weight: bold;
+          }
+          .user-manual-item-left-percentage {
+            display: flex;
+            align-items: center;
+            .user-manual-item-left-schedule {
+              width: 100px;
+            }
+            .user-manual-item-left-schedule-text {
+              color: #999;
+              font-size: 0.55rem;
+              margin-left: 0.5rem;
+            }
+          }
+        }
+        .user-manual-item-right {
+          .user-manual-item-btn {
+            border-radius: 0.1rem;
+            color: #0088e9;
+            background-color: #d8e9f5;
+            padding: 0.1rem 0.25rem;
+          }
+        }
       }
     }
   }