车型点选

src/page/carCk.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="carCkbox">
+   <div class="brandsBox">
+     <div class="mainLeft" >
+       <div class="mainLeftTop">
+         <div class="sx"></div>
+         <div class="leftTitle">选择品牌</div>
+         <div class="childrensearchBox">
+           <input type="text" v-model="childrenss" class="childrensearchInput" placeholder="搜索"  @keyup.enter="brandkeyup">
+           <img src="../assets/icon_search@2x.png" alt="" class="childrensearchImg"  @click="brandkeyup">
+         </div>
+       </div>
+       <div class="mainLeftLineBox">
+         <div class="mainLeftLine"   v-for="item in brandList" >
+           <div class="titleStr">{{item.titleStr}}</div>
+            <div class="brandsLine " v-for="(v,i) in item.list" @click="brandCk(v)" :class="{mainLeftLineActive:brandName==v.brand}">
+              <img :src="v.icon" alt="" class="brandicon">
+              <div class="brandName">{{v.brand}}</div>
+            </div>
+         </div>
+       </div>
+     </div>
+     <!-- 车型-->
+     <div class="mainLeft modelBox" >
+       <div class="mainLeftTop">
+         <div class="sx"></div>
+         <div class="leftTitle">选择车型</div>
+         <div class="childrensearchBox">
+           <input type="text" v-model="childrenss" class="childrensearchInput" placeholder="搜索"  @keyup.enter="brandkeyup">
+           <img src="../assets/icon_search@2x.png" alt="" class="childrensearchImg"  @click="brandkeyup">
+         </div>
+       </div>
+       <div class="mainLeftLineBox">
+         <div class="mainLeftLine"   v-for="(item,index) in modelList" ><!--  -->
+              <div class="fct_name">{{item.fct_name}}</div>
+              <div class="lineName" v-for="(v,i) in item.models" @click="goNext(v)" :class="{mainLeftLineActive:modelname==v.model_name}">{{v.model_name}}</div>
+         </div>
+       </div>
+     </div>
+
+
+   </div>
+  </div>
+</template>
+<script>
+import { fetchPost, fetchGet, fetchPut, fetchDelete, baseURL } from '@/utils/request'
+export default {
+
+  props: ['show', 'carInfoData'],
+  data() {
+    return {
+       leftIndex:2,
+       brands:[],
+       childrenHeight:'',
+       brandList:'',
+       brandName:'',
+       childrenss:'',
+       epc_id:'',
+       modelList:'',
+       token:'',
+       param:'',
+       modelname:'',
+       access_time:'',
+       mtime:'',
+    }
+  },
+  watch: {
+
+  },
+  created() {
+
+
+  },
+  methods: {
+    brandCk(item){  //点击品牌
+      this.brandName=item.brand;
+      this.epc_id=item.epc_id;
+      this.getModel()
+    },
+    goNext(item) {  //点击车型
+    	this.token = item.token;
+    	this.param = item.param;
+
+
+    	if (item.next_restrain == 1) {
+    		this.modelname=item.model_name
+    		this.getYueSuData(item)
+    	}
+    	else{
+    		this.gogroup(item);
+    	}
+    },
+    getYueSuData(){
+       fetchGet('/advancedEpc/getRestrainPc', {
+         epc_id: this.epc_id,
+         token: this.token,
+         param: this.param,
+         access_time: this.mtime,
+        }).then(res => {
+          if(res.data.number==200||res.data.number==5212){
+              //this.modelList = res.data.result.list;
+              //this.mtime = res.data.result.access_time;
+          }else{
+            this.$message({
+                   message: res.data.message,
+                   type: 'warning'
+             });
+          }
+        }).catch(err => {})
+    },
+    gogroup(){
+
+    },
+    getBrands(){ //品牌
+      fetchGet('/advancedEpc/getBrandsPc', {
+
+       }).then(res => {
+          var list = res.data.result.list;
+          var sectionTitle = [];
+          var brandList = [];
+          list.forEach(item => {
+          	if (item) {
+          		sectionTitle.push(item.first_letter);
+          	}
+          })
+          sectionTitle.sort();
+          sectionTitle = Array.from(new Set(sectionTitle))
+          sectionTitle.forEach(title => {
+          	var arr = [];
+          	list.forEach(item => {
+          		if (item.first_letter == title) {
+          			arr.push(item);
+          		}
+          	})
+          	var dic = {
+          		titleStr: title,
+          		list: arr
+          	};
+          	brandList.push(dic);
+          })
+
+          this.brandList = brandList;
+          console.log('list==', brandList);
+       }).catch(err => {})
+    },
+    getModel(){
+      fetchGet('/advancedEpc/getModelPc', {
+        epc_id: this.epc_id,
+       }).then(res => {
+         if(res.data.number==200||res.data.number==5212){
+             this.modelList = res.data.result.list;
+             this.mtime = res.data.result.access_time;
+         }else{
+           this.$message({
+                  message: res.data.message,
+                  type: 'warning'
+            });
+         }
+       }).catch(err => {})
+    },
+    brandkeyup(){
+
+    },
+     close() {
+
+       this.$emit('update:show', false)
+
+     },
+
+  }
+
+}
+</script>
+<style >
+  .brandsBox{
+    display: flex;
+  }
+  .mainLeft{
+    width: 300px;
+  }
+  .mainLeft{
+    border-radius: 4px;
+    border: 1px solid #EEEEEE;
+  }
+.brandicon{
+  width: 30px;height: 30px;
+}
+.brandsLine{
+  display: flex;
+  line-height: 30px;
+
+   cursor: pointer;
+   padding:12px 0 0 12px;
+   border-bottom: 1px solid #EEEEEE;
+}
+.titleStr{
+    padding:12px 0;font-size: 16px;
+    padding-left: 12px;
+}
+.brandName{
+   padding-left: 10px;
+}
+ .mainLeftTop{
+   display: flex;
+   border-bottom: 1px solid #EEEEEE;
+ }
+ .mainLeftLineBox{
+   max-height: calc(100vh - 220px );
+   overflow: auto;
+ }
+ .mainLeftLine{
+   color: #333333; font-size: 14px;
+ }
+.childrensearchBox{
+   position: relative;
+ }
+ .childrensearchImg{
+   width: 16px;right: 10px;
+   height: 16px;
+   position: absolute;top: 16px;
+ }
+ .childrensearchInput{
+   width: 180px;
+   height: 34px;
+   background: #FFFFFF;
+   border-radius: 4px;
+   border: 1px solid #EEEEEE;
+   outline: none;
+   margin-top: 5px;
+   margin-left: 20px;
+ }
+ .lineName{
+   cursor: pointer;
+   padding:12px;
+   border-bottom: 1px solid #EEEEEE;
+ }
+ .fct_name{
+   background: #F7F9F8;
+   line-height: 30px;padding-left: 12px;
+ }
+ .mainLeftLineActive{
+   background: #FDF9E6;
+
+ }
+</style>

