修改排行榜页面

src/views/home/person/rank.vue

@@ -14,7 +14,44 @@
           finished-text="没有更多了"
           @load="onLoad"
         >
-          <van-cell v-for="(item, index) in favorites" :key="index">
+          <van-cell>
+            <div slot="default" class="contentItemTop">
+              <div
+                :class="{
+                  contentItemTopRowChild: true,
+                  contentItemTopRowOne: index === 0,
+                  contentItemTopRowTwo: index === 1,
+                  contentItemTopRowThree: index === 2
+                }"
+                v-for="(item, index) in rankListTopThree"
+                :key="index"
+              >
+                <div class="contentItemTopRowChildImg">
+                  <van-image
+                    class="userHeaderImg"
+                    width="100%"
+                    height="100%"
+                    fit="cover"
+                    round
+                    :src="item.src || maleAvatar"
+                    :show-error="true"
+                    :error-icon="maleAvatar"
+                  />
+                  <div class="contentItemTopRowChildImgNum">
+                    {{ index + 1 }}
+                  </div>
+                </div>
+                <div class="contentItemTopRowChildName">
+                  {{ item.name || "userName" + (index + 1) }}
+                </div>
+                <span class="contentItemTopRowChildPoints">
+                  {{ item.ponits || "undefind" }}
+                </span>
+                <span class="contentItemTopRowChildSteps">Steps</span>
+              </div>
+            </div>
+          </van-cell>
+          <van-cell v-for="(item, index) in rankListOthers" :key="index">
             <div slot="default" class="contentItemDiv">
               <div class="contentBox">
                 <div class="headerContent">
@@ -26,9 +63,12 @@
                     :show-error="true"
                     :error-icon="maleAvatar"
                   />
-                  <div>{{ item.name || "张三" }}</div>
+                  <div>{{ item.name || "未知" }}</div>
+                </div>
+                <div class="userPonits">
+                  {{ item.points || "undefind" }}
+                  <span>Steps</span>
                 </div>
-                <div>积分</div>
               </div>
             </div>
           </van-cell>
@@ -51,12 +91,12 @@ export default {
       rankList: [{ name: "魁首榜" }, { name: "跃进榜" }, { name: "失格榜" }],
       loading: false,
       finished: false,
-      favorites: []
+      rankListTopThree: [{}, {}, {}], // 前三名
+      rankListOthers: []
     };
   },
-  mounted() {
-    console.log("--收藏--");
-    this.getFavorites();
+  created() {
+    this.getRankListFun();
   },
   computed: {
     ...mapState({
@@ -64,45 +104,58 @@ export default {
     })
   },
   methods: {
-    getFavorites() {
+    // 查询：排行榜信息
+    getRankListFun() {
+      this.$store.commit("toggleLoading", true);
       let path = {
         userName: this.user.userInfo.userName
       };
       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;
+          res.data.materials.forEach((item, index) => {
+            this.getFavoritesItemDeitalFun(
+              item,
+              index,
+              index + 1 === res.data.materials
+            );
+          });
         })
         .catch(() => {
           this.$store.commit("toggleLoading", false);
         });
     },
+    // 查询：排行榜单条数据ID对应的详情
+    getFavoritesItemDeitalFun(item, index, isLast) {
+      // this.$_http
+      //   .get(this.$pathParams(this.$_API.接口名字, path))
+      //   .then(res => {
+      if (index < 3) {
+        // this.rankListTopThree[index] = res.data;
+        this.rankListTopThree[index] = item;
+      } else {
+        // this.rankListOthers.push(res.data);
+        this.rankListOthers.push(item);
+      }
+      if (isLast) {
+        console.log(
+          "--collection--",
+          this.rankListTopThree,
+          this.rankListOthers
+        );
+        this.finished = true;
+        this.$store.commit("toggleLoading", false);
+      }
+      // })
+      // .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;
-    },
     rootChange() {}
   }
 };
@@ -111,6 +164,77 @@ export default {
 <style lang="scss" scoped>
 .contentBody {
   background-color: #fff;
+  .contentItemTop {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    .contentItemTopRowChild {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      max-width: 30%;
+      .contentItemTopRowChildImg {
+        width: 3rem;
+        height: 3rem;
+        position: relative;
+        .contentItemTopRowChildImgNum {
+          width: 1rem;
+          height: 1rem;
+          border-radius: 100%;
+          color: #fff;
+          font-size: 0.7rem;
+          font-weight: bold;
+          text-align: center;
+          line-height: 1rem;
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -0.5rem;
+          margin: auto;
+        }
+      }
+      .contentItemTopRowChildName {
+        margin-top: 0.5rem;
+        font-size: 0.65rem;
+        word-break: break-all;
+        word-wrap: break-word;
+        font-weight: bold;
+        text-align: center;
+        color: #333;
+      }
+      .contentItemTopRowChildPoints {
+        color: #0088e9;
+        font-size: 0.65rem;
+        margin-top: 0.25rem;
+      }
+      .contentItemTopRowChildSteps {
+        font-size: 0.6rem;
+        color: #dfdfe1;
+        margin-top: -0.25rem;
+      }
+    }
+    .contentItemTopRowOne {
+      .contentItemTopRowChildImg {
+        width: 4rem;
+        height: 4rem;
+        .contentItemTopRowChildImgNum {
+          background-color: #f6d403;
+          font-size: 0.8rem;
+        }
+      }
+    }
+    .contentItemTopRowTwo {
+      order: -1;
+      .contentItemTopRowChildImg .contentItemTopRowChildImgNum {
+        background-color: #f46d66;
+      }
+    }
+    .contentItemTopRowThree {
+      .contentItemTopRowChildImg .contentItemTopRowChildImgNum {
+        background-color: #69c9bc;
+      }
+    }
+  }
   .contentItemDiv {
     .userHeaderImg {
       width: 2.5rem;
@@ -127,6 +251,13 @@ export default {
       justify-content: space-between;
       align-items: center;
     }
+    .userPonits {
+      font-size: 0.6rem;
+      color: #dfdfe1;
+      span {
+        margin-left: 0.25rem;
+      }
+    }
   }
 }
 </style>