刘文博 / gulu-vue

Download as
Browse Code »

Commit 0c6c0f3c42d3ffdbfa2901d57129fe3007f4306b

Authored by 尹聃
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
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="detail"> 3 <view class="detail">
4 <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> 4 <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
5 <view class="detail2"> 5 <view class="detail2">
6 <view class="detail2_name">{{details.data.p_name}}</view> 6 <view class="detail2_name">{{details.data.p_name}}</view>
7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view> 7 <view class="detail2_tui"><span>支持7天无条件退货</span><span>顺丰发货</span></view>
8 <view class="detail2_price"> 8 <view class="detail2_price">
9 <span>￥{{details.data.p_sale_price*count}}</span> 9 <span>￥{{details.data.p_sale_price*count}}</span>
10 <view class="counter"> 10 <view class="counter">
11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> 11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
12 <text>{{count}}</text> 12 <text>{{count}}</text>
13 <view class="btn" @click="counter(true)">+</view> 13 <view class="btn" @click="counter(true)">+</view>
14 </view> 14 </view>
15 </view> 15 </view>
16 </view> 16 </view>
17 </view> 17 </view>
18 <view class="choose"> 18 <view class="choose">
19 <view class="colour"> 19 <view class="colour">
20 <view class="colour1"><span>框架颜色</span><image src="/static/img/detail/xiala.png"></image></view> 20 <view class="colour1" @click="xialachange(0)">
21 <view class="colour_exp">*{{this.navData.colour}}</view> 21 <text>框架颜色</text>
22 <image v-bind:src="isNone[0].img"></image>
23 </view>
24 <view class="colour_exp">*{{navData.colour}}</view>
22 <view> 25 <view>
23 <view class="colour2"> 26 <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
24 <view 27 <view
25 v-for="(items,index) in details.data.skuList" 28 v-for="(items,index) in details.data.skuList"
26 :key="index" 29 :key="index"
27 @click="viewChoose(index)" 30 @click="viewChoose(index)"
28 class="colour2_view" 31 class="colour2_view"
29 v-bind:class="{'colour2_viewed': chooseNum == index}" 32 v-bind:class="{'colour2_viewed': chooseNum == index}"
30 > 33 >
31 <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> 34 <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
32 </view> 35 </view>
33 </view> 36 </view>
34 </view> 37 </view>
35 <hr/> 38 <hr/>
36 </view> 39 </view>
37 <view class="size"> 40 <view class="size">
38 <view class="size1"> 41 <view class="size1" @click="xialachange(1)">
39 <view class="size1_1">框架尺寸</view> 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 </view> 44 </view>
42 <view class="colour"> 45 <view class="colour">
43 <view class="colour_exp">*{{this.navData.colour}}</view> 46 <view class="colour_exp">*{{navData.colour}}</view>
44 </view> 47 </view>
45 <view class="D3_list"> 48 <view class="D3_list" v-bind:class="{'colour2_none' : isNone[1].state}">
46 <view> 49 <view>
47 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> 50 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
48 <view class="D3_list_jDu"> 51 <view class="D3_list_jDu">
49 <view class="D3_list1"> 52 <view class="D3_list1">
50 <c-progress class="c-progress" :inner_widthProp="300"/> 53 <c-progress class="c-progress" :inner_widthProp="300"/>
51 <text>{{details.data.frame_width}}mm</text> 54 <text>{{details.data.frame_width}}mm</text>
52 </view> 55 </view>
53 <view>{{parameter[0].standard}}</view> 56 <view>{{parameter[0].standard}}</view>
54 </view> 57 </view>
55 </view> 58 </view>
56 <view> 59 <view>
57 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> 60 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
58 <view class="D3_list_jDu"> 61 <view class="D3_list_jDu">
59 <view class="D3_list1"> 62 <view class="D3_list1">
60 <c-progress class="c-progress" :inner_widthProp="190"/> 63 <c-progress class="c-progress" :inner_widthProp="190"/>
61 <view>{{details.data.glass_width}}mm</view> 64 <view>{{details.data.glass_width}}mm</view>
62 </view> 65 </view>
63 <view>{{parameter[1].standard}}</view> 66 <view>{{parameter[1].standard}}</view>
64 </view> 67 </view>
65 </view> 68 </view>
66 <view> 69 <view>
67 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> 70 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
68 <view class="D3_list_jDu"> 71 <view class="D3_list_jDu">
69 <view class="D3_list1"> 72 <view class="D3_list1">
70 <c-progress class="c-progress" :inner_widthProp="210"/> 73 <c-progress class="c-progress" :inner_widthProp="210"/>
71 <view>{{details.data.glass_height}}mm</view> 74 <view>{{details.data.glass_height}}mm</view>
72 </view> 75 </view>
73 <view>{{parameter[2].standard}}</view> 76 <view>{{parameter[2].standard}}</view>
74 </view> 77 </view>
75 </view> 78 </view>
76 <view> 79 <view>
77 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> 80 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
78 <view class="D3_list_jDu"> 81 <view class="D3_list_jDu">
79 82
80 <view class="D3_list1"> 83 <view class="D3_list1">
81 <c-progress class="c-progress" :inner_widthProp="160"/> 84 <c-progress class="c-progress" :inner_widthProp="160"/>
82 <view>{{details.data.nose_width}}mm</view> 85 <view>{{details.data.nose_width}}mm</view>
83 </view> 86 </view>
84 <view>{{parameter[3].standard}}</view> 87 <view>{{parameter[3].standard}}</view>
85 </view> 88 </view>
86 </view> 89 </view>
87 <view> 90 <view>
88 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> 91 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
89 <view class="D3_list_jDu"> 92 <view class="D3_list_jDu">
90 <view class="D3_list1"> 93 <view class="D3_list1">
91 <c-progress class="c-progress" :inner_widthProp="260"/> 94 <c-progress class="c-progress" :inner_widthProp="260"/>
92 <view>{{details.data.leg_long}}mm</view> 95 <view>{{details.data.leg_long}}mm</view>
93 </view> 96 </view>
94 <view>{{parameter[4].standard}}</view> 97 <view>{{parameter[4].standard}}</view>
95 </view> 98 </view>
96 </view> 99 </view>
97 <hr/> 100 <hr/>
98 </view> 101 </view>
99 </view> 102 </view>
100 <view class="part"> 103 <view class="part">
101 <view class="size1"> 104 <view class="size1" @click="xialachange(2)">
102 <view class="size1_1">配件</view> 105 <view class="size1_1" >配件</view>
103 <view><span>+￥0.00</span><image src="/static/img/detail/xiala.png"></image></view> 106 <view>
107 <span>+￥0.00</span>
108 <image v-bind:src="isNone[2].img"></image>
109 </view>
104 </view> 110 </view>
105 <view class="colour_exp">*0290</view> 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 <view 113 <view
108 v-for="(part) in part" 114 v-for="(part) in part"
109 :key="part.key" 115 :key="part.key"
110 v-bind:class="{'size_viewed': part.is_actived}" 116 v-bind:class="{'size_viewed': part.is_actived}"
111 > 117 >
112 <image v-bind:src="part.img"></image> 118 <image v-bind:src="part.img"></image>
113 </view> 119 </view>
114 </view> 120 </view>
115 </view> 121 </view>
116 </view> 122 </view>
117 <view class="buy"> 123 <view class="buy">
118 <view class="buy1">选了镜框，想选镜片？</view> 124 <view class="buy1">选了镜框，想选镜片？</view>
119 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> 125 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
120 <view class="buy3"> 126 <view class="buy3">
121 <view class="buy3_1">暂时不选</view> 127 <view class="buy3_1">暂时不选</view>
122 <view class="buy3_2" @click="popArgs">立即去选</view> 128 <view class="buy3_2" @click="popArgs">立即去选</view>
123 </view> 129 </view>
124 </view> 130 </view>
125 <view class="zhanwei"></view> 131 <view class="zhanwei"></view>
126 <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view> 132 <view class="button"><view @click="popSure(details.data.p_name,details.data.p_sale_price)" >立即结算</view></view>
127 </view> 133 </view>
128 </template> 134 </template>
129 <script> 135 <script>
130 import CProgress from '../../components/UniSliper/UniSliper' 136 import CProgress from '../../components/UniSliper/UniSliper'
131 import store from '@/store' 137 import store from '@/store'
132 138
133 export default { 139 export default {
134 components: { 140 components: {
135 CProgress 141 CProgress
136 }, 142 },
137 data(){ 143 data(){
138 return{ 144 return{
139 count: 1, 145 count: 1,
140 // colour: '1.56非球面防蓝光_亚黑色', 146 // colour: '1.56非球面防蓝光_亚黑色',
141 chooseNum : '', 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 navData:{ 156 navData:{
144 pid: "26", 157 pid: "26",
145 p_root_index: "2", 158 p_root_index: "2",
146 name:'', 159 name:'',
147 price:'', 160 price:'',
148 colour: '1.56非球面防蓝光_亚黑色', 161 colour: '1.56非球面防蓝光_亚黑色',
149 }, 162 },
163
150 //尺寸 164 //尺寸
151 parameter:[ 165 parameter:[
152 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, 166 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
153 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, 167 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
154 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, 168 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
155 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, 169 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
156 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, 170 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
157 ], 171 ],
158 //配饰 172 //配饰
159 part:[ 173 part:[
160 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, 174 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
161 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 175 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
162 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, 176 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
163 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 177 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
164 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 178 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
165 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, 179 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
166 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, 180 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
167 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, 181 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
168 ], 182 ],
169 } 183 }
170 }, 184 },
171 185
172 computed: { 186 computed: {
173 details(){ 187 details(){
174 return this.$store.state.detailStandard_k.list 188 return this.$store.state.detailStandard_k.list
175 }, 189 },
176 }, 190 },
177 onLoad:function(){ 191 onLoad:function(){
178 store.dispatch('detailStandard_k/fetch', { 192 store.dispatch('detailStandard_k/fetch', {
179 uid: "1", 193 uid: "1",
180 pid: "26", 194 pid: "26",
181 p_root_index: "2" 195 p_root_index: "2"
182 }); 196 });
183 // console.log(this.$store.state.detailStandard_k.list+'ssss'); 197 // console.log(this.$store.state.detailStandard_k.list+'ssss');
184 }, 198 },
185 methods: { 199 methods: {
186 counter(isadd){ 200 counter(isadd){
187 if(isadd){ 201 if(isadd){
188 this.count++ 202 this.count++
189 }else{ 203 }else{
190 this.count <= 1? this.disabled = true:this.count-- 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 colourChange(index,e){ 215 colourChange(index,e){
194 this.navData.colour = e ; //颜色选择 216 this.navData.colour = e ; //颜色选择
195 console.log(index,e); 217 console.log(index,this.navData.colour);
196 218
197 }, 219 },
198 viewChoose(index,e){ 220 viewChoose(index,e){
199 this.chooseNum = index 221 this.chooseNum = index
200 }, 222 },
201 popArgs(){ 223 popArgs(){
202 uni.navigateTo({ 224 uni.navigateTo({
203 url: '../detailsChoiceArgs/detailsChoiceArgs', 225 url: '../detailsChoiceArgs/detailsChoiceArgs',
204 success: res => {}, 226 success: res => {},
205 fail: () => {}, 227 fail: () => {},
206 complete: () => {} 228 complete: () => {}
207 }); 229 });
208 }, 230 },
209 //跳转确认订单页及传参 231 //跳转确认订单页及传参
210 popSure(name,price){ 232 popSure(name,price){
211 this.navData.name = name; 233 this.navData.name = name;
212 this.navData.price = price; 234 this.navData.price = price;
213 var navData = JSON.stringify(this.navData); 235 var navData = JSON.stringify(this.navData);
214 uni.navigateTo({ 236 uni.navigateTo({
215 url: '../confirmOrder/confirmOrder?index='+navData, 237 url: '../confirmOrder/confirmOrder?index='+navData,
216 }); 238 });
217 console.log(this.navData) 239 console.log(this.navData)
218 }, 240 },
219 } 241 }
220 242
221 } 243 }
222 </script> 244 </script>
223 245
224 <style lang="scss"> 246 <style lang="scss">
225 .container{ 247 .container{
226 min-height: 100vh; 248 min-height: 100vh;
227 background: #F2F2F2; 249 background: #F2F2F2;
228 padding-top: 10px; 250 padding-top: 10px;
229 box-sizing: border-box; 251 box-sizing: border-box;
230 } 252 }
231 hr{ 253 hr{
232 border: none; 254 border: none;
233 height: 1px; 255 height: 1px;
234 background: #F2F2F2; 256 background: #F2F2F2;
235 margin-top: 18px; 257 margin-top: 18px;
236 } 258 }
237 .detail{ 259 .detail{
238 height: 272rpx; 260 height: 272rpx;
239 background: #FFFFFF; 261 background: #FFFFFF;
240 border-radius: 8px; 262 border-radius: 8px;
241 padding: 16px; 263 padding: 16px;
242 box-sizing: border-box; 264 box-sizing: border-box;
243 display: flex; 265 display: flex;
244 justify-content: space-between; 266 justify-content: space-between;
245 align-items: center; 267 align-items: center;
246 } 268 }
247 .detail1{ 269 .detail1{
248 height: 178rpx; 270 height: 178rpx;
249 width: 188rpx; 271 width: 188rpx;
250 image{ 272 image{
251 width: 100%; 273 width: 100%;
252 height: 100%; 274 height: 100%;
253 border-radius: 8px; 275 border-radius: 8px;
254 } 276 }
255 } 277 }
256 .detail2{ 278 .detail2{
257 width: 68%; 279 width: 68%;
258 view{ 280 view{
259 margin-bottom: 6px; 281 margin-bottom: 6px;
260 font-family: PingFangSC-Regular; 282 font-family: PingFangSC-Regular;
261 } 283 }
262 .detail2_name{ 284 .detail2_name{
263 font-size: 14px; 285 font-size: 14px;
264 color: #333333; 286 color: #333333;
265 letter-spacing: -0.26px; 287 letter-spacing: -0.26px;
266 line-height: 18px; 288 line-height: 18px;
267 overflow:hidden; 289 overflow:hidden;
268 text-overflow:ellipsis; 290 text-overflow:ellipsis;
269 display:-webkit-box; 291 display:-webkit-box;
270 -webkit-box-orient:vertical; 292 -webkit-box-orient:vertical;
271 -webkit-line-clamp:2; 293 -webkit-line-clamp:2;
272 } 294 }
273 .detail2_tui{ 295 .detail2_tui{
274 font-size: 10px; 296 font-size: 10px;
275 color: #999999; 297 color: #999999;
276 letter-spacing: -0.19px; 298 letter-spacing: -0.19px;
277 span{ 299 span{
278 margin-right: 10px; 300 margin-right: 10px;
279 } 301 }
280 } 302 }
281 .detail2_price{ 303 .detail2_price{
282 font-size: 14px; 304 font-size: 14px;
283 color: #FF6B4A; 305 color: #FF6B4A;
284 letter-spacing: -0.26px; 306 letter-spacing: -0.26px;
285 } 307 }
286 } 308 }
287 .counter{ 309 .counter{
288 display: flex; 310 display: flex;
289 flex-direction: row; 311 flex-direction: row;
290 justify-content: space-between; 312 justify-content: space-between;
291 font-size: 28rpx; 313 font-size: 28rpx;
292 color: #333333; 314 color: #333333;
293 width: 122rpx; 315 width: 122rpx;
294 float: right; 316 float: right;
295 .btn{ 317 .btn{
296 display: flex; 318 display: flex;
297 justify-content: center; 319 justify-content: center;
298 line-height: 32rpx; 320 line-height: 32rpx;
299 height: 32rpx; 321 height: 32rpx;
300 width: 32rpx; 322 width: 32rpx;
301 background-color: #F2F2F2; 323 background-color: #F2F2F2;
302 color: #CFCFCF; 324 color: #CFCFCF;
303 } 325 }
304 } 326 }
305 .choose{ 327 .choose{
306 background: #FFFFFF; 328 background: #FFFFFF;
307 padding: 16px; 329 padding: 16px;
308 box-sizing: border-box; 330 box-sizing: border-box;
309 margin-top: 10px; 331 margin-top: 10px;
310 border-radius: 8px; 332 border-radius: 8px;
311 .colour1{ 333 .colour1{
312 span{ 334 span{
313 font-family: PingFangSC-Medium; 335 font-family: PingFangSC-Medium;
314 font-size: 16px; 336 font-size: 16px;
315 color: #333333; 337 color: #333333;
316 letter-spacing: -0.3px; 338 letter-spacing: -0.3px;
317 text-align: justify; 339 text-align: justify;
318 line-height: 24px; 340 line-height: 24px;
319 font-weight: bold; 341 font-weight: bold;
320 } 342 }
321 image{ 343 image{
322 float: right; 344 float: right;
323 width: 40rpx; 345 width: 40rpx;
324 height: 36rpx; 346 height: 36rpx;
325 } 347 }
326 } 348 }
327 .colour_exp{ 349 .colour_exp{
328 font-family: PingFangSC-Regular; 350 font-family: PingFangSC-Regular;
329 font-size: 12px; 351 font-size: 12px;
330 color: #666666; 352 color: #666666;
331 letter-spacing: 0; 353 letter-spacing: 0;
332 margin-top: 10px; 354 margin-top: 10px;
333 margin-bottom: 10px; 355 margin-bottom: 10px;
334 } 356 }
335 .colour2{ 357 .colour2{
336 display: grid; 358 display: grid;
337 grid-template-columns: repeat(5, 17%); 359 grid-template-columns: repeat(5, 17%);
338 justify-content: space-between ; 360 justify-content: space-between ;
339 grid-row-gap: 10px; 361 grid-row-gap: 10px;
340 margin-bottom: 14px; 362 margin-bottom: 14px;
341 .colour2_view{ 363 .colour2_view{
342 border: 1px solid #F2F2F2; 364 border: 1px solid #F2F2F2;
343 image{ 365 image{
344 width: 100rpx; 366 width: 100rpx;
345 height: 60rpx; 367 height: 60rpx;
346 } 368 }
347 } 369 }
348 .colour2_viewed{ 370 .colour2_viewed{
349 border: 1px solid #FF6B4A; 371 border: 1px solid #FF6B4A;
350 image{ 372 image{
351 width: 100rpx; 373 width: 100rpx;
352 height: 60rpx; 374 height: 60rpx;
353 } 375 }
354 } 376 }
355 } 377 }
378 .colour2_none{
379 display: none;
380 }
356 } 381 }
357 .size,.part{ 382 .size,.part{
358 margin-top:14px; 383 margin-top:14px;
359 .size1{ 384 .size1{
360 display: flex; 385 display: flex;
361 justify-content: space-between; 386 justify-content: space-between;
362 margin-bottom: 10px; 387 margin-bottom: 10px;
363 .size1_1{ 388 .size1_1{
364 font-weight: bold; 389 font-weight: bold;
365 font-family: PingFangSC-Medium; 390 font-family: PingFangSC-Medium;
366 font-size: 16px; 391 font-size: 16px;
367 color: #333333; 392 color: #333333;
368 letter-spacing: -0.3px; 393 letter-spacing: -0.3px;
369 line-height: 24px; 394 line-height: 24px;
370 } 395 }
371 view{ 396 view{
372 span{ 397 span{
373 font-family: PingFangSC-Regular; 398 font-family: PingFangSC-Regular;
374 font-size: 14px; 399 font-size: 14px;
375 color: #FF6B4A; 400 color: #FF6B4A;
376 letter-spacing: -0.26px; 401 letter-spacing: -0.26px;
377 margin-right: 12px; 402 margin-right: 12px;
378 } 403 }
379 image{ 404 image{
380 width: 40rpx; 405 width: 40rpx;
381 height: 36rpx; 406 height: 36rpx;
382 } 407 }
383 } 408 }
384 } 409 }
385 .size2{ 410 .size2{
386 view{ 411 view{
387 display: inline-flex; 412 display: inline-flex;
388 align-items: center; 413 align-items: center;
389 justify-content: center; //字体居中 414 justify-content: center; //字体居中
390 margin-right: 12px; 415 margin-right: 12px;
391 margin-bottom: 20px; 416 margin-bottom: 20px;
392 width: 136rpx; 417 width: 136rpx;
393 height: 60rpx; 418 height: 60rpx;
394 background: #F2F2F2; 419 background: #F2F2F2;
395 border-radius: 2px; 420 border-radius: 2px;
396 font-family: PingFangSC-Regular; 421 font-family: PingFangSC-Regular;
397 font-size: 12px; 422 font-size: 12px;
398 color: #666666; 423 color: #666666;
399 } 424 }
400 view:hover{ 425 view:hover{
401 color: #FF6B4A; 426 color: #FF6B4A;
402 background: rgba(255,107,74,0.15); 427 background: rgba(255,107,74,0.15);
403 } 428 }
404 } 429 }
405 .D3_list{ 430 .D3_list{
406 margin-bottom: 4px; 431 margin-bottom: 4px;
407 } 432 }
408 .D3_list>view{ 433 .D3_list>view{
409 display: flex; 434 display: flex;
410 align-content: center; 435 align-content: center;
411 margin-bottom: 10px; 436 margin-bottom: 10px;
412 view{ 437 view{
413 margin-right: 10px; 438 margin-right: 10px;
414 } 439 }
415 } 440 }
416 .D3_list image{ 441 .D3_list image{
417 width: 50px; 442 width: 50px;
418 height: 25px; 443 height: 25px;
419 margin-right: 6px; 444 margin-right: 6px;
420 } 445 }
421 .D3_list span{ 446 .D3_list span{
422 margin-left: 6px; 447 margin-left: 6px;
423 margin-right: 5px; 448 margin-right: 5px;
424 font-family: 'PingFangSC-Regular'; 449 font-family: 'PingFangSC-Regular';
425 } 450 }
426 .D3_list_jDu{ 451 .D3_list_jDu{
427 view{ 452 view{
428 font-family: PingFangSC-Regular; 453 font-family: PingFangSC-Regular;
429 font-size: 10px; 454 font-size: 10px;
430 color: #999999; 455 color: #999999;
431 letter-spacing: -0.19px; 456 letter-spacing: -0.19px;
432 } 457 }
433 .D3_list1{ 458 .D3_list1{
434 display: flex; 459 display: flex;
435 } 460 }
436 } 461 }
437 } 462 }
438 .part{ 463 .part{
439 .part_som{ 464 .part_som{
440 display: grid; 465 display: grid;
441 justify-content: space-between; 466 justify-content: space-between;
442 grid-template-columns: repeat(4, 22%); 467 grid-template-columns: repeat(4, 22%);
443 grid-row-gap: 12px; 468 grid-row-gap: 12px;
444 margin-bottom: 14px; 469 margin-bottom: 14px;
445 view{ 470 view{
446 border: 1px solid #F2F2F2; 471 border: 1px solid #F2F2F2;
447 height: 72rpx; 472 height: 72rpx;
448 image{ 473 image{
449 width: 100%; 474 width: 100%;
450 height: 100%; 475 height: 100%;
451 } 476 }
452 } 477 }
453 .size_viewed{ 478 .size_viewed{
454 border: 1px solid #FF6B4A; 479 border: 1px solid #FF6B4A;
455 height: 72rpx; 480 height: 72rpx;
456 image{ 481 image{
457 width: 100%; 482 width: 100%;
458 height: 100%; 483 height: 100%;
459 } 484 }
460 } 485 }
461 } 486 }
487 .colour2_none{
488 display: none;
489 }
462 } 490 }
463 491
464 .buy{ 492 .buy{
465 height: 300rpx; 493 height: 300rpx;
466 background: #FFFFFF ; 494 background: #FFFFFF ;
467 margin-top: 10px; 495 margin-top: 10px;
468 border-radius: 8px; 496 border-radius: 8px;
469 padding-top: 20px; 497 padding-top: 20px;
470 box-sizing: border-box; 498 box-sizing: border-box;
471 margin-bottom: 20px; 499 margin-bottom: 20px;
472 } 500 }
473 .buy1{ 501 .buy1{
474 font-family: PingFangSC-Medium; 502 font-family: PingFangSC-Medium;
475 font-size: 16px; 503 font-size: 16px;
476 font-weight: bold; 504 font-weight: bold;
477 color: #333333; 505 color: #333333;
478 text-align: center; 506 text-align: center;
479 } 507 }
480 .buy2{ 508 .buy2{
481 font-family: PingFangSC-Regular; 509 font-family: PingFangSC-Regular;
482 font-size: 12px; 510 font-size: 12px;
483 color: #999999; 511 color: #999999;
484 text-align: center; 512 text-align: center;
485 margin: 10px; 513 margin: 10px;
486 } 514 }
487 .buy3{ 515 .buy3{
488 font-family: PingFangSC-Regular; 516 font-family: PingFangSC-Regular;
489 font-size: 16px; 517 font-size: 16px;
490 display: flex; 518 display: flex;
491 justify-content: center; 519 justify-content: center;
492 margin-top: 14px; 520 margin-top: 14px;
493 view{ 521 view{
494 border-radius: 20px; 522 border-radius: 20px;
495 width: 240rpx; 523 width: 240rpx;
496 height: 80rpx; 524 height: 80rpx;
497 display: flex; 525 display: flex;
498 justify-content: center; 526 justify-content: center;
499 align-items: center; 527 align-items: center;
500 } 528 }
501 .buy3_1{ 529 .buy3_1{
502 margin-right: 20px; 530 margin-right: 20px;
503 background: rgba(255,107,74,0.15); 531 background: rgba(255,107,74,0.15);
504 color: #FF6B4A ; 532 color: #FF6B4A ;
505 } 533 }
506 .buy3_2{ 534 .buy3_2{
507 background: #FF6B4A; 535 background: #FF6B4A;
508 color: #FFFFFF ; 536 color: #FFFFFF ;
509 } 537 }
510 } 538 }
511 .zhanwei{ 539 .zhanwei{
512 background: #F2F2F2; 540 background: #F2F2F2;
513 height: 120rpx; 541 height: 120rpx;
514 } 542 }
515 .button{ 543 .button{
516 position: fixed; 544 position: fixed;
517 bottom: 0; 545 bottom: 0;
518 width:100%; 546 width:100%;
519 height: 112rpx; 547 height: 112rpx;
520 background: #FF6B4A 100%; 548 background: #FF6B4A 100%;
521 view{ 549 view{
522 color: #FFFFFF; 550 color: #FFFFFF;
523 height: 100%; 551 height: 100%;
524 display: flex; 552 display: flex;
525 justify-content: center; 553 justify-content: center;
526 align-items: center; 554 align-items: center;
527 font-family: PingFangSC-Regular; 555 font-family: PingFangSC-Regular;
528 font-size: 16px; 556 font-size: 16px;
529 } 557 }
530 } 558 }
531 </style> 559 </style>
src/pages/detailStandard/detailStandard_sun.vue
Diff comments   View file @0c6c0f3
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="detail"> 3 <view class="detail">
4 <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view> 4 <view class="detail1"><image v-bind:src="details.data.img_index_url"></image></view>
5 <view class="detail2"> 5 <view class="detail2">
6 <view class="detail2_name">{{details.data.p_name}}</view> 6 <view class="detail2_name">{{details.data.p_name}}</view>
7 <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view> 7 <view class="detail2_tui"><text>支持7天无条件退货</text><text>顺丰发货</text></view>
8 <view class="detail2_price"> 8 <view class="detail2_price">
9 <text>￥{{details.data.p_sale_price*count}}</text> 9 <text>￥{{details.data.p_sale_price*count}}</text>
10 <view class="counter"> 10 <view class="counter">
11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view> 11 <view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
12 <text>{{count}}</text> 12 <text>{{count}}</text>
13 <view class="btn" @click="counter(true)">+</view> 13 <view class="btn" @click="counter(true)">+</view>
14 </view> 14 </view>
15 </view> 15 </view>
16 </view> 16 </view>
17 </view> 17 </view>
18 <view class="choose"> 18 <view class="choose">
19 <view class="colour"> 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 <view class="colour_exp">*{{navData.colour}}</view> 24 <view class="colour_exp">*{{navData.colour}}</view>
22 <view> 25 <view>
23 <view class="colour2"> 26 <view class="colour2" v-bind:class="{'colour2_none' : isNone[0].state}">
24 <view 27 <view
25 v-for="(items,index) in details.data.skuList" 28 v-for="(items,index) in details.data.skuList"
26 :key="index" 29 :key="index"
27 @click="viewChoose(index)" 30 @click="viewChoose(index)"
28 class="colour2_view" 31 class="colour2_view"
29 v-bind:class="{'colour2_viewed': chooseNum == index}" 32 v-bind:class="{'colour2_viewed': chooseNum == index}"
30 > 33 >
31 <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image> 34 <image v-bind:src="items.pic" @click="colourChange(index,items.sku_name)"></image>
32 </view> 35 </view>
33 </view> 36 </view>
34 </view> 37 </view>
35 <hr/> 38 <hr/>
36 </view> 39 </view>
37 <view class="colour"> 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 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view> 45 <view class="colour_exp">*BL192345 粉紫色【限时打折】</view>
40 <view> 46 <view v-bind:class="{'colour2_none' : isNone[1].state}">
41 <view class="jp_colour2"> 47 <view class="jp_colour2">
42 <view 48 <view
43 v-for="(items,index) in jp_colour" 49 v-for="(items,index) in jp_colour"
44 :key="index" 50 :key="index"
45 class="jp_colour2_view" 51 class="jp_colour2_view"
46 > 52 >
47 <image v-bind:src="items.img"></image> 53 <image v-bind:src="items.img"></image>
48 </view> 54 </view>
49 </view> 55 </view>
50 </view> 56 </view>
51 <hr/> 57 <hr/>
52 </view> 58 </view>
53 <view class="colour"> 59 <view class="colour">
54 <view class="colour1"> 60 <view class="colour1" @click="xialachange(2)">
55 <text>{{details.data.attrList[0].meta_name}}</text> 61 <text>{{details.data.attrList[0].meta_name}}</text>
56 <text class="colour_exp colour1_span2">注：折射率越高，镜片越薄</text> 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 </view> 64 </view>
59 <view> 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 <view 68 <view
62 v-for="(items,index) in details.data.attrList[0].attr" 69 v-for="(items,index) in details.data.attrList[0].attr"
63 :key="index" 70 :key="index"
64 > 71 >
65 <view 72 <view
66 class="split_colour2" 73 class="split_colour2"
67 @click="splitChoose(index,items.name)" 74 @click="splitChoose(index,items.name)"
68 v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}" 75 v-bind:class="{'split_colour2 split_colour2_actived' : isSplit == index}"
69 >{{items.name}}</view> 76 >{{items.name}}</view>
70 </view> 77 </view>
71 </view> 78 </view>
72 </view> 79 </view>
73 <hr/> 80 <hr/>
74 </view> 81 </view>
75 <view class="size"> 82 <view class="size">
76 <view class="size1"> 83 <view class="size1" @click="xialachange(3)">
77 <view class="size1_1">框架尺寸</view> 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 </view> 86 </view>
80 <view class="colour"> 87 <view class="colour">
81 <view class="colour_exp">*{{navData.colour}}</view> 88 <view class="colour_exp">*{{navData.colour}}</view>
82 </view> 89 </view>
83 <view class="D3_list"> 90 <view class="D3_list" v-bind:class="{'colour2_none' : isNone[3].state}">
84 <view> 91 <view>
85 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view> 92 <view><image class="D3_image" v-bind:src ="parameter[0].img"></image></view>
86 <view class="D3_list_jDu"> 93 <view class="D3_list_jDu">
87 <view class="D3_list1"> 94 <view class="D3_list1">
88 <c-progress class="c-progress" :inner_widthProp="300"/> 95 <c-progress class="c-progress" :inner_widthProp="300"/>
89 <text>{{details.data.frame_width}}mm</text> 96 <text>{{details.data.frame_width}}mm</text>
90 </view> 97 </view>
91 <view>{{parameter[0].standard}}</view> 98 <view>{{parameter[0].standard}}</view>
92 </view> 99 </view>
93 </view> 100 </view>
94 <view> 101 <view>
95 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view> 102 <view><image class="D3_image" v-bind:src ="parameter[1].img"></image></view>
96 <view class="D3_list_jDu"> 103 <view class="D3_list_jDu">
97 <view class="D3_list1"> 104 <view class="D3_list1">
98 <c-progress class="c-progress" :inner_widthProp="190"/> 105 <c-progress class="c-progress" :inner_widthProp="190"/>
99 <view>{{details.data.glass_width}}mm</view> 106 <view>{{details.data.glass_width}}mm</view>
100 </view> 107 </view>
101 <view>{{parameter[1].standard}}</view> 108 <view>{{parameter[1].standard}}</view>
102 </view> 109 </view>
103 </view> 110 </view>
104 <view> 111 <view>
105 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view> 112 <view><image class="D3_image" v-bind:src ="parameter[2].img"></image></view>
106 <view class="D3_list_jDu"> 113 <view class="D3_list_jDu">
107 <view class="D3_list1"> 114 <view class="D3_list1">
108 <c-progress class="c-progress" :inner_widthProp="210"/> 115 <c-progress class="c-progress" :inner_widthProp="210"/>
109 <view>{{details.data.glass_height}}mm</view> 116 <view>{{details.data.glass_height}}mm</view>
110 </view> 117 </view>
111 <view>{{parameter[2].standard}}</view> 118 <view>{{parameter[2].standard}}</view>
112 </view> 119 </view>
113 </view> 120 </view>
114 <view> 121 <view>
115 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view> 122 <view><image class="D3_image" v-bind:src ="parameter[3].img"></image></view>
116 <view class="D3_list_jDu"> 123 <view class="D3_list_jDu">
117 124
118 <view class="D3_list1"> 125 <view class="D3_list1">
119 <c-progress class="c-progress" :inner_widthProp="160"/> 126 <c-progress class="c-progress" :inner_widthProp="160"/>
120 <view>{{details.data.nose_width}}mm</view> 127 <view>{{details.data.nose_width}}mm</view>
121 </view> 128 </view>
122 <view>{{parameter[3].standard}}</view> 129 <view>{{parameter[3].standard}}</view>
123 </view> 130 </view>
124 </view> 131 </view>
125 <view> 132 <view>
126 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view> 133 <view><image class="D3_image" v-bind:src ="parameter[4].img"></image></view>
127 <view class="D3_list_jDu"> 134 <view class="D3_list_jDu">
128 <view class="D3_list1"> 135 <view class="D3_list1">
129 <c-progress class="c-progress" :inner_widthProp="260"/> 136 <c-progress class="c-progress" :inner_widthProp="260"/>
130 <view>{{details.data.leg_long}}mm</view> 137 <view>{{details.data.leg_long}}mm</view>
131 </view> 138 </view>
132 <view>{{parameter[4].standard}}</view> 139 <view>{{parameter[4].standard}}</view>
133 </view> 140 </view>
134 </view> 141 </view>
135 <hr/>
136 </view> 142 </view>
143 <hr/>
137 </view> 144 </view>
138 <view class="part"> 145 <view class="part">
139 <view class="size1"> 146 <view class="size1" @click="xialachange(4)">
140 <view class="size1_1">配件</view> 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 </view> 149 </view>
143 <view class="colour_exp">*0290</view> 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 <view 152 <view
146 v-for="(part) in part" 153 v-for="(part) in part"
147 :key="part.key" 154 :key="part.key"
148 v-bind:class="{'size_viewed': part.is_actived}" 155 v-bind:class="{'size_viewed': part.is_actived}"
149 > 156 >
150 <image v-bind:src="part.img"></image> 157 <image v-bind:src="part.img"></image>
151 </view> 158 </view>
152 </view> 159 </view>
153 </view> 160 </view>
154 </view> 161 </view>
155 <view class="buy"> 162 <view class="buy">
156 <view class="buy1">选了镜框，想选镜片？</view> 163 <view class="buy1">选了镜框，想选镜片？</view>
157 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view> 164 <view class="buy2">系统已为你保存好已选镜框，放心去选镜片吧！</view>
158 <view class="buy3"> 165 <view class="buy3">
159 <view class="buy3_1">暂时不选</view> 166 <view class="buy3_1">暂时不选</view>
160 <view class="buy3_2" @click="popArgs">立即去选</view> 167 <view class="buy3_2" @click="popArgs">立即去选</view>
161 </view> 168 </view>
162 </view> 169 </view>
163 <template > 170 <template >
164 <view class="goods-form"> 171 <view class="goods-form">
165 <text class="p1">填写验光数据</text> 172 <text class="p1">填写验光数据</text>
166 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 173 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
167 <view class="picker" > 174 <view class="picker" >
168 <view class="picker-choice"> 175 <view class="picker-choice">
169 <view class="choice-left"> 176 <view class="choice-left">
170 <text class="p11">{{pickerInfoList[0].nameC}}</text> 177 <text class="p11">{{pickerInfoList[0].nameC}}</text>
171 <text class="p12">{{pickerInfoList[0].nameE}}</text> 178 <text class="p12">{{pickerInfoList[0].nameE}}</text>
172 </view> 179 </view>
173 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 180 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
174 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> 181 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
175 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 182 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
176 <image src="../../static/detail-tabicon.png" ></image> 183 <image src="../../static/detail-tabicon.png" ></image>
177 </picker> 184 </picker>
178 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 185 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
179 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> 186 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
180 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 187 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
181 <image src="../../static/detail-tabicon.png" ></image> 188 <image src="../../static/detail-tabicon.png" ></image>
182 </picker> 189 </picker>
183 </view> 190 </view>
184 </view> 191 </view>
185 <view class="picker" > 192 <view class="picker" >
186 <view class="picker-choice"> 193 <view class="picker-choice">
187 <view class="choice-left"> 194 <view class="choice-left">
188 <text class="p11">{{pickerInfoList[1].nameC}}</text> 195 <text class="p11">{{pickerInfoList[1].nameC}}</text>
189 <text class="p12">{{pickerInfoList[1].nameE}}</text> 196 <text class="p12">{{pickerInfoList[1].nameE}}</text>
190 </view> 197 </view>
191 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 198 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
192 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> 199 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
193 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 200 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
194 <image src="../../static/detail-tabicon.png" ></image> 201 <image src="../../static/detail-tabicon.png" ></image>
195 </picker> 202 </picker>
196 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 203 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
197 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> 204 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
198 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 205 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
199 <image src="../../static/detail-tabicon.png" ></image> 206 <image src="../../static/detail-tabicon.png" ></image>
200 </picker> 207 </picker>
201 </view> 208 </view>
202 </view> 209 </view>
203 <view class="picker" > 210 <view class="picker" >
204 <view class="picker-choice"> 211 <view class="picker-choice">
205 <view class="choice-left"> 212 <view class="choice-left">
206 <text class="p11">{{pickerInfoList[2].nameC}}</text> 213 <text class="p11">{{pickerInfoList[2].nameC}}</text>
207 <text class="p12">{{pickerInfoList[2].nameE}}</text> 214 <text class="p12">{{pickerInfoList[2].nameE}}</text>
208 </view> 215 </view>
209 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 216 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
210 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> 217 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
211 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 218 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
212 <image src="../../static/detail-tabicon.png" ></image> 219 <image src="../../static/detail-tabicon.png" ></image>
213 </picker> 220 </picker>
214 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 221 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
215 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> 222 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
216 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 223 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
217 <image src="../../static/detail-tabicon.png" ></image> 224 <image src="../../static/detail-tabicon.png" ></image>
218 </picker> 225 </picker>
219 </view> 226 </view>
220 </view> 227 </view>
221 <view class="picker" > 228 <view class="picker" >
222 <view class="picker-choice"> 229 <view class="picker-choice">
223 <view class="choice-left"> 230 <view class="choice-left">
224 <text class="p11">{{pickerInfoList[3].nameC}}</text> 231 <text class="p11">{{pickerInfoList[3].nameC}}</text>
225 <text class="p12">{{pickerInfoList[3].nameE}}</text> 232 <text class="p12">{{pickerInfoList[3].nameE}}</text>
226 </view> 233 </view>
227 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 234 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
228 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> 235 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
229 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 236 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
230 <image src="../../static/detail-tabicon.png" ></image> 237 <image src="../../static/detail-tabicon.png" ></image>
231 </picker> 238 </picker>
232 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 239 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
233 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> 240 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
234 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 241 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
235 <image src="../../static/detail-tabicon.png" ></image> 242 <image src="../../static/detail-tabicon.png" ></image>
236 </picker> 243 </picker>
237 </view> 244 </view>
238 </view> 245 </view>
239 <view class="picker" > 246 <view class="picker" >
240 <view class="picker-choice"> 247 <view class="picker-choice">
241 <view class="choice-left"> 248 <view class="choice-left">
242 <text class="p11">{{pickerInfoList[4].nameC}}</text> 249 <text class="p11">{{pickerInfoList[4].nameC}}</text>
243 </view> 250 </view>
244 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 251 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
245 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> 252 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
246 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> 253 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
247 <image src="../../static/detail-tabicon.png" ></image> 254 <image src="../../static/detail-tabicon.png" ></image>
248 </picker> 255 </picker>
249 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 256 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
250 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> 257 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
251 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> 258 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
252 <image src="../../static/detail-tabicon.png" ></image> 259 <image src="../../static/detail-tabicon.png" ></image>
253 </picker> 260 </picker>
254 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 261 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
255 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> 262 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
256 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> 263 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
257 <image src="../../static/detail-tabicon.png" ></image> 264 <image src="../../static/detail-tabicon.png" ></image>
258 </picker> 265 </picker>
259 </view> 266 </view>
260 </view> 267 </view>
261 <view class="confirm"> 268 <view class="confirm">
262 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> 269 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
263 <text>确认以上输入信息来源于我的验光数据!</text> 270 <text>确认以上输入信息来源于我的验光数据!</text>
264 </view> 271 </view>
265 </view> 272 </view>
266 273
267 </template> 274 </template>
268 <view class="zhanwei"></view> 275 <view class="zhanwei"></view>
269 <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view> 276 <view class="button" @click="popSure(details.data.p_name,details.data.p_sale_price)" ><view>立即结算</view></view>
270 </view> 277 </view>
271 </template> 278 </template>
272 <script> 279 <script>
273 import CProgress from '../../components/UniSliper/UniSliper' 280 import CProgress from '../../components/UniSliper/UniSliper'
274 import store from '@/store' 281 import store from '@/store'
275 282
276 export default { 283 export default {
277 components: { 284 components: {
278 CProgress 285 CProgress
279 }, 286 },
280 data(){ 287 data(){
281 return{ 288 return{
282 count: 1, 289 count: 1,
283 chooseNum : '', 290 chooseNum : '',
284 isSplit: '' , 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 navData:{ 301 navData:{
288 pid: "26", 302 pid: "26",
289 p_root_index: "4", 303 p_root_index: "4",
290 name:'', 304 name:'',
291 price:'', 305 price:'',
292 split: '1.56非球面防蓝光', 306 split: '1.56非球面防蓝光',
293 colour: '1.56非球面防蓝光_亚黑色', 307 colour: '1.56非球面防蓝光_亚黑色',
294 }, 308 },
295 309
296 //尺寸 310 //尺寸
297 parameter:[ 311 parameter:[
298 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139}, 312 {key: 0,img:'/static/img/detail/d2.png', standard:'框架宽', slength:139},
299 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51}, 313 {key: 1,img:'/static/img/detail/d3.png', standard:'镜片宽', slength:51},
300 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45}, 314 {key: 2,img:'/static/img/detail/d4.png', standard:'镜片高', slength:45},
301 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19}, 315 {key: 3,img:'/static/img/detail/d5.png', standard:'鼻架宽', slength:19},
302 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138}, 316 {key: 4,img:'/static/img/detail/d6.png', standard:'框架耳长', slength:138},
303 ], 317 ],
304 //镜片颜色 318 //镜片颜色
305 jp_colour:[ 319 jp_colour:[
306 {img:'/static/img/detail/Kuang/sun_jp.png'}, 320 {img:'/static/img/detail/Kuang/sun_jp.png'},
307 {img:'/static/img/detail/Kuang/sun_jp.png'}, 321 {img:'/static/img/detail/Kuang/sun_jp.png'},
308 {img:'/static/img/detail/Kuang/sun_jp.png'}, 322 {img:'/static/img/detail/Kuang/sun_jp.png'},
309 {img:'/static/img/detail/Kuang/sun_jp.png'}, 323 {img:'/static/img/detail/Kuang/sun_jp.png'},
310 {img:'/static/img/detail/Kuang/sun_jp.png'}, 324 {img:'/static/img/detail/Kuang/sun_jp.png'},
311 {img:'/static/img/detail/Kuang/sun_jp.png'} 325 {img:'/static/img/detail/Kuang/sun_jp.png'}
312 ], 326 ],
313 //配饰 327 //配饰
314 part:[ 328 part:[
315 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true}, 329 {key: 0,img:'/static/img/detail/Kuang/g1.png',is_actived:true},
316 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 330 {key: 1,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
317 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, 331 {key: 2,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
318 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 332 {key: 3,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
319 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false}, 333 {key: 4,img:'/static/img/detail/Kuang/g1.png',is_actived:false},
320 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, 334 {key: 5,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
321 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false}, 335 {key: 6,img:'/static/img/detail/Kuang/g3.png',is_actived:false},
322 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false}, 336 {key: 7,img:'/static/img/detail/Kuang/g2.png',is_actived:false},
323 ], 337 ],
324 opIsOpen:true, 338 opIsOpen:true,
325 tablist: { 339 tablist: {
326 // read: true, 340 // read: true,
327 // seeLong: false, 341 // seeLong: false,
328 confirm: false 342 confirm: false
329 }, 343 },
330 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], 344 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
331 // 度数相关数据 345 // 度数相关数据
332 pickerInfoList:[ 346 pickerInfoList:[
333 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0}, 347 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
334 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1}, 348 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
335 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2}, 349 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
336 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3}, 350 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
337 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0} 351 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
338 ], 352 ],
339 } 353 }
340 }, 354 },
341 355
342 computed: { 356 computed: {
343 details(){ 357 details(){
344 return this.$store.state.detailStandard_k.list 358 return this.$store.state.detailStandard_k.list
345 }, 359 },
346 }, 360 },
347 onLoad:function(){ 361 onLoad:function(){
348 store.dispatch('detailStandard_k/fetch', { 362 store.dispatch('detailStandard_k/fetch', {
349 uid: "1", 363 uid: "1",
350 pid: "26", 364 pid: "26",
351 p_root_index: "4" 365 p_root_index: "4"
352 }); 366 });
353 }, 367 },
354 methods: { 368 methods: {
355 counter(isadd){ 369 counter(isadd){
356 if(isadd){ 370 if(isadd){
357 this.count++ 371 this.count++
358 }else{ 372 }else{
359 this.count <= 1? this.disabled = true:this.count-- 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 colourChange(index,e){ 384 colourChange(index,e){
363 this.navData.colour = e ; //颜色选择 385 this.navData.colour = e ; //颜色选择
364 386
365 }, 387 },
366 viewChoose(index){ 388 viewChoose(index){
367 this.chooseNum = index 389 this.chooseNum = index
368 }, 390 },
369 //折射率选择 391 //折射率选择
370 splitChoose(index,e){ 392 splitChoose(index,e){
371 this.isSplit = index 393 this.isSplit = index
372 this.navData.split = e 394 this.navData.split = e
373 }, 395 },
374 //跳转镜片选购页 396 //跳转镜片选购页
375 popArgs(){ 397 popArgs(){
376 uni.navigateTo({ 398 uni.navigateTo({
377 url: '../detailsChoiceArgs/detailsChoiceArgs', 399 url: '../detailsChoiceArgs/detailsChoiceArgs',
378 success: res => {}, 400 success: res => {},
379 fail: () => {}, 401 fail: () => {},
380 complete: () => {} 402 complete: () => {}
381 }); 403 });
382 }, 404 },
383 //跳转确认订单页及传参 405 //跳转确认订单页及传参
384 popSure(name,price){ 406 popSure(name,price){
385 this.navData.name = name; 407 this.navData.name = name;
386 this.navData.price = price; 408 this.navData.price = price;
387 var navData = JSON.stringify(this.navData); 409 var navData = JSON.stringify(this.navData);
388 uni.navigateTo({ 410 uni.navigateTo({
389 url: '../confirmOrder/confirmOrder?index='+navData, 411 url: '../confirmOrder/confirmOrder?index='+navData,
390 }); 412 });
391 console.log(this.navData) 413 console.log(this.navData)
392 }, 414 },
393 //验光表 415 //验光表
394 changeConfirm() { 416 changeConfirm() {
395 this.tablist.confirm = !this.tablist.confirm 417 this.tablist.confirm = !this.tablist.confirm
396 }, 418 },
397 bindPickerChange01: function(e) { 419 bindPickerChange01: function(e) {
398 this.pickerInfoList[0].nameIndex1 = e.target.value 420 this.pickerInfoList[0].nameIndex1 = e.target.value
399 }, 421 },
400 bindPickerChange02: function(e) { 422 bindPickerChange02: function(e) {
401 this.pickerInfoList[0].nameIndex2 = e.target.value 423 this.pickerInfoList[0].nameIndex2 = e.target.value
402 }, 424 },
403 425
404 bindPickerChange11: function(e) { 426 bindPickerChange11: function(e) {
405 this.pickerInfoList[1].nameIndex1 = e.target.value 427 this.pickerInfoList[1].nameIndex1 = e.target.value
406 }, 428 },
407 bindPickerChange12: function(e) { 429 bindPickerChange12: function(e) {
408 this.pickerInfoList[1].nameIndex2 = e.target.value 430 this.pickerInfoList[1].nameIndex2 = e.target.value
409 }, 431 },
410 432
411 bindPickerChange21: function(e) { 433 bindPickerChange21: function(e) {
412 this.pickerInfoList[2].nameIndex1 = e.target.value 434 this.pickerInfoList[2].nameIndex1 = e.target.value
413 }, 435 },
414 bindPickerChange22: function(e) { 436 bindPickerChange22: function(e) {
415 this.pickerInfoList[2].nameIndex2 = e.target.value 437 this.pickerInfoList[2].nameIndex2 = e.target.value
416 }, 438 },
417 439
418 bindPickerChange31: function(e) { 440 bindPickerChange31: function(e) {
419 this.pickerInfoList[3].nameIndex1 = e.target.value 441 this.pickerInfoList[3].nameIndex1 = e.target.value
420 }, 442 },
421 bindPickerChange32: function(e) { 443 bindPickerChange32: function(e) {
422 this.pickerInfoList[3].nameIndex2 = e.target.value 444 this.pickerInfoList[3].nameIndex2 = e.target.value
423 }, 445 },
424 446
425 bindPickerChange41: function(e) { 447 bindPickerChange41: function(e) {
426 this.pickerInfoList[4].nameIndex1 = e.target.value 448 this.pickerInfoList[4].nameIndex1 = e.target.value
427 }, 449 },
428 bindPickerChange42: function(e) { 450 bindPickerChange42: function(e) {
429 this.pickerInfoList[4].nameIndex2 = e.target.value 451 this.pickerInfoList[4].nameIndex2 = e.target.value
430 }, 452 },
431 bindPickerChange43: function(e) { 453 bindPickerChange43: function(e) {
432 this.pickerInfoList[4].nameIndex3 = e.target.value 454 this.pickerInfoList[4].nameIndex3 = e.target.value
433 }, 455 },
434 } 456 }
435 457
436 } 458 }
437 </script> 459 </script>
438 460
439 <style lang="scss"> 461 <style lang="scss">
440 .container{ 462 .container{
441 min-height: 100vh; 463 min-height: 100vh;
442 background: #F2F2F2; 464 background: #F2F2F2;
443 padding-top: 10px; 465 padding-top: 10px;
444 box-sizing: border-box; 466 box-sizing: border-box;
445 } 467 }
446 hr{ 468 hr{
447 border: none; 469 border: none;
448 height: 1px; 470 height: 1px;
449 background: #F2F2F2; 471 background: #F2F2F2;
450 margin-top: 18px; 472 margin-top: 18px;
451 margin-bottom: 10px; 473 margin-bottom: 10px;
452 } 474 }
453 .detail{ 475 .detail{
454 height: 272rpx; 476 height: 272rpx;
455 background: #FFFFFF; 477 background: #FFFFFF;
456 border-radius: 8px; 478 border-radius: 8px;
457 padding: 16px; 479 padding: 16px;
458 box-sizing: border-box; 480 box-sizing: border-box;
459 display: flex; 481 display: flex;
460 justify-content: space-between; 482 justify-content: space-between;
461 align-items: center; 483 align-items: center;
462 } 484 }
463 .detail1{ 485 .detail1{
464 height: 178rpx; 486 height: 178rpx;
465 width: 188rpx; 487 width: 188rpx;
466 image{ 488 image{
467 width: 100%; 489 width: 100%;
468 height: 100%; 490 height: 100%;
469 border-radius: 8px; 491 border-radius: 8px;
470 } 492 }
471 } 493 }
472 .detail2{ 494 .detail2{
473 width: 68%; 495 width: 68%;
474 view{ 496 view{
475 margin-bottom: 6px; 497 margin-bottom: 6px;
476 font-family: PingFangSC-Regular; 498 font-family: PingFangSC-Regular;
477 } 499 }
478 .detail2_name{ 500 .detail2_name{
479 font-size: 14px; 501 font-size: 14px;
480 color: #333333; 502 color: #333333;
481 letter-spacing: -0.26px; 503 letter-spacing: -0.26px;
482 line-height: 18px; 504 line-height: 18px;
483 overflow:hidden; 505 overflow:hidden;
484 text-overflow:ellipsis; 506 text-overflow:ellipsis;
485 display:-webkit-box; 507 display:-webkit-box;
486 -webkit-box-orient:vertical; 508 -webkit-box-orient:vertical;
487 -webkit-line-clamp:2; 509 -webkit-line-clamp:2;
488 } 510 }
489 .detail2_tui{ 511 .detail2_tui{
490 font-size: 10px; 512 font-size: 10px;
491 color: #999999; 513 color: #999999;
492 letter-spacing: -0.19px; 514 letter-spacing: -0.19px;
493 span{ 515 span{
494 margin-right: 10px; 516 margin-right: 10px;
495 } 517 }
496 } 518 }
497 .detail2_price{ 519 .detail2_price{
498 font-size: 14px; 520 font-size: 14px;
499 color: #FF6B4A; 521 color: #FF6B4A;
500 letter-spacing: -0.26px; 522 letter-spacing: -0.26px;
501 } 523 }
502 } 524 }
503 .counter{ 525 .counter{
504 display: flex; 526 display: flex;
505 flex-direction: row; 527 flex-direction: row;
506 justify-content: space-between; 528 justify-content: space-between;
507 font-size: 28rpx; 529 font-size: 28rpx;
508 color: #333333; 530 color: #333333;
509 width: 122rpx; 531 width: 122rpx;
510 float: right; 532 float: right;
511 .btn{ 533 .btn{
512 display: flex; 534 display: flex;
513 justify-content: center; 535 justify-content: center;
514 line-height: 32rpx; 536 line-height: 32rpx;
515 height: 32rpx; 537 height: 32rpx;
516 width: 32rpx; 538 width: 32rpx;
517 background-color: #F2F2F2; 539 background-color: #F2F2F2;
518 color: #CFCFCF; 540 color: #CFCFCF;
519 } 541 }
520 } 542 }
521 .choose{ 543 .choose{
522 background: #FFFFFF; 544 background: #FFFFFF;
523 padding: 16px; 545 padding: 16px;
524 box-sizing: border-box; 546 box-sizing: border-box;
525 margin-top: 10px; 547 margin-top: 10px;
526 border-radius: 8px; 548 border-radius: 8px;
527 .colour1{ 549 .colour1{
528 span{ 550 span{
529 font-family: PingFangSC-Medium; 551 font-family: PingFangSC-Medium;
530 font-size: 16px; 552 font-size: 16px;
531 color: #333333; 553 color: #333333;
532 letter-spacing: -0.3px; 554 letter-spacing: -0.3px;
533 text-align: justify; 555 text-align: justify;
534 line-height: 24px; 556 line-height: 24px;
535 font-weight: bold; 557 font-weight: bold;
536 } 558 }
537 image{ 559 image{
538 float: right; 560 float: right;
539 width: 40rpx; 561 width: 40rpx;
540 height: 36rpx; 562 height: 36rpx;
541 } 563 }
542 .colour1_span2{ 564 .colour1_span2{
543 font-family: PingFangSC-Regular; 565 font-family: PingFangSC-Regular;
544 font-size: 12px; 566 font-size: 12px;
545 color: #666666; 567 color: #666666;
546 margin-left: 10px; 568 margin-left: 10px;
547 font-weight: normal 569 font-weight: normal
548 } 570 }
549 } 571 }
550 .colour_exp{ 572 .colour_exp{
551 font-family: PingFangSC-Regular; 573 font-family: PingFangSC-Regular;
552 font-size: 12px; 574 font-size: 12px;
553 color: #666666; 575 color: #666666;
554 letter-spacing: 0; 576 letter-spacing: 0;
555 margin-top: 10px; 577 margin-top: 10px;
556 margin-bottom: 10px; 578 margin-bottom: 10px;
557 } 579 }
558 .colour2{ 580 .colour2{
559 display: grid; 581 display: grid;
560 grid-template-columns: repeat(5, 17%); 582 grid-template-columns: repeat(5, 17%);
561 justify-content: space-between ; 583 justify-content: space-between ;
562 grid-row-gap: 10px; 584 grid-row-gap: 10px;
563 margin-bottom: 14px; 585 margin-bottom: 14px;
564 .colour2_view{ 586 .colour2_view{
565 border: 1px solid #F2F2F2; 587 border: 1px solid #F2F2F2;
566 image{ 588 image{
567 width: 100rpx; 589 width: 100rpx;
568 height: 60rpx; 590 height: 60rpx;
569 } 591 }
570 } 592 }
571 .colour2_viewed{ 593 .colour2_viewed{
572 border: 1px solid #FF6B4A; 594 border: 1px solid #FF6B4A;
573 image{ 595 image{
574 width: 100rpx; 596 width: 100rpx;
575 height: 60rpx; 597 height: 60rpx;
576 } 598 }
577 } 599 }
578 } 600 }
601 .colour2_none{
602 display: none;
603 }
579 } 604 }
580 .jp_colour2{ 605 .jp_colour2{
581 display: grid; 606 display: grid;
582 grid-template-columns: repeat(5, 13%); 607 grid-template-columns: repeat(5, 13%);
583 justify-content: start ; 608 justify-content: start ;
584 grid-column-gap: 10px; 609 grid-column-gap: 10px;
585 grid-row-gap: 10px; 610 grid-row-gap: 10px;
586 margin-bottom: 14px; 611 margin-bottom: 14px;
587 .jp_colour2_view{ 612 .jp_colour2_view{
588 border: 1px solid #F2F2F2; 613 border: 1px solid #F2F2F2;
589 image{ 614 image{
590 width: 80rpx; 615 width: 80rpx;
591 height: 80rpx; 616 height: 80rpx;
592 } 617 }
593 } 618 }
594 } 619 }
595 .split{ 620 .split{
596 display: grid; 621 display: grid;
597 grid-template-columns: repeat(2, 45%); 622 grid-template-columns: repeat(2, 45%);
598 grid-column-gap: 10px; 623 grid-column-gap: 10px;
599 grid-row-gap: 10px; 624 grid-row-gap: 10px;
600 margin-top: 10px ; 625 margin-top: 10px ;
601 .split_colour2{ 626 .split_colour2{
602 display: flex; 627 display: flex;
603 justify-content: center; 628 justify-content: center;
604 align-items: center; 629 align-items: center;
605 width: 300rpx; 630 width: 300rpx;
606 height: 60rpx; 631 height: 60rpx;
607 background: #F2F2F2; 632 background: #F2F2F2;
608 border-radius: 2px; 633 border-radius: 2px;
609 font-family: PingFangSC-Regular; 634 font-family: PingFangSC-Regular;
610 font-size: 12px; 635 font-size: 12px;
611 color: #666666; 636 color: #666666;
612 letter-spacing: 0; 637 letter-spacing: 0;
613 text-align: center; 638 text-align: center;
614 } 639 }
615 .split_colour2_actived{ 640 .split_colour2_actived{
616 background: rgba(255,107,74,0.15); 641 background: rgba(255,107,74,0.15);
617 color: #FF6B4A; 642 color: #FF6B4A;
618 } 643 }
619 } 644 }
620 .size,.part{ 645 .size,.part{
621 margin-top:14px; 646 margin-top:14px;
622 .size1{ 647 .size1{
623 display: flex; 648 display: flex;
624 justify-content: space-between; 649 justify-content: space-between;
625 margin-bottom: 10px; 650 margin-bottom: 10px;
626 .size1_1{ 651 .size1_1{
627 font-weight: bold; 652 font-weight: bold;
628 font-family: PingFangSC-Medium; 653 font-family: PingFangSC-Medium;
629 font-size: 16px; 654 font-size: 16px;
630 color: #333333; 655 color: #333333;
631 letter-spacing: -0.3px; 656 letter-spacing: -0.3px;
632 line-height: 24px; 657 line-height: 24px;
633 } 658 }
634 view{ 659 view{
635 span{ 660 span{
636 font-family: PingFangSC-Regular; 661 font-family: PingFangSC-Regular;
637 font-size: 14px; 662 font-size: 14px;
638 color: #FF6B4A; 663 color: #FF6B4A;
639 letter-spacing: -0.26px; 664 letter-spacing: -0.26px;
640 margin-right: 12px; 665 margin-right: 12px;
641 } 666 }
642 image{ 667 image{
643 width: 40rpx; 668 width: 40rpx;
644 height: 36rpx; 669 height: 36rpx;
645 } 670 }
646 } 671 }
647 } 672 }
648 .size2{ 673 .size2{
649 view{ 674 view{
650 display: inline-flex; 675 display: inline-flex;
651 align-items: center; 676 align-items: center;
652 justify-content: center; //字体居中 677 justify-content: center; //字体居中
653 margin-right: 12px; 678 margin-right: 12px;
654 margin-bottom: 20px; 679 margin-bottom: 20px;
655 width: 136rpx; 680 width: 136rpx;
656 height: 60rpx; 681 height: 60rpx;
657 background: #F2F2F2; 682 background: #F2F2F2;
658 border-radius: 2px; 683 border-radius: 2px;
659 font-family: PingFangSC-Regular; 684 font-family: PingFangSC-Regular;
660 font-size: 12px; 685 font-size: 12px;
661 color: #666666; 686 color: #666666;
662 } 687 }
663 view:hover{ 688 view:hover{
664 color: #FF6B4A; 689 color: #FF6B4A;
665 background: rgba(255,107,74,0.15); 690 background: rgba(255,107,74,0.15);
666 } 691 }
667 } 692 }
668 .D3_list{ 693 .D3_list{
669 margin-bottom: 4px; 694 margin-bottom: 4px;
670 } 695 }
671 .D3_list>view{ 696 .D3_list>view{
672 display: flex; 697 display: flex;
673 align-content: center; 698 align-content: center;
674 margin-bottom: 10px; 699 margin-bottom: 10px;
675 view{ 700 view{
676 margin-right: 10px; 701 margin-right: 10px;
677 } 702 }
678 } 703 }
679 .D3_list image{ 704 .D3_list image{
680 width: 50px; 705 width: 50px;
681 height: 25px; 706 height: 25px;
682 margin-right: 6px; 707 margin-right: 6px;
683 } 708 }
684 .D3_list span{ 709 .D3_list span{
685 margin-left: 6px; 710 margin-left: 6px;
686 margin-right: 5px; 711 margin-right: 5px;
687 font-family: 'PingFangSC-Regular'; 712 font-family: 'PingFangSC-Regular';
688 } 713 }
689 .D3_list_jDu{ 714 .D3_list_jDu{
690 view{ 715 view{
691 font-family: PingFangSC-Regular; 716 font-family: PingFangSC-Regular;
692 font-size: 10px; 717 font-size: 10px;
693 color: #999999; 718 color: #999999;
694 letter-spacing: -0.19px; 719 letter-spacing: -0.19px;
695 } 720 }
696 .D3_list1{ 721 .D3_list1{
697 display: flex; 722 display: flex;
698 } 723 }
699 } 724 }
700 } 725 }
701 .part{ 726 .part{
702 .part_som{ 727 .part_som{
703 display: grid; 728 display: grid;
704 justify-content: space-between; 729 justify-content: space-between;
705 grid-template-columns: repeat(4, 22%); 730 grid-template-columns: repeat(4, 22%);
706 grid-row-gap: 12px; 731 grid-row-gap: 12px;
707 margin-bottom: 14px; 732 margin-bottom: 14px;
708 view{ 733 view{
709 border: 1px solid #F2F2F2; 734 border: 1px solid #F2F2F2;
710 height: 72rpx; 735 height: 72rpx;
711 image{ 736 image{
712 width: 100%; 737 width: 100%;
713 height: 100%; 738 height: 100%;
714 } 739 }
715 } 740 }
716 .size_viewed{ 741 .size_viewed{
717 border: 1px solid #FF6B4A; 742 border: 1px solid #FF6B4A;
718 height: 72rpx; 743 height: 72rpx;
719 image{ 744 image{
720 width: 100%; 745 width: 100%;
721 height: 100%; 746 height: 100%;
722 } 747 }
723 } 748 }
724 } 749 }
750 .colour2_none{
751 display: none;
752 }
725 } 753 }
726 754
727 .buy{ 755 .buy{
728 height: 300rpx; 756 height: 300rpx;
729 background: #FFFFFF ; 757 background: #FFFFFF ;
730 margin-top: 10px; 758 margin-top: 10px;
731 border-radius: 8px; 759 border-radius: 8px;
732 padding-top: 20px; 760 padding-top: 20px;
733 box-sizing: border-box; 761 box-sizing: border-box;
734 margin-bottom: 10px; 762 margin-bottom: 10px;
735 } 763 }
736 .buy1{ 764 .buy1{
737 font-family: PingFangSC-Medium; 765 font-family: PingFangSC-Medium;
738 font-size: 16px; 766 font-size: 16px;
739 font-weight: bold; 767 font-weight: bold;
740 color: #333333; 768 color: #333333;
741 text-align: center; 769 text-align: center;
742 } 770 }
743 .buy2{ 771 .buy2{
744 font-family: PingFangSC-Regular; 772 font-family: PingFangSC-Regular;
745 font-size: 12px; 773 font-size: 12px;
746 color: #999999; 774 color: #999999;
747 text-align: center; 775 text-align: center;
748 margin: 10px; 776 margin: 10px;
749 } 777 }
750 .buy3{ 778 .buy3{
751 font-family: PingFangSC-Regular; 779 font-family: PingFangSC-Regular;
752 font-size: 16px; 780 font-size: 16px;
753 display: flex; 781 display: flex;
754 justify-content: center; 782 justify-content: center;
755 margin-top: 14px; 783 margin-top: 14px;
756 view{ 784 view{
757 border-radius: 20px; 785 border-radius: 20px;
758 width: 240rpx; 786 width: 240rpx;
759 height: 80rpx; 787 height: 80rpx;
760 display: flex; 788 display: flex;
761 justify-content: center; 789 justify-content: center;
762 align-items: center; 790 align-items: center;
763 } 791 }
764 .buy3_1{ 792 .buy3_1{
765 margin-right: 20px; 793 margin-right: 20px;
766 background: rgba(255,107,74,0.15); 794 background: rgba(255,107,74,0.15);
767 color: #FF6B4A ; 795 color: #FF6B4A ;
768 } 796 }
769 .buy3_2{ 797 .buy3_2{
770 background: #FF6B4A; 798 background: #FF6B4A;
771 color: #FFFFFF ; 799 color: #FFFFFF ;
772 } 800 }
773 } 801 }
774 .zhanwei{ 802 .zhanwei{
775 background: #F2F2F2; 803 background: #F2F2F2;
776 height: 200rpx; 804 height: 200rpx;
777 } 805 }
778 .goods-form { 806 .goods-form {
779 display: flex; 807 display: flex;
780 flex-direction: column; 808 flex-direction: column;
781 align-items: center; 809 align-items: center;
782 justify-content: center; 810 justify-content: center;
783 background-color: #fff; 811 background-color: #fff;
784 width: 100%; 812 width: 100%;
785 padding-top:20px; 813 padding-top:20px;
786 padding-bottom:20px; 814 padding-bottom:20px;
787 box-sizing: border-box; 815 box-sizing: border-box;
788 816
789 .p1 { 817 .p1 {
790 font-size: 16px; 818 font-size: 16px;
791 color: #333333; 819 color: #333333;
792 letter-spacing: -0.3px; 820 letter-spacing: -0.3px;
793 text-align: justify; 821 text-align: justify;
794 line-height: 24px; 822 line-height: 24px;
795 margin: 4px 0; 823 margin: 4px 0;
796 } 824 }
797 .p2 { 825 .p2 {
798 font-size: 12px; 826 font-size: 12px;
799 color: #999999; 827 color: #999999;
800 letter-spacing: -0.23px; 828 letter-spacing: -0.23px;
801 margin-bottom: 18rpx; 829 margin-bottom: 18rpx;
802 } 830 }
803 image{ 831 image{
804 width: 28rpx; 832 width: 28rpx;
805 height: 26rpx; 833 height: 26rpx;
806 } 834 }
807 .confirm { 835 .confirm {
808 display: flex; 836 display: flex;
809 align-items: center; 837 align-items: center;
810 font-size: 12px; 838 font-size: 12px;
811 color: #666666; 839 color: #666666;
812 letter-spacing: -0.23px; 840 letter-spacing: -0.23px;
813 width: 684rpx; 841 width: 684rpx;
814 image{ 842 image{
815 margin-right:25rpx; 843 margin-right:25rpx;
816 } 844 }
817 } 845 }
818 .picker{ 846 .picker{
819 display: flex; 847 display: flex;
820 flex-direction: column; 848 flex-direction: column;
821 justify-content: center; 849 justify-content: center;
822 align-items: center; 850 align-items: center;
823 width: 100%; 851 width: 100%;
824 image{ 852 image{
825 width: 10px; 853 width: 10px;
826 height: 10px; 854 height: 10px;
827 margin-right: 5px; 855 margin-right: 5px;
828 } 856 }
829 .picker-choice{ 857 .picker-choice{
830 display: flex; 858 display: flex;
831 width: 684rpx; 859 width: 684rpx;
832 align-items: center; 860 align-items: center;
833 margin-bottom: 40rpx; 861 margin-bottom: 40rpx;
834 .choice-left{ 862 .choice-left{
835 width: 210rpx; 863 width: 210rpx;
836 .p11 { 864 .p11 {
837 font-size: 14px; 865 font-size: 14px;
838 color: #333333; 866 color: #333333;
839 letter-spacing: -0.26px; 867 letter-spacing: -0.26px;
840 text-align: justify; 868 text-align: justify;
841 line-height: 24px; 869 line-height: 24px;
842 // margin-right: 10px; 870 // margin-right: 10px;
843 } 871 }
844 .p12 { 872 .p12 {
845 font-size: 10px; 873 font-size: 10px;
846 color: #3F3F3F; 874 color: #3F3F3F;
847 letter-spacing: -0.19px; 875 letter-spacing: -0.19px;
848 text-align: justify; 876 text-align: justify;
849 line-height: 24px; 877 line-height: 24px;
850 } 878 }
851 879
852 880
853 } 881 }
854 .p13 { 882 .p13 {
855 font-size: 10px; 883 font-size: 10px;
856 color: #999999; 884 color: #999999;
857 letter-spacing: -0.19px; 885 letter-spacing: -0.19px;
858 margin-right: 10px; 886 margin-right: 10px;
859 } 887 }
860 .p13-date { 888 .p13-date {
861 font-size: 10px; 889 font-size: 10px;
862 color: #999999; 890 color: #999999;
863 letter-spacing: -0.19px; 891 letter-spacing: -0.19px;
864 margin-right: 5px; 892 margin-right: 5px;
865 } 893 }
866 .p14 { 894 .p14 {
867 font-size: 14px; 895 font-size: 14px;
868 color: #666666; 896 color: #666666;
869 letter-spacing: -0.26px; 897 letter-spacing: -0.26px;
870 text-align: center; 898 text-align: center;
871 width: 124rpx; 899 width: 124rpx;
872 border-bottom: 1px solid #CFCFCF; 900 border-bottom: 1px solid #CFCFCF;
873 } 901 }
874 902
875 } 903 }
876 } 904 }
877 } 905 }
878 .button{ 906 .button{
879 position: fixed; 907 position: fixed;
880 bottom: 0; 908 bottom: 0;
881 width:100%; 909 width:100%;
882 height: 112rpx; 910 height: 112rpx;
883 background: #FF6B4A 100%; 911 background: #FF6B4A 100%;
884 view{ 912 view{
885 color: #FFFFFF; 913 color: #FFFFFF;
886 height: 100%; 914 height: 100%;
887 display: flex; 915 display: flex;
888 justify-content: center; 916 justify-content: center;
889 align-items: center; 917 align-items: center;
890 font-family: PingFangSC-Regular; 918 font-family: PingFangSC-Regular;
891 font-size: 16px; 919 font-size: 16px;
892 } 920 }
893 } 921 }
src/pages/purchaseLenses/purchaseLenses.vue
Diff comments   View file @0c6c0f3
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <view class="goodInfo"> 3 <view class="goodInfo">
4 <view class="imageWrap"> 4 <view class="imageWrap">
5 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> 5 <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
6 </view> 6 </view>
7 <view class="infoRight"> 7 <view class="infoRight">
8 <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> 8 <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>
9 <text class="remarks">支持7天无理由退货 顺丰发货</text> 9 <text class="remarks">支持7天无理由退货 顺丰发货</text>
10 <view class="priceBox"> 10 <view class="priceBox">
11 <view class="price">￥198</view> 11 <view class="price">￥198</view>
12 <text>(限购{{maxCount}}副)</text> 12 <text>(限购{{maxCount}}副)</text>
13 <view class="counter"> 13 <view class="counter">
14 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> 14 <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
15 <text>{{count}}</text> 15 <text>{{count}}</text>
16 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> 16 <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
17 </view> 17 </view>
18 </view> 18 </view>
19 </view> 19 </view>
20 </view> 20 </view>
21 <view class="goods-data"> 21 <view class="goods-data">
22 <view class="opCollapse"> 22 <view class="opCollapse">
23 <view class="body"> 23 <view class="body">
24 <template v-if="opIsOpen"> 24 <template v-if="opIsOpen">
25 <view class="goods-form"> 25 <view class="goods-form">
26 <view class="data-title"> 26 <view class="data-title">
27 <image src="../../static/icon-data.png" ></image> 27 <image src="../../static/icon-data.png" ></image>
28 <text class="p1">填写验光数据</text> 28 <text class="p1">填写验光数据</text>
29 </view> 29 </view>
30 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 30 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
31 <view class="picker" > 31 <view class="picker" >
32 <view class="picker-choice"> 32 <view class="picker-choice">
33 <view class="choice-left"> 33 <view class="choice-left">
34 <text class="p11">验光单取名:</text> 34 <text class="p11">验光单取名:</text>
35 </view> 35 </view>
36 <input class="choice-name uni-input" placeholder="下系" /> 36 <input class="choice-name uni-input" placeholder="下系" />
37 </view> 37 </view>
38 </view> 38 </view>
39 <view class="picker" > 39 <view class="picker" >
40 <view class="picker-choice"> 40 <view class="picker-choice">
41 <view class="choice-left"> 41 <view class="choice-left">
42 <text class="p11">{{pickerInfoList[0].nameC}}</text> 42 <text class="p11">{{pickerInfoList[0].nameC}}</text>
43 <text class="p12">{{pickerInfoList[0].nameE}}</text> 43 <text class="p12">{{pickerInfoList[0].nameE}}</text>
44 </view> 44 </view>
45 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 45 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
46 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> 46 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
47 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 47 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
48 <image src="../../static/detail-tabicon.png" ></image> 48 <image src="../../static/detail-tabicon.png" ></image>
49 </picker> 49 </picker>
50 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 50 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
51 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> 51 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
52 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 52 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
53 <image src="../../static/detail-tabicon.png" ></image> 53 <image src="../../static/detail-tabicon.png" ></image>
54 </picker> 54 </picker>
55 </view> 55 </view>
56 </view> 56 </view>
57 <view class="picker" > 57 <view class="picker" >
58 <view class="picker-choice"> 58 <view class="picker-choice">
59 <view class="choice-left"> 59 <view class="choice-left">
60 <text class="p11">{{pickerInfoList[1].nameC}}</text> 60 <text class="p11">{{pickerInfoList[1].nameC}}</text>
61 <text class="p12">{{pickerInfoList[1].nameE}}</text> 61 <text class="p12">{{pickerInfoList[1].nameE}}</text>
62 </view> 62 </view>
63 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 63 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
64 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> 64 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
65 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 65 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
66 <image src="../../static/detail-tabicon.png" ></image> 66 <image src="../../static/detail-tabicon.png" ></image>
67 </picker> 67 </picker>
68 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 68 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
69 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> 69 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
70 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 70 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
71 <image src="../../static/detail-tabicon.png" ></image> 71 <image src="../../static/detail-tabicon.png" ></image>
72 </picker> 72 </picker>
73 </view> 73 </view>
74 </view> 74 </view>
75 <view class="picker" > 75 <view class="picker" >
76 <view class="picker-choice"> 76 <view class="picker-choice">
77 <view class="choice-left"> 77 <view class="choice-left">
78 <text class="p11">{{pickerInfoList[2].nameC}}</text> 78 <text class="p11">{{pickerInfoList[2].nameC}}</text>
79 <text class="p12">{{pickerInfoList[2].nameE}}</text> 79 <text class="p12">{{pickerInfoList[2].nameE}}</text>
80 </view> 80 </view>
81 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 81 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
82 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text> 82 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
83 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 83 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
84 <image src="../../static/detail-tabicon.png" ></image> 84 <image src="../../static/detail-tabicon.png" ></image>
85 </picker> 85 </picker>
86 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 86 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
87 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> 87 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
88 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 88 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
89 <image src="../../static/detail-tabicon.png" ></image> 89 <image src="../../static/detail-tabicon.png" ></image>
90 </picker> 90 </picker>
91 </view> 91 </view>
92 </view> 92 </view>
93 <view class="picker" > 93 <view class="picker" >
94 <view class="picker-choice"> 94 <view class="picker-choice">
95 <view class="choice-left"> 95 <view class="choice-left">
96 <text class="p11">{{pickerInfoList[3].nameC}}</text> 96 <text class="p11">{{pickerInfoList[3].nameC}}</text>
97 <text class="p12">{{pickerInfoList[3].nameE}}</text> 97 <text class="p12">{{pickerInfoList[3].nameE}}</text>
98 </view> 98 </view>
99 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 99 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
100 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> 100 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
101 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 101 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
102 <image src="../../static/detail-tabicon.png" ></image> 102 <image src="../../static/detail-tabicon.png" ></image>
103 </picker> 103 </picker>
104 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 104 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
105 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text> 105 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
106 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 106 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
107 <image src="../../static/detail-tabicon.png" ></image> 107 <image src="../../static/detail-tabicon.png" ></image>
108 </picker> 108 </picker>
109 </view> 109 </view>
110 </view> 110 </view>
111 <view class="picker" > 111 <view class="picker" >
112 <view class="picker-choice"> 112 <view class="picker-choice">
113 <view class="choice-left"> 113 <view class="choice-left">
114 <text class="p11">{{pickerInfoList[4].nameC}}</text> 114 <text class="p11">{{pickerInfoList[4].nameC}}</text>
115 </view> 115 </view>
116 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 116 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
117 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text> 117 <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
118 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1"> 118 <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
119 <image src="../../static/detail-tabicon.png" ></image> 119 <image src="../../static/detail-tabicon.png" ></image>
120 </picker> 120 </picker>
121 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 121 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
122 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text> 122 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
123 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2"> 123 <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
124 <image src="../../static/detail-tabicon.png" ></image> 124 <image src="../../static/detail-tabicon.png" ></image>
125 </picker> 125 </picker>
126 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 126 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
127 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text> 127 <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
128 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3"> 128 <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
129 <image src="../../static/detail-tabicon.png" ></image> 129 <image src="../../static/detail-tabicon.png" ></image>
130 </picker> 130 </picker>
131 </view> 131 </view>
132 </view> 132 </view>
133 <view class="confirm"> 133 <view class="confirm">
134 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> 134 <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
135 <text>确认以上输入信息来源于我的验光数据!</text> 135 <text>确认以上输入信息来源于我的验光数据!</text>
136 </view> 136 </view>
137 </view> 137 </view>
138 138
139 </template> 139 </template>
140 <template v-else> 140 <template v-else>
141 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox"> 141 <view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
142 <template v-if="item.nameC==='验光日期'"> 142 <template v-if="item.nameC==='验光日期'">
143 <text class="names">{{item.nameC}}</text> 143 <text class="names">{{item.nameC}}</text>
144 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text> 144 <text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
145 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text> 145 <text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
146 <text>{{item.nameArray3[item.nameIndex2]}}日</text> 146 <text>{{item.nameArray3[item.nameIndex2]}}日</text>
147 </template> 147 </template>
148 <template v-else> 148 <template v-else>
149 <template v-if="item.nameC==='度数'"> 149 <template v-if="item.nameC==='度数'">
150 <text style="display: inline;">*</text> 150 <text style="display: inline;">*</text>
151 </template> 151 </template>
152 152
153 <text class="names">{{item.nameC}}</text> 153 <text class="names">{{item.nameC}}</text>
154 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text> 154 <text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
155 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text> 155 <text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
156 </template> 156 </template>
157 </view> 157 </view>
158 </template> 158 </template>
159 </view> 159 </view>
160 </view> 160 </view>
161 </view> 161 </view>
162 <view class="choose"> 162 <view class="choose">
163 <view class="chooseItem_1 chooseItem"> 163 <view class="chooseItem_1 chooseItem">
164 <UniCollapse @change="change(1)" > 164 <UniCollapse @change="change(1)" >
165 <UniCollapseItem open=true title="款式挑选" showAnimation=false> 165 <UniCollapseItem open=true title="款式挑选" showAnimation=false>
166 <view class="chooseRes" v-show="show[1]">* {{chooseRes1}}</view> 166 <view class="chooseRes" v-show="show[1]">* {{chooseRes1}}</view>
167 <view class="chooseItem_1_content"> 167 <view class="chooseItem_1_content">
168 <view class="itemsWrap"> 168 <view class="itemsWrap">
169 <view class="item1" 169 <view class="item1"
170 v-for="(item,index) in chooseItem1" 170 v-for="(item,index) in chooseItem1"
171 :key="index" 171 :key="index"
172 :style="item.style" 172 :style="item.style"
173 :class="{ active1: current1 === index }" 173 :class="{ active1: current1 === index }"
174 @click="onClickItem1(index)" 174 @click="onClickItem1(index)"
175 ></view> 175 ></view>
176 </view> 176 </view>
177 </view> 177 </view>
178 </UniCollapseItem> 178 </UniCollapseItem>
179 </UniCollapse> 179 </UniCollapse>
180 <view class="chooseRes" v-show="show[1]">* {{chooseRes1}}</view> 180 <view class="chooseRes" v-show="show[1]">* {{chooseRes1}}</view>
181 </view> 181 </view>
182 <view class="chooseItem_2 chooseItem "> 182 <view class="chooseItem_2 chooseItem ">
183 <UniCollapse @change="change(2)" > 183 <UniCollapse @change="change(2)" >
184 <UniCollapseItem open=true title="直径" showAnimation=false> 184 <UniCollapseItem open=true title="直径" showAnimation=false>
185 <view class="chooseItem_1_content"> 185 <view class="chooseItem_1_content">
186 <view class="itemsWrap"> 186 <view class="itemsWrap">
187 <view class="item2" 187 <view class="item2"
188 v-for="(item,index) in chooseItem2" 188 v-for="(item,index) in chooseItem2"
189 :key="index" 189 :key="index"
190 :class="{ active2: current2 === index }" 190 :class="{ active2: current2 === index }"
191 @click="onClickItem2(index)" 191 @click="onClickItem2(index)"
192 >{{item.num}}</view> 192 >{{item.num}}</view>
193 </view> 193 </view>
194 </view> 194 </view>
195 </UniCollapseItem> 195 </UniCollapseItem>
196 </UniCollapse> 196 </UniCollapse>
197 <view class="chooseRes" v-show="show[2]">* {{chooseRes2}}</view> 197 <view class="chooseRes" v-show="show[2]">* {{chooseRes2}}</view>
198 </view> 198 </view>
199 <view class="chooseItem_3 chooseItem"> 199 <view class="chooseItem_3 chooseItem">
200 <UniCollapse @change="change(3)" > 200 <UniCollapse @change="change(3)" >
201 <UniCollapseItem open=true title="度数" showAnimation=false> 201 <UniCollapseItem open=true title="度数" showAnimation=false>
202 <view class="chooseItem_1_content"> 202 <view class="chooseItem_1_content">
203 <view class="itemsWrap"> 203 <view class="itemsWrap">
204 <view class="item2" 204 <view class="item2"
205 v-for="(item,index) in chooseItem3" 205 v-for="(item,index) in chooseItem3"
206 :key="index" 206 :key="index"
207 :class="{ active2: current3 === index }" 207 :class="{ active2: current3 === index }"
208 @click="onClickItem3(index)" 208 @click="onClickItem3(index)"
209 >{{item}}</view> 209 >{{item}}</view>
210 </view> 210 </view>
211 </view> 211 </view>
212 </UniCollapseItem> 212 </UniCollapseItem>
213 </UniCollapse> 213 </UniCollapse>
214 <view class="chooseRes" v-show="show[3]">* {{chooseRes3}}</view> 214 <view class="chooseRes" v-show="show[3]">* {{chooseRes3}}</view>
215 </view> 215 </view>
216 </view> 216 </view>
217 <view class="button" @click="toComfirmOrder"> 217 <view class="button" @click="toComfirmOrder">
218 立即结算 218 立即结算
219 </view> 219 </view>
220 </view> 220 </view>
221 </template> 221 </template>
222 222
223 <script> 223 <script>
224 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' 224 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
225 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' 225 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
226 import store from '@/store' 226 import store from '@/store'
227 227
228 export default { 228 export default {
229 components: { 229 components: {
230 UniCollapse, 230 UniCollapse,
231 UniCollapseItem, 231 UniCollapseItem,
232 }, 232 },
233 data() { 233 data() {
234 return { 234 return {
235 count: 1, 235 count: 1,
236 maxCount: 20, 236 maxCount: 20,
237 opIsOpen: true, 237 opIsOpen: true,
238 addDisabled: false, 238 addDisabled: false,
239 desDisabled: false, 239 desDisabled: false,
240 current1: 0, 240 current1: 0,
241 current2: 0, 241 current2: 0,
242 current3: 0, 242 current3: 0,
243 actice: [-1, -1, -1], 243 actice: [-1, -1, -1],
244 show: [0, 0, 0, 0], 244 show: [0, 0, 0, 0],
245 chooseRes1:{ 245 chooseRes1:{
246 sku_name: 'Miss 黑二代【减龄自然】', 246 sku_name: 'Miss 黑二代【减龄自然】',
247 sk_id: '128', 247 sk_id: '128',
248 }, 248 },
249 chooseRes2: '14.0', 249 chooseRes2: '14.0',
250 chooseRes3: 0, 250 chooseRes3: 0,
251 chooseItem1: [ 251 chooseItem1: [
252 {style:"opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);",describ:"Miss 黑1代【减龄自然】"}, 252 {style:"opacity: 0.7;background-image: radial-gradient(50% 148%, #ECEAEA 50%, #8D8C8C 100%);",describ:"Miss 黑1代【减龄自然】"},
253 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑二代【防紫外线】"}, 253 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑二代【防紫外线】"},
254 {style:"background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);",describ:"Miss 黑3代【防紫外线】"}, 254 {style:"background-image: radial-gradient(50% 148%, #FDF8F6 50%, #94380B 100%);",describ:"Miss 黑3代【防紫外线】"},
255 {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"}, 255 {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},
256 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"}, 256 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},
257 {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"}, 257 {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},
258 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"}, 258 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},
259 {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"}, 259 {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},
260 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"}, 260 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},
261 {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"}, 261 {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},
262 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"}, 262 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},
263 {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"}, 263 {style:"background-image: radial-gradient(50% 148%, #FFFFFF 50%, #324A05 100%);",describ:"Miss 黑4代【防紫外线】"},
264 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"}, 264 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #624B3F 100%);",describ:"Miss 黑5代【防紫外线】"},
265 {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"}, 265 {style:"opacity: 0.7;background-image: radial-gradient(50% 150%, #F0EEE7 50%, #6F0838 100%);",describ:"Miss 黑6代【防紫外线】"},
266 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"}, 266 {style:"background-image: radial-gradient(50% 143%, #AEA8A8 45%, #370B4E 100%);",describ:"Miss 黑7代【防紫外线】"},
267 ], 267 ],
268 chooseItem2:[ 268 chooseItem2:[
269 {num:"14.0"}, 269 {num:"14.0"},
270 {num:"14.2"}, 270 {num:"14.2"},
271 {num:"14.4"}, 271 {num:"14.4"},
272 {num:"14.5"}, 272 {num:"14.5"},
273 ], 273 ],
274 chooseItem3:[0,100,125,150,175,200,225,250,275,300,325,350,375,400,425,450,470,500,525,550,575,600,1000], 274 chooseItem3:[0,100,125,150,175,200,225,250,275,300,325,350,375,400,425,450,470,500,525,550,575,600,1000],
275 // 度数相关数据 275 // 度数相关数据
276 pickerInfoList:[ 276 pickerInfoList:[
277 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0}, 277 {nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
278 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1}, 278 {nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
279 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2}, 279 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
280 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3}, 280 {nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
281 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0} 281 {nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
282 ], 282 ],
283 }; 283 };
284 }, 284 },
285 computed: { 285 computed: {
286 attrList() { 286 attrList() {
287 return this.$store.state.read.goodInfo.attrList; 287 return this.$store.state.read.goodInfo.attrList;
288 }, 288 },
289 skuList() { 289 skuList() {
290 return this.$store.state.read.goodInfo.skuList; 290 return this.$store.state.read.goodInfo.skuList;
291 }, 291 },
292 }, 292 },
293 onLoad() { 293 onLoad() {
294 store.dispatch('read/fetch', { 294 store.dispatch('read/fetch', {
295 pid: 9, 295 pid: 9,
296 }); 296 });
297 }, 297 },
298 methods:{ 298 methods:{
299 change(num) { 299 change(num) {
300 this.show[num] = this.show[num] ? false : true; 300 this.show[num] = this.show[num] ? false : true;
301 }, 301 },
302 onClickItem1(index) { 302 onClickItem1(index) {
303 if (this.current1 !== index) { 303 if (this.current1 !== index) {
304 this.current1 = index; 304 this.current1 = index;
305 this.chooseRes1 =this.chooseItem1[index].describ 305 this.chooseRes1 =this.chooseItem1[index].describ
306 } 306 }
307 }, 307 },
308 onClickItem2(index) { 308 onClickItem2(index) {
309 if (this.current2 !== index) { 309 if (this.current2 !== index) {
310 this.current2 = index; 310 this.current2 = index;
311 this.chooseRes2 =this.chooseItem2[index].num 311 this.chooseRes2 =this.chooseItem2[index].num
312 } 312 }
313 }, 313 },
314 onClickItem3(index) { 314 onClickItem3(index) {
315 if (this.current3 !== index) { 315 if (this.current3 !== index) {
316 this.current3 = index; 316 this.current3 = index;
317 this.chooseRes3 =this.chooseItem3[index] 317 this.chooseRes3 =this.chooseItem3[index]
318 } 318 }
319 }, 319 },
320 counter(isadd){ 320 counter(isadd){
321 if (isadd) { 321 if (isadd) {
322 this.count >= this.maxCount? this.addDisabled = true:this.count++; 322 this.count >= this.maxCount? this.addDisabled = true:this.count++;
323 } else { 323 } else {
324 this.count <= 1? this.desDisabled = true:this.count--; 324 this.count <= 1? this.desDisabled = true:this.count--;
325 } 325 }
326 }, 326 },
327 toComfirmOrder(){ 327 toComfirmOrder(){
328 uni.navigateTo({ 328 uni.navigateTo({
329 url:'../confirmOrder/confirmOrder' 329 url:'../confirmOrder/confirmOrder'
330 }) 330 })
331 } 331 }
332 } 332 }
333 } 333 }
334 </script> 334 </script>
335 335
336 <style lang="scss"> 336 <style lang="scss">
337 .content { 337 .content {
338 min-height: 100vh; 338 min-height: 100vh;
339 background-color: #F2F2F2; 339 background-color: #F2F2F2;
340 // padding-top: 20rpx; 340 // padding-top: 20rpx;
341 .goodInfo{ 341 .goodInfo{
342 width: 100%; 342 width: 100%;
343 height: 272rpx; 343 height: 272rpx;
344 border-radius: 16rpx; 344 border-radius: 16rpx;
345 background-color: #FFFFFF; 345 background-color: #FFFFFF;
346 box-sizing: border-box; 346 box-sizing: border-box;
347 padding: 36rpx; 347 padding: 36rpx;
348 display: flex; 348 display: flex;
349 flex-direction: row; 349 flex-direction: row;
350 justify-content: flex-start; 350 justify-content: flex-start;
351 .imageWrap{ 351 .imageWrap{
352 height: 188rpx; 352 height: 188rpx;
353 width: 188rpx; 353 width: 188rpx;
354 margin-right: 28rpx; 354 margin-right: 28rpx;
355 image{ 355 image{
356 height: 188rpx; 356 height: 188rpx;
357 width: 188rpx; 357 width: 188rpx;
358 } 358 }
359 } 359 }
360 .infoRight{ 360 .infoRight{
361 display: flex; 361 display: flex;
362 flex-direction: column; 362 flex-direction: column;
363 align-items: flex-start; 363 align-items: flex-start;
364 justify-content: space-between; 364 justify-content: space-between;
365 .goodName{ 365 .goodName{
366 font-size: 28rpx; 366 font-size: 28rpx;
367 color: #333333; 367 color: #333333;
368 } 368 }
369 .remarks{ 369 .remarks{
370 font-size: 20rpx; 370 font-size: 20rpx;
371 color: #999999; 371 color: #999999;
372 } 372 }
373 .priceBox{ 373 .priceBox{
374 display: flex; 374 display: flex;
375 justify-content: space-between; 375 justify-content: space-between;
376 align-items: center; 376 align-items: center;
377 width: 100%; 377 width: 100%;
378 font-size: 14px; 378 font-size: 14px;
379 color: #999999; 379 color: #999999;
380 .price{ 380 .price{
381 color: #FF6B4A; 381 color: #FF6B4A;
382 font-size: 28rpx; 382 font-size: 28rpx;
383 } 383 }
384 .counter{ 384 .counter{
385 display: flex; 385 display: flex;
386 flex-direction: row; 386 flex-direction: row;
387 justify-content: space-between; 387 justify-content: space-between;
388 align-items: center; 388 align-items: center;
389 font-size: 28rpx; 389 font-size: 28rpx;
390 color: #333333; 390 color: #333333;
391 width: 122rpx; 391 width: 122rpx;
392 .btn{ 392 .btn{
393 display: flex; 393 display: flex;
394 justify-content: center; 394 justify-content: center;
395 line-height: 32rpx; 395 line-height: 32rpx;
396 height: 32rpx; 396 height: 32rpx;
397 width: 32rpx; 397 width: 32rpx;
398 background-color: #F2F2F2; 398 background-color: #F2F2F2;
399 color: #CFCFCF; 399 color: #CFCFCF;
400 } 400 }
401 } 401 }
402 } 402 }
403 } 403 }
404 } 404 }
405 .goods-data{ 405 .goods-data{
406 width: 100%; 406 width: 100%;
407 box-sizing: border-box; 407 box-sizing: border-box;
408 padding: 37rpx 40rpx 0 40rpx; 408 padding: 37rpx 40rpx 0 40rpx;
409 background: #FFFFFF; 409 background: #FFFFFF;
410 border-radius: 12rpx; 410 border-radius: 12rpx;
411 .opCollapse{ 411 .opCollapse{
412 width: 100%; 412 width: 100%;
413 padding-bottom: 28rpx; 413 padding-bottom: 28rpx;
414 margin-top: 7px; 414 margin-top: 7px;
415 border-bottom: 1px solid #E9E9E9; 415 border-bottom: 1px solid #E9E9E9;
416 .head{ 416 .head{
417 display: flex; 417 display: flex;
418 justify-content: space-between; 418 justify-content: space-between;
419 height: 24px; 419 height: 24px;
420 // font-family: PingFangSC-Medium; 420 // font-family: PingFangSC-Medium;
421 font-size: 16px; 421 font-size: 16px;
422 color: #333333; 422 color: #333333;
423 letter-spacing: -0.3px; 423 letter-spacing: -0.3px;
424 text-align: justify; 424 text-align: justify;
425 line-height: 24px; 425 line-height: 24px;
426 margin-bottom: 18rpx; 426 margin-bottom: 18rpx;
427 .headRighted{ 427 .headRighted{
428 width: 0; 428 width: 0;
429 height: 0; 429 height: 0;
430 border-left: 4px solid transparent; 430 border-left: 4px solid transparent;
431 border-right: 4px solid transparent; 431 border-right: 4px solid transparent;
432 border-bottom: 4px solid #CFCFCF; 432 border-bottom: 4px solid #CFCFCF;
433 transform: scaleY(-1); 433 transform: scaleY(-1);
434 margin-top: 10px; 434 margin-top: 10px;
435 } 435 }
436 .headMid{ 436 .headMid{
437 // font-family: PingFangSC-Regular; 437 // font-family: PingFangSC-Regular;
438 font-size: 10px; 438 font-size: 10px;
439 color: #999999; 439 color: #999999;
440 letter-spacing: -0.19px; 440 letter-spacing: -0.19px;
441 margin-left: -120rpx; 441 margin-left: -120rpx;
442 } 442 }
443 .headRight{ 443 .headRight{
444 width: 0; 444 width: 0;
445 height: 0; 445 height: 0;
446 border-left: 4px solid transparent; 446 border-left: 4px solid transparent;
447 border-right: 4px solid transparent; 447 border-right: 4px solid transparent;
448 border-bottom: 4px solid #CFCFCF; 448 border-bottom: 4px solid #CFCFCF;
449 margin-top: 10px; 449 margin-top: 10px;
450 } 450 }
451 } 451 }
452 .body{ 452 .body{
453 // font-family: PingFangSC-Regular; 453 // font-family: PingFangSC-Regular;
454 font-size: 12px; 454 font-size: 12px;
455 color: #666666; 455 color: #666666;
456 letter-spacing: 0; 456 letter-spacing: 0;
457 .bodyBox{ 457 .bodyBox{
458 margin-top: 15px; 458 margin-top: 15px;
459 .names{ 459 .names{
460 // font-family: PingFangSC-Regular; 460 // font-family: PingFangSC-Regular;
461 font-size: 12px; 461 font-size: 12px;
462 color: #151515; 462 color: #151515;
463 letter-spacing: 0; 463 letter-spacing: 0;
464 text-align: justify; 464 text-align: justify;
465 line-height: 17px; 465 line-height: 17px;
466 margin-left: 5px; 466 margin-left: 5px;
467 margin-right: 10px; 467 margin-right: 10px;
468 } 468 }
469 text{ 469 text{
470 // font-family: PingFangSC-Regular; 470 // font-family: PingFangSC-Regular;
471 font-size: 12px; 471 font-size: 12px;
472 color: #666666; 472 color: #666666;
473 letter-spacing: 0; 473 letter-spacing: 0;
474 text-align: justify; 474 text-align: justify;
475 } 475 }
476 } 476 }
477 } 477 }
478 .goods-form { 478 .goods-form {
479 display: flex; 479 display: flex;
480 flex-direction: column; 480 flex-direction: column;
481 align-items: center; 481 align-items: center;
482 justify-content: center; 482 justify-content: center;
483 background-color: #fff; 483 background-color: #fff;
484 width: 100%; 484 width: 100%;
485 .p1 { 485 .p1 {
486 font-size: 16px; 486 font-size: 16px;
487 color: #333333; 487 color: #333333;
488 letter-spacing: -0.3px; 488 letter-spacing: -0.3px;
489 text-align: justify; 489 text-align: justify;
490 line-height: 24px; 490 line-height: 24px;
491 margin: 4px 0; 491 margin: 4px 0;
492 } 492 }
493 .p2 { 493 .p2 {
494 font-size: 12px; 494 font-size: 12px;
495 color: #999999; 495 color: #999999;
496 letter-spacing: -0.23px; 496 letter-spacing: -0.23px;
497 margin-bottom: 18rpx; 497 margin-bottom: 18rpx;
498 } 498 }
499 image{ 499 image{
500 width: 28rpx; 500 width: 28rpx;
501 height: 26rpx; 501 height: 26rpx;
502 } 502 }
503 .confirm { 503 .confirm {
504 display: flex; 504 display: flex;
505 align-items: center; 505 align-items: center;
506 font-size: 12px; 506 font-size: 12px;
507 color: #666666; 507 color: #666666;
508 letter-spacing: -0.23px; 508 letter-spacing: -0.23px;
509 width: 684rpx; 509 width: 684rpx;
510 image{ 510 image{
511 margin-right:25rpx; 511 margin-right:25rpx;
512 } 512 }
513 } 513 }
514 .picker{ 514 .picker{
515 display: flex; 515 display: flex;
516 flex-direction: column; 516 flex-direction: column;
517 justify-content: center; 517 justify-content: center;
518 align-items: center; 518 align-items: center;
519 width: 100%; 519 width: 100%;
520 image{ 520 image{
521 width: 10px; 521 width: 10px;
522 height: 10px; 522 height: 10px;
523 margin-right: 5px; 523 margin-right: 5px;
524 } 524 }
525 .picker-choice{ 525 .picker-choice{
526 display: flex; 526 display: flex;
527 width: 684rpx; 527 width: 684rpx;
528 align-items: center; 528 align-items: center;
529 margin-bottom: 40rpx; 529 margin-bottom: 40rpx;
530 .choice-left{ 530 .choice-left{
531 width: 210rpx; 531 width: 210rpx;
532 .p11 { 532 .p11 {
533 font-size: 14px; 533 font-size: 14px;
534 color: #333333; 534 color: #333333;
535 letter-spacing: -0.26px; 535 letter-spacing: -0.26px;
536 text-align: justify; 536 text-align: justify;
537 line-height: 24px; 537 line-height: 24px;
538 } 538 }
539 .p12 { 539 .p12 {
540 font-size: 10px; 540 font-size: 10px;
541 color: #3F3F3F; 541 color: #3F3F3F;
542 letter-spacing: -0.19px; 542 letter-spacing: -0.19px;
543 text-align: justify; 543 text-align: justify;
544 line-height: 24px; 544 line-height: 24px;
545 } 545 }
546 } 546 }
547 .p13 { 547 .p13 {
548 font-size: 10px; 548 font-size: 10px;
549 color: #999999; 549 color: #999999;
550 letter-spacing: -0.19px; 550 letter-spacing: -0.19px;
551 margin-right: 10px; 551 margin-right: 10px;
552 } 552 }
553 .p13-date { 553 .p13-date {
554 font-size: 10px; 554 font-size: 10px;
555 color: #999999; 555 color: #999999;
556 letter-spacing: -0.19px; 556 letter-spacing: -0.19px;
557 margin-right: 5px; 557 margin-right: 5px;
558 } 558 }
559 .p14 { 559 .p14 {
560 font-size: 14px; 560 font-size: 14px;
561 color: #666666; 561 color: #666666;
562 letter-spacing: -0.26px; 562 letter-spacing: -0.26px;
563 text-align: center; 563 text-align: center;
564 width: 124rpx; 564 width: 124rpx;
565 border-bottom: 1px solid #CFCFCF; 565 border-bottom: 1px solid #CFCFCF;
566 } 566 }
567 } 567 }
568 } 568 }
569 } 569 }
570 } 570 }
571 } 571 }
572 .choose{ 572 .choose{
573 width: 100%; 573 width: 100%;
574 background: #FFFFFF; 574 background: #FFFFFF;
575 border-radius: 12rpx; 575 border-radius: 12rpx;
576 margin-top: 20rpx; 576 margin-top: 20rpx;
577 padding: 40rpx 40rpx 112rpx 40rpx; 577 padding: 40rpx 40rpx 112rpx 40rpx;
578 box-sizing: border-box; 578 box-sizing: border-box;
579 .chooseItem{ 579 .chooseItem{
580 width: 100%; 580 width: 100%;
581 padding-bottom: 32rpx; 581 padding-bottom: 32rpx;
582 border-bottom: 1px solid #E9E9E9; 582 border-bottom: 1px solid #E9E9E9;
583 margin-bottom: 28rpx; 583 margin-bottom: 28rpx;
584 } 584 }
585 .chooseRes{ 585 .chooseRes{
586 font-size: 12px; 586 font-size: 12px;
587 color: #666666; 587 color: #666666;
588 } 588 }
589 .itemsWrap{ 589 .itemsWrap{
590 display: flex; 590 display: flex;
591 flex-direction: row; 591 flex-direction: row;
592 flex-wrap: wrap; 592 flex-wrap: wrap;
593 justify-content: flex-start; 593 justify-content: flex-start;
594 align-items: center; 594 align-items: center;
595 padding-top: 24rpx; 595 padding-top: 24rpx;
596 .item1{ 596 .item1{
597 width: 64rpx; 597 width: 64rpx;
598 height: 64rpx; 598 height: 64rpx;
599 border-radius: 32rpx; 599 border-radius: 32rpx;
600 margin: 0 36rpx 24rpx 0; 600 margin: 0 36rpx 24rpx 0;
601 transition: all 0.3s; 601 transition: all 0.3s;
602 border: 1px solid #FFFFFF; 602 border: 1px solid #FFFFFF;
603 } 603 }
604 .item2{ 604 .item2{
605 width: 100rpx; 605 width: 100rpx;
606 height: 60rpx; 606 height: 60rpx;
607 margin: 0 20rpx 20rpx 0; 607 margin: 0 20rpx 20rpx 0;
608 transition: all 0.3s; 608 transition: all 0.3s;
609 background: #F2F2F2; 609 background: #F2F2F2;
610 border-radius: 2px; 610 border-radius: 2px;
611 border-radius: 2px; 611 border-radius: 2px;
612 line-height: 60rpx; 612 line-height: 60rpx;
613 text-align: center; 613 text-align: center;
614 color: #666666; 614 color: #666666;
615 font-size: 12px; 615 font-size: 12px;
616 } 616 }
617 .active1{ 617 .active1{
618 opacity: 0.7; 618 opacity: 0.7;
619 border: 1px solid #FF6B4A; 619 border: 1px solid #FF6B4A;
620 } 620 }
621 .active2{ 621 .active2{
622 background: rgba(255,107,74,0.15); 622 background: rgba(255,107,74,0.15);
623 color: #FF6B4A; 623 color: #FF6B4A;
624 } 624 }
625 } 625 }
626 } 626 }
627 .button{ 627 .button{
628 width: 100%; 628 width: 100%;
629 height: 112rpx; 629 height: 112rpx;
630 background-color: #FF6B4A; 630 background-color: #FF6B4A;
631 font-size: 16px; 631 font-size: 16px;
632 color: #FFFFFF; 632 color: #FFFFFF;
633 line-height: 112rpx; 633 line-height: 112rpx;
634 text-align: center; 634 text-align: center;
635 position: fixed; 635 position: fixed;
636 bottom: 0; 636 bottom: 0;
637 left: 0; 637 left: 0;
638 } 638 }
639 } 639 }
640 640
641 </style> 641 </style>
642 642
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