coupon-list.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <template>
  2. <view class="page">
  3. <view class="body after-navber">
  4. <view class="info">
  5. <view class="info-list" style="width:100%;">
  6. <block v-for="(coupon, index) in coupon_list" :key="index">
  7. <view class="info-one">
  8. <image class="bga" src="../../static/icon-coupon-enabled.png">
  9. </image>
  10. <view class="info-content flex-row flex-x-center flex-y-center fs-b">
  11. <navigator hover-class="none"
  12. class="info-content flex-row flex-x-center flex-y-center">
  13. <view class="flex-grow-0">
  14. <view class="flex-row flex-y-bottom">
  15. <block>
  16. <view class="flex-grow-0">¥</view>
  17. <view class="flex-grow-1" style="font-size:23pt;">
  18. {{ Number(coupon.reduce) }}
  19. </view>
  20. </block>
  21. </view>
  22. </view>
  23. <view class="flex-grow-1">
  24. <view style="margin-left:16rpx;">
  25. <view style="margin-bottom:4rpx;">{{coupon.name}}</view>
  26. <view>满{{Number(coupon.full)}}可用</view>
  27. </view>
  28. </view>
  29. </navigator>
  30. <view class="flex-grow-0">
  31. <block v-if="coupon.state==1">
  32. <view @tap="receive" :data-index="index" :data-name="coupon.name"
  33. class="flex-x-center flex-y-center info-btn fs-sm" :data-id="coupon.id"
  34. style="color:#ff4544;">立即领取</view>
  35. </block>
  36. <block v-if="coupon.state == 2">
  37. <view class="flex-x-center flex-y-center info-btn fs-sm"
  38. style="color:#999;">已领取</view>
  39. </block>
  40. </view>
  41. </view>
  42. <view class="info-footer fs-sm box-pack-between flex-y-center">
  43. <view class="">
  44. <view v-if="coupon.type==2" style="font-size: 24rpx;">指定商品可用</view>
  45. <view class="info-day">有效日期:{{coupon.start_time}}~{{coupon.end_time}}</view>
  46. </view>
  47. <image v-if="coupon.type==2" @click.stop="bindChecked(index)" class="more-down"
  48. :class="coupon.checked?'more-down-deg':''" src="../../static/more-down.png">
  49. </image>
  50. </view>
  51. <view class="coupon-foot flex-grow-1" v-if="coupon.checked">
  52. <view class="box-pack-between">
  53. <view class="mrt16 flex flex-grow-1">
  54. <text style="min-width: 190rpx;">指定商品:</text>
  55. <view class="flex-grow-1">
  56. <view class="box-pack-between" v-for="(item,index) of coupon.goods">
  57. {{item.name}} <text style="color: red;">¥{{item.price}}</text>
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. </view>
  63. </view>
  64. </block>
  65. </view>
  66. <block v-if="coupon_list.length <= 0">
  67. <view class="flex-x-center"><text style="margin-top:50rpx;color: #999;">暂无优惠券</text></view>
  68. </block>
  69. </view>
  70. </view>
  71. <!-- #ifdef MP-ALIPAY -->
  72. <!-- <subscribe-msg /> -->
  73. <!-- #endif -->
  74. </view>
  75. </template>
  76. <script>
  77. var share_count = 0;
  78. let hideLoading = true;
  79. import {
  80. mapState,
  81. mapGetters,
  82. mapMutations
  83. } from 'vuex'
  84. export default {
  85. data() {
  86. return {
  87. coupon_list: [],
  88. get_coupon_list: "",
  89. wxapp_img: {},
  90. page: 1,
  91. staff_id: "",
  92. is_load: false,
  93. is_load_more: false,
  94. // systemInfo: {},
  95. };
  96. },
  97. props: {},
  98. computed: {
  99. ...mapState(['setColor', 'store_id', 'systemInfo', 'userInfo', 'merchant_id']),
  100. dateRange() {
  101. const {
  102. store_id,
  103. systemInfo,
  104. userInfo
  105. } = this;
  106. return {
  107. store_id,
  108. systemInfo,
  109. userInfo,
  110. }
  111. },
  112. },
  113. watch: {
  114. setColor(nVal) {
  115. uni.setNavigationBarColor({
  116. frontColor: '#ffffff',
  117. backgroundColor: nVal,
  118. })
  119. },
  120. // 弹窗校检
  121. dateRange: {
  122. handler(val) {
  123. console.log(val,"dateRange")
  124. if(val.store_id && val.userInfo.id && val.systemInfo){
  125. this.http();
  126. }
  127. }}
  128. },
  129. onLoad: function(t) {
  130. uni.setNavigationBarColor({
  131. frontColor: '#ffffff',
  132. backgroundColor: this.$store.state.color,
  133. })
  134. this.setColor = this.$store.state.color;
  135. if(this.$store.state.userInfo && this.$store.state.store_id){
  136. this.http();
  137. }
  138. },
  139. onShareAppMessage(e) {
  140. return {}
  141. },
  142. onReachBottom() {
  143. if (!this.is_load) {
  144. this.page = this.page + 1;
  145. this.http();
  146. }
  147. },
  148. methods: {
  149. bindChecked(index) {
  150. this.coupon_list[index].checked = !this.coupon_list[index].checked;
  151. },
  152. http() {
  153. this.$http.request('xcx/LqCoupons_lists', {
  154. user_id: this.userInfo.id,
  155. store_id: this.store_id,
  156. }, "", "", hideLoading).then(res => {
  157. console.log(res, "LqCoupons_lists")
  158. for (let s of res.data) {
  159. s.checked = false;
  160. s.state = 1;
  161. };
  162. this.coupon_list = res.data;
  163. })
  164. },
  165. receive: function(t) {
  166. let subscribe = uni.getStorageSync('balance_subscribe');
  167. var that = this,name = t.target.dataset.name,
  168. id = t.target.dataset.id,
  169. index = t.target.dataset.index;
  170. // 调用方法,唤起订阅组件
  171. // #ifdef MP-ALIPAY
  172. my.requestSubscribeMessage({
  173. thirdTypeAppId: that.systemInfo.alipay_appid, // 可选,isv接入场景下必填
  174. entityIds: [subscribe.alipay_coupons], // 模板id列表,最多3个
  175. // 接收结果的回调方法
  176. complete:(r)=>{
  177. console.log('订阅回调', r);
  178. that.$http.request('xcx/LqCoupons', {
  179. user_id: this.userInfo.id,
  180. store_id: this.store_id,
  181. coupon_id: id,
  182. }, "", "", hideLoading).then(res => {
  183. that.coupon_list[index].state = 2;
  184. uni.showToast({
  185. title: '领取成功',
  186. icon: 'none'
  187. })
  188. })
  189. },
  190. });
  191. // #endif
  192. // #ifdef MP-WEIXIN
  193. uni.requestSubscribeMessage({
  194. tmplIds: [subscribe.card_tid],
  195. // success: (r) => {
  196. // that.CardMsgSubscribe(name);
  197. // },
  198. complete: (r) => {
  199. that.$http.request('xcx/LqCoupons', {
  200. user_id: this.userInfo.id,
  201. store_id: this.store_id,
  202. coupon_id: id,
  203. }, "", "", hideLoading).then(res => {
  204. that.coupon_list[index].state = 2;
  205. uni.showToast({
  206. title: '领取成功',
  207. icon: 'none'
  208. })
  209. })
  210. }
  211. })
  212. // #endif
  213. },
  214. CardMsgSubscribe(name){
  215. let that = this;
  216. that.$http.request('xcx/LqCoupons', {
  217. user_id: this.userInfo.id,
  218. store_id: this.store_id,
  219. name: name,
  220. }, "", "", hideLoading).then(res => {
  221. })
  222. },
  223. }
  224. };
  225. </script>
  226. <style>
  227. @import "./coupon-list.css";
  228. </style>