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

<template>
  <div class="ranking">
    <div class="list-data">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="flex-left">
          <div class="item-rank">
            <img :src="imgList[index]" alt="" v-if="index < 3">
            <span v-else>{{index+1}}</span>
          </div>
          <div class="item-user">
            <img :src="item.avatar || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" alt="">{{item.name}}
          </div>
        </div>
        <div class="flex-right">{{item.score}}</div>
      </div>
    </div>
    <AiEmpty description="暂无数据" v-if="!list.length"/>
    <div class="list-data footer">
      <div class="item" @click="linkTo">
        <div class="flex-left">
          <div class="item-rank">
            <span>{{ info['积分排行'] }}</span>
          </div>
          <div class="item-user">
            <img :src="user.avatar || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'" alt="">{{ user.name }}
          </div>
        </div>
        <div class="flex-right">
          <span>{{ info['累计获取积分'] }}</span>
          <image class="right" src="../img/right.png" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data () {
      return {
        search: {
          current: 1,
          title: '',
          size: 100
        },
        isMore: false,
        barStyle: {
          'width': '24px',
          'height': '3px',
          'border-radius': '2px',
          'bottom': '0px',
          'background-color': '#3399FF'
        },
        activeStyle: {
          'font-weight' : '400',
          'color': '#000000'
        },
        imgList: [require('../img/top0.png'),require('../img/top1.png'),require('../img/top2.png')],
        info: {},
        list: []
      }
    },

    computed: {
      ...mapState(['user']),
    },

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

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

      getInfo () {
        this.$http.post(`/app/applearningquestion/myScore`).then(res => {
          if (res.code === 0) {
            this.info = res.data
          }
        })
      },

      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 < 100) {
              this.isMore = true

              return false
            }

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

    onReachBottom () {
      this.current = this.current + 1
      this.getList()
    }
  }
</script>

<style scoped lang="scss">
  .ranking {
    min-height: 100%;
    background-color: #F3F5F9;
    padding-bottom: 32px;

    .list-data {
      padding: 32px;
      margin-bottom: 80px;
      .item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 24px 48px 24px 32px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 32px;
        margin-bottom: 16px;
        .flex-left {
          display: flex;
          .item-rank {
            width: 152px;
            img {
              padding-top: 12px;
              width: 56px;
              height: 56px;
              vertical-align: middle;
            }
            span {
              line-height: 80px;
              font-family: SFPro-SNaNpxiboldItalic;
              font-weight: SemiboldItalic;
              font-size: 40px;
              color: #DDD;
            }
          }
          .item-user {
            line-height: 80px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 32px;
            color: #333;
            img {
              width: 80px;
              height: 80px;
              border-radius: 50%;
              margin-right: 16px;
              vertical-align: middle;
            }
          }
        }
        .flex-right {
          font-family: SFPro-SNaNpxibold;
          font-weight: 600;
          font-size: 36px;
          color: #FF9343;
          line-height: 42px;
          padding-top: 20px;
        }
      }
    }
    .footer {
      padding: 0;
      margin-bottom: 0;
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;

      .item {
        border-radius: 0;
        margin-bottom: 0;
        padding: 24px 14px 24px 32px;

        &:active {
          background: #eee;
        }
      }

      .flex-right {
        display: flex;
        align-items: center;
      }

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