dvcp_v2_wxcp_app/src/project/fd/AppAnswer/component/Ranking.vue

<template>
  <div class="ranking">
    <div class="list-wrapper">
      <div class="item my" @click="linkTo">
        <span>113</span>
        <div class="userinfo">
          <image :src="'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
          <h3>且听风吟</h3>
        </div>
        <i>20</i>
        <image class="right" src="../img/right.png" />
      </div>
      <div class="item" v-for="(item, index) in 21" :key="index">
        <span>{{ index + 1 }}</span>
        <div class="userinfo">
          <image :src="'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" />
          <h3>且听风吟</h3>
        </div>
        <i>20</i>
      </div>
      <!-- <AiEmpty v-if="!list.length"></AiEmpty> -->
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        search: {
          current: 1,
          title: '',
          size: 20
        },
        isMore: false,
        list: []
      }
    },

    mounted () {
      this.$loading()
      this.getList()
    },

    methods: {
      linkTo () {
        uni.navigateTo({
          url: './IntegralDetail'
        })
      },

      getList () {
        if (this.isMore) return
        this.$http.post(`/app/applearningquestion/scoreRanking`, null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code == 0) {
            if (this.search.current > 1) {
              this.list = [...this.list, ...res.data.records]
            } else {
              this.list = res.data.records
            }

            uni.hideLoading()

            if (res.data.records.length < 20) {
              this.isMore = true

              return false
            }

            this.search.current = this.search.current + 1
          } else {
            uni.hideLoading()
          }
        }).catch(() => {
          uni.hideLoading()
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .ranking {
    padding-bottom: 20px;

    .list-wrapper {
      margin: 0 32px;

      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80px;
        margin-bottom: 16px;
        padding: 0 32px;
        background: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
        border-radius: 16px;

        span {
          width: 130px;
          font-size: 34px;
          color: #DDDDDD;
          font-style: oblique;
          font-weight: 600;
        }

        &:nth-of-type(1) span {
          color: #2D7DFF;
        }

        &:nth-of-type(2) span {
          color: #3BBC37;
        }

        &:nth-of-type(3) span {
          color: #FF883C;
        }

        image {
          width: 48px;
          height: 48px;
        }

        .userinfo {
          display: flex;
          align-items: center;
          flex: 1;

          h3 {
            margin-left: 16px;
            font-size: 28px;
            color: #333333;
          }
        }

        i {
          width: 100px;
          font-size: 32px;
          color: #FFB94C;
          font-style: normal;
          font-weight: 600;
          text-align: center;
        }
      }
    }

    .my {
      padding-right: 16px!important;

      i {
        width: auto!important;
      }

      .right {
        width: 64px;
        height: 64px;
      }
    }
  }
</style>