getCoupon.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <view class="coupon-list">
  3. <view class="coupon-box">
  4. <view class="coupon-head">
  5. <view class="coupon-sel"></view>
  6. <view class="coupon-title">
  7. <view class="coupon-title-1">满100减50</view>
  8. </view>
  9. <view class="coupon-price">
  10. ¥<text>100</text>
  11. </view>
  12. </view>
  13. <view class="coupon-desc">
  14. <view><u-icon class="icon" size="30" name="clock"></u-icon> 有效期至:2020-05-12</view>
  15. <view><u-icon class="icon" size="30" name="info-circle"></u-icon> 优惠卷使用说明优惠卷使用说明优惠卷使用说明优惠卷使用说明</view>
  16. </view>
  17. </view>
  18. <u-button class="handleSubmit" type="error">确认领取</u-button>
  19. </view>
  20. </template>
  21. <script>
  22. import {couponData, receivesCoupon} from '@/api/coupon.js'
  23. export default{
  24. name: 'getCoupon',
  25. data () {
  26. return {
  27. couponInfo: {}, // 领取优惠券信息
  28. }
  29. },
  30. onLoad(options) {
  31. // 存储当前扫码的券码
  32. if (options.scene) {
  33. let scene = decodeURIComponent(options.scene);
  34. //&是我们定义的参数链接方式
  35. let couponCode = scene;
  36. //其他逻辑处理。。。。。
  37. this.$store.state.vuex_couponCode = couponCode
  38. // 获取要领取的优惠券
  39. this.getCoupon(couponCode)
  40. } else {
  41. // 判断是否扫码过
  42. if (this.$store.state.vuex_couponCode != '') {
  43. let couponCode = this.$store.state.vuex_couponCode
  44. this.getCoupon(couponCode)
  45. } else {
  46. // 返回首页
  47. uni.reLaunch({
  48. url: "/pages/index/index"
  49. })
  50. }
  51. }
  52. },
  53. methods: {
  54. // 获取要领取的优惠券
  55. getCoupon (code) {
  56. couponData({couponCode:code}).then(res=>{
  57. if (res.status == 200) {
  58. this.couponInfo = res.data
  59. }
  60. })
  61. },
  62. // 确认领取优惠券
  63. handleSubmit () {
  64. let couponCode = this.$store.state.vuex_couponCode
  65. receivesCoupon({couponCode:couponCode}).then(res =>{
  66. if (res.status == 200) {
  67. this.toashMsg('领取成功')
  68. setTimeout(()=>{
  69. uni.navigateTo({
  70. url: '/pages/coupon/index/index'
  71. })
  72. },500)
  73. }
  74. })
  75. }
  76. },
  77. }
  78. </script>
  79. <style lang="scss">
  80. .coupon-list{
  81. width: 100%;
  82. height: 100%;
  83. padding: 25rpx;
  84. .handleSubmit{
  85. width: 80%;
  86. margin-top: 40%;
  87. }
  88. }
  89. .coupon-box.diabled{
  90. background: #999;
  91. }
  92. .coupon-box{
  93. margin-bottom: 30rpx;
  94. border-radius: 15rpx;
  95. box-shadow: 2rpx 2rpx 10rpx #ddd;
  96. background: #ff0000;
  97. color: #FFFFFF;
  98. .coupon-head{
  99. display: flex;
  100. align-items: center;
  101. padding: 20rpx 30rpx;
  102. position: relative;
  103. border-bottom: 15rpx dotted #FFFFFF;
  104. margin-bottom: -8rpx;
  105. .coupon-sel{
  106. position: absolute;
  107. width: 56rpx;
  108. height: 46rpx;
  109. right: 0;
  110. top: 0;
  111. }
  112. .coupon-checked{
  113. background: url(/static/img/select.png) no-repeat center;
  114. background-size: 100% 100%;
  115. }
  116. .coupon-title{
  117. flex-grow: 1;
  118. font-size: 32rpx;
  119. }
  120. .coupon-price{
  121. padding: 0 15rpx;
  122. color: #FFFFFF;
  123. text{
  124. font-size: 60rpx;
  125. }
  126. }
  127. }
  128. .coupon-desc{
  129. padding: 10rpx 30rpx;
  130. color: #666;
  131. background: #FFFFFF;
  132. border-bottom-left-radius:10rpx;
  133. border-bottom-right-radius: 10rpx;
  134. >view{
  135. padding: 5rpx 0;
  136. }
  137. .icon{
  138. margin-right: 10rpx;
  139. }
  140. }
  141. }
  142. </style>