张雄 3 years ago
parent 381ee0c6bc
commit 6dd9fe7d28

@ -0,0 +1,344 @@
<!--
* @Author: your name
* @Date: 2021-10-15 09:16:31
* @LastEditTime: 2021-11-21 14:58:52
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/lycomponents/iSwitchBrand/index.vue
-->
<template>
<div class="smc-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="clear: both"></div>
<div class="sb-body">
<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(index,item)">
<div class="d1">
<img class="m1" :src="item.img">
</div>
<span class="s1">{{item.brandname}}</span>
</div>
</div>
</vue-scroll>
</div>
<div class="sb-dd-right">
<vue-scroll>
<div class="sb-bd" v-loading="load">
<div class="sb-b-item" :class="modelName === item.name ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">{{item.name}}</div>
</div>
</vue-scroll>
</div>
</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: "iSwitchModel",
props: {
visible: {
type: Boolean,
default: false,
},
brand: {
type: String,
default: ""
},
model: {
type: String,
default: ""
}
},
watch: {
visible: {
handler(val) {
this.show = val ? true : false;
},
immediate: true,
},
},
created() {
this.brandname = this.brand;
this.modelName = this.model;
this.getBrands().then(() => {
this.handlerLi(0);
let row = this.cars.find(ele => {
return ele.brandname === this.brandname
})
this.chooseBrand = row;
});
this.getUserSeriesName(this.brandname);
},
data() {
return {
show: false,
activeLi: 0,
load: false,
form: {
token: "",
sBrandName: "",
sType: 'Marketing'
},
letterArr: [
],
cars: [],
models: [],
showCars: [],
showActive: "",
chooseBrand: null,
chooseModel: null,
modelName: "",
brandname: ""
};
},
methods: {
//
handlerClose() {
this.show = false;
this.$emit("update:visible", this.show);
},
// li
handlerLi(n) {
this.activeLi = n;
let key = this.letterArr[n];
this.showCars = this.cars.filter((ele) => ele.firstword === key);
},
//
getBrands() {
if(!this.getToken) return;
this.form.token = this.getToken;
return new Promise((resolve, reject) => {
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(n, row) {
this.showActive = row.brandid;
this.chooseBrand = row;
this.brandname = this.chooseBrand.brandname;
this.getUserSeriesName(this.brandname)
},
//
handlerModel(n, row) {
this.modelName = row.name;
this.chooseModel = row;
},
//
handlerSubmit() {
if(this.chooseBrand && this.chooseModel) {
this.$emit("change", [this.chooseBrand, this.chooseModel]);
this.handlerClose();
} else {
this.$message.warning('请选择车型');
}
},
//
getUserSeriesName(brandName) {
if(!this.getToken) return;
this.form.token = this.getToken;
this.form.sBrandName = brandName;
this.load = true;
getUserSeriesName(this.form).then(res => {
let data = res.data || [];
this.models = data;
this.load = false;
})
}
},
};
</script>
<style lang="less" scoped>
.sb-body {
width: 100%;
height: calc(100% - 30px);
display: flex;
justify-content: flex-start;
}
.smc-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: 46%;
height: 100%;
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-b-item {
width: 194px;
height: 66px;
background: #1B4163;
color: #fff;
border-radius: 2px;
font-size: 20px;
text-align: center;
line-height: 66px;
margin-left: 16px;
margin-top: 16px;
transition: all 0.3s;
cursor: pointer;
&:hover {
background: #3373CC;
color: #fff;
}
}
.sb-b-item-active {
background: #3373CC;
color: #fff;
}
}
.sb-dd-right {
width: 54%;
height: 100%;
box-shadow: 0 0 20px;
}
.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>

@ -9,6 +9,7 @@
import iHeader from "@/lycomponents/iHeader";
import iSwitchBrand from "@/lycomponents/iSwitchBrand";
import iSwitchModel from "@/lycomponents/iSwitchModel";
import iSaleModelChoose from "@/lycomponents/iSaleModelChoose";
import iHeaderMa from "@/lycomponents/iHeaderMa"
import iHeaderBrand from "@/lycomponents/iHeaderBrand"
import iHeaderMyself from "@/lycomponents/iHeaderMyself";
@ -21,7 +22,8 @@ export default {
iHeaderMa,
iSwitchModel,
iHeaderBrand,
iHeaderMyself
iHeaderMyself,
iSaleModelChoose
}
})
}

@ -184,7 +184,7 @@ export default {
})
},
disabledDate(current) {
return (current > moment(this.dDate).add(1,'months'));
return (current > moment(this.dDate));
},
//
goInfo(index) {

@ -22,6 +22,9 @@
<img class="img-item" :src="record.img" alt="">
</span>
</template>
<template slot="sale" slot-scope="text, record">
<span style="text-align: right">{{record.salescount}}</span>
</template>
<template slot="about" slot-scope="text, record">
<a-button ghost @click="onSale(record)"></a-button>
</template>
@ -72,6 +75,7 @@ export default {
title: "销量",
dataIndex: "salescount",
key: "salescount",
scopedSlots: { customRender: "sale" },
},
{
title: "占品牌份额(%)",

@ -10,7 +10,7 @@ export default {
let data = res.data;
this.brandTypeList = data
}),
getUserBrand({token: this.getToken}).then(res => {
getUserBrand({token: this.getToken,sType: "Marketing"}).then(res => {
let data = res.data;
let brandList = [[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[],[]];
let letters = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
@ -210,7 +210,7 @@ export default {
},
drawerChooseBrand(val) {
this.form.sBrand = val;
let o = {token: this.getToken, sBrandName: this.form.sBrand};
let o = {token: this.getToken, sBrandName: this.form.sBrand,sType: "Marketing"};
getUserSeriesName(o).then(res => {
let data = res.data;
this.seriesList = data;

@ -25,7 +25,7 @@
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
<iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
<iSaleModelChoose :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSaleModelChoose>
</a-modal>
</div>
</template>

@ -126,7 +126,8 @@ export default {
form: {
token: '',
sStartTime: '',
sEndTime: ''
sEndTime: '',
sType: 'Marketing'
},
brandList: [], //
brandOption: [],

@ -11,7 +11,7 @@
<v-label-div title="微博人物画像">
<div>
<v-tab-group
:btns="['性别', '认证', '分类']"
:btns="['性别', '认证', '地区']"
@change="handlerTab"
></v-tab-group>
</div>

Loading…
Cancel
Save