coupon.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <template>
  2. <view class="">
  3. <view class="coupon_bg">
  4. <image class="coupon_bg_title" src="https://zxzhdc.zx-xcx.com/dining/model-title.png"></image>
  5. <view class="coupon_bg_content">
  6. <scroll-view scroll-y="true" style="max-height: 300rpx;">
  7. <view>
  8. <view class="coupon flex" v-for="(item,index) of couponList" :key='index'>
  9. <view class="coupon-left flex-y-center">
  10. <view class="w100">
  11. <view class="title text-1">
  12. {{item.name}}
  13. </view>
  14. <view v-if="item.type==1" class="title text-1"
  15. style="font-size: 26rpx;color: #EB8E55;">
  16. 满¥{{Number(item.full)}}元减¥<text
  17. style="color: red;font-size:30rpx;">{{ Number(item.reduce) }} </text>元
  18. </view>
  19. <view v-if="item.type==3" class="date text-1">
  20. <text style="color: red;font-size: 28rpx;">{{ item.gift }}</text>
  21. </view>
  22. <view class="date text-1">
  23. 有效期: {{item.start_time}}~{{item.end_time}}
  24. </view>
  25. </view>
  26. </view>
  27. <view class="coupon-center">
  28. <view class="rund top">
  29. </view>
  30. <view class="line">
  31. </view>
  32. <view class="rund bottom">
  33. </view>
  34. </view>
  35. <view class="coupon-right flex-center flex-grow-1">
  36. <view class="ft28 getCoupon" v-if="item.state == 1" @tap="receive" :data-id='item.id'
  37. :data-index="index">
  38. <view class="">
  39. 立即
  40. </view>
  41. <view class="">
  42. 领取
  43. </view>
  44. </view>
  45. <block v-if="item.state == 2">
  46. <view class="flex-x-center flex-y-center info-btn fs-sm" style="color:#999;">已领取
  47. </view>
  48. </block>
  49. </view>
  50. </view>
  51. </view>
  52. </scroll-view>
  53. <view class="coupon_bg_content_pr flex-y-bottom flex-x-center">
  54. <image class="img2" src="../static/home/model-bg-btn.png"></image>
  55. <view class="img3" @click="Getall">
  56. <image class="" src="/static/home/model-btn.png"></image>
  57. <view class="img3-pr flex-center">一键领取</view>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. <gbClose/>
  63. </view>
  64. </template>
  65. <script>
  66. import gbClose from './close.vue';
  67. import {
  68. mapState,
  69. } from 'vuex'
  70. export default {
  71. components: {
  72. gbClose
  73. },
  74. data() {
  75. return {
  76. couponLists: [],
  77. }
  78. },
  79. computed: {
  80. ...mapState(['systemInfo', 'store_id', 'userInfo', 'couponList']),
  81. },
  82. watch: {
  83. couponList: {
  84. handler(val) {
  85. console.log(val, "val")
  86. if (val.length > 0) {
  87. this.couponLists = val;
  88. }
  89. },
  90. deep: true,
  91. },
  92. },
  93. mounted() {
  94. if (this.couponList.length > 0) {
  95. this.couponLists = this.couponList;
  96. }
  97. },
  98. methods: {
  99. receive: function(t) {
  100. let subscribe = uni.getStorageSync('balance_subscribe');
  101. console.log(t)
  102. var that = this,
  103. id = t.currentTarget.dataset.id,
  104. index = t.currentTarget.dataset.index;
  105. that.$http.request('xcx/LqCoupons', {
  106. user_id: this.userInfo.id,
  107. store_id: this.store_id,
  108. coupon_id: id,
  109. }, "", "", true).then(res => {
  110. that.couponList[index].state = 2;
  111. let couponLength = that.couponList.filter((v, i) => v.state == 2);
  112. if(couponLength.length == that.couponList.length){
  113. console.log( "领取关闭");
  114. that.bus.$emit('send', 2);
  115. }
  116. uni.showToast({
  117. title: '领取成功',
  118. icon: 'none'
  119. })
  120. })
  121. },
  122. Getall(e){
  123. var that = this
  124. that.$http.request('xcx/yijianLqCoupons', {
  125. user_id: this.userInfo.id,
  126. store_id: this.store_id,
  127. }, "", "", true).then(res => {
  128. that.couponList.forEach((v)=>{
  129. v.state=2
  130. })
  131. that.bus.$emit('send', 2);
  132. uni.showToast({
  133. title: '领取成功',
  134. icon: 'none'
  135. })
  136. })
  137. },
  138. }
  139. }
  140. </script>
  141. <style lang="scss">
  142. .coupon_bg {
  143. width: 100%;
  144. text-align: center;
  145. border-radius: 0px 0px 16px 16px;
  146. }
  147. .coupon_bg_title {
  148. width: 688rpx;
  149. height: 404rpx;
  150. display: block;
  151. margin-bottom: -2px;
  152. }
  153. .coupon_bg_content {
  154. width: 600rpx;
  155. // height: 460rpx;
  156. background: #f41018;
  157. margin: 0 auto;
  158. border-bottom-left-radius: 10px;
  159. border-bottom-right-radius: 10px;
  160. }
  161. .coupon_bg_content .img1 {
  162. width: 528rpx;
  163. height: 160rpx;
  164. }
  165. .coupon_bg_content_pr {
  166. position: relative;
  167. }
  168. .coupon_bg_content .img2 {
  169. width: 600rpx;
  170. height: 166rpx;
  171. }
  172. .coupon_bg_content .img3 {
  173. width: 323rpx;
  174. height: 77rpx;
  175. position: absolute;
  176. bottom: 20rpx;
  177. color: #751300;
  178. }
  179. .coupon_bg_content .img3 image {
  180. width: 100%;
  181. height: 100%;
  182. }
  183. .coupon_bg_content .img3 .img3-pr {
  184. position: absolute;
  185. left: 0;
  186. top: 0;
  187. width: 100%;
  188. height: 90%;
  189. }
  190. .coupon {
  191. width: 528rpx;
  192. height: 160rpx;
  193. background: linear-gradient(180deg, #ffefb4 33%, #ffee75 89%);
  194. border-radius: 8rpx;
  195. margin: 0 auto;
  196. margin-bottom: 20rpx;
  197. .coupon-left {
  198. width: 404rpx;
  199. font-size: 28rpx;
  200. font-weight: 400;
  201. color: #EB8E55;
  202. padding-left: 22rpx;
  203. text-align: left;
  204. .title {
  205. font-size: 32rpx;
  206. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  207. font-weight: 500;
  208. color: #F03100;
  209. margin-bottom: 4rpx;
  210. }
  211. .date {
  212. margin-bottom: 4rpx;
  213. font-size: 24rpx;
  214. }
  215. .code {
  216. font-size: 24rpx;
  217. }
  218. }
  219. .coupon-center {
  220. position: relative;
  221. width: 30rpx;
  222. .rund {
  223. width: 24rpx;
  224. height: 24rpx;
  225. background: #F41018;
  226. border-radius: 50%;
  227. position: absolute;
  228. }
  229. .top {
  230. top: -10rpx;
  231. }
  232. .bottom {
  233. bottom: -10rpx;
  234. }
  235. .line {
  236. width: 1rpx;
  237. height: 124rpx;
  238. border: 2rpx dashed #EB8E55;
  239. position: absolute;
  240. left: 10rpx;
  241. top: 20rpx;
  242. }
  243. }
  244. .coupon-right {
  245. .used {
  246. width: 140rpx;
  247. height: 140rpx;
  248. }
  249. .getCoupon {
  250. color: #EB8E55;
  251. font-weight: 600;
  252. }
  253. }
  254. }
  255. </style>