刘文博 / gulu-vue

Download as
Browse Code »

Commit 0c6c0f3c42d3ffdbfa2901d57129fe3007f4306b

Authored by yr
1 parent 29f4d5fe57
Exists in master

选购页折叠

Showing 5 changed files with 83 additions and 27 deletions   Show diff stats
src/pages/detailStandard/detailStandard_k.vue
Diff comments   View file @0c6c0f3
... ... @@ -17,10 +17,13 @@
17 17 </view>
18 18 <view class="choose">
19 19 <view class="colour">
20   - <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view>
21   - <view class="colour_exp">*{{this.navData.colour}}</view>
  20 + <view class="colour1" @click="xialachange(0)">
  21 + <text>框架颜色</text>
  22 + <image v-bind:src="isNone[0].img"></image>
  23 + </view>
  24 + <view class="colour_exp">*{{navData.colour}}</view>
22 25 <view>
23   - <view class="colour2">
  26 + <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
24 27 <view
25 28 v-for="(items,index) in details.data.skuList"
26 29 :key="index"
... ... @@ -35,14 +38,14 @@
35 38 <hr/>
36 39 </view>
37 40 <view class="size">
38   - <view class="size1">
  41 + <view class="size1" @click="xialachange(1)">
39 42 <view class="size1_1">框架尺寸</view>
40   - <view><image src="/static/img/detail/xiala.png"></image></view>
  43 + <view><image v-bind:src="isNone[1].img"></image></view>
41 44 </view>
42 45 <view class="colour">
43   - <view class="colour_exp">*{{this.navData.colour}}</view>
  46 + <view class="colour_exp">*{{navData.colour}}</view>
44 47 </view>
45   - <view class="D3_list">
  48 + <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}">
46 49 <view>
47 50 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
48 51 <view class="D3_list_jDu">
... ... @@ -98,12 +101,15 @@
98 101 </view>
99 102 </view>
100 103 <view class="part">
101   - <view class="size1">
102   - <view class="size1_1">配件</view>
103   - <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
  104 + <view class="size1" @click="xialachange(2)">
  105 + <view class="size1_1" >配件</view>
  106 + <view>
  107 + <span>+￥0.00</span>
  108 + <image v-bind:src="isNone[2].img"></image>
  109 + </view>
104 110 </view>
105 111 <view class="colour_exp">*0290</view>
106   - <view class="part_som">
  112 + <view class="part_som" v-bind:class="{'colour2_none' : isNone[2].state}">
107 113 <view
108 114 v-for="(part) in part"
109 115 :key="part.key"
... ... @@ -139,6 +145,13 @@ export default {
139 145 count: 1,
140 146 // colour: '1.56非球面防蓝光_亚黑色',
141 147 chooseNum : '',
  148 + isNone:[
  149 + {state: false ,img: '/static/img/detail/xiala.png'},
  150 + {state: false ,img: '/static/img/detail/xiala.png'},
  151 + {state: false ,img: '/static/img/detail/xiala.png'},
  152 + {state: false ,img: '/static/img/detail/xiala.png'},
  153 + {state: false ,img: '/static/img/detail/xiala.png'},
  154 + ],
142 155 //传参
143 156 navData:{
144 157 pid: "26",
... ... @@ -147,6 +160,7 @@ export default {
147 160 price:'',
148 161 colour: '1.56非球面防蓝光_亚黑色',
149 162 },
  163 +
150 164 //尺寸
151 165 parameter:[
152 166 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
... ... @@ -190,9 +204,17 @@ export default {
190 204 this.count <= 1? this.disabled = true:this.count--
191 205 }
192 206 },
  207 + xialachange(index){
  208 + this.isNone[index].state = !this.isNone[index].state;
  209 + if(this.isNone[index].state){
  210 + this.isNone[index].img = '/static/img/detail/right.png'
  211 + }else{
  212 + this.isNone[index].img = '/static/img/detail/xiala.png'
  213 + }
  214 + },
193 215 colourChange(index,e){
194 216 this.navData.colour = e ; //颜色选择
195   - console.log(index,e);
  217 + console.log(index,this.navData.colour);
196 218  
197 219 },
198 220 viewChoose(index,e){
... ... @@ -353,6 +375,9 @@ hr{
353 375 }
354 376 }
355 377 }
  378 + .colour2_none{
  379 + display: none;
  380 + }
356 381 }
357 382 .size,.part{
358 383 margin-top:14px;
... ... @@ -459,6 +484,9 @@ hr{
459 484 }
460 485 }
461 486 }
  487 + .colour2_none{
  488 + display: none;
  489 + }
