BJ_web_developers / wxgzh

Commit 2b4641ef0e1e67e4f10db2174b702db7aa8e85b5

Authored by 刘淇
1 parent 4a26ed6a

添加车牌颜色

Inline Side-by-side
Showing 1 changed file with 48 additions and 40 deletions
src/views/parkPay/plateNumber.vue
  View file @2b4641e
@@ -18,20 +18,20 @@ @@ -18,20 +18,20 @@
18 <div class="wrap"> 18 <div class="wrap">
19 <!--<p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>--> 19 <!--<p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>-->
20 20
21 - <!--<ul class="color-choose">-->  
22 - <!--<li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"-->  
23 - <!--:style="{color:currentColor==index?'#FFF':'',background: currentColor==index?activeBG:'' }"-->  
24 - <!--&gt;-->  
25 - <!--{{i.name}}-->  
26 - <!--</li>--> 21 + <ul class="color-choose">
  22 + <li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"
  23 + :style="{color:currentColor==index?'#FFF':'',background: currentColor==index?activeBG:'' }"
  24 + >
  25 + {{i.name}}
  26 + </li>
27 27
28 - <!--</ul>--> 28 + </ul>
29 29
30 30
31 31
32 32
33 -  
34 - <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p> 33 + <p style="margin-bottom: 18px;margin-top: 18px;"></p>
  34 + <!--<p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p>-->
35 <div class="num-box"> 35 <div class="num-box">
36 <div class="num0" @click="clickFirstWrap()"> 36 <div class="num0" @click="clickFirstWrap()">
37 <span>{{formData.num0}}</span> 37 <span>{{formData.num0}}</span>
@@ -47,30 +47,30 @@ @@ -47,30 +47,30 @@
47 </div> 47 </div>
48 48
49 49
50 - <div class="radio-box">  
51 - <label class="flex-items-center">  
52 - <img v-if="formData.commonCard == 1"  
53 - src="../../assets/images/parkPay/icon_chose_s@2x.png"  
54 - alt="">  
55 - <img v-else  
56 - src="../../assets/images/parkPay/icon_chose_n@2x.png"  
57 - alt="">  
58 - <input type="radio"  
59 - v-model="formData.commonCard"  
60 - value="1" />普通车牌  
61 - </label>  
62 - <label class="flex-items-center">  
63 - <img v-if="formData.commonCard == 2"  
64 - src="../../assets/images/parkPay/icon_chose_s@2x.png"  
65 - alt="">  
66 - <img v-else  
67 - src="../../assets/images/parkPay/icon_chose_n@2x.png"  
68 - alt="">  
69 - <input type="radio"  
70 - v-model="formData.commonCard"  
71 - value="2" />新能源车牌  
72 - </label>  
73 - </div> 50 + <!--<div class="radio-box">-->
  51 + <!--<label class="flex-items-center">-->
  52 + <!--<img v-if="formData.commonCard == 1"-->
  53 + <!--src="../../assets/images/parkPay/icon_chose_s@2x.png"-->
  54 + <!--alt="">-->
  55 + <!--<img v-else-->
  56 + <!--src="../../assets/images/parkPay/icon_chose_n@2x.png"-->
  57 + <!--alt="">-->
  58 + <!--<input type="radio"-->
  59 + <!--v-model="formData.commonCard"-->
  60 + <!--value="1" />普通车牌-->
  61 + <!--</label>-->
  62 + <!--<label class="flex-items-center">-->
  63 + <!--<img v-if="formData.commonCard == 2"-->
  64 + <!--src="../../assets/images/parkPay/icon_chose_s@2x.png"-->
  65 + <!--alt="">-->
  66 + <!--<img v-else-->
  67 + <!--src="../../assets/images/parkPay/icon_chose_n@2x.png"-->
  68 + <!--alt="">-->
  69 + <!--<input type="radio"-->
  70 + <!--v-model="formData.commonCard"-->
  71 + <!--value="2" />新能源车牌-->
  72 + <!--</label>-->
  73 + <!--</div>-->
74 74
75 75
76 <div class="submit-box" @click="submitFn()"> 76 <div class="submit-box" @click="submitFn()">
@@ -301,6 +301,8 @@ import {swiperQuery} from &#39;../../api/plateNumber/plateNumber&#39; @@ -301,6 +301,8 @@ import {swiperQuery} from &#39;../../api/plateNumber/plateNumber&#39;
301 export default { 301 export default {
302 data () { 302 data () {
303 return { 303 return {
  304 +
  305 + // 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
304 colorList:[ 306 colorList:[
305 { 307 {
306 name:'蓝牌', 308 name:'蓝牌',
@@ -310,16 +312,17 @@ export default { @@ -310,16 +312,17 @@ export default {
310 name:'黄牌', 312 name:'黄牌',
311 id:'2' 313 id:'2'
312 }, 314 },
  315 +
313 { 316 {
314 - name:'绿牌', 317 + name:'白牌',
315 id:'3' 318 id:'3'
316 }, 319 },
317 { 320 {
318 - name:'白牌', 321 + name:'黑牌',
319 id:'4' 322 id:'4'
320 }, 323 },
321 { 324 {
322 - name:'黑牌', 325 + name:'绿牌',
323 id:'5' 326 id:'5'
324 }, 327 },
325 ], 328 ],
@@ -420,23 +423,28 @@ export default { @@ -420,23 +423,28 @@ export default {
420 } 423 }
421 }) 424 })
422 }, 425 },
423 - chooseColor (index){ // 颜色选择 426 + chooseColor (index){ // 颜色选择 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
424 this.currentColor = index 427 this.currentColor = index
425 switch (this.currentColor) { 428 switch (this.currentColor) {
426 case 0 : 429 case 0 :
  430 + this.formData.commonCard = '1'
427 return this.activeBG = '#0054C0' 431 return this.activeBG = '#0054C0'
428 break; 432 break;
429 case 1 : 433 case 1 :
  434 + this.formData.commonCard = '1'
430 return this.activeBG = '#FEBE00' 435 return this.activeBG = '#FEBE00'
431 break; 436 break;
432 case 2 : 437 case 2 :
433 - return this.activeBG = '#97DEA1' 438 + this.formData.commonCard = '1'
  439 + return this.activeBG = '#E4E5E7'
434 break; 440 break;
435 case 3 : 441 case 3 :
436 - return this.activeBG = '#E4E5E7' 442 + this.formData.commonCard = '1'
  443 + return this.activeBG = '#333333'
437 break; 444 break;
438 case 4 : 445 case 4 :
439 - return this.activeBG = '#333333' 446 + this.formData.commonCard = '2'
  447 + return this.activeBG = '#97DEA1'
440 break; 448 break;
441 } 449 }
442 }, 450 },