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="data.length">
        <table class="van-hairline--surround">
          <thead>
            <th v-for="(th, i) in theads" :key="i">{{ th }}</th>
          </thead>
          <tbody>
            <tr class="van-hairline--bottom">
              <template v-if="agentRank">
                <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ agentRank.rank }}</td>
                <td class="van-hairline--right van-hairline--bottom" style="max-width: 3em;">{{ agentRank.name }}</td>
                <td class="van-hairline--right van-hairline--bottom" style="max-width: 4em;">{{ agentRank.org }}</td>
                <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ agentRank.level }}</td>
                <td class="van-hairline--bottom" style="max-width: 2em;" @click="jumpToDetail">{{ agentRank.score }}</td>
              </template>
              <td v-else colspan="5">暂无积分</td>
            </tr>

            <tr v-for="(d, index) in data" :key="index">
              <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ d.rank }}</td>
              <td class="van-hairline--right van-hairline--bottom" style="max-width: 3em;">{{ d.name }}</td>
              <td class="van-hairline--right van-hairline--bottom" style="max-width: 4em;">{{ d.org }}</td>
              <td class="van-hairline--right van-hairline--bottom" style="max-width: 2em;">{{ d.level }}</td>
              <td class="van-hairline--bottom" style="max-width: 2em;">{{ d.score }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="empty pt150">
        <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'
export default {
  components: {
    [NoticeBar.name]: NoticeBar
  },
  data() {
    return {
      empty,
      agentRank: null,
      isLoading: false,
      theads: ['排名', '姓名', '所在机构', '职级', '积分'],
      data: []
    }
  },
  computed: {
    noticeText() {
      if (this.data.length) {
        return '温馨提示: 每日凌晨更新前一日积分排行，下拉刷新最新排行'
      } else {
        return '温馨提示：当前暂无最新排名，赶紧去陪访吧！'
      }
    }
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
      }, 2000)
    },
    jumpToDetail() {
      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;
      }
    }
  }

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

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

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