carInsightSystem/src/views/WeiboDetails/modelPopularity/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-14 18:42:40
 * @LastEditTime: 2021-11-09 11:58:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/WeiboDetails/modelPopularity/index.vue
-->

<template>
  <div class="mp-outter" v-loading="load">
    <v-label-div title="车型热度">
      <div>
        <v-tab-group
          :btns="['热门', '热赞', '热议', '热转']"
          @change="handlerTab"
        ></v-tab-group>
      </div>
    </v-label-div>
    <div class="mp-inner">
      <v-ranking-mpth
        v-for="(item, index) in labelArr"
        :key="index"
        :num="index + 1"
        :label="item.key"
        :val="item.value"
      ></v-ranking-mpth>
    </div>
  </div>
</template>

<script>
import { getCartypeWeiBo0528 } from "@/api/WeiboDetails/index.js";
import { getTopCarseriesObj } from "@/api/WeiboDetails/index.js";
import vRankingMpth from "./v-ranking-mpth";
export default {
  name: "modelPopularity",
  data() {
    return {
      load: false,
      form: {
        sBrand: "",
        token: "",
        iType: "",
      },
      labelArr: [],
      hotSeries: [],
      hotTypes: [],
      hotComs: [],
      hotTrans: [],
    };
  },
  components: {
    vRankingMpth,
  },

  created() {
    this.form.token = this.getToken;
    this.form.sBrand = this.getBrand.brandname || '奥迪';
    this.getData();
  },

  methods: {
    getData() {
      this.load = true;
      Promise.all([
        this.getHotSeries(),
        this.getHotTypes(),
        this.getHotComs(),
        this.getHotTrans(),
      ]).then(() => {
        // 什么也不执行
        this.handlerTab(0);
        this.load = false;
      });
    },
    //热门
    getHotSeries() {
      return new Promise((resolve, reject) => {
        this.form.iType = "";
        let obj = Object.assign({}, this.getCtime2, this.form);
        getCartypeWeiBo0528(obj)
          .then((res) => {
            let data = res.data || {};
            this.hotSeries = this.toArr(data);
            resolve(res);
          })
          .catch(() => {
            reject(false);
          });
      });
    },
    //热赞
    getHotTypes() {
      return new Promise((resolve, reject) => {
        this.form.iType = 1; //改变参数写在里面
        let obj = Object.assign({}, this.getCtime2, this.form);
        getTopCarseriesObj(obj)
          .then((res) => {
            this.hotTypes = res.data;
            resolve(res);
          })
          .catch(() => {
            reject(false);
          });
      });
    },
    //热议
    getHotComs() {
      return new Promise((resolve, reject) => {
        this.form.iType = 2;
        let obj = Object.assign({}, this.getCtime2, this.form);
        getTopCarseriesObj(obj)
          .then((res) => {
            this.hotComs = res.data;
            resolve(res);
          })
          .catch(() => {
            reject(false);
          });
      });
    },
    //热转
    getHotTrans() {
      return new Promise((resolve, reject) => {
        this.form.iType = 3;
        let obj = Object.assign({}, this.getCtime2, this.form);
        getTopCarseriesObj(obj)
          .then((res) => {
            this.hotTrans = res.data;
            resolve(res);
          })
          .catch(() => {
            reject(false);
          });
      });
    },
    // 将对象变成数组
    toArr(obj) {
      let arr = [];
      for (let key in obj) {
        let o = {
          key: key,
          value: obj[key],
        };
        arr.push(o);
      }
      return arr;
    },
    // 切换数据
    handlerTab(n) {
      switch (n) {
        case 0:
          this.labelArr = this.hotSeries;
          break;
        case 1:
          this.labelArr = this.hotTypes;
          break;
        case 2:
          this.labelArr = this.hotComs;
          break;
        case 3:
          this.labelArr = this.hotTrans;
          break;
        default:
          this.labelArr = this.hotSeries;
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mp-outter {
  width: 460px;
  height: 460px;
  border: 2px solid #0f2a4d;
  .mp-inner {
    padding: 0px 16px 16px 16px;
  }
}
</style>