hair/src/views/ranking/index.vue

<template>
  <div class="ranking">
    <div class="tip">数据来源于集团大数据平台</div>
    <div v-show="errorInformation.text === ''">
      <keep-alive>
        <component
          :active="errorInformation.text === '' && active === 1"
          @start="comError"
          :is="tabs[active].com"
        />
      </keep-alive>
    </div>
    <van-empty
      v-show="errorInformation.text !== ''"
      :image="errorInformation.type"
      :description="errorInformation.text"
    />
    <van-tabbar v-model="active" active-color="#ee0a24" @change="change">
      <van-tabbar-item
        v-for="item in tabs"
        :key="item.icon"
        :icon="item.icon"
        >{{ item.name }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  Tabbar as vanTabbar,
  TabbarItem as vanTabbarItem,
  Empty as vanEmpty,
} from "vant";
import "vant/lib/empty/style/index";
import "vant/lib/tabbar/style/index";
import "vant/lib/tabbar-item/style/index";

import tvList from "./components/tvList.vue";
import moveClient from "./components/moveClient.vue";

// import {} from "../utils/tool";
// import {} from "../api/index";
export default {
  name: "Ranking",

  data() {
    return {
      active: window.sessionStorage
        ? sessionStorage.getItem("active") - 0 || 0
        : 0,
      tabs: [
        {
          name: "大屏排行",
          icon: "tv-o",
          com: "tvList",
        },
        {
          name: "新媒体排行",
          icon: "bar-chart-o",
          com: "moveClient",
        },
      ],
      errorInformation: {
        text: "",
        type: "search",
      },
    };
  },
  mounted() {},
  computed: {},
  methods: {
    change() {
      if (window.sessionStorage) sessionStorage.setItem("active", this.active);
    },
    comError(data) {
      let p = {
        text: "",
        type: "search",
      };
      if (data.status === 200) {
        this.errorInformation = p;
        return;
      }
      p.text = data.msg || "网络错误";
      p.type = "network";
      this.errorInformation = p;
    },
  },
  beforeUnmount() {},
  components: {
    vanTabbar,
    vanTabbarItem,
    vanEmpty,
    tvList,
    moveClient,
  },
};
</script>

<style scoped>
.ranking {
  width: 100vw;
  height: 100vh;
  padding-bottom: 50px;
  box-sizing: border-box;
  background-color: #fff;
}
.tip{
    text-align: center;
    font-size: 12px;
    color: #999;
    padding: 5px 0;
}
</style>