JingTieXueTang.H5/src/views/home/person/rank.vue

<template>
  <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>
            <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">
                  <van-image
                    class="userHeaderImg"
                    fit="cover"
                    round
                    :src="maleAvatar"
                    :show-error="true"
                    :error-icon="maleAvatar"
                  />
                  <div>{{ item.name || "未知" }}</div>
                </div>
                <div class="userPonits">
                  {{ item.points || "undefind" }}
                  <span>Steps</span>
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import maleAvatar from "@/assets/image/maleAvatar.jpg";
import { mapState } from "vuex";
export default {
  name: "collection",
  components: {},
  data() {
    return {
      maleAvatar,
      active: 0,
      rankList: [{ name: "魁首榜" }, { name: "跃进榜" }, { name: "失格榜" }],
      loading: false,
      finished: false,
      rankListTopThree: [{}, {}, {}], // 前三名
      rankListOthers: []
    };
  },
  created() {
    this.getRankListFun();
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  methods: {
    // 查询：排行榜信息
    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 => {
          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() {},
    rootChange() {}
  }
};
</script>

<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;
      height: 2.5rem;
      margin-right: 0.5rem;
    }
    .contentBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .headerContent {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .userPonits {
      font-size: 0.6rem;
      color: #dfdfe1;
      span {
        margin-left: 0.25rem;
      }
    }
  }
}
</style>