carInsightSystem/src/lycomponents/iSwitchBrand/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-15 09:16:31
 * @LastEditTime: 2021-12-07 19:10:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/lycomponents/iSwitchBrand/index.vue
-->
<template>
    <div class="sb-outter" v-if="show">
        <div class="sb-inner">
            <v-label-div title="品牌切换">
                <span class="iconfont icon-guanbi v-m-close" @click="handlerClose"></span>
            </v-label-div>
            <div class="sb-d">
                <ul class="sb-ul">
                    <span class="liSn">按品牌拼音首字母查找:</span>
                    <li v-for="(item,index) in letterArr" :key="index" :class="activeLi === index ? 'lactive': ''" @click="handlerLi(index)">{{item}}</li>
                </ul>
                <div style="margin: 0 0 0 16px">
                    <a-form-model layout="inline">
                        <a-form-model-item label="关键词">
                            <a-input v-model="sKeyword" style="width: 160px"></a-input>
                        </a-form-model-item>
                        <a-form-model-item>
                            <a-button type="primary" @click="onSearch">搜索</a-button>
                        </a-form-model-item>
                    </a-form-model>
                </div>
                <div style="clear: both"></div>
                <div class="sb-dd">
                    <vue-scroll>
                        <div class="sb-bd">
                            <div class="s-item" :class="brandname === item.brandname ? 's-item-active': ''" v-for="(item,index) in showCars" :key="index" @click="handlerChoose(item)">
                                <div class="d1">
                                    <img class="m1" :src="item.img">
                                </div>
                                <span class="s1">{{item.brandname}}</span>
                            </div>
                        </div>
                    </vue-scroll>
                </div>
            </div>
            <div class="sb-footer" align="center">
                <img class="m1" src="../../assets/images/BrandInsight/btn-01.png" @click="handlerSubmit">
            </div>
        </div>
    </div>
</template>

<script>
import { getUserBrand,getUserSeriesName} from "@/api/comm";
export default {
    name: "iSwitchBrand",
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        brand: {
            type: String,
            default: "",
        },
    },
    watch: {
        visible: {
            handler(val) {
                this.show = val ? true : false;
            },
            immediate: true,
        },
    },
    created() {
        this.brandname = this.brand;
        this.getBrands().then(() => {
            this.handlerLi(0);
            let row = this.cars.find((ele) => {
                return ele.brandname === this.brandname;
            });
            this.chooseBrand = row;
        });
    },
    data() {
        return {
            show: false,
            activeLi: 0,
            form: {
                token: "",
            },
            letterArr: [
                
            ],
            cars: [],
            showCars: [],
            showActive: "",
            chooseBrand: null,
            chooseModel: null,
            models: [],
            brandname: "",
            sKeyword:'',
        };
    },
    methods: {
        // 关闭
        handlerClose() {
            this.show = false;
            this.$emit("update:visible", this.show);
        },
        // 选择li
        handlerLi(n) {
            this.sKeyword = '';
            this.activeLi = n;
            let key = this.letterArr[n];
            this.showCars = this.cars.filter((ele) => ele.firstword === key);
        },
        // 获取品牌
        getBrands() {
            if (!this.getToken) return;
            return new Promise((resolve, reject) => {
                this.form.token = this.getToken;
                getUserBrand(this.form)
                    .then((res) => {
                        let data = res.data || [];
                        let arr = [];
                        data.forEach((ele) => {
                            let fk = ele.firstword;
                            arr.push(fk);
                        });
                        let sarr = new Set(arr);
                        let arr1 = Array.from(sarr);
                        this.letterArr = this.todo(arr1, '热门');
                        this.cars = data;
                        resolve(true);
                    })
                    .catch(() => {
                        reject(false);
                    });
            });
        },
        todo(arr, id) {
            let index = 1,
                newArr = [],
                length = arr.length;
            for (let i = 0; i < length; i++) {
                if (arr[i] === id) {
                    newArr[0] = arr[i];
                } else {
                    newArr[index++] = arr[i];
                }
            }
            return newArr;
        },
        // 选择品牌
        handlerChoose(row) {
            this.showActive = row.brandid;
            this.chooseBrand = row;
            //console.log(this.chooseBrand)
            this.brandname = this.chooseBrand.brandname;
            // this.getUserSeriesName(this.brandname);
        },
        // 获取车型
        getUserSeriesName(brandName) {
            this.form.token = this.getToken;
            this.form.sBrandName = brandName;
            getUserSeriesName(this.form).then((res) => {
                let data = res.data || [];
                this.models = data;
                this.chooseModel = this.models[0];
                this.setModel(this.chooseModel);
            });
        },
        // 确定品牌
        handlerSubmit() {
            if (this.chooseBrand) {
                this.getUserSeriesName(this.brandname);
                this.$emit("change", [this.chooseBrand, this.chooseModel]);
                this.handlerClose();
            } else {
                this.$message.warning("请选择品牌");
            }
        },
        onSearch() {
            let kw = this.sKeyword;
            this.showCars = this.cars.filter((ele) => ele.brandname.indexOf(kw) != -1 && ele.firstword != '热门');
        }
    },
};
</script>

<style lang="less" scoped>
.sb-outter {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.45);
    overflow: auto;
    .sb-inner {
        position: absolute;
        width: 1230px;
        height: 720px;
        top: 0px;
        left: 50%;
        border-radius: 2px;
        transform: translate(-50%, 90px);
        background: #0c2342;
        min-width: 400px;
        min-height: 300px;
        .sb-d {
            width: 100%;
            height: calc(100% - 128px);
            overflow: hidden;
        }
        .sb-ul {
            margin: 0px;
            padding: 0px;
            list-style: none;
            margin-left: 16px;
            margin-top: 10px;
            height: 30px;

            .liSn {
                float: left;
                color: #fff;
                font-size: 16px;
                margin-right: 24px;
            }
            li {
                float: left;
                color: #fff;
                font-size: 16px;
                margin-right: 24px;
                cursor: pointer;
                &:hover {
                    color: #3373cc;
                }
            }
            .lactive {
                color: #3373cc;
            }
        }
        .sb-dd {
            width: 100%;
            height: calc(100% - 70px);
            box-shadow: 0 0 20px;
        }
        .sb-bd {
            padding: 0px 16px 16px 16px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .s-item {
                cursor: pointer;
                margin-left: 16px;
                margin-top: 16px;
                transition: all 0.3s;
                border: 1px solid transparent;
                &:hover {
                    border: 1px solid #3373cc;
                }
                .d1 {
                    width: 152px;
                    height: 132px;
                    background: #fff;
                    border-radius: 2px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .m1 {
                    width: 90px;
                }
                .s1 {
                    display: block;
                    text-align: center;
                    font-size: 16px;
                    color: #fff;
                }
            }
            .s-item-active {
                border: 1px solid #3373cc;
            }
        }
        .sb-footer {
            position: absolute;
            width: 100%;
            height: 80px;
            bottom: 0px;
            left: 0px;
            border-top: 1px solid #1e3d64;
            .m1 {
                width: 480px;
                height: 100%;
                cursor: pointer;
            }
        }
    }
}
</style>