|
23 | 23 | <section class="pay_way container_style"> |
24 | 24 | <header class="header_style"> |
25 | 25 | <span>支付方式</span> |
26 | | - <div class="more_type"> |
| 26 | + <div class="more_type" @click="showPayWayFun"> |
27 | 27 | <span>在线支付</span> |
28 | 28 | <svg class="address_empty_right"> |
29 | 29 | <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use> |
|
84 | 84 | <p>确认下单</p> |
85 | 85 | </section> |
86 | 86 | <transition name="fade"> |
87 | | - <div></div> |
| 87 | + <div class="cover" v-if="showPayWay" @click="showPayWayFun"></div> |
| 88 | + </transition> |
| 89 | + <transition name="slid_up"> |
| 90 | + <div class="choose_type_Container" v-if="showPayWay"> |
| 91 | + <header>支付方式</header> |
| 92 | + <ul> |
| 93 | + <li v-for="item in checkoutData.payments" :key="item.id" :class="{choose: payWayId == item.id}"> |
| 94 | + <span>{{item.name}}<span v-if="!item.is_online_payment">{{item.description}}</span></span> |
| 95 | + <svg class="address_empty_right" @click="choosePayWay(item.is_online_payment, item.id)"> |
| 96 | + <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#select"></use> |
| 97 | + </svg> |
| 98 | + </li> |
| 99 | + </ul> |
| 100 | + </div> |
88 | 101 | </transition> |
89 | | - |
90 | 102 | </section> |
91 | 103 | <loading v-if="showLoading"></loading> |
92 | 104 | </div> |
|
105 | 117 | return { |
106 | 118 | geohash: '', //geohash位置信息 |
107 | 119 | shopId: null, //商店id值 |
108 | | - showLoading: true, |
109 | | - checkoutData: null, |
110 | | - shopCart: null, |
111 | | - imgBaseUrl, |
| 120 | + showLoading: true, //显示加载动画 |
| 121 | + checkoutData: null,//数据返回值 |
| 122 | + shopCart: null,//购物车数据 |
| 123 | + imgBaseUrl, //图片域名 |
| 124 | + showPayWay: false,//显示付款方式 |
| 125 | + payWayId: 1, |
112 | 126 | } |
113 | 127 | }, |
114 | 128 | created(){ |
|
159 | 173 | this.checkoutData = await checkout(this.geohash, [newArr]); |
160 | 174 | this.showLoading = false; |
161 | 175 | }, |
| 176 | + showPayWayFun(){ |
| 177 | + this.showPayWay = !this.showPayWay; |
| 178 | + }, |
| 179 | + choosePayWay(is_online_payment, id){ |
| 180 | + if (is_online_payment) { |
| 181 | + this.showPayWay = !this.showPayWay; |
| 182 | + this.payWayId = id; |
| 183 | + } |
| 184 | + }, |
162 | 185 | } |
163 | 186 | } |
164 | 187 |
|
165 | 188 | </script> |
166 | 189 |
|
167 | 190 | <style lang="scss" scoped> |
168 | 191 | @import '../../style/mixin'; |
169 | | - |
| 192 | +
|
170 | 193 | .confirmOrderContainer{ |
171 | 194 | padding-top: 1.95rem; |
172 | 195 | padding-bottom: 3rem; |
|
318 | 341 | text-align: center; |
319 | 342 | } |
320 | 343 | } |
| 344 | + .cover{ |
| 345 | + position: fixed; |
| 346 | + top: 0; |
| 347 | + bottom: 0; |
| 348 | + left: 0; |
| 349 | + right: 0; |
| 350 | + background-color: rgba(0,0,0,.3); |
| 351 | + z-index: 203; |
| 352 | + } |
| 353 | + .choose_type_Container{ |
| 354 | + min-height: 10rem; |
| 355 | + background-color: #fff; |
| 356 | + position: fixed; |
| 357 | + bottom: 0; |
| 358 | + width: 100%; |
| 359 | + z-index: 204; |
| 360 | + header{ |
| 361 | + background-color: #fafafa; |
| 362 | + @include sc(.7rem, #333); |
| 363 | + text-align: center; |
| 364 | + line-height: 2rem; |
| 365 | + } |
| 366 | + ul{ |
| 367 | + li{ |
| 368 | + @include fj; |
| 369 | + padding: 0 .7rem; |
| 370 | + line-height: 2.5rem; |
| 371 | + align-items: center; |
| 372 | + span{ |
| 373 | + @include sc(.7rem, #ccc); |
| 374 | + } |
| 375 | + svg{ |
| 376 | + @include wh(.8rem, .8rem); |
| 377 | + fill: #eee; |
| 378 | + } |
| 379 | + } |
| 380 | + .choose{ |
| 381 | + span{ |
| 382 | + color: #333; |
| 383 | + } |
| 384 | + svg{ |
| 385 | + fill: #4cd964; |
| 386 | + } |
| 387 | + } |
| 388 | + } |
| 389 | + } |
321 | 390 | .fade-enter-active, .fade-leave-active { |
322 | | - transition: opacity .5s; |
| 391 | + transition: opacity .3s; |
323 | 392 | } |
324 | 393 | .fade-enter, .fade-leave-active { |
325 | 394 | opacity: 0; |
326 | 395 | } |
| 396 | + .slid_up-enter-active, .slid_up-leave-active { |
| 397 | + transition: all .3s; |
| 398 | + } |
| 399 | + .slid_up-enter, .slid_up-leave-active { |
| 400 | + transform: translate3d(0,10rem,0) |
| 401 | + } |
327 | 402 | </style> |
0 commit comments