From 6dd9fe7d28682bdabba3bdf765c584757ac5ec24 Mon Sep 17 00:00:00 2001
From: zx <604444282@qq.com>
Date: Mon, 14 Mar 2022 11:41:50 +0800
Subject: [PATCH] zx

---
 src/lycomponents/iSaleModelChoose/index.vue   | 344 ++++++++++++++++++
 src/lycomponents/index.js                     |   4 +-
 src/views/SaleRank/AllLevel/index.vue         |   2 +-
 src/views/SaleRank/BrandSale/index.vue        |   4 +
 src/views/SaleRank/CitySale/tbEvent.js        |   4 +-
 src/views/SaleRank/SeriesInfo/index.vue       |   2 +-
 src/views/SaleRank/index.vue                  |   3 +-
 .../WeiboDetails/weiboCharacters/index.vue    |   2 +-
 8 files changed, 358 insertions(+), 7 deletions(-)
 create mode 100644 src/lycomponents/iSaleModelChoose/index.vue

diff --git a/src/lycomponents/iSaleModelChoose/index.vue b/src/lycomponents/iSaleModelChoose/index.vue
new file mode 100644
index 0000000..b8ae29b
--- /dev/null
+++ b/src/lycomponents/iSaleModelChoose/index.vue
@@ -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>
diff --git a/src/lycomponents/index.js b/src/lycomponents/index.js
index d159024..128cfc7 100644
--- a/src/lycomponents/index.js
+++ b/src/lycomponents/index.js
@@ -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
             }
         })
     }
diff --git a/src/views/SaleRank/AllLevel/index.vue b/src/views/SaleRank/AllLevel/index.vue
index 096e112..5617560 100644
--- a/src/views/SaleRank/AllLevel/index.vue
+++ b/src/views/SaleRank/AllLevel/index.vue
@@ -184,7 +184,7 @@ export default {
             })
         },
         disabledDate(current) {
-            return (current > moment(this.dDate).add(1,'months'));
+            return (current > moment(this.dDate));
         },
         //前往详细
         goInfo(index) {
diff --git a/src/views/SaleRank/BrandSale/index.vue b/src/views/SaleRank/BrandSale/index.vue
index 0f8d68a..98afbf9 100644
--- a/src/views/SaleRank/BrandSale/index.vue
+++ b/src/views/SaleRank/BrandSale/index.vue
@@ -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: "占品牌份额(%)",
diff --git a/src/views/SaleRank/CitySale/tbEvent.js b/src/views/SaleRank/CitySale/tbEvent.js
index 89d1ce5..753705a 100644
--- a/src/views/SaleRank/CitySale/tbEvent.js
+++ b/src/views/SaleRank/CitySale/tbEvent.js
@@ -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;
diff --git a/src/views/SaleRank/SeriesInfo/index.vue b/src/views/SaleRank/SeriesInfo/index.vue
index d675e29..695de6f 100644
--- a/src/views/SaleRank/SeriesInfo/index.vue
+++ b/src/views/SaleRank/SeriesInfo/index.vue
@@ -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>
diff --git a/src/views/SaleRank/index.vue b/src/views/SaleRank/index.vue
index 49573d2..c94fdb8 100644
--- a/src/views/SaleRank/index.vue
+++ b/src/views/SaleRank/index.vue
@@ -126,7 +126,8 @@ export default {
             form: {
                 token: '',
                 sStartTime: '',
-                sEndTime: ''
+                sEndTime: '',
+                sType: 'Marketing'
             },
             brandList: [], //品牌列表
             brandOption: [],
diff --git a/src/views/WeiboDetails/weiboCharacters/index.vue b/src/views/WeiboDetails/weiboCharacters/index.vue
index 5bbecf4..16dce28 100644
--- a/src/views/WeiboDetails/weiboCharacters/index.vue
+++ b/src/views/WeiboDetails/weiboCharacters/index.vue
@@ -11,7 +11,7 @@
     <v-label-div title="微博人物画像">
       <div>
         <v-tab-group
-          :btns="['性别', '认证', '分类']"
+          :btns="['性别', '认证', '地区']"
           @change="handlerTab"
         ></v-tab-group>
       </div>