getCoupon.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  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">{{couponInfo?couponInfo.title:''}}</view>
  8. </view>
  9. <view class="coupon-price">
  10. ¥<text>{{couponInfo?(couponInfo.couponType=='FULLSUB'?couponInfo.subAmount:couponInfo.price):''}}</text>
  11. </view>
  12. </view>
  13. <view class="coupon-desc">
  14. <view><u-icon class="icon" size="30" name="clock"></u-icon> 有效期至:{{couponInfo&&couponInfo.endTime?couponInfo.endTime:''}}</view>
  15. <view><u-icon class="icon" size="30" name="info-circle"></u-icon> {{couponInfo && couponInfo.ruleDesc?couponInfo.ruleDesc:''}}</view>
  16. </view>
  17. </view>
  18. <u-button class="handleSubmit" @click="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: null, // 领取优惠券信息
  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. } else {
  60. this.couponInfo = null
  61. }
  62. })
  63. },
  64. // 确认领取优惠券
  65. handleSubmit () {
  66. let couponCode = this.$store.state.vuex_couponCode
  67. receivesCoupon({couponCode:couponCode}).then(res =>{
  68. if (res.status == 200) {
  69. this.toashMsg('领取成功')
  70. setTimeout(()=>{
  71. uni.navigateTo({
  72. url: '/pages/coupon/index/index'
  73. })
  74. },500)
  75. }
  76. })
  77. }
  78. },
  79. }
  80. </script>
  81. <style lang="scss">
  82. .coupon-list{
  83. width: 100%;
  84. height: 100%;
  85. padding: 25rpx;
  86. .handleSubmit{
  87. width: 80%;
  88. margin-top: 40%;
  89. }
  90. }
  91. .coupon-box.diabled{
  92. background: #999;
  93. }
  94. .coupon-box{
  95. margin-bottom: 30rpx;
  96. border-radius: 15rpx;
  97. box-shadow: 2rpx 2rpx 10rpx #ddd;
  98. background: #ff0000;
  99. color: #FFFFFF;
  100. .coupon-head{
  101. display: flex;
  102. align-items: center;
  103. padding: 20rpx 30rpx;
  104. position: relative;
  105. border-bottom: 15rpx dotted #FFFFFF;
  106. margin-bottom: -8rpx;
  107. .coupon-sel{
  108. position: absolute;
  109. width: 56rpx;
  110. height: 46rpx;
  111. right: 0;
  112. top: 0;
  113. }
  114. .coupon-checked{
  115. background: url(/static/img/select.png) no-repeat center;
  116. background-size: 100% 100%;
  117. }
  118. .coupon-title{
  119. flex-grow: 1;
  120. font-size: 32rpx;
  121. }
  122. .coupon-price{
  123. padding: 0 15rpx;
  124. color: #FFFFFF;
  125. text{
  126. font-size: 60rpx;
  127. }
  128. }
  129. }
  130. .coupon-desc{
  131. padding: 10rpx 30rpx;
  132. color: #666;
  133. background: #FFFFFF;
  134. border-bottom-left-radius:10rpx;
  135. border-bottom-right-radius: 10rpx;
  136. >view{
  137. padding: 5rpx 0;
  138. }
  139. .icon{
  140. margin-right: 10rpx;
  141. }
  142. }
  143. }
  144. </style>