getCoupon.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <view class="coupon-list">
  3. <view v-if="couponInfo" 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.title}}</view>
  8. </view>
  9. <view class="coupon-price">
  10. ¥<text>{{couponInfo.subAmount}}</text>
  11. </view>
  12. </view>
  13. <view class="coupon-desc">
  14. <view><u-icon class="icon" size="30" name="clock"></u-icon> 有效期:{{couponInfo.validDateStr}}</view>
  15. <view>
  16. <u-icon class="icon" size="30" name="info-circle"></u-icon>
  17. <text class="couponRuleDesc">{{couponInfo.ruleDesc}}</text>
  18. </view>
  19. </view>
  20. </view>
  21. <u-empty :text="noDataText" v-if="!couponInfo && status!='loading'" mode="coupon"></u-empty>
  22. <u-button v-if="!isDisabled" class="handleSubmit" :disabled="isDisabled" shape="circle" @click="handleSubmit" type="error">确认领取</u-button>
  23. </view>
  24. </template>
  25. <script>
  26. import {couponData, receivesCoupon} from '@/api/coupon.js'
  27. export default{
  28. name: 'getCoupon',
  29. data () {
  30. return {
  31. couponInfo: null, // 领取优惠券信息
  32. isDisabled: true, // 是否可领取
  33. status: 'loading',
  34. noDataText: '暂无优惠券'
  35. }
  36. },
  37. onLoad(options) {
  38. console.log(options,'options')
  39. // 存储当前扫码的券码
  40. if (options.scene) {
  41. let scene = decodeURIComponent(options.scene);
  42. console.log(scene,'1111')
  43. //&是我们定义的参数链接方式
  44. let customerType = scene.split(',')[0];
  45. let storeId = scene.split(',')[1];
  46. let couponCode = scene.split(',')[2];
  47. console.log(scene.split(','),'222')
  48. //其他逻辑处理。。。。。
  49. this.$store.state.vuex_couponInfo.customerType = customerType
  50. this.$store.state.vuex_couponInfo.storeId = storeId
  51. this.$store.state.vuex_couponInfo.couponCode = couponCode
  52. // 获取要领取的优惠券
  53. this.getCoupon(couponCode)
  54. } else {
  55. // 判断是否扫码过
  56. if (this.$store.state.vuex_couponCode != '') {
  57. let couponCode = this.$store.state.vuex_couponCode
  58. this.getCoupon(couponCode)
  59. } else {
  60. // 返回首页
  61. uni.reLaunch({
  62. url: "/pages/index/index"
  63. })
  64. }
  65. }
  66. },
  67. methods: {
  68. // 获取要领取的优惠券
  69. getCoupon (code) {
  70. this.status = 'loading'
  71. couponData({couponCode:code}).then(res=>{
  72. this.status = 'onmore'
  73. if (res.status == 200 ) {
  74. this.couponInfo = res.data
  75. this.isDisabled = res.data ? false : true
  76. } else {
  77. this.couponInfo = null
  78. this.isDisabled = true
  79. this.noDataText = res.message
  80. }
  81. })
  82. },
  83. // 确认领取优惠券
  84. handleSubmit () {
  85. let params= {
  86. wechatCustomerType: this.$store.state.vuex_couponInfo.customerType,
  87. storeId: this.$store.state.vuex_couponInfo.storeId,
  88. code: this.$store.state.vuex_couponInfo.couponCode
  89. }
  90. receivesCoupon(params).then(res =>{
  91. if (res.status == 200) {
  92. this.toashMsg('领取成功')
  93. setTimeout(()=>{
  94. uni.reLaunch({
  95. url: '/pages/index/index'
  96. })
  97. },500)
  98. }
  99. })
  100. }
  101. },
  102. }
  103. </script>
  104. <style lang="scss">
  105. .coupon-list{
  106. width: 100%;
  107. height: 100%;
  108. padding: 25rpx;
  109. .u-size-default.data-v-3bf2dba7 {
  110. margin-top: 100px;
  111. width: 60%;
  112. }
  113. }
  114. .coupon-box.diabled{
  115. background: #999;
  116. }
  117. .coupon-box{
  118. margin-bottom: 30rpx;
  119. border-radius: 15rpx;
  120. box-shadow: 2rpx 2rpx 10rpx #ddd;
  121. background: #ff0000;
  122. color: #FFFFFF;
  123. .coupon-head{
  124. display: flex;
  125. align-items: center;
  126. padding: 20rpx 30rpx;
  127. position: relative;
  128. border-bottom: 15rpx dotted #FFFFFF;
  129. margin-bottom: -8rpx;
  130. .coupon-sel{
  131. position: absolute;
  132. width: 56rpx;
  133. height: 46rpx;
  134. right: 0;
  135. top: 0;
  136. }
  137. .coupon-checked{
  138. background: url(/static/img/select.png) no-repeat center;
  139. background-size: 100% 100%;
  140. }
  141. .coupon-title{
  142. flex-grow: 1;
  143. font-size: 32rpx;
  144. }
  145. .coupon-price{
  146. padding: 0 15rpx;
  147. color: #FFFFFF;
  148. text{
  149. font-size: 60rpx;
  150. }
  151. }
  152. }
  153. .coupon-desc{
  154. padding: 10rpx 30rpx;
  155. color: #666;
  156. background: #FFFFFF;
  157. border-bottom-left-radius:10rpx;
  158. border-bottom-right-radius: 10rpx;
  159. >view{
  160. padding: 5rpx 0;
  161. display: flex;
  162. align-items: flex-start;
  163. }
  164. .couponRuleDesc{
  165. width: 100%;
  166. padding-right: 30rpx;
  167. word-wrap: break-word;
  168. }
  169. .icon{
  170. margin-right: 10rpx;
  171. }
  172. }
  173. }
  174. </style>