添加学习内容

src/main.js

@@ -12,7 +12,7 @@ import "@/utils/rem";
 import "@/common/permission";
 // 全局css
 import "@/styles/index.scss";
-import { Button, Image, Dialog, NavBar, Tabbar, TabbarItem, Tabs, Tab, Grid, GridItem, Icon } from "vant";
+import { Button, Image, Dialog, NavBar, Tabbar, TabbarItem, Tabs, Tab, Grid, GridItem, Icon, List, Cell } from "vant";
 
 window.$_http = axios;
 // event Bus 用于无关系组件间的通信。
@@ -31,6 +31,8 @@ Vue.component("VanTab", Tab);
 Vue.component("VanGrid", Grid);
 Vue.component("VanGridItem", GridItem);
 Vue.component("VanIcon", Icon);
+Vue.component("VanList", List);
+Vue.component("VanCell", Cell);
 
 Object.entries(filters).forEach(([key, value]) => {
   Vue.filter(key, value);

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

@@ -1,13 +1,20 @@
 <template>
   <div class="scroll">
     <div>
-      <van-tabs :active="active" bind:change="onChange">
+      <van-tabs :active="active" @click="tabChange">
         <van-tab
           v-for="(item, index) in learnModuleList"
           :key="index"
           :title="item.title"
         >
-          {{ item.content }}
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+          >
+            <van-cell v-for="item in item.content" :key="item" :title="item" />
+          </van-list>
         </van-tab>
       </van-tabs>
     </div>
@@ -20,28 +27,56 @@ export default {
   components: {},
   data() {
     return {
-      active: 1,
+      active: 0,
       learnModuleList: [
-        { title: "推荐", code: "recommend", content: "内容1" },
-        { title: "实践", code: "practice", content: "内容2" },
-        { title: "百科", code: "encyclopedia", content: "内容3" },
-        { title: "推荐", code: "recommend", content: "内容1" },
-        { title: "实践", code: "practice", content: "内容2" },
-        { title: "百科", code: "encyclopedia", content: "内容3" },
-        { title: "推荐", code: "recommend", content: "内容1" },
-        { title: "实践", code: "practice", content: "内容2" },
-        { title: "百科", code: "encyclopedia", content: "内容3" }
-      ]
+        { title: "推荐", code: "recommend", content: [] },
+        { title: "实践", code: "practice", content: [] },
+        { title: "百科", code: "encyclopedia", content: [] },
+        { title: "推荐", code: "recommend", content: [] },
+        { title: "实践", code: "practice", content: [] },
+        { title: "百科", code: "encyclopedia", content: [] },
+        { title: "推荐", code: "recommend", content: [] },
+        { title: "实践", code: "practice", content: [] },
+        { title: "百科", code: "encyclopedia", content: [] }
+      ],
+      choosedTabIndex: 0,
+      choosedTabTitle: "推荐",
+      loading: true,
+      finished: false
     };
   },
   computed: {},
   created() {
-    this.startLog();
+    this.onLoad();
   },
   mounted() {},
   methods: {
-    startLog() {
-      console.log("--page-learn--");
+    tabChange(index, title) {
+      this.choosedTabIndex = index;
+      this.choosedTabTitle = title;
+      console.log("---index--" + index + "--title--" + title);
+      this.initLoadStatus();
+      this.onLoad();
+    },
+    initLoadStatus() {
+      this.loading = true;
+      this.finished = false;
+    },
+    onLoad() {
+      // 异步更新数据
+      setTimeout(() => {
+        for (let i = 0; i < 10; i++) {
+          this.learnModuleList[this.choosedTabIndex].content.push(
+            this.choosedTabTitle + i
+          );
+        }
+        // 加载状态结束
+        this.loading = false;
+        // 数据全部加载完成
+        if (this.learnModuleList[this.choosedTabIndex].content.length >= 40) {
+          this.finished = true;
+        }
+      }, 1000);
     }
   }
 };

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

@@ -1,51 +1,49 @@
 <template>
-  <div class="scroll">
-    <div class="contentBody">
-      <div class="user-box">
-        <!-- 头像 -->
-        <div class="userCardBox">
-          <div class="flexRowStart">
-            <van-image
-              class="userHeaderImg"
-              fit="cover"
-              :src="maleAvatar"
-              :show-error="true"
-              :error-icon="maleAvatar"
-            />
-            <div class="flexRowBetweenCenter">
-              <div>
-                {{ userName }}
-              </div>
-            </div>
+  <div class="page-person-box">
+    <div class="user-box">
+      <!-- 头像 -->
+      <div class="userCardBox">
+        <div class="userInfo">
+          <van-image
+            class="userHeaderImg"
+            fit="cover"
+            :src="maleAvatar"
+            :show-error="true"
+            :error-icon="maleAvatar"
+          />
+          <div class="userName">
+            {{ userName }}
           </div>
-          <div class="userCardLine"></div>
-          <!-- 今日积分 -->
-          <div class="todayScoreBox">
-            <div class="flexRowStartCenter">
-              <span class="todayScore">今日积分</span>
-              <span class="todayScoreNum">50</span>
-            </div>
+        </div>
+        <div class="userCardLine"></div>
+        <!-- 今日积分 -->
+        <div class="todayScoreBox">
+          <div class="flexRowStartCenter">
+            <span class="todayScore">今日积分:</span>
+            <span class="todayScoreNum">50</span>
           </div>
         </div>
+        <div style="height: 1rem"></div>
       </div>
-      <!-- 积分 -->
-      <div class="all-score-box">
-        <div class="allScoreCard">
-          <span>总积分:100</span>
-        </div>
+    </div>
+    <!-- 积分 -->
+    <div class="all-score-box">
+      <div class="allScoreCard">
+        <div class="allScore">总积分: 100</div>
       </div>
-      <!-- 菜单 -->
-      <div class="menu-box">
-        <div class="menuCard">
-          <van-grid>
-            <van-grid-item
-              v-for="(item, index) in menus"
-              :key="index"
-              :icon="item.icon"
-              :text="item.title"
-            />
-          </van-grid>
-        </div>
+    </div>
+    <!-- 菜单 -->
+    <div class="menu-box">
+      <div class="menuCard">
+        <van-grid>
+          <van-grid-item
+            v-for="(item, index) in menus"
+            :key="index"
+            :icon="item.icon"
+            :text="item.title"
+          />
+        </van-grid>
+        <div style="height: 3rem"></div>
       </div>
     </div>
   </div>
@@ -54,7 +52,7 @@
 <script>
 import maleAvatar from "@/assets/image/maleAvatar.png";
 export default {
-  name: "page-personal-center",
+  name: "page-personal",
   components: {},
   data() {
     return {
@@ -83,130 +81,99 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.scroll {
+.page-person-box {
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
-  background-color: #f7f5f6;
-  font-size: 0.6rem;
+  font-size: 1rem;
   width: 100%;
-}
-.contentBody {
-  background-color: #fff;
-}
-.user-box {
-  padding: 0 0.5rem;
-  padding-top: 0.5rem;
-}
-.userCardBox {
-  width: 94%;
-  padding: 0.5rem 0.5rem;
-  box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
-  -webkit-box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
-  border-radius: 0.3rem;
-  .userHeaderImg {
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 0.1rem;
-    margin-right: 0.5rem;
-  }
-  .userCardRight {
-    width: 100vh;
-    .userName {
-      font-size: 0.65rem;
-      font-weight: bold;
-      color: #242526;
-    }
-    .userDetailTxt {
-      font-size: 0.5rem;
-      color: #438bef;
-    }
-    .userDetailIocn {
-      width: 0.5rem;
-      height: 0.5rem;
-      margin-left: 0.1rem;
-    }
-    .userMoreInfo {
-      font-size: 0.5rem;
-      color: #555658;
-      margin-top: 0.2rem;
-      .userMarginRight {
-        margin-right: 0.3rem;
+  height: 100%;
+  .user-box {
+    padding: 0.5rem 0.5rem;
+    .userCardBox {
+      background-color: #fff;
+      padding: 0.5rem 0.5rem;
+      box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+      -webkit-box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+      border-radius: 0.1rem;
+      .userHeaderImg {
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 0.1rem;
+        margin-right: 0.5rem;
+      }
+      .userCardLine {
+        border-bottom: 1px solid #f1f1f1;
+        width: 100%;
+        height: 1px;
+        margin: 0.4rem 0;
+      }
+      .userInfo {
+        padding: 0.5rem 0;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+      }
+      .userName {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .flexRowStartCenter {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+      }
+      .todayScoreBox {
+        padding: 0.5rem 0;
+        font-size: 0.5rem;
+        flex-wrap: nowrap;
+        white-space: nowrap;
+        overflow: hidden;
+        .todayScore {
+          margin-left: 0.5rem;
+          margin-right: 0.5rem;
+          font-size: 0.7rem;
+        }
+        .todayScoreNum {
+          margin-right: 0.5rem;
+          font-size: 0.7rem;
+        }
       }
     }
   }
-  .userDiseaseItem {
-    font-size: 0.5rem;
-    padding: 0.1rem 0.25rem;
-    background-color: #dae7fb;
-    color: #2e7ff1;
-    border-radius: 0.1rem;
-    margin-right: 0.5rem;
-    margin-top: 0.4rem;
-    word-break: break-all;
-    word-wrap: break-word;
-  }
-  .userCardLine {
-    border-bottom: 1px solid #f1f1f1;
-    width: 100%;
-    height: 1px;
-    margin: 0.4rem 0;
-  }
-  .flexRowStart {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-  }
-  .flexRowBetweenCenter {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .flexRowStartCenter {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-  }
-  .todayScoreBox {
-    font-size: 0.5rem;
-    color: #555658;
-    flex-wrap: nowrap;
-    white-space: nowrap;
-    overflow: hidden;
-    .todayScore {
-      margin-left: 0.5rem;
-      margin-right: 0.5rem;
-      color: #242526;
-      font-size: 0.6rem;
-      font-weight: bold;
+  .all-score-box {
+    padding: 0.5rem 0.5rem;
+    .allScoreCard {
+      background-color: #fff;
+      width: 100%;
+      padding: 0.5rem 0.5rem;
+      box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+      -webkit-box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+      border-radius: 0.1rem;
+      .allScore {
+        padding: 0.5rem 0;
+        margin-left: 0.5rem;
+        margin-right: 0.5rem;
+        font-size: 0.8rem;
+        color: #f6664f;
+        font-weight: bold;
+      }
     }
-    .todayScoreNum {
-      margin-right: 0.5rem;
-      font-size: 0.55rem;
+  }
+
+  .menu-box {
+    padding: 0.5rem 0.5rem;
+    .menuCard {
+      background-color: #fff;
+      width: 100%;
+      padding: 1rem 0.5rem;
+      box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+      -webkit-box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
+      border-radius: 0.1rem;
     }
   }
 }
-.all-score-box {
-  padding: 0 0.5rem;
-  padding-top: 1rem;
-}
-.allScoreCard {
-  width: 94%;
-  padding: 0.5rem 0.5rem;
-  box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
-  -webkit-box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
-  border-radius: 0.3rem;
-}
-.menu-box {
-  padding: 1rem 0.5rem;
-}
-.menuCard {
-  width: 94%;
-  padding: 0.5rem 0.5rem;
-  box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
-  -webkit-box-shadow: 0 0 4px 2px rgba(139, 163, 198, 0.3);
-  border-radius: 0.3rem;
-}
 </style>