hair/src/views/ranking/components/moveClient.vue

<template>
  <div class="move-client">
    <van-tabs v-model="select" @change="change">
      <van-tab
        v-for="(item, i) in platfrom"
        :key="item.platfrom"
        :title="item.name"
      >
        <div class="main">
          <div class="item">
            <van-row>
              <van-col span="3" class="td"> 排名 </van-col>
              <van-col span="5" class="td"> 单位名称 </van-col>
              <van-col span="8" class="td"> 账号 </van-col>
              <van-col span="8" class="td"> 传播量 </van-col>
            </van-row>
          </div>
          <van-row
            class="item"
            v-for="(v, o) in platfromData[i] || []"
            :key="v.name"
          >
            <van-col
              span="3"
              :class="{ td: true }"
              :style="{ color: color[o] || '#000', fontWeight: 600 }"
            >
              {{ o + 1 }}
            </van-col>
            <van-col span="5" :class="{ td: true }">
              {{ v.name }}
            </van-col>
            <van-col span="8" :class="{ td: true }">
              {{ v.nick_name }}
            </van-col>
            <van-col span="8" :class="{ td: true }" style="color: #e1a74f">
              {{ formatNum(v.read_count) }}
            </van-col>
          </van-row>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Tab as vanTab,
  Tabs as vanTabs,
  Col as vanCol,
  Row as vanRow,
} from "vant";
import "vant/lib/tab/style/index";
import "vant/lib/tabs/style/index";
import "vant/lib/col/style/index";
import "vant/lib/row/style/index";
// import {} from "../utils/tool";
import { jsonDataRanking } from "../../../api/index";

export default {
  name: "move-client",
  data() {
    return {
      setact: false,
      select: 0,
      platfrom: [],
      platfromData: {},
      color: ["#ff0036", "#ff9b00", "#ffcc00"],
    };
  },
  props: {
    valDay: String,
  },
  watch: {
    valDay() {
      this.init();
    },
  },
  mounted() {
    this.init();
  },
  computed: {},
  methods: {
    init() {
      //   初始
      if (!this.valDay) return;
      this.setact = true;
      jsonDataRanking({
        url: ["platform", this.valDay].join("-"),
      })
        .then(res => {
          this.platfrom = res || [];
          this.getData();
          this.$emit("start", {
            status: 200,
          });
        })
        .catch(err => {
          this.$emit("start", {
            status: err,
          });
        });
    },
    formatNum(num) {
      if (isNaN(num)) return 0;
      if (num > 100000000) return (num / 100000000).toFixed(2) - 0 + "亿";
      if (num > 10000) return (num / 10000).toFixed(2) - 0 + "万";
      return num;
    },
    getData() {
      jsonDataRanking({
        url: [this.platfrom[this.select].platform, this.valDay].join(
          "_"
        ),
      })
        .then(res => {
          const p = JSON.parse(JSON.stringify(this.platfromData));
          p[this.select] = res.data || [];
          this.platfromData = p;
          this.$emit("start", {
            status: 200,
          });
        })
        .catch(err => {
          this.$emit("start", {
            status: err,
          });
        });
    },
    change() {
      return this.getData();
    },
  },
  beforeUnmount() {},
  components: {
    vanTabs,
    vanTab,
    vanCol,
    vanRow,
  },
};
</script>

<style scoped>
.move-client {
  font-size: 15px;
}
.td {
  text-align: center;
  line-height: 2.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item {
  overflow: hidden;
  border-radius: 3px;
  margin-top: 11px;
  background-color: #f5f6f8;
}
.main {
  padding: 3px;
  overflow: auto;
  height: calc(100vh - 150px);
}
</style>
<style>
.move-client .van-tab {
  font-size: 16px;
}
</style>