修改排行榜

src/views/home/person/collection.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="contentBody">
     <van-nav-bar title="收藏" left-arrow @click-left="onClickLeft" />
     <van-list
       v-model="loading"
@@ -18,7 +18,7 @@
             <div class="contentItemDescription">
               <div>
                 收藏时间:
-                {{ formateDateTimeFun(item.startTime) || item.startTime }}
+                {{ "2021-01-01" || formateDateTimeFun(item.startTime) }}
               </div>
             </div>
           </div>
@@ -97,11 +97,6 @@ export default {
 .contentBody {
   background-color: #fff;
   .contentItemDiv {
-    .contentBox {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
     .contentItemTitle {
       font-size: 0.65rem;
       font-weight: bold;
@@ -111,10 +106,6 @@ export default {
       justify-content: space-between;
       align-items: center;
     }
-    .exam-point {
-      font-size: 1rem;
-      font-weight: bold;
-    }
   }
 }
 </style>

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

@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import maleAvatar from "@/assets/image/maleAvatar.png";
+import maleAvatar from "@/assets/image/maleAvatar.jpg";
 export default {
   name: "page-personal",
   components: {},

src/views/home/person/rank.vue

@@ -1,26 +1,124 @@
 <template>
-  <div>
+  <div class="contentBody">
     <van-nav-bar title="排行榜" left-arrow @click-left="onClickLeft" />
+    <van-tabs :active="active" @click="rootChange">
+      <!-- 根目录 -->
+      <van-tab
+        v-for="(item, index) in rankList"
+        :key="index"
+        :title="item.name"
+      >
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
+          <van-cell v-for="(item, index) in favorites" :key="index">
+            <div slot="default" class="contentItemDiv">
+              <div class="contentBox">
+                <div class="headerContent">
+                  <van-image
+                    class="userHeaderImg"
+                    fit="cover"
+                    :src="maleAvatar"
+                    :show-error="true"
+                    :error-icon="maleAvatar"
+                  />
+                  <div>{{ item.name || "张三" }}</div>
+                </div>
+                <div>积分</div>
+              </div>
+            </div>
+          </van-cell>
+        </van-list>
+      </van-tab>
+    </van-tabs>
   </div>
 </template>
 
 <script>
+import maleAvatar from "@/assets/image/maleAvatar.jpg";
 export default {
-  name: "rank",
+  name: "collection",
   components: {},
   data() {
-    return {};
+    return {
+      maleAvatar,
+      active: 0,
+      rankList: [{ name: "魁首榜" }, { name: "跃进榜" }, { name: "失格榜" }],
+      loading: false,
+      finished: false
+    };
   },
   mounted() {
     console.log("--收藏--");
+    this.getFavorites();
   },
   methods: {
+    getFavorites() {
+      let path = {
+        userName: "testuser-zirKBELIlg"
+      };
+      this.$_http
+        .get(this.$pathParams(this.$_API.JTXT_GET_USER_FAVORITES, path))
+        .then(res => {
+          this.favorites = res.data.materials;
+          console.log("--collection--" + JSON.stringify(this.favorites));
+          this.finished = true;
+        })
+        .catch(() => {
+          this.$store.commit("toggleLoading", false);
+        });
+    },
     onClickLeft() {
       this.$router.back();
+    },
+    onLoad() {},
+    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;
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
+.contentBody {
+  background-color: #fff;
+  .contentItemDiv {
+    .userHeaderImg {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 0.1rem;
+      margin-right: 0.5rem;
+    }
+    .contentBox {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .headerContent {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
 </style>