刘文博 / gulu-vue

Download as
Browse Code »

Commit 29f4d5fe57c311ae9df882ac2821599ab4e590d5

Authored by 尹聃
1 parent e477b7dc7e
Exists in master

选购页传递参数

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