chooseCoupon.vue 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <view class="coopon-pages">
  3. <couponTpl @checkOk="checkOk" :list="couponList" :showCheck="true"></couponTpl>
  4. <view class="fix-button" v-if="curCoupon">
  5. <view>
  6. <view>优惠:¥{{curCoupon.couponAmount}}</view>
  7. <view @click="comfirn">确认</view>
  8. </view>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. import couponTpl from '@/pages/coupon/couponTpl.vue'
  14. export default {
  15. components: {
  16. couponTpl
  17. },
  18. data() {
  19. return {
  20. curCoupon: null,
  21. couponList: []
  22. };
  23. },
  24. onLoad(options) {
  25. console.log(options,'options')
  26. this.couponList = JSON.parse(decodeURIComponent(options.list))
  27. this.curCoupon = JSON.parse(decodeURIComponent(options.curCoupon))
  28. },
  29. methods:{
  30. checkOk(item){
  31. this.couponList.map(list=>{
  32. list.checked = (list.id === item.id && !list.checked) ? true : false
  33. })
  34. let has = this.couponList.find(item=> item.checked)
  35. if (has) {
  36. this.curCoupon = has
  37. } else {
  38. this.curCoupon = null
  39. }
  40. // 将用户选择优惠券传给下单页面
  41. uni.$emit('couponChoose',{curCoupon:this.curCoupon})
  42. },
  43. // 确认按钮
  44. comfirn(){
  45. uni.navigateBack()
  46. }
  47. }
  48. }
  49. </script>
  50. <style lang="scss">
  51. .coopon-pages{
  52. width: 100%;
  53. padding-bottom: 100rpx;
  54. .fix-button{
  55. width: 100%;
  56. position: fixed;
  57. bottom: 0;
  58. > view{
  59. display: flex;
  60. align-items: center;
  61. background: #333;
  62. >view{
  63. padding: 20rpx 30rpx;
  64. color: #fff;
  65. &:first-child{
  66. width: 70%;
  67. flex-grow: 1;
  68. }
  69. &:last-child{
  70. background:#4CD964;
  71. width: 30%;
  72. color: #fff;
  73. text-align: center;
  74. font-size: 36rpx;
  75. }
  76. }
  77. }
  78. }
  79. }
  80. </style>