|
|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Author: your name
|
|
|
|
|
* @Date: 2021-10-15 09:16:31
|
|
|
|
|
* @LastEditTime: 2021-10-18 13:27:20
|
|
|
|
|
* @LastEditTime: 2021-10-27 11:31:33
|
|
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
|
|
* @Description: In User Settings Edit
|
|
|
|
|
* @FilePath: /data-show/src/lycomponents/iSwitchBrand/index.vue
|
|
|
|
|
@ -18,33 +18,56 @@
|
|
|
|
|
<li v-for="(item,index) in letterArr" :key="index" :class="activeLi === index ? 'lactive': ''" @click="handlerLi(index)">{{item}}</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div style="clear: both"></div>
|
|
|
|
|
<div class="sb-dd">
|
|
|
|
|
<vue-scroll>
|
|
|
|
|
<div class="sb-bd">
|
|
|
|
|
<div class="s-item" :class="showActive === item.brandid ? 's-item-active': ''" v-for="(item,index) in showCars" :key="index" @click="handlerChoose(index,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 class="sb-footer"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getUserBrand } from "@/api/comm";
|
|
|
|
|
export default {
|
|
|
|
|
name: "iSwitchBrand",
|
|
|
|
|
props: {
|
|
|
|
|
visible: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false
|
|
|
|
|
}
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
visible: {
|
|
|
|
|
handler(val) {
|
|
|
|
|
this.show = val ? true : false;
|
|
|
|
|
this.show = val ? true : false;
|
|
|
|
|
},
|
|
|
|
|
immediate: true
|
|
|
|
|
}
|
|
|
|
|
immediate: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getBrands().then(() => {
|
|
|
|
|
this.handlerLi(0);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
show: false,
|
|
|
|
|
activeLi: 0,
|
|
|
|
|
form: {
|
|
|
|
|
token: "",
|
|
|
|
|
},
|
|
|
|
|
letterArr: [
|
|
|
|
|
"热门",
|
|
|
|
|
"A",
|
|
|
|
|
@ -73,16 +96,50 @@ export default {
|
|
|
|
|
"Y",
|
|
|
|
|
"Z",
|
|
|
|
|
],
|
|
|
|
|
cars: [],
|
|
|
|
|
showCars: [],
|
|
|
|
|
showActive: "",
|
|
|
|
|
chooseBrand: {},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 关闭
|
|
|
|
|
handlerClose() {
|
|
|
|
|
this.show = false;
|
|
|
|
|
this.$emit("update:visible", this.show);
|
|
|
|
|
},
|
|
|
|
|
// 选择li
|
|
|
|
|
handlerLi(n) {
|
|
|
|
|
this.activeLi = n
|
|
|
|
|
}
|
|
|
|
|
this.activeLi = n;
|
|
|
|
|
let key = this.letterArr[n];
|
|
|
|
|
this.showCars = this.cars.filter((ele) => ele.firstword === key);
|
|
|
|
|
},
|
|
|
|
|
// 获取品牌
|
|
|
|
|
getBrands() {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
this.form.token = this.getToken;
|
|
|
|
|
getUserBrand(this.form).then((res) => {
|
|
|
|
|
let data = res.data;
|
|
|
|
|
this.cars = data;
|
|
|
|
|
resolve(true)
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
reject(false)
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 选择品牌
|
|
|
|
|
handlerChoose(n, row) {
|
|
|
|
|
this.showActive = row.brandid;
|
|
|
|
|
this.chooseBrand = Object.assign(
|
|
|
|
|
this.chooseBrand,
|
|
|
|
|
this.showCars[n]
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
// 确定品牌
|
|
|
|
|
handlerSubmit() {
|
|
|
|
|
this.$emit("change", this.chooseBrand);
|
|
|
|
|
this.handlerClose();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
@ -99,7 +156,7 @@ export default {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
.sb-inner {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 1200px;
|
|
|
|
|
width: 1230px;
|
|
|
|
|
height: 720px;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 50%;
|
|
|
|
|
@ -111,7 +168,7 @@ export default {
|
|
|
|
|
.sb-d {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 128px);
|
|
|
|
|
overflow: auto;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.sb-ul {
|
|
|
|
|
margin: 0px;
|
|
|
|
|
@ -119,6 +176,8 @@ export default {
|
|
|
|
|
list-style: none;
|
|
|
|
|
margin-left: 16px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
|
|
|
|
.liSn {
|
|
|
|
|
float: left;
|
|
|
|
|
color: #fff;
|
|
|
|
|
@ -136,9 +195,50 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.lactive {
|
|
|
|
|
color: #3373cc;
|
|
|
|
|
color: #3373cc;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.sb-dd {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100% - 30px);
|
|
|
|
|
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;
|
|
|
|
|
@ -147,6 +247,11 @@ export default {
|
|
|
|
|
bottom: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
border-top: 1px solid #1e3d64;
|
|
|
|
|
.m1 {
|
|
|
|
|
width: 480px;
|
|
|
|
|
height: 100%;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
