carInsightSystem/src/views/BrandComparison/BrandBeginComparte.vue

<!--
 * @Author: your name
 * @Date: 2021-11-05 13:56:24
 * @LastEditTime: 2021-12-16 10:03:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
-->
<template>
    <div class="d-container">
        <div class="bbc-inner">
            <brandCompateHeader ref="brandRef" @del="handlerDel"></brandCompateHeader>
             <div class="mbc-inner">
                <v-label-div title="品牌推荐">
                </v-label-div>
                <div class="mbc-dd">
                    <ul class="mb-ul">
                        <li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in brands" :key="index" @click="handlerBrand(item)">{{item.brandname}}</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 brandCompateHeader from "./brandCompateHeader"
export default {
    name: "BrandBeginComparte",
    components: {
        brandCompateHeader
    },
    inject: ['reload'],
    data() {
        return {
            form: {
                token: "",
                sType: 'brand'
            },
            chooseArr: [null, null, null, null, null, null],
            brands: [
            ],
        }
    },
    created() {
        this.form.token = this.getToken;
        this.getData();
    },
    methods: {
        // 获取推荐品牌
        getData() {
            let obj = Object.assign({}, this.form);
            getRecommendSeries(obj).then(res => {
                let data = res.data || [];
                this.brands = data;
            })
        },
        // 选择默认的车型
        handlerBrand(row) {
            for(let i = 0; i < this.chooseArr.length; i++) {
                let n = this.chooseArr.findIndex(ele =>{
                    return ele && ele.brandname === row.brandname
                })
              
                if(!this.chooseArr[i] && n === -1) {
                    this.chooseArr[i] = row;
                    let obj = this.$refs.brandRef.brands[i]
                    obj.name = row.brandname;
                    obj.isDel = true;
                    return;
                }
            }    
        },
         // 删除
        handlerDel(n) {
            this.chooseArr[n] = null;
        },
        // 开始对比
        handlerSubmit() {
            let arr = this.$refs.brandRef.brands || [];
             let filterArr = arr.filter((ele) => {
                 return ele.name;
            });
            if(filterArr.length < 2) {
                this.$message.warning('至少2个品牌进行对比');
                return;
            }
            this.setBComparison(filterArr);
            this.setBcStatus(true);
            this.reload()
        }
    }
}
</script>

<style lang="less" scoped>
.bbc-inner {
    padding: 0px 16px 16px 16px;
}
.mbc-inner {
    width: 100%;
    height: 488px;
    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: 89px;
                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>