Adam / gulu-vue

Download as
Browse Code »

Commit 7a7226feae784d2d0995c2edd0de1041399b533f

Authored by 范牧
2 parents e4713149ad 66638e4bbd
Exists in master

冲突合并

Showing 2 changed files   Show diff stats
src/pages/cart/cart.vue
Diff comments   View file @7a7226f
1 <template> 1 <template>
2 <view class="content"> 2 <view class="content">
3 <block v-if="cartList.length==0"> 3 <block v-if="cartList.length==0">
4 4
5 </block> 5 </block>
6 <block v-else> 6 <block v-else>
7 <view class="card"> 7 <view class="card">
8 <view class="cardHeader"> 8 <view class="cardHeader">
9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" 9 <view v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
10 @click="pChange(pIsoPen)"> 10 @tap="pChange(pIsoPen)">
11 <span class="correct"></span> 11 <span class="correct"></span>
12 </view> 12 </view>
13 <image src="../../static/store.png" mode="aspectFill"></image> 13 <image src="../../static/store.png" mode="aspectFill"></image>
14 <text>非常戴镜</text> 14 <text>非常戴镜</text>
15 </view> 15 </view>
16 16
17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id" 17 <view class="cardBody" v-for="(item,index) in cartList" :key="item.cart_id"
18 @longpress="delCart(item.cart_id,index)"> 18 @longpress="delCart(item.cart_id,index)">
19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" 19 <view v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'"
20 @click="Change(childIsOpen[index],index)"> 20 @tap="Change(childIsOpen[index],index)">
21 <span class="correct"></span> 21 <span class="correct"></span>
22 </view> 22 </view>
23 <view class="imageWrap">
24 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
25 </view>
23 <view class="goodInfo"> 26 <view class="goodInfo">
24 <view class="imageWrap"> 27 <!-- <view class="imageWrap">
25 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> 28 <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
26 </view> 29 </view> -->
27 <view class="infoRight"> 30 <view class="infoRight">
28 <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view> 31 <view class="goodName" @tap="toGoods(item.pid,item.p_root_index)">{{item.p_name}}</view>
29 <view class="describ" @tap="toshop(item.pid,item.p_root_index)"> 32 <!-- <view class="describ"> -->
30 <text> 33 <uni-collapse accordion="true" >
31 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value"> 34 <uni-collapse-item showAnimation='true'
32 {{tag.label+`&nbsp;&nbsp;`}} 35 :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...'" >
33 </block> 36 <text class="describ">
34 </text> 37 <block v-for="tag in item.tag.prod_tag_fun" :key="tag.value">
35 <view class="icon"></view> 38 {{tag.label+`&nbsp;&nbsp;`}}
36 </view> 39 </block>
40 </text>
41 <!-- <text>
42 <block v-for="tag in item.tag.prod_tag_style" :key="tag.value">
43 {{tag.label+`&nbsp;&nbsp;`}}
44 </block>
45 </text> -->
46 </uni-collapse-item>
47 </uni-collapse>
48 <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> -->
49 <!-- </view> -->
37 <view class="priceBox"> 50 <view class="priceBox">
38 <view class="price">￥{{item.nowPrice*item.num}}</view> 51 <view class="price">￥{{item.nowPrice*item.num}}</view>
39 <text>(限购{{maxCount}}副)</text> 52 <text class="maxCount">(限购{{maxCount}}副)</text>
40 <view class="counter"> 53 <view class="counter">
41 <view class="btn" disabled="this.addDisabled" type="default" 54 <view class="btn" disabled="this.addDisabled" type="default"
42 @click="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view> 55 @tap="counter(index,false,item.mp_id,item.sk_id,item.num,item.cart_id)">-</view>
43 <text>{{item.num}}</text> 56 <text>{{item.num}}</text>
44 <view class="btn" disabled="this.desDisabled" type="default" 57 <view class="btn" disabled="this.desDisabled" type="default"
45 @click="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view> 58 @tap="counter(index,true,item.mp_id,item.sk_id,item.num,item.cart_id)">+</view>
46 </view> 59 </view>
47 </view> 60 </view>
48 </view> 61 </view>
49 </view> 62 </view>
50 </view> 63 </view>
51 </view> 64 </view>
52 </block> 65 </block>
53 <view class="footer"> 66 <view class="footer">
54 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> 67 <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
55 <view class="footerRight"> 68 <view class="footerRight">
56 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover"> 69 <navigator url="/pages/confirmOrder/confirmOrder" hover-class="navigator-hover">
57 <view class="paybtn" >立即结算</view> 70 <view class="paybtn" >立即结算</view>
58 </navigator> 71 </navigator>
59 </view> 72 </view>
60 </view> 73 </view>
61 74
62 </view> 75 </view>
63 </template> 76 </template>
64 77
65 <script> 78 <script>
79 import UniCollapse from '@/components/UniCollapse/UniCollapse.vue'
80 import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue'
66 import store from '@/store'; 81 import store from '@/store'
67 82
68 export default { 83 export default {
69 84 components: { UniCollapse, UniCollapseItem },
70 data() { 85 data() {
71 return { 86 return {
72 totalPrice: 0, 87 totalPrice: 0,
73 pIsoPen:false, 88 pIsoPen: false,
74 // childIsOpen:[], 89 // childIsOpen:[],
75 maxCount:20, 90 maxCount: 20
76 } 91 }
77 }, 92 },
78 computed:{ 93 computed: {
79 94
80 cartList() { 95 cartList() {
81 // console.log('cart-list', this.$store.state.cart.cartList); 96 // console.log('cart-list', this.$store.state.cart.cartList);
82 return this.$store.state.cart.cartList; 97 return this.$store.state.cart.cartList
83 }, 98 },
84 childIsOpen(){ 99 childIsOpen() {
85 let temp=[]; 100 const temp = []
86 temp.length=this.$store.state.cart.cartList.length; 101 temp.length = this.$store.state.cart.cartList.length
87 for (let i = 0; i < temp.length; i++) { 102 for (let i = 0; i < temp.length; i++) {
88 temp[i]= false 103 temp[i] = false
89 } 104 }
90 console.log('this.childisOPne===>',temp) 105 console.log('this.childisOPne===>', temp)
91 return temp 106 return temp
92 } 107 }
93 }, 108 },
94 onLoad: function() { 109 onLoad: function() {
95 // 判断是否授权 110 // 判断是否授权
96 // uni.getSetting({ 111 // uni.getSetting({
97 // success(res) { 112 // success(res) {
98 // console.log('authSetting',res.authSetting) 113 // console.log('authSetting',res.authSetting)
99 // if(res.authSetting['scope.userInfo'] !== true) { 114 // if(res.authSetting['scope.userInfo'] !== true) {
100 115
101 // uni.switchTab({ 116 // uni.switchTab({
102 // url:'/pages/user/user' 117 // url:'/pages/user/user'
103 // }) 118 // })
104 // }else { 119 // }else {
105 // } 120 // }
106 // } 121 // }
107 // }) 122 // })
108 123
109 // console.log('usr-my',this.$store.state.user.userInfo) 124 // console.log('usr-my',this.$store.state.user.userInfo)
110 // store.dispatch('cart/addCart',{ 125 // store.dispatch('cart/addCart',{
111 // "num":1, 126 // "num":1,
112 // "pid": 7,//产品id 127 // "pid": 7,//产品id
113 // "uid":1, 128 // "uid":1,
114 // "sk_id": 72, 129 // "sk_id": 72,
115 // "price": 120, 130 // "price": 120,
116 // "mp_id":1, 131 // "mp_id":1,
117 // "checkedSKU":{ 132 // "checkedSKU":{
118 // "discount": "45", 133 // "discount": "45",
119 // "in_price": "6000", 134 // "in_price": "6000",
120 // "kc": "0", 135 // "kc": "0",
121 // "model_pic": null, 136 // "model_pic": null,
122 // "out_price": 191.8, 137 // "out_price": 191.8,
123 // "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg", 138 // "pic": "https://glass.xiuyetang.com//upload_jk/7/7_22AE0C.jpg",
124 // "pid": "7", 139 // "pid": "7",
125 // "real_price": 99, 140 // "real_price": 99,
126 // "sk_id": "89", 141 // "sk_id": "89",
127 // "sku_name": "1.56非球面防蓝光_黑", 142 // "sku_name": "1.56非球面防蓝光_黑",
128 // "sku_shop_value": "", 143 // "sku_shop_value": "",
129 // "sku_value": "58_61", 144 // "sku_value": "58_61",
130 // "status": "1", 145 // "status": "1",
131 // }, 146 // },
132 // }); 147 // });
133 store.dispatch('cart/getCartList',{ 148 store.dispatch('cart/getCartList', {
134 uid: 1, //用户id 149 uid: 1 // 用户id
135 }); 150 })
136 }, 151 },
137 152
138 methods: { 153 methods: {
139 // 跳转到对应的选购页面 154 // 跳转到对应的选购页面
140 toshop(id,type){ 155 // toshop(id,type){
141 console.log('===',id,type) 156 // console.log('===',id,type)
142 switch(type){ 157 // switch(type){
143 case 1: 158 // case 1:
144 uni.navigateTo({ 159 // uni.navigateTo({
145 url: `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type, 160 // url: `../detailsChoiceArgs/detailsChoiceArgs?oderId=`+id+`&goodType=`+type,
146 success: res => {}, 161 // success: res => {},
147 fail: () => {}, 162 // fail: () => {},
148 complete: () => {} 163 // complete: () => {}
149 }); 164 // });
150 break; 165 // break;
151 case 2: 166 // case 2:
152 uni.navigateTo({ 167 // uni.navigateTo({
153 url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type, 168 // url: `../detailStandard/detailStandard_k?oderId=`+id+`&goodType=`+type,
154 success: res => {}, 169 // success: res => {},
155 fail: () => {}, 170 // fail: () => {},
156 complete: () => {} 171 // complete: () => {}
157 }); 172 // });
158 break; 173 // break;
159 case 3||4: 174 // case 3||4:
160 uni.navigateTo({ 175 // uni.navigateTo({
161 url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type, 176 // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
162 success: res => {}, 177 // success: res => {},
163 fail: () => {}, 178 // fail: () => {},
164 complete: () => {} 179 // complete: () => {}
165 }); 180 // });
166 break; 181 // break;
167 // case 4: 182 // // case 4:
168 // uni.navigateTo({ 183 // // uni.navigateTo({
169 // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type, 184 // // url: `../detailStandard/detailStandard_sun?oderId=`+id+`&goodType=`+type,
170 // success: res => {}, 185 // // success: res => {},
171 // fail: () => {}, 186 // // fail: () => {},
172 // complete: () => {} 187 // // complete: () => {}
173 // }); 188 // // });
174 case 5: 189 // case 5:
175 uni.navigateTo({ 190 // uni.navigateTo({
176 url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type, 191 // url: `../purchaseLenses/purchaseLenses?oderId=`+id+`&goodType=`+type,
177 success: res => {}, 192 // success: res => {},
178 fail: () => {}, 193 // fail: () => {},
179 complete: () => {} 194 // complete: () => {}
180 }); 195 // });
181 break; 196 // break;
182 default : 197 // default :
183 break 198 // break
184 } 199 // }
185 }, 200 // },
186 toGoods(id,type){ 201 toGoods(id, type) {
187 uni.navigateTo({ 202 uni.navigateTo({
188 url: `../frameDetail/frameDetail?oderId=`+id, 203 url: '../frameDetail/frameDetail?oderId=' + id,
189 success: res => {}, 204 success: res => {},
190 fail: () => {}, 205 fail: () => {},
191 complete: () => {} 206 complete: () => {}
192 }); 207 })
193 console.log('toGoods =====> id:'+id +"======>type:"+type) 208 console.log('toGoods =====> id:' + id + '======>type:' + type)
194 switch(type){ 209 switch (type) {
195 case 1: 210 case 1:
196 uni.navigateTo({ 211 uni.navigateTo({
197 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 212 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
198 success: res => {}, 213 success: res => {},
199 fail: () => {}, 214 fail: () => {},
200 complete: () => {} 215 complete: () => {}
201 }); 216 })
202 break; 217 break
203 case 2: 218 case 2:
204 uni.navigateTo({ 219 uni.navigateTo({
205 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 220 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
206 success: res => {}, 221 success: res => {},
207 fail: () => {}, 222 fail: () => {},
208 complete: () => {} 223 complete: () => {}
209 }); 224 })
210 break; 225 break
211 case 3: 226 case 3:
212 uni.navigateTo({ 227 uni.navigateTo({
213 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 228 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
214 success: res => {}, 229 success: res => {},
215 fail: () => {}, 230 fail: () => {},
216 complete: () => {} 231 complete: () => {}
217 }); 232 })
218 break; 233 break
219 case 4: 234 case 4:
220 uni.navigateTo({ 235 uni.navigateTo({
221 url: `../frameDetail/frameDetail?oderId=`+id+`&goodType=`+type, 236 url: '../frameDetail/frameDetail?oderId=' + id + '&goodType=' + type,
222 success: res => {}, 237 success: res => {},
223 fail: () => {}, 238 fail: () => {},
224 complete: () => {} 239 complete: () => {}
225 }); 240 })
226 break; 241 break
227 default : 242 default :
228 break 243 break
229 } 244 }
230 }, 245 },
231 246
232 counter(index,isadd,mp_id,sk_id,num,cart_id){ 247 counter(index, isadd, mp_id, sk_id, num, cart_id) {
233 // console.log('===>>counter ===>num',num) 248 // console.log('===>>counter ===>num',num)
234 // console.log('===>>counter ===>isadd',isadd) 249 // console.log('===>>counter ===>isadd',isadd)
235 num=parseInt(num); 250 num = parseInt(num)
236 if(isadd){ 251 if (isadd) {
237 if(num>=this.maxCount){ 252 if (num >= this.maxCount) {
238 this.addDisabled = true 253 this.addDisabled = true
239 } else{ 254 } else {
240 this.addDisabled= true 255 this.addDisabled = true
241 // 修改num 256 // 修改num
242 store.dispatch('cart/modiCart',{ 257 store.dispatch('cart/modiCart', {
243 uid: 1, 258 uid: 1,
244 // openid: '', 259 // openid: '',
245 mp_id: mp_id, 260 mp_id: mp_id,
246 sk_id: sk_id, 261 sk_id: sk_id,
247 cart_id:cart_id, 262 cart_id: cart_id,
248 num:num+1, 263 num: num + 1,
249 args:{ 264 args: {
250 index:index, 265 index: index,
251 isadd:isadd, 266 isadd: isadd
252 } 267 }
253 }) 268 })
254 this.addDisabled= false 269 this.addDisabled = false
255 } 270 }
256 }else{ 271 } else {
257 if(num<=1){ 272 if (num <= 1) {
258 this.desDisabled = true 273 this.desDisabled = true
259 } else{ 274 } else {
260 this.desDisabled = false 275 this.desDisabled = false
261 // post 请求修改相关参数 276 // post 请求修改相关参数
262 store.dispatch('cart/modiCart',{ 277 store.dispatch('cart/modiCart', {
263 uid: 1, 278 uid: 1,
264 // openid: '', 279 // openid: '',
265 mp_id: mp_id, 280 mp_id: mp_id,
266 sk_id: sk_id, 281 sk_id: sk_id,
267 cart_id:cart_id, 282 cart_id: cart_id,
268 num:num-1, 283 num: num - 1,
269 args:{ 284 args: {
270 index:index, 285 index: index,
271 isadd:isadd, 286 isadd: isadd
272 } 287 }
273 }) 288 })
274 this.desDisabled = true 289 this.desDisabled = true
275 } 290 }
276 } 291 }
277 }, 292 },
278 293
279 Change(isopen,indexC){ 294 Change(isopen, indexC) {
280 // console.log('lalla===>',isopen) 295 // console.log('lalla===>',isopen)
281 this.childIsOpen[indexC]=!isopen 296 this.childIsOpen[indexC] = !isopen
282 if(!isopen){ 297 if (!isopen) {
283 this.totalPrice=this.totalPrice+(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice) 298 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
284 }else{ 299 } else {
285 this.totalPrice=this.totalPrice-(this.$store.state.cart.cartList[indexC].num*this.$store.state.cart.cartList[indexC].nowPrice) 300 this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice)
286 } 301 }
287 let m=true; 302 let m = true
288 for (let i = 0; i < this.childIsOpen.length; i++) { 303 for (let i = 0; i < this.childIsOpen.length; i++) {
289 m=m&this.childIsOpen[i] 304 m = m & this.childIsOpen[i]
290 } 305 }
291 if(m==1){ 306 if (m == 1) {
292 this.pIsoPen=true 307 this.pIsoPen = true
293 } else{ 308 } else {
294 this.pIsoPen=false 309 this.pIsoPen = false
295 } 310 }
296 }, 311 },
297 pChange(isopen){ 312 pChange(isopen) {
298 this.pIsoPen=!isopen 313 this.pIsoPen = !isopen
299 for (let i = 0; i < this.childIsOpen.length; i++) { 314 for (let i = 0; i < this.childIsOpen.length; i++) {
300 this.childIsOpen[i]=!isopen 315 this.childIsOpen[i] = !isopen
301 } 316 }
302 if(this.pIsoPen){ 317 if (this.pIsoPen) {
303 // 计算总价逻辑 318 // 计算总价逻辑
304 if(this.childIsOpen.length!=0){ 319 if (this.childIsOpen.length != 0) {
305 for (let i = 0; i < this.childIsOpen.length; i++) { 320 for (let i = 0; i < this.childIsOpen.length; i++) {
306 if(this.childIsOpen[i]){ 321 if (this.childIsOpen[i]) {
307 this.totalPrice= this.totalPrice+(this.$store.state.cart.cartList[i].num*this.$store.state.cart.cartList[i].nowPrice) 322 this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice)
308 } 323 }
309 } 324 }
310 } 325 }
311 } else{ 326 } else {
312 this.totalPrice=0 327 this.totalPrice = 0
313 } 328 }
314 329 },
315 }, 330 delCart(cart_id, index) {
316 delCart(cart_id,index){ 331 // console.log('userInfo',this.$store.state.user.userInfo)
317 // console.log('userInfo',this.$store.state.user.userInfo) 332 cart_id = parseInt(cart_id)
318 cart_id=parseInt(cart_id) 333 // console.log('delcart------>cart_id',cart_id)
319 // console.log('delcart------>cart_id',cart_id) 334 // console.log('cartlist====>delcart',this.$store.state.cart.cartList)
320 // console.log('cartlist====>delcart',this.$store.state.cart.cartList) 335 // console.log('delcart======>index',index)
321 // console.log('delcart======>index',index) 336 uni.showModal({
322 uni.showModal({ 337 title: '是否删除该商品',
323 title: "是否删除该商品", 338 // content: '是否删除该商品',
324 // content: '是否删除该商品', 339 success: function (res) {
325 success: function (res) { 340 if (res.confirm) {
326 if (res.confirm) { 341 // this.$store.state.cart.cartList.splice(index,1)
327 // this.$store.state.cart.cartList.splice(index,1) 342 store.dispatch('cart/delCart', {
328 store.dispatch('cart/delCart',{ 343 uid: 1, // 用户id
329 uid: 1, //用户id 344 openid: '',
330 openid: "", 345 cart_id: cart_id, // 要修改的购物车id
331 cart_id: cart_id, // 要修改的购物车id 346 arg: index // 由于action 传参是能接收两参数，因此将index放入对象
332 arg:index, // 由于action 传参是能接收两参数，因此将index放入对象 347 })
333 }); 348 console.log('用户点击确定')
334 console.log('用户点击确定'); 349 }
335 } 350 }
336 } 351 })
337 }); 352 }
338 353 }
339 } 354 }
340 } 355 </script>
341 } 356
342 </script> 357 <style lang="scss">
343 358 .content {
344 <style lang="scss"> 359 min-height: 100vh;
345 .content { 360 background-color: #f2f2f2;
346 min-height: 100vh; 361 display: flex;
347 background-color: #f2f2f2; 362 flex-direction: column;
348 display: flex; 363 align-items: center;
349 flex-direction: column; 364 justify-content: space-between;
350 align-items: center; 365 padding: 20rpx 40rpx;
351 justify-content: space-between; 366 box-sizing: border-box;
352 padding: 20rpx 40rpx; 367
353 box-sizing: border-box; 368 .partentCheck{
354 369 width: 16px;
355 .partentCheck{ 370 height: 16px;
356 width: 16px; 371 border-radius: 22px;
357 height: 16px; 372 border: 1px solid #CFCFCF;
358 border-radius: 18px; 373 background-color: #FFFFFF;
359 border: 1px solid #CFCFCF; 374 margin: 6px;
360 background-color: #FFFFFF; 375 }
376 .partentChecked{
361 } 377 width: 18px;
362 .partentChecked{ 378 height: 18px;
363 width: 18px; 379 border-radius: 22px;
364 height: 18px; 380 background-color: #FF6B4A;
365 border-radius: 18px; 381 margin: 6px;
366 background-color: #FF6B4A; 382 .correct {
383 display: inline-block;
367 .correct { 384 position: relative;
368 display: inline-block; 385 width: 10rpx;
369 position: relative; 386 height: 2rpx;
370 width: 10rpx; 387 background: #FFFFFF;
371 height: 2rpx; 388 line-height: 0;
372 background: #FFFFFF; 389 font-size: 0;
373 line-height: 0; 390 position: relative;
374 font-size: 0; 391 top: -7px;
375 position: relative; 392 left: 4px;
376 top: -7px; 393 -webkit-transform: rotate(45deg);
377 left: 4px; 394 }
378 -webkit-transform: rotate(45deg); 395 .correct:after {
379 } 396 content: '/';
380 .correct:after { 397 display: block;
381 content: '/'; 398 width: 16rpx;
382 display: block; 399 height: 2rpx;
383 width: 16rpx; 400 background: #FFFFFF;
384 height: 2rpx; 401 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
385 background: #FFFFFF; 402 }
386 -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); 403 }
387 } 404
388 } 405 .card{
389 406 background-color: #FFFFFF;
390 .card{ 407 border-radius: 16rpx;
391 background-color: #FFFFFF; 408 box-sizing: border-box;
392 border-radius: 16rpx; 409 padding: 36rpx 36rpx 36rpx 18rpx;
393 box-sizing: border-box; 410 display: flex;
394 padding: 36rpx 36rpx 36rpx 18rpx; 411 flex-direction: column;
395 display: flex; 412 align-items: center;
396 flex-direction: column; 413 justify-content: space-between;
397 align-items: center; 414 margin-bottom: 180rpx;
398 justify-content: space-between; 415 .cardHeader{
399 margin-bottom: 180rpx; 416 width: 100%;
400 .cardHeader{ 417 height: 36rpx;
401 width: 100%; 418 display: flex;
402 height: 36rpx; 419 align-items: center;
403 display: flex; 420 justify-content: flex-start;
404 align-items: center; 421 margin-bottom: 20rpx;
405 justify-content: flex-start; 422 image{
423 height: 32rpx;
406 image{ 424 width: 32rpx;
407 height: 32rpx; 425 padding-left: 6px;
408 width: 32rpx; 426 padding-right: 10px;
409 padding-left: 6px; 427 }
410 padding-right: 10px; 428 text{
411 } 429 // font-family: PingFangSC-Regular;
412 text{ 430 font-size: 14px;
413 // font-family: PingFangSC-Regular; 431 color: #333333;
414 font-size: 14px; 432 letter-spacing: -0.26px;
415 color: #333333; 433 }
416 letter-spacing: -0.26px; 434 }
417 } 435 .cardBody{
418 } 436 width: 100%;
419 .cardBody{ 437 min-height: 300rpx;
420 width: 100%; 438 display: flex;
421 height: 300rpx; 439 align-items: center;
422 display: flex; 440 justify-content: space-between;
423 align-items: center; 441 .goodInfo{
424 justify-content: space-between; 442 width: 390rpx;
425 .goodInfo{ 443 display: flex;
426 width: 95%; 444 flex-direction: row;
427 display: flex; 445 justify-content: flex-start;
428 flex-direction: row; 446 padding-left: 6px;
429 justify-content: flex-start; 447
430 padding-left: 6px; 448 .imageWrap{
449 height: 188rpx;
431 .imageWrap{ 450 width: 188rpx;
432 height: 188rpx; 451 margin-right: 28rpx;
433 width: 188rpx; 452
434 margin-right: 28rpx; 453 image{
454 border-radius: 4px;
435 image{ 455 height: 188rpx;
436 border-radius: 4px; 456 width: 188rpx;
437 height: 188rpx; 457 }
438 width: 188rpx; 458 }
439 } 459 .infoRight{
440 } 460 display: flex;
441 .infoRight{ 461 flex-direction: column;
442 display: flex; 462 align-items: flex-start;
443 flex-direction: column; 463 justify-content: space-between;
444 align-items: flex-start; 464 min-height: 240rpx;
445 justify-content: space-between; 465 .goodName{
446 height: 240rpx; 466 display: -webkit-box;
447 .goodName{ 467 -webkit-box-orient: vertical;
448 display: -webkit-box; 468 -webkit-line-clamp: 2;
449 -webkit-box-orient: vertical; 469 text-align: justify;
450 -webkit-line-clamp: 2; 470 overflow: hidden;
451 text-align: justify; 471 font-size: 28rpx;
452 overflow: hidden; 472 color: #333333;
453 font-size: 28rpx; 473 }
454 color: #333333; 474 .describ{
455 } 475 width: 100%;
456 .describ{ 476 // min-height: 80rpx;
457 width: 100%; 477 // box-sizing: border-box;
458 height: 80rpx; 478 // padding: 10rpx;
459 box-sizing: border-box; 479 font-size: 20rpx;
460 padding: 10rpx; 480 letter-spacing: -0.23px;
461 font-size: 20rpx; 481 text-align: justify;
462 letter-spacing: -0.23px; 482 color: #999999;
463 text-align: justify; 483 // background: #F9F9F9;
464 color: #999999; 484 // display: flex;
465 background: #F9F9F9; 485 // justify-content: center;
466 display: flex; 486 // align-items: center;
467 justify-content: center; 487 // text{
468 align-items: center; 488 // text-overflow: -o-ellipsis-lastline;
469 text{ 489 // overflow: hidden;
470 text-overflow: -o-ellipsis-lastline; 490 // text-overflow: ellipsis;
471 overflow: hidden; 491 // display: -webkit-box;
472 text-overflow: ellipsis; 492 // -webkit-line-clamp: 2;
473 display: -webkit-box; 493 // line-clamp: 2;
474 -webkit-line-clamp: 2; 494 // -webkit-box-orient: vertical;
475 line-clamp: 2; 495 // }
476 -webkit-box-orient: vertical; 496 // .icon {
477 } 497 // width: 0;
478 // .icon{ 498 // height: 0;
479 // transform: rotate(90deg); 499 // border-left: 5px transparent;
480 // height: 13px; 500 // border-right: 5px transparent;
481 // width: 20px; 501 // border-top: 5px #979797;
482 502 // border-bottom: 0 transparent;
503 // border-style: solid;
504 // position: relative;
505 // margin-left: 10px;
506 // // transform: scaleY(-1);
507 // }
508 // .icon::after{
509 // content: '';
510 // position: absolute;
511 // top: -6.5px;
512 // left: -5px;
513 // border-left: 5px transparent;
514 // border-right: 5px transparent;
515 // border-top: 5px #FFFFFF;
516 // border-bottom: 0 transparent;
517 // border-style: solid;
518 // }
519 }
483 // } 520 .priceBox{
484 .icon{
485 width: 0;
486 height: 0;
487 border-left: 5px transparent;
488 border-right: 5px transparent;
489 border-top: 5px #979797;
490 border-bottom: 0 transparent;
491 border-style: solid;
492 position: relative;
493 margin-left: 10px;
494 // transform: scaleY(-1);
495 }
496 .icon::after{
497 content: '';
498 position: absolute;
499 top: -6.5px;
500 left: -5px;
501 border-left: 5px transparent;
502 border-right: 5px transparent;
503 border-top: 5px #FFFFFF;
504 border-bottom: 0 transparent;
505 border-style: solid;
506 }
507 } 521 display: flex;
508 .priceBox{ 522 justify-content: space-between;
509 display: flex; 523 align-items: center;
510 justify-content: space-between; 524 // margin-top: 26px;
511 align-items: center; 525 width: 100%;
512 // margin-top: 26px; 526 font-size: 14px;
513 width: 100%; 527 color: #999999;
514 font-size: 14px; 528 .maxCount{
515 color: #999999; 529 color: #999999;
530 font-size: 24rpx;
531 }
532 .price{
533 color: #FF6B4A;
516 .price{ 534 font-size: 28rpx;
517 color: #FF6B4A; 535 }
518 font-size: 28rpx; 536 .counter{
519 } 537 display: flex;
520 .counter{ 538 flex-direction: row;
521 display: flex; 539 justify-content: space-between;
522 flex-direction: row; 540 align-items: center;
523 justify-content: space-between; 541 font-size: 28rpx;
524 align-items: center; 542 color: #333333;
525 font-size: 28rpx; 543 width: 122rpx;
526 color: #333333; 544 .btn{
527 width: 122rpx; 545 display: flex;
528 .btn{ 546 justify-content: center;
529 display: flex; 547 line-height: 32rpx;
530 justify-content: center; 548 height: 32rpx;
531 line-height: 32rpx; 549 width: 32rpx;
532 height: 32rpx; 550 background-color: #F2F2F2;
533 width: 32rpx; 551 color: #CFCFCF;
534 background-color: #F2F2F2; 552 }
535 color: #CFCFCF; 553 }
536 } 554 }
537 } 555 }
538 } 556 }
539 } 557 }
540 } 558 }
541 } 559
542 } 560 .footer{
543 561 position: fixed;
544 .footer{ 562 left: 0;
545 position: fixed; 563 bottom: 0px;
546 left: 0; 564 height: 112rpx;
547 bottom: 0px; 565 width: 100%;
548 height: 112rpx; 566 background-color: #FFFFFF;
549 width: 100%; 567 font-size: 16px;
550 background-color: #FFFFFF; 568 display: flex;
551 font-size: 16px; 569 justify-content: space-between;
552 display: flex; 570 align-items: center;
553 justify-content: space-between; 571 .footerLeft{
554 align-items: center; 572 display: flex;
555 .footerLeft{ 573 justify-content: center;
556 display: flex; 574 align-items: center;
557 justify-content: center; 575 width: 50%;
558 align-items: center; 576 color: #333333;
559 width: 50%; 577 text{
560 color: #333333; 578 color: #FF6B4A;
561 text{ 579 }
562 color: #FF6B4A; 580 }
563 } 581 .footerRight{
src/pages/newOpticsData/newOpticsData.vue
Diff comments   View file @7a7226f
1 <template> 1 <template>
2 <view class="wrap"> 2 <view class="wrap">
3 <view class="body"> 3 <view class="body">
4 <template > 4 <template >
5 <view class="goods-form"> 5 <view class="goods-form">
6 <view class="p1"> 6 <view class="p1">
7 <image src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image> 7 <image class="image2" src="../../static/img/myOpticsData/dataWrite.png" mode="aspectFit"></image>
8 填写验光数据 8 填写验光数据
9 </view> 9 </view>
10 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text> 10 <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
11 <view class="use_name"> 11 <view class="picker">
12 <text>验光单取名:</text> 12 <view class="picker-choice">
13 <input type="text" @change="handleInput" 13 <view class="choice-left">
14 placeholder="请输入名称" maxlength="30" :value="name" /> 14 <text class="pd">验光单取名:</text>
15 </view> 15 </view>
16 <view class="use_pd"> 16 <input type="text" @change="handleInput" class="input"
17 <text>瞳距:</text> 17 placeholder="请输入名称" maxlength="20" :value="name" />
18 <input type="number" @change="handleInputPd" 18 </view>
19 placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
20 </view> 19 </view>
21 <view class="picker" > 20 <view class="picker" >
22 <view class="picker-choice"> 21 <view class="picker-choice">
23 <view class="choice-left"> 22 <view class="choice-left">
24 <text class="p11">{{pickerInfoList[0].nameC}}</text> 23 <text class="p11">{{pickerInfoList[0].nameC}}</text>
25 <text class="p12">{{pickerInfoList[0].nameE}}</text> 24 <text class="p12">{{pickerInfoList[0].nameE}}</text>
26 </view> 25 </view>
27 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 26 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
28 <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> 27 <!-- <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text> -->
29 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1"> 28 <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
29 <view class="p14">
30 {{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}
30 <image src="../../static/detail-tabicon.png" ></image> 31 <image src="../../static/detail-tabicon.png" ></image>
32 </view>
33 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
31 </picker> 34 </picker>
32 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 35 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
33 <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> 36 <!-- <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text> -->
34 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2"> 37 <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
38 <view class="p14">
39 {{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}
35 <image src="../../static/detail-tabicon.png" ></image> 40 <image src="../../static/detail-tabicon.png" ></image>
41 </view>
42 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
36 </picker> 43 </picker>
37 </view> 44 </view>
38 </view> 45 </view>
39 <view class="picker" > 46 <view class="picker" >
40 <view class="picker-choice"> 47 <view class="picker-choice">
41 <view class="choice-left"> 48 <view class="choice-left">
42 <text class="p11">{{pickerInfoList[1].nameC}}</text> 49 <text class="p11">{{pickerInfoList[1].nameC}}</text>
43 <text class="p12">{{pickerInfoList[1].nameE}}</text> 50 <text class="p12">{{pickerInfoList[1].nameE}}</text>
44 </view> 51 </view>
45 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 52 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
46 <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> 53 <!-- <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text> -->
47 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1"> 54 <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
48 <image src="../../static/detail-tabicon.png" ></image> 55 <view class="p14">
56 {{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}
57 <image src="../../static/detail-tabicon.png" ></image>
58 </view>
59 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
49 </picker> 60 </picker>
50 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 61 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
51 <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> 62 <!-- <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text> -->
52 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2"> 63 <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
53 <image src="../../static/detail-tabicon.png" ></image> 64 <view class="p14">
65 {{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}
66 <image src="../../static/detail-tabicon.png" ></image>
67 </view>
68 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
54 </picker> 69 </picker>
55 </view> 70 </view>
56 </view> 71 </view>
57 <view class="picker" > 72 <view class="picker" >
58 <view class="picker-choice"> 73 <view class="picker-choice">
59 <view class="choice-left"> 74 <view class="choice-left">
60 <text class="p11">{{pickerInfoList[2].nameC}}</text> 75 <text class="p11">{{pickerInfoList[2].nameC}}</text>
61 <text class="p12">{{pickerInfoList[2].nameE}}</text> 76 <text class="p12">{{pickerInfoList[2].nameE}}</text>
62 </view> 77 </view>
63 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 78 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
64 <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
65 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1"> 79 <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
66 <image src="../../static/detail-tabicon.png" ></image> 80 <view class="p14">
81 {{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}
82 <image src="../../static/detail-tabicon.png" ></image>
83 </view>
67 </picker> 84 </picker>
68 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text> 85 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
69 <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> 86 <!-- <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text> -->
70 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2"> 87 <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
71 <image src="../../static/detail-tabicon.png" ></image> 88 <view class="p14">
89 {{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}
90 <image src="../../static/detail-tabicon.png" ></image>
91 </view>
92 <!-- <image src="../../static/detail-tabicon.png" ></image> -->
72 </picker> 93 </picker>
73 </view> 94 </view>
74 </view> 95 </view>
75 <!-- <view class="picker" > 96 <view class="picker">
76 <view class="picker-choice"> 97 <view class="picker-choice">
77 <view class="choice-left"> 98 <view class="choice-left">
78 <text class="p11">{{pickerInfoList[3].nameC}}</text> 99 <text class="pd">瞳距:</text>
79 <text class="p12">{{pickerInfoList[3].nameE}}</text>
80 </view> 100 </view>
81 <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text> 101 <input type="digit" @change="handleInputPd" class="input"
82 <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text> 102 placeholder="请输入瞳距,单位cm" maxlength="20" :value="pd" />
83 <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
84 <image src="../../static/detail-tabicon.png" ></image>
85 </picker>
86 <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
87 <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
88 <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
89 <image src="../../static/detail-tabicon.png" ></image>
90 </picker>
91 </view> 103 </view>
92 </view> --> 104 </view>
93 <view class="picker" > 105 <view class="picker" >
94 <view class="picker-choice"> 106 <view class="picker-choice">
95 <view class="choice-left"> 107 <view class="choice-left">
96 <text class="p11">{{pickerInfoList[3].nameC}}</text> 108 <text class="p11">{{pickerInfoList[3].nameC}}</text>
97 </view> 109 </view>
98 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text> 110 <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
99 <text class="p14" style="width: 34px;">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
100 <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1"> 111 <picker @change="bindPickerChange41" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
101 <image src="../../static/detail-tabicon.png" ></image> 112 <view class="p14" style="width: 30px;">
113 {{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}
114 <image src="../../static/detail-tabicon.png" ></image>
115 </view>
102 </picker> 116 </picker>
103 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text> 117 <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
104 <text class="p14" style="width: 30px;">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
105 <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2"> 118 <picker @change="bindPickerChange42" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
106 <image src="../../static/detail-tabicon.png" ></image> 119 <view class="p14" style="width: 30px;">
120 {{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}
121 <image src="../../static/detail-tabicon.png" ></image>
122 </view>
107 </picker> 123 </picker>
108 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text> 124 <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
109 <text class="p14" style="width: 30px;">{{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}</text>
110 <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3"> 125 <picker @change="bindPickerChange43" :value="pickerInfoList[3].nameIndex3" :range="pickerInfoList[3].nameArray3">
111 <image src="../../static/detail-tabicon.png" ></image> 126 <view class="p14" style="width: 30px;">
127 {{pickerInfoList[3].nameArray3[pickerInfoList[3].nameIndex3]}}
128 <image src="../../static/detail-tabicon.png" ></image>
129 </view>
112 </picker> 130 </picker>
113 </view> 131 </view>
114 </view> 132 </view>
115 <view class="confirm"> 133 <view class="confirm">
116 <image :src="confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image> 134 <image class="image1" :src="confirm ? tabicon[0] : tabicon[1]" @tap="changeConfirm"></image>
117 <text>确认以上输入信息来源于我的验光数据!</text> 135 <text>确认以上输入信息来源于我的验光数据!</text>
118 </view> 136 </view>
119 </view> 137 </view>
120 138
121 </template> 139 </template>
122 </view> 140 </view>
123 141
124 142
125 <view class="footer" @click="handleSubmit"> 143 <view class="footer" @click="handleSubmit">
126 <button class="btn" type="default">提 交</button> 144 <button class="btn" type="default">提 交</button>
127 </view> 145 </view>
128 </view> 146 </view>
129 </template> 147 </template>
130 148
131 <script> 149 <script>
132 import store from '@/store'; 150 import store from '@/store';
133 151
134 export default { 152 export default {
135 data() { 153 data() {
136 return { 154 return {
137 pickerInfoList:[ 155 pickerInfoList:[
138 {nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0}, 156 {nameC:"度数",nameE:"(SPH)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:0},
139 {nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1}, 157 {nameC:"散光",nameE:"(CYL)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:1},
140 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2}, 158 {nameC:"散光轴位",nameE:"(AXI)",nameArray1:[''],nameIndex1:0,nameArray2:[''],nameIndex2:0,key:2},
141 {nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0} 159 {nameC:"验光日期",nameE:'',nameArray1:[''],nameIndex1:0,nameArray2:['',1,2,3,4,5,6,7,8,9,10,11,12],nameIndex2:0,nameArray3:[''],nameIndex3:0}
142 ], 160 ],
143 confirm: false, // 用户是否确认 161 confirm: false, // 用户是否确认
144 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'], 162 tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
145 name: '夏小花', 163 name: '夏小花',
146 pickerInfoChioce:{ 164 pickerInfoChioce:{
147 "leftSph": 0, 165 "leftSph": 0,
148 "rightSph": 0, 166 "rightSph": 0,
149 "leftCyl": 0, 167 "leftCyl": 0,
150 "rightCyl": 0, 168 "rightCyl": 0,
151 "leftAxi": 0, 169 "leftAxi": 0,
152 "rightAxi": 0, 170 "rightAxi": 0,
153 "time":{ 171 "time":{
154 "year":0, 172 "year":0,
155 "month": 0, 173 "month": 0,
156 "day":0 , 174 "day":0 ,
157 } 175 }
158 }, 176 },
159 pd: '',// 瞳距 177 pd: '',// 瞳距
160 kinds:Number, // kinds=1，提交为新增验光，2为修改 178 kinds:Number, // kinds=1，提交为新增验光，2为修改
161 mp_id: Number 179 mp_id: Number
162 }; 180 };
163 }, 181 },
164 onLoad: function (option) { 182 onLoad: function (option) {
165 //option为object类型，会序列化上个页面传递的参数 183 //option为object类型，会序列化上个页面传递的参数
166 // 初始化SPL、CYL、AXI的值 184 // 初始化SPL、CYL、AXI的值
167 for (let j = 0; j < 3; j++) { 185 for (let j = 0; j < 3; j++) {
168 for(let i=-12;i<6;i++){ 186 for(let i=-12;i<6;i++){
169 this.pickerInfoList[j].nameArray1.push(i) 187 this.pickerInfoList[j].nameArray1.push(i)
170 this.pickerInfoList[j].nameArray1.push(i+0.5) 188 this.pickerInfoList[j].nameArray1.push(i+0.5)
171 this.pickerInfoList[j].nameArray2.push(i) 189 this.pickerInfoList[j].nameArray2.push(i)
172 this.pickerInfoList[j].nameArray2.push(i+0.5) 190 this.pickerInfoList[j].nameArray2.push(i+0.5)
173 if(i>=-6){ 191 if(i>=-6){
174 this.pickerInfoList[j].nameArray1.push(i+0.25) 192 this.pickerInfoList[j].nameArray1.push(i+0.25)
175 this.pickerInfoList[j].nameArray1.push(i+0.75) 193 this.pickerInfoList[j].nameArray1.push(i+0.75)
176 this.pickerInfoList[j].nameArray2.push(i+0.25) 194 this.pickerInfoList[j].nameArray2.push(i+0.25)
177 this.pickerInfoList[j].nameArray2.push(i+0.75) 195 this.pickerInfoList[j].nameArray2.push(i+0.75)
178 } 196 }
179 if(i==5){ 197 if(i==5){
180 this.pickerInfoList[j].nameArray1.push(i+1) 198 this.pickerInfoList[j].nameArray1.push(i+1)
181 this.pickerInfoList[j].nameArray2.push(i+1) 199 this.pickerInfoList[j].nameArray2.push(i+1)
182 } 200 }
183 } 201 }
184 } 202 }
185 // 初始化日期值 203 // 初始化日期值
186 for (let i = 1; i < 32; i++){ 204 for (let i = 1; i < 32; i++){
187 this.pickerInfoList[3].nameArray3.push(i) 205 this.pickerInfoList[3].nameArray3.push(i)
188 } 206 }
189 // 初始化年份前后五年 207 // 初始化年份前后五年
190 let myDate = new Date(); 208 let myDate = new Date();
191 let nowYear = myDate.getFullYear(); 209 let nowYear = myDate.getFullYear();
192 for(let i=0;i<5;i++){ 210 for(let i=0;i<5;i++){
193 this.pickerInfoList[3].nameArray1.push(nowYear-i) 211 this.pickerInfoList[3].nameArray1.push(nowYear-i)
194 } 212 }
195 213
196 this.kinds=option.kinds 214 this.kinds=option.kinds
197 if(option.kinds==1){ 215 if(option.kinds==1){
198 this.name= ''; 216 this.name= '';
199 this.pd= ''; 217 this.pd= '';
200 } else{ 218 } else{
201 console.log('args===>',option.index) 219 console.log('args===>',option.index)
202 const loveList=Object.assign({},this.$store.state.myLoveList.loveList) 220 const loveList=Object.assign({},this.$store.state.myLoveList.loveList)
203 console.log('args===>',loveList[option.index].in_time) 221 console.log('args===>',loveList[option.index].in_time)
204 console.log('args===>',loveList[option.index].in_time.toString().slice(0,4)) 222 console.log('args===>',loveList[option.index].in_time.toString().slice(0,4))
205 console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0) 223 console.log('args===>',loveList[option.index].in_time.toString().slice(5,6)==0)
206 console.log('args===>',loveList[option.index].in_time.toString().slice(8,10)) 224 console.log('args===>',loveList[option.index].in_time.toString().slice(8,10))
207 this.name=loveList[option.index].name 225 this.name=loveList[option.index].name
208 this.pd=loveList[option.index].pd 226 this.pd=loveList[option.index].pd
209 this.mp_id=loveList[option.index].mp_id 227 this.mp_id=loveList[option.index].mp_id
210 // 将kinds =2时的值传到该页面 228 // 将kinds =2时的值传到该页面
211 this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph) 229 this.pickerInfoList[0].nameArray1.unshift(loveList[option.index].leftSph)
212 this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph) 230 this.pickerInfoList[0].nameArray2.unshift(loveList[option.index].rightSph)
213 this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl) 231 this.pickerInfoList[1].nameArray1.unshift(loveList[option.index].leftCyl)
214 this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl) 232 this.pickerInfoList[1].nameArray2.unshift(loveList[option.index].rightCyl)
215 this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi) 233 this.pickerInfoList[2].nameArray1.unshift(loveList[option.index].leftAxi)
216 this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi) 234 this.pickerInfoList[2].nameArray2.unshift(loveList[option.index].rightAxi)
217 235
218 this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4)) 236 this.pickerInfoList[3].nameArray1.unshift(loveList[option.index].in_time.toString().slice(0,4))
219 if(loveList[option.index].in_time.toString().slice(5,6)==0){ 237 if(loveList[option.index].in_time.toString().slice(5,6)==0){
220 this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7)) 238 this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(6,7))
221 } else{ 239 } else{
222 this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7)) 240 this.pickerInfoList[3].nameArray2.unshift(loveList[option.index].in_time.toString().slice(5,7))
223 } 241 }
224 if(loveList[option.index].in_time.toString().slice(8,9)==0){ 242 if(loveList[option.index].in_time.toString().slice(8,9)==0){
225 this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10)) 243 this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(9,10))
226 } else{ 244 } else{
227 this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10)) 245 this.pickerInfoList[3].nameArray3.unshift(loveList[option.index].in_time.toString().slice(8,10))
228 } 246 }
229 } 247 }
230 }, 248 },
231 methods:{ 249 methods:{
232 handleInput(e){ 250 handleInput(e){
233 this.name=e.target.value 251 this.name=e.target.value
234 }, 252 },
235 handleInputPd(e){ 253 handleInputPd(e){
236 // 只能输入正浮点数或正数 254 // 只能输入正浮点数或正数
237 if(/^\d+(\.\d+)?$/.test(e.target.value)){ 255 if(/^\d+(\.\d+)?$/.test(e.target.value)){
238 this.pd=e.target.value 256 this.pd=e.target.value
239 } else { 257 } else {
240 uni.showToast({ 258 uni.showToast({
241 title:"请输入有效数据;示例:89", 259 title:"请输入有效数据;示例:89",
242 icon: "none", 260 icon: "none",
243 duration: 3000, 261 duration: 3000,
244 }) 262 })
245 this.pd = '' 263 this.pd = ''
246 } 264 }
247 265
248 }, 266 },
249 // 用户提交 267 // 用户提交
250 handleSubmit(){ 268 handleSubmit(){
251 if(this.name==''){ 269 if(this.name==''){
252 uni.showToast({ 270 uni.showToast({
253 title:"请输入验光单取名", 271 title:"请输入验光单取名",
254 icon: "none", 272 icon: "none",
255 duration: 3000, 273 duration: 3000,
256 }) 274 })
257 } 275 }
258 if(this.pd==''){ 276 if(this.pd==''){
259 uni.showToast({ 277 uni.showToast({
260 title:"请输入瞳距", 278 title:"请输入瞳距",
261 icon: "none", 279 icon: "none",
262 duration: 3000, 280 duration: 3000,
263 }) 281 })
264 } 282 }
265 if(this.confirm){ 283 if(this.confirm){
266 if(this.kinds==1){ 284 if(this.kinds==1){
267 // 添加用户验光单 285 // 添加用户验光单
268 console.log('kinds====>',this.kinds) 286 console.log('kinds====>',this.kinds)
269 store.dispatch('myLoveList/addMylove', { 287 store.dispatch('myLoveList/addMylove', {
270 288
271 uid: this.$store.state.user.userInfo.uid, 289 uid: this.$store.state.user.userInfo.uid,
272 openid: this.$store.state.user.userInfo.openid, 290 openid: this.$store.state.user.userInfo.openid,
273 // mp_name: this.$store.state.user.userInfo.mp_name, 291 // mp_name: this.$store.state.user.userInfo.mp_name,
274 leftSph: this.pickerInfoChioce.leftSph, 292 leftSph: this.pickerInfoChioce.leftSph,
275 rightSph: this.pickerInfoChioce.rightSph, 293 rightSph: this.pickerInfoChioce.rightSph,
276 leftCyl: this.pickerInfoChioce.leftCyl, 294 leftCyl: this.pickerInfoChioce.leftCyl,
277 rightCyl: this.pickerInfoChioce.rightCyl, 295 rightCyl: this.pickerInfoChioce.rightCyl,
278 leftAxi: this.pickerInfoChioce.leftAxi, 296 leftAxi: this.pickerInfoChioce.leftAxi,
279 rightAxi: this.pickerInfoChioce.rightAxi, 297 rightAxi: this.pickerInfoChioce.rightAxi,
280 pd: this.pd,// 瞳距 298 pd: this.pd,// 瞳距
281 mp_name:this.name, 299 mp_name:this.name,
282 // time: this.pickerInfoChioce.time, 300 // time: this.pickerInfoChioce.time,
283 // img_url2: "http://localhost:8087/images/shop_1/1/", 301 // img_url2: "http://localhost:8087/images/shop_1/1/",
284 }); 302 });
285 store.dispatch('myLoveList/getLoveList', { 303 store.dispatch('myLoveList/getLoveList', {
286 uid: this.$store.state.user.userInfo.uid, 304 uid: this.$store.state.user.userInfo.uid,
287 }); 305 });
288 uni.navigateBack({ 306 uni.navigateBack({
289 delta:1, 307 delta:1,
290 animationDuration:2000 308 animationDuration:2000
291 }) 309 })
292 } 310 }
293 if(this.kinds==2){ 311 if(this.kinds==2){
294 // console.log('kinds====>',this.kinds) 312 // console.log('kinds====>',this.kinds)
295 // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1) 313 // console.log('pickerindex=====>',this.pickerInfoList[0].nameIndex1)
296 // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce)) 314 // console.log('this.pickerInfoChioce====>',type(this.pickerInfoChioce))
297 const leftList = ["leftSph","leftCyl","leftAxi"]; 315 const leftList = ["leftSph","leftCyl","leftAxi"];
298 const rightList = ["rightSph", "rightCyl", "rigthAxi"]; 316 const rightList = ["rightSph", "rightCyl", "rigthAxi"];
299 for (let j=0; j<3; j++) { 317 for (let j=0; j<3; j++) {
300 if(this.pickerInfoList[j].nameIndex1!=0){ 318 if(this.pickerInfoList[j].nameIndex1!=0){
301 319
302 store.dispatch('myLoveList/updateMylove', { 320 store.dispatch('myLoveList/updateMylove', {
303 uid: this.$store.state.user.userInfo.uid, 321 uid: this.$store.state.user.userInfo.uid,
304 openid: this.$store.state.user.userInfo.openid, 322 openid: this.$store.state.user.userInfo.openid,
305 mp_id: this.mp_id, 323 mp_id: this.mp_id,
306 keyname: leftList[j], 324 keyname: leftList[j],
307 keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1], 325 keyvalue: this.pickerInfoList[j].nameArray1[this.pickerInfoList[j].nameIndex1],
308 }); 326 });
309 } 327 }
310 if(this.pickerInfoList[j].nameIndex2 !=0) { 328 if(this.pickerInfoList[j].nameIndex2 !=0) {
311 store.dispatch('myLoveList/updateMylove', { 329 store.dispatch('myLoveList/updateMylove', {
312 uid: this.$store.state.user.userInfo.uid, 330 uid: this.$store.state.user.userInfo.uid,
313 openid: this.$store.state.user.userInfo.openid, 331 openid: this.$store.state.user.userInfo.openid,
314 mp_id: this.mp_id, 332 mp_id: this.mp_id,
315 keyname: rightList[j], 333 keyname: rightList[j],
316 keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2] 334 keyvalue: this.pickerInfoList[j].nameArray2[this.pickerInfoList[j].nameIndex2]
317 }); 335 });
318 } 336 }
319 } 337 }
320 store.dispatch('myLoveList/getLoveList', { 338 store.dispatch('myLoveList/getLoveList', {
321 uid: this.$store.state.user.userInfo.uid, 339 uid: this.$store.state.user.userInfo.uid,
322 }); 340 });
323 uni.navigateBack({ 341 uni.navigateBack({
324 delta:1, 342 delta:1,
325 animationDuration:2000 343 animationDuration:2000
326 }) 344 })
327 345
328 } 346 }
329 347
330 } else{ 348 } else{
331 uni.showToast({ 349 uni.showToast({
332 title:"请确认你的验光数据", 350 title:"请确认你的验光数据",
333 icon: "none", 351 icon: "none",
334 duration: 3000, 352 duration: 3000,
335 }) 353 })
336 } 354 }
337 }, 355 },
338 changeConfirm() { 356 changeConfirm() {
339 this.confirm = !this.confirm 357 this.confirm = !this.confirm
340 }, 358 },
341 359
342 bindPickerChange01: function(e) { 360 bindPickerChange01: function(e) {
343 this.pickerInfoList[0].nameIndex1 = e.target.value 361 this.pickerInfoList[0].nameIndex1 = e.target.value
344 this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value] 362 this.pickerInfoChioce.leftSph=this.pickerInfoList[0].nameArray1[e.target.value]
345 }, 363 },
346 bindPickerChange02: function(e) { 364 bindPickerChange02: function(e) {
347 this.pickerInfoList[0].nameIndex2 = e.target.value 365 this.pickerInfoList[0].nameIndex2 = e.target.value
348 this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value] 366 this.pickerInfoChioce.rightSph=this.pickerInfoList[0].nameArray2[e.target.value]
349 }, 367 },
350 368
351 bindPickerChange11: function(e) { 369 bindPickerChange11: function(e) {
352 this.pickerInfoList[1].nameIndex1 = e.target.value 370 this.pickerInfoList[1].nameIndex1 = e.target.value
353 this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value] 371 this.pickerInfoChioce.leftCyl=this.pickerInfoList[1].nameArray1[e.target.value]
354 }, 372 },
355 bindPickerChange12: function(e) { 373 bindPickerChange12: function(e) {
356 this.pickerInfoList[1].nameIndex2 = e.target.value 374 this.pickerInfoList[1].nameIndex2 = e.target.value
357 this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value] 375 this.pickerInfoChioce.rightCyl=this.pickerInfoList[1].nameArray2[e.target.value]
358 }, 376 },
359 377
360 bindPickerChange21: function(e) { 378 bindPickerChange21: function(e) {
361 this.pickerInfoList[2].nameIndex1 = e.target.value 379 this.pickerInfoList[2].nameIndex1 = e.target.value
362 this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value] 380 this.pickerInfoChioce.leftAxi=this.pickerInfoList[2].nameArray1[e.target.value]
363 }, 381 },
364 bindPickerChange22: function(e) { 382 bindPickerChange22: function(e) {
365 this.pickerInfoList[2].nameIndex2 = e.target.value 383 this.pickerInfoList[2].nameIndex2 = e.target.value
366 this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value] 384 this.pickerInfoChioce.rightAxi=this.pickerInfoList[2].nameArray2[e.target.value]
367 }, 385 },
368 386
369 bindPickerChange41: function(e) { 387 bindPickerChange41: function(e) {
370 this.pickerInfoList[3].nameIndex1 = e.target.value 388 this.pickerInfoList[3].nameIndex1 = e.target.value
371 this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value] 389 this.pickerInfoChioce.time.year=this.pickerInfoList[3].nameArray1[e.target.value]
372 }, 390 },
373 bindPickerChange42: function(e) { 391 bindPickerChange42: function(e) {
374 this.pickerInfoList[3].nameIndex2 = e.target.value 392 this.pickerInfoList[3].nameIndex2 = e.target.value
375 this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value] 393 this.pickerInfoChioce.time.month=this.pickerInfoList[3].nameArray2[e.target.value]
376 }, 394 },
377 bindPickerChange43: function(e) { 395 bindPickerChange43: function(e) {
378 this.pickerInfoList[3].nameIndex3 = e.target.value 396 this.pickerInfoList[3].nameIndex3 = e.target.value
379 this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value] 397 this.pickerInfoChioce.time.day=this.pickerInfoList[3].nameArray3[e.target.value]
380 }, 398 },
381 } 399 }
382 } 400 }
383 </script> 401 </script>
384 402
385 <style lang="scss"> 403 <style lang="scss">
386 .wrap{ 404 .wrap{
387 min-height: 100vh; 405 min-height: 100vh;
388 background-color: #F2F2F2; 406 background-color: #F2F2F2;
389 .body{ 407 .body{
390 // font-family: PingFangSC-Regular; 408 // font-family: PingFangSC-Regular;
391 font-size: 12px; 409 font-size: 12px;
392 color: #666666; 410 color: #666666;
393 letter-spacing: 0; 411 letter-spacing: 0;
394 .bodyBox{ 412 .bodyBox{
395 margin-top: 15px; 413 margin-top: 15px;
396 .names{ 414 .names{
397 // font-family: PingFangSC-Regular; 415 // font-family: PingFangSC-Regular;
398 font-size: 12px; 416 font-size: 12px;
399 color: #151515; 417 color: #151515;
400 letter-spacing: 0; 418 letter-spacing: 0;
401 text-align: justify; 419 text-align: justify;
402 line-height: 17px; 420 line-height: 17px;
403 margin-left: 5px; 421 margin-left: 5px;
404 margin-right: 10px; 422 margin-right: 10px;
405 } 423 }
406 text{ 424 text{
407 // font-family: PingFangSC-Regular; 425 // font-family: PingFangSC-Regular;
408 font-size: 12px; 426 font-size: 12px;
409 color: #666666; 427 color: #666666;
410 letter-spacing: 0; 428 letter-spacing: 0;
411 text-align: justify; 429 text-align: justify;
412 } 430 }
413 } 431 }
414 432
415 } 433 }
416 .goods-form { 434 .goods-form {
417 display: flex; 435 display: flex;
418 flex-direction: column; 436 flex-direction: column;
419 align-items: center; 437 align-items: center;
420 justify-content: center; 438 justify-content: center;
421 background-color: #fff; 439 background-color: #fff;
422 width: 100%; 440 width: 100%;
423 padding: 40rpx 0; 441 padding: 40rpx 0;
424 .p1 { 442 .p1 {
425 font-size: 16px; 443 font-size: 16px;
426 color: #333333; 444 color: #333333;
427 letter-spacing: -0.3px; 445 letter-spacing: -0.3px;
428 text-align: justify; 446 text-align: justify;
429 line-height: 24px; 447 line-height: 24px;
430 margin: 4px 0; 448 margin: 4px 0;
431 449
432 } 450 }
433 .p2 { 451 .p2 {
434 font-size: 12px; 452 font-size: 12px;
435 color: #999999; 453 color: #999999;
436 letter-spacing: -0.23px; 454 letter-spacing: -0.23px;
437 margin-bottom: 18rpx; 455 margin-bottom: 32rpx;
438 } 456 }
439 .use_pd{ 457 .image2{
440 display: flex; 458 width: 42rpx;
441 height: 48rpx; 459 height: 34rpx;
442 line-height: 48rpx; 460 margin-right: 12rpx;
443 margin-left: -298rpx;
444 margin-top: 30rpx;
445 margin-bottom: 40rpx;
446 align-items: center;
447 justify-content: center;
448 text{
449 font-size: 14px;
450 color: #333333;
451 margin-right: 44rpx;
452 }
453 }
454 .use_name{
455 display: flex;
456 height: 48rpx;
457 line-height: 48rpx;
458 margin-left: -220rpx;
459 margin-top: 20rpx;
460 align-items: center;
461 justify-content: center;
462 // text-align: center;
463 text{
464 font-size: 14px;
465 color: #333333;
466 margin-right: 44rpx;
467 }
468 }
469 image{
470 width: 28rpx;
471 height: 26rpx;
472 } 461 }
473 .confirm { 462 .confirm {
474 display: flex; 463 display: flex;
475 align-items: center; 464 align-items: center;
476 font-size: 12px; 465 font-size: 12px;
477 color: #666666; 466 color: #666666;
478 letter-spacing: -0.23px; 467 letter-spacing: -0.23px;
479 width: 684rpx; 468 width: 684rpx;
480 image{ 469 .image1{
481 margin-right:25rpx; 470 margin-right:25rpx;
471 width: 42rpx;
472 height: 38rpx;
482 } 473 }
483 } 474 }
484 .picker{ 475 .picker{
485 display: flex; 476 display: flex;
486 flex-direction: column; 477 flex-direction: column;
487 justify-content: center; 478 justify-content: center;
488 align-items: center; 479 align-items: center;
489 width: 100%; 480 width: 100%;
490 image{ 481
491 width: 10px;
492 height: 10px;
493 margin-right: 5px;
494 }
495 .picker-choice{ 482 .picker-choice{
496 display: flex; 483 display: flex;
497 width: 684rpx; 484 width: 684rpx;
498 align-items: center; 485 align-items: center;
499 margin-bottom: 40rpx; 486 margin-bottom: 40rpx;
487 .input{
488 border-bottom: 1px solid #CFCFCF;
489 height: 40rpx;
490 }
500 .choice-left{ 491 .choice-left{
501 width: 210rpx; 492 width: 210rpx;
493 .pd{
494 font-size: 14px;
495 color: #333333;
496 letter-spacing: -0.26px;
497 text-align: justify;
498 line-height: 24px;
499 margin-right: 44rpx;
500 }
502 .p11 { 501 .p11 {
503 font-size: 14px; 502 font-size: 14px;
504 color: #333333; 503 color: #333333;
505 letter-spacing: -0.26px; 504 letter-spacing: -0.26px;
506 text-align: justify; 505 text-align: justify;
507 line-height: 24px; 506 line-height: 24px;
508 // margin-right: 10px; 507 // margin-right: 10px;
509 } 508 }
510 .p12 { 509 .p12 {
511 font-size: 10px; 510 font-size: 10px;
512 color: #3F3F3F; 511 color: #3F3F3F;
513 letter-spacing: -0.19px; 512 letter-spacing: -0.19px;
514 text-align: justify; 513 text-align: justify;
515 line-height: 24px; 514 line-height: 24px;
516 } 515 }
517 516
518 517
519 } 518 }
520 .p13 { 519 .p13 {
521 font-size: 10px; 520 font-size: 10px;
522 color: #999999; 521 color: #999999;
523 letter-spacing: -0.19px; 522 letter-spacing: -0.19px;
524 margin-right: 10px; 523 margin-right: 10px;
525 } 524 }
526 .p13-date { 525 .p13-date {
527 font-size: 10px; 526 font-size: 10px;
528 color: #999999; 527 color: #999999;
529 letter-spacing: -0.19px; 528 letter-spacing: -0.19px;