ebiz-h5/src/views/ebiz/eqiVisit/ScoreRanking.vue

<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="bg-white ranking">
      <van-notice-bar :text="noticeText" wrapable />
      <div class="table-wrapper" v-if="ranking.length">
        <table class="van-hairline--surround">
          <thead>
            <th v-for="(th, i) in theads" :key="i">{{ th }}</th>
          </thead>
          <tbody>
            <tr class="thin-bottom">
              <template v-if="inRanking">
                <td class="thin-right thin-bottom" style="max-width: 2em; font-weight: bold;">{{ agentRank.rank }}</td>
                <td class="thin-right thin-bottom" style="max-width: 3em; font-weight: bold;">{{ agentRank.agentName }}</td>
                <td class="thin-right thin-bottom" style="max-width: 4em; font-weight: bold;">{{ agentRank.thirManageName }}</td>
                <td class="thin-right thin-bottom" style="max-width: 2em; font-weight: bold;">{{ agentRank.applGrade }}</td>
                <td class="thin-bottom" style="max-width: 2em; text-decoration: underline; font-weight: bold;" @click="jumpToDetail">
                  {{ agentRank.rewardCount }}
                </td>
              </template>
              <td class="thin-bottom" v-else colspan="5">暂无积分</td>
            </tr>

            <tr v-for="(rank, index) in ranking" :key="index">
              <td class="thin-right thin-bottom" style="max-width: 2em;">{{ rank.rank }}</td>
              <td class="thin-right thin-bottom" style="max-width: 3em;">{{ rank.agentName }}</td>
              <td class="thin-right thin-bottom" style="max-width: 4em;">{{ rank.thirManageName }}</td>
              <td class="thin-right thin-bottom" style="max-width: 2em;">{{ rank.applGrade }}</td>
              <td class="thin-bottom" style="max-width: 2em;">{{ rank.rewardCount }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="empty pt150" v-else>
        <p class="mb10">暂无排名</p>
        <img :src="empty" />
      </div>
    </div>
  </van-pull-refresh>
</template>

<script>
import { NoticeBar } from 'vant'
import empty from '@/assets/images/empty.png'
import { getAccompanyRank } from '@/api/ebiz/eqiVisit/eqiVisit'
export default {
  components: {
    [NoticeBar.name]: NoticeBar
  },
  data() {
    return {
      empty,
      agentRank: {},
      inRanking: false,
      isLoading: false,
      theads: ['排名', '姓名', '所在机构', '职级', '积分'],
      ranking: []
    }
  },
  computed: {
    noticeText() {
      if (this.ranking.length) {
        return '温馨提示: 每日凌晨更新前一日积分排行，下拉刷新最新排行'
      } else {
        return '温馨提示：当前暂无最新排名，赶紧去陪访吧！'
      }
    },
    agentCode() {
      return this.$route.query.agentCode
    }
  },
  created() {
    this.queryRanking()
  },
  methods: {
    async queryRanking() {
      let res = await getAccompanyRank({ billboardStart: 0, billboardEnd: 20, agentCode: this.agentCode })
      this.ranking = res.content.statisticsBeanList
      if (res.content.agentStatisticsBean) {
        this.agentRank = res.content.agentStatisticsBean
        this.inRanking = true
      }
    },
    async onRefresh() {
      await this.queryRanking()
      this.isLoading = false
    },
    jumpToDetail() {
      console.log('object')
      this.$jump({
        flag: 'h5',
        extra: {
          forbidSwipeBack: '1',
          url: location.origin + `/#/eqiVisit/scoreHistory`
        },
        routerInfo: { path: `/eqiVisit/scoreHistory` }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.ranking {
  min-height: 100vh;
  .table-wrapper {
    overflow: auto;
    display: flex;
    table {
      flex: 1;
      border-collapse: collapse;
      text-align: center;
    }
    th {
      white-space: nowrap;
      padding: 15px 0;
      background: #199ed8;
      color: #fff;
    }
    tr {
      td {
        padding: 6px 0;
        font-size: 14px;
        word-break: break-all;
        color: #199ed8;
      }
    }
  }

  .empty {
    text-align: center;
    p {
      font-size: 20px;
      color: #999999;
    }
  }
}

.van-pull-refresh {
  overflow: auto;
}

.van-notice-bar {
  background-color: #f6f6f6;
  color: #199ed8;
}
</style>