list.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
  1. <template>
  2. <app-layout>
  3. <view class="page">
  4. <view class="coupon-item" v-for="item in list" :key="item.id">
  5. <image class="coupon-bg" :src="couponImg[item.is_receive == '0' ? 'coupon_enabled' : 'coupon_disabled']" ></image>
  6. <view class="coupon-left dir-left-nowrap" @click="toDetail(item.id)">
  7. <view class="coupon-price t-omit box-grow-0">
  8. <template v-if="item.type == 2">
  9. <text>{{item.sub_price | keepNumbers}}</text>
  10. </template>
  11. <template v-else>
  12. <text>{{item.discount | keepNumbers}}</text>
  13. </template>
  14. </view>
  15. <view class="box-grow-1 dir-top-nowrap main-center coupon-content">
  16. <view class="t-omit" style="width:auto;display:block;">{{item.name}}</view>
  17. <view class="min_price t-omit" v-if="item.min_price > 0">满{{item.min_price | keepNumbers}}可用</view>
  18. <view v-else>无门槛使用</view>
  19. <view v-if="item.discount_limit">优惠上限:¥{{item.discount_limit | keepNumbers}}</view>
  20. </view>
  21. </view>
  22. <view class="use-btn" @click="receive(item)" v-if="item.is_receive == `0`">
  23. <view class="use" style="text-align: center">立即领取</view>
  24. </view>
  25. <button class="use use-btn" style="color:#b4b4b4;" v-else-if="item.is_receive == `1`">已领取</button>
  26. <view class="coupon-info" @click="toDetail(item.id)">
  27. <view v-if="item.expire_type == `1`">领取后{{item.expire_day}}天过期</view>
  28. <view v-if="item.expire_type == `2`">有效日期: {{item.begin_time}} - {{item.end_time}}</view>
  29. <view class="t-omit" v-if="item.appoint_type == `3`">适用范围:全场通用</view>
  30. <view class="t-omit" v-else-if="item.appoint_type == `4`">适用范围:仅限当面付活动使用</view>
  31. <view class="t-omit" v-else-if="item.appoint_type == `5`">适用范围:仅限礼品卡使用</view>
  32. <view class="t-omit" v-else-if="item.appoint_type == `2`">
  33. <text>适用商品:</text>
  34. <text v-for="(goods,index) in item.goods" :key="goods.id">
  35. <text>{{index != 0 ? '、' : ''}}{{goods.name}}</text>
  36. </text>
  37. </view>
  38. <view class="t-omit" v-else-if="item.appoint_type == `1`">
  39. <text>适用分类:</text>
  40. <text v-for="(cat,index) in item.cat" :key="cat.id">
  41. <text>{{index != 0 ? '、' : ''}}{{cat.name}}</text>
  42. </text>
  43. </view>
  44. </view>
  45. </view>
  46. <app-no-goods v-if="list.length === 0" :title="'暂无可领取优惠券'" background="#f7f7f7"></app-no-goods>
  47. </view>
  48. </app-layout>
  49. </template>
  50. <script>
  51. import {mapGetters, mapState} from "vuex";
  52. import appNoGoods from '@/components/page-component/app-no-goods/app-no-goods.vue';
  53. export default {
  54. data() {
  55. return {
  56. list: [],
  57. loading: false,
  58. page: 2,
  59. }
  60. },
  61. components:{
  62. appNoGoods
  63. },
  64. computed: {
  65. ...mapState({
  66. couponImg: state => state.mallConfig.__wxapp_img.coupon,
  67. }),
  68. ...mapGetters({
  69. userInfo: 'user/info',
  70. })
  71. },
  72. methods: {
  73. getList() {
  74. let that = this;
  75. that.$request({
  76. url: that.$api.coupon.list,
  77. method: 'get',
  78. }).then(response => {
  79. uni.hideLoading();
  80. that.$hideLoading();
  81. if (response.code === 0) {
  82. that.list = response.data.list;
  83. } else {
  84. uni.showToast({
  85. title: response.msg,
  86. icon: 'none',
  87. duration: 1000
  88. });
  89. }
  90. }).catch(() => {
  91. uni.hideLoading();
  92. that.$hideLoading();
  93. });
  94. },
  95. getMore() {
  96. let that = this;
  97. uni.showLoading({
  98. title: '加载中...'
  99. });
  100. that.$request({
  101. url: that.$api.coupon.list,
  102. data: {
  103. page: that.page
  104. },
  105. }).then(e => {
  106. uni.hideLoading();
  107. if (e.code == 0) {
  108. if (e.data.list.length > 0) {
  109. that.list = that.list.concat(e.data.list);
  110. that.page++;
  111. }
  112. } else {
  113. uni.showToast({
  114. title: e.msg,
  115. icon: 'none',
  116. duration: 1000
  117. });
  118. }
  119. }).catch(e => {
  120. uni.hideLoading();
  121. });
  122. },
  123. toDetail(id) {
  124. uni.navigateTo({
  125. url: '/pages/coupon/details/details?id=' + id
  126. });
  127. },
  128. receive(coupon) {
  129. let that = this;
  130. if(that.loading) {
  131. return false
  132. }
  133. that.loading = true;
  134. uni.showLoading({
  135. title: '领取中...'
  136. });
  137. that.$request({
  138. url: that.$api.coupon.receive,
  139. data: {
  140. coupon_id: coupon.id
  141. },
  142. }).then(response => {
  143. that.loading = false;
  144. uni.hideLoading();
  145. if (response.code === 0) {
  146. setTimeout(function (row) {
  147. that.$store.dispatch('page/actionSetCoupon', {
  148. list: [Object.assign(coupon, response.data)],
  149. type: 'receive'
  150. });
  151. that.getList();
  152. }, 200)
  153. } else {
  154. uni.showToast({
  155. title: response.msg,
  156. icon: 'none',
  157. duration: 1000
  158. });
  159. that.getList();
  160. }
  161. }).catch(() => {
  162. uni.hideLoading();
  163. that.$event.on(that.$const.EVENT_USER_LOGIN).then(() => {
  164. that.receive(coupon);
  165. });
  166. });
  167. },
  168. },
  169. onLoad() { this.$commonLoad.onload();
  170. },
  171. onShow() {
  172. this.$showLoading({
  173. text: '加载中...'
  174. });
  175. this.getList();
  176. },
  177. filters: {
  178. keepNumbers(n) {
  179. return Number(n);
  180. }
  181. },
  182. onReachBottom() {
  183. this.getMore();
  184. },
  185. }
  186. </script>
  187. <style scoped lang="scss">
  188. .page {
  189. padding: #{20rpx} #{25rpx};
  190. width: 100%;
  191. }
  192. .coupon-item {
  193. height: #{275rpx};
  194. position: relative;
  195. margin-bottom: #{20rpx};
  196. }
  197. .coupon-bg {
  198. height: #{160rpx};
  199. width: 100%;
  200. }
  201. .coupon-left {
  202. position: absolute;
  203. left: #{20rpx};
  204. top: #{30rpx};
  205. color: #fff;
  206. width: 70%;
  207. }
  208. .coupon-left .coupon-price {
  209. float: left;
  210. max-width: 55%;
  211. width: auto;
  212. height: #{92rpx};
  213. line-height: #{92rpx};
  214. margin-right: #{20rpx};
  215. }
  216. .coupon-left .min_price {
  217. width: auto;
  218. }
  219. .coupon-price text {
  220. font-size: #{60rpx};
  221. }
  222. .use {
  223. height: #{56rpx};
  224. line-height: #{58rpx};
  225. background-color: #fff;
  226. width: #{160rpx};
  227. border-radius: #{28rpx};
  228. font-size: #{24rpx};
  229. color: #caa76e;
  230. }
  231. .use-btn {
  232. height: #{55rpx};
  233. width: #{160rpx};
  234. border-radius: #{27.5rpx};
  235. position: absolute;
  236. right: #{20rpx};
  237. border: 0;
  238. top: #{48rpx};
  239. }
  240. .coupon-info {
  241. position: absolute;
  242. top: #{160rpx};
  243. left: 0;
  244. right: 0;
  245. height: #{115rpx};
  246. background-color: #fff;
  247. border: #{2rpx} solid #cfcfcf;
  248. border-top: 0;
  249. padding: #{20rpx} #{25rpx};
  250. font-size: #{26rpx};
  251. color: #666;
  252. border-bottom-left-radius: #{15rpx};
  253. border-bottom-right-radius: #{15rpx};
  254. }
  255. .discount_limit {
  256. width: #{286rpx};
  257. text-align: center;
  258. color: #ffffff;
  259. }
  260. .coupon-content {
  261. font-size: $uni-font-size-general-one;
  262. line-height: 1.1;
  263. }
  264. </style>