src/page/index.vue

@@ -11,7 +11,7 @@
            <!-- <img src="http://img.db.66km.cn/carbrandlogo/B - 比亚迪.png" alt="" class="barndLogo"> -->
             <div class="barndTxt">{{brand_name}}</div>
            </div>
-          <!-- <div class="topkk">选择品牌</div> -->
+           <div class="topkk"  @click="ckBrand">选择品牌</div><!--  -->
            <div class="topkk" @click="oemClick">OEM查询</div>
        </div>
      </div>
@@ -243,6 +243,7 @@
      <oem  ref="childoem" :show.sync="oemFlag" @done="getOemDetail" :param='param' :token='token' :vin='vin' :id.sync="epc_id"></oem>
      <part ref="childrenPart" :show.sync="partFlag" :epc_id='epc_id' :partnum="partnum" :threeData='threeData'></part>
      <carInfo  ref="childrencar" :show.sync="carFlag" :carInfoData="carInfoData"></carInfo>
+     <carCk :show.sync="carCkShow" ref="childrencarCk"></carCk>
   </div>
 </template>
 
@@ -251,13 +252,15 @@ import { fetchPost, fetchGet, fetchPut, fetchDelete, baseURL } from '@/utils/req
 import oem from './oem'
 import part from './part'
 import carInfo from './carInfo'
+import carCk from './carCk'
 export default {
   name: 'index',
   components: {
-    oem,part,carInfo
+    oem,part,carInfo,carCk
   },
   data () {
     return {
+       carCkShow:false,
        groupShow:false,  //总组的显示
        carConfig:false,   //车辆配置的显示
        carConfigIndex:-1,
@@ -332,7 +335,8 @@ export default {
         }
   },
   created() {
-    this.keyup()
+    //this.keyup()
+    this.ckBrand()
   },
   filters:{
     re(val){
@@ -348,6 +352,10 @@ export default {
     }
   },
   methods:{
+    ckBrand(){
+      this.carCkShow=true;
+      this.$refs.childrencarCk.getBrands()
+    },
     carConfigtck(){
       console.log(this.restrains)
       this.restrainShow1=false