462 490 }
463 491  
464 492 .buy{
... ...
src/pages/detailStandard/detailStandard_sun.vue
Diff comments   View file @0c6c0f3
... ... @@ -17,10 +17,13 @@
17 17 </view>
18 18 <view class="choose">
19 19 <view class="colour">
20   - <view class="colour1"><text>框架颜色</text><image src="/static/img/detail/xiala.png"></image></view>
  20 + <view class="colour1" @click="xialachange(0)">
  21 + <text>框架颜色</text>
  22 + <image v-bind:src="isNone[0].img"></image>
  23 + </view>
21 24 <view class="colour_exp">*{{navData.colour}}</view>
22 25 <view>
23   - <view class="colour2">
  26 + <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
24 27 <view
25 28 v-for="(items,index) in details.data.skuList"
26 29 :key="index"
... ... @@ -35,9 +38,12 @@
35 38 <hr/>
36 39 </view>
37 40 <view class="colour">
38   - <view class="colour1"><text>镜片颜色</text><image src="/static/img/detail/xiala.png"></image></view>
  41 + <view class="colour1" @click="xialachange(1)">
  42 + <text>镜片颜色</text>
  43 + <image v-bind:src="isNone[1].img"></image>
  44 + </view>
39 45 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
40   - <view>
  46 + <view v-bind:class="{'colour2_none' : isNone[1].state}">
41 47 <view class="jp_colour2">
42 48 <view
43 49 v-for="(items,index) in jp_colour"
... ... @@ -51,13 +57,14 @@
51 57 <hr/>
52 58 </view>
53 59 <view class="colour">
54   - <view class="colour1">
  60 + <view class="colour1" @click="xialachange(2)">
55 61 <text>{{details.data.attrList[0].meta_name}}</text>
56 62 <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text>
57   - <image src="/static/img/detail/xiala.png"></image>
  63 + <image v-bind:src="isNone[2].img"></image>
58 64 </view>
59 65 <view>
60   - <view class="split">
  66 + <view class="colour_exp">*{{navData.split}}</view>
  67 + <view class="split" v-bind:class="{'colour2_none' : isNone[2].state}">
61 68 <view
62 69 v-for="(items,index) in details.data.attrList[0].attr"
63 70 :key="index"
... ... @@ -73,14 +80,14 @@
73 80 <hr/>
74 81 </view>
75 82 <view class="size">
76   - <view class="size1">
  83 + <view class="size1" @click="xialachange(3)">
77 84 <view class="size1_1">框架尺寸</view>
78   - <view><image src="/static/img/detail/xiala.png"></image></view>
  85 + <view><image v-bind:src="isNone[3].img"></image></view>
79 86 </view>
80 87 <view class="colour">
81 88 <view class="colour_exp">*{{navData.colour}}</view>
82 89 </view>
83   - <view class="D3_list">
  90 + <view class="D3_list" v-bind:class="{'colour2_none' : isNone[3].state}">
84 91 <view>
85 92 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
86 93 <view class="D3_list_jDu">
... ... @@ -132,16 +139,16 @@
132 139 <view>{{parameter[4].standard}}</view>
133 140 </view>
134 141 </view>
135   - <hr/>
136 142 </view>
  143 + <hr/>
137 144 </view>
138 145 <view class="part">
139   - <view class="size1">
  146 + <view class="size1" @click="xialachange(4)">
140 147 <view class="size1_1">配件</view>
141   - <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view>
  148 + <view><span>+￥0.00</span><image v-bind:src="isNone[4].img"></image></view>
142 149 </view>
143 150 <view class="colour_exp">*0290</view>
144   - <view class="part_som">
  151 + <view class="part_som" v-bind:class="{'colour2_none' : isNone[4].state}">
145 152 <view
146 153 v-for="(part) in part"
147 154 :key="part.key"
... ... @@ -282,6 +289,13 @@ export default {
282 289 count: 1,
283 290 chooseNum : '',
284 291 isSplit: '' ,
  292 + isNone:[
  293 + {state: false ,img: '/static/img/detail/xiala.png'},
  294 + {state: false ,img: '/static/img/detail/xiala.png'},
  295 + {state: false ,img: '/static/img/detail/xiala.png'},
  296 + {state: false ,img: '/static/img/detail/xiala.png'},
  297 + {state: false ,img: '/static/img/detail/xiala.png'},
  298 + ],
285 299  
286 300 //传参
287 301 navData:{
... ... @@ -359,6 +373,14 @@ export default {
359 373 this.count <= 1? this.disabled = true:this.count--
360 374 }
361 375 },
  376 + xialachange(index){
  377 + this.isNone[index].state = !this.isNone[index].state;
  378 + if(this.isNone[index].state){
  379 + this.isNone[index].img = '/static/img/detail/right.png'
  380 + }else{
  381 + this.isNone[index].img = '/static/img/detail/xiala.png'
  382 + }
  383 + },
362 384 colourChange(index,e){
363 385 this.navData.colour = e ; //颜色选择
364 386  
... ... @@ -576,6 +598,9 @@ hr{
576 598 }
577 599 }
578 600 }
  601 + .colour2_none{
  602 + display: none;
  603 + }
579 604 }
580 605 .jp_colour2{
581 606 display: grid;
... ... @@ -722,6 +747,9 @@ hr{
722 747 }
723 748 }
724 749 }
  750 + .colour2_none{
  751 + display: none;
  752 + }
725 753 }
726 754  
727 755 .buy{
... ...
src/pages/purchaseLenses/purchaseLenses.vue
Diff comments   View file @0c6c0f3
... ... @@ -297,7 +297,7 @@
297 297 },
298 298 methods:{
299 299 change(num) {
300   - this.show[num] = this.show[num] ? false : true;
  300 + this.show[num] = this.show[num] ? false : true;
301 301 },
302 302 onClickItem1(index) {
303 303 if (this.current1 !== index) {
... ...
src/static/img/detail/right.png
Diff comments   View file @0c6c0f3

475 Bytes
src/static/img/detail/xiala.png
Diff comments   View file @0c6c0f3

438 Bytes | W: | H:

470 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin