carInsightSystem/src/views/MarketingComparison/mcBeginCompare.vue

<!--
 * @Author: your name
 * @Date: 2021-11-03 17:12:47
 * @LastEditTime: 2021-11-05 18:29:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Editiv
 * @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue
-->
<template>
  <div class="d-container">
    <div class="mbc-outter">
      <mcChooseModel :data="getSComparison" ref="modelRef" @del="handlerDel"></mcChooseModel>
      <div class="mbc-inner">
        <v-label-div title="车型推荐">
          <v-btn @click="handlerSubmit">开始对比</v-btn>
        </v-label-div>
        <div class="mbc-dd"  v-loading="load">
          <ul class="mb-ul">
            <li
              class="mbc-d-item"
              :class="chooseArr.includes(item) ? 'liActive' : ''"
              v-for="(item, index) in models"
              :key="index"
              @click="handlerModel(item)"
            >
              {{ item.seriesname }}
            </li>
          </ul>
          <div style="clear: both"></div>
        </div>
      </div>
      <!-- <div class="beCpm-footer" @click="handlerSubmit">开始对比</div> -->
    </div>
  </div>
</template>

<script>
import { getRecommendSeries } from "@/api/comm";
import mcChooseModel from "./mcChooseModel";
export default {
  name: "mcBeginCompare",
  components: {
    mcChooseModel,
  },
  inject: ["reload"],
  data() {
    return {
      load: false,
      form: {
        token: "",
        sType: 'series'
      },
      //
      chooseArr: [null, null, null, null, null, null],
      models: [],
    };
  },
  created() {
    this.form.token = this.getToken;
    this.getData();
  },
  methods: {
    // 选择默认的车型
    handlerModel(row) {
      for (let i = 0; i < this.chooseArr.length; i++) {
        if (!this.chooseArr[i]) {
          this.chooseArr[i] = row;
          let arr = this.$refs.modelRef.list || [];
          let obj = arr[i];
          obj.brand = row.brandname;
          obj.model = row.seriesname;
          obj.isDel = true;
          let filterArr = arr.filter((ele) => {
            return ele.brand && ele.model;
          });
          this.setSComparison(filterArr);
          return;
        }
      }
    },
    // 获取推荐车型
    getData() {
      let obj = Object.assign({}, this.form);
      this.load = true;
      getRecommendSeries(obj).then((res) => {
        let data = res.data || [];
        this.models = data;
        this.load = false;  
      });
    },
    // 删除
    handlerDel(n) {
      this.chooseArr[n] = null;
    },
    // 开始比对
    handlerSubmit() {
      let arr = this.$refs.modelRef.list || [];
      let filterArr = arr.filter((ele) => {
        return ele.brand && ele.model;
      });
      let str = JSON.stringify(filterArr);
      let arr1 = JSON.parse(str);
      if (arr1.length < 2) {
        this.$message.warning("至少2个车型进行对比");
        return;
      }
      for (let i = 0; i < arr1.length; i++) {
        if (!arr1[i].startTime || !arr1[i].endTime) {
          this.$message.warning("请选择时间");
          return;
        }
      }
      this.setSComparison(arr1);
      this.setMcStatus(true);
      this.reload();
    },
  },
};
</script>

<style lang="less" scoped>
.mbc-outter {
  width: 100%;
  padding: 0px 16px 16px 16px;
}
.mbc-inner {
  width: 100%;
  height: 400px;
  border: 2px solid #0f2a4d;
  margin-top: 16px;
  .mbc-dd {
    width: 100%;
    height: calc(100% - 48px);
    .mb-ul {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      li {
        float: left;
        width: 295px;
        height: 80px;
        background-color: #0f2b47;
        margin-left: 16px;
        margin-top: 16px;
        color: #fff;
        text-align: center;
        border-radius: 2px;
        border: 1px solid transparent;
        line-height: 89px;
        font-size: 20px;
        font-weight: 500;
        cursor: pointer;
        &:hover {
          border: 1px solid #0058e6;
        }
      }
      .liActive {
        color: #0058e6;
        border: 1px solid #0058e6;
      }
    }
  }
}
.beCpm-footer {
  position: relative;
  width: 354px;
  height: 64px;
  background-image: url("../../assets/images/login/img_dlan_nor.png");
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0px;
  left: 50%;
  transform: translate(-50%);
  cursor: pointer;
  color: #63aecc;
  font-size: 24px;
  text-align: center;
  line-height: 64px;
  margin-top: 16px;
}
</style>