index.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
  6. <view class="list-scroll-view">
  7. <discount :Style="Style" :couponList="list" @toReceive="toReceive"></discount>
  8. </view>
  9. </scroll-view>
  10. </view>
  11. </view>
  12. </mobile-frame>
  13. </template>
  14. <script>
  15. import discount from '@/components/discount/index.vue';
  16. export default {
  17. components: {
  18. discount
  19. },
  20. data() {
  21. return {
  22. Style: {
  23. receive: true
  24. },
  25. user: {},
  26. list: [],
  27. total: 0,
  28. skip: 0,
  29. limit: 5,
  30. page: 0
  31. };
  32. },
  33. onLoad: function(e) {
  34. const that = this;
  35. // 监听用户是否登录
  36. that.watchLogin();
  37. },
  38. methods: {
  39. // 领取优惠劵
  40. async toReceive(e) {
  41. const that = this;
  42. uni.showModal({
  43. title: '提示',
  44. content: '确定领取该优惠券?',
  45. success: async function(res) {
  46. if (res.confirm) {
  47. const arr = await that.$api(`/userCoupon/getCoupon/${e._id}`, 'POST');
  48. if (arr.errcode == '0') {
  49. if (arr.data) {
  50. uni.showToast({
  51. title: arr.data.msg,
  52. icon: 'none',
  53. duration: 2000
  54. });
  55. } else {
  56. uni.showToast({
  57. title: `领取成功`,
  58. icon: 'none',
  59. duration: 3000
  60. })
  61. that.clearPage();
  62. that.search();
  63. }
  64. } else {
  65. uni.showToast({
  66. title: arr.errmsg,
  67. icon: 'none',
  68. duration: 2000
  69. });
  70. }
  71. }
  72. }
  73. });
  74. },
  75. // 监听用户是否登录
  76. watchLogin() {
  77. const that = this;
  78. uni.getStorage({
  79. key: 'token',
  80. success: function(res) {
  81. let user = that.$jwt(res.data);
  82. if (user) that.$set(that, `user`, user);
  83. that.search();
  84. },
  85. fail: function(err) {
  86. uni.navigateTo({
  87. url: `/pages/login/index`
  88. })
  89. }
  90. });
  91. },
  92. // 查询列表
  93. async search() {
  94. const that = this;
  95. let user = that.user;
  96. let info = {
  97. skip: that.skip,
  98. limit: that.limit,
  99. }
  100. const res = await that.$api(`/coupon/userView`, 'GET', {
  101. ...info
  102. })
  103. if (res.errcode == '0') {
  104. let list = [...that.list, ...res.data];
  105. that.$set(that, `list`, list)
  106. that.$set(that, `total`, res.total)
  107. } else {
  108. uni.showToast({
  109. title: res.errmsg,
  110. });
  111. }
  112. },
  113. // 分页
  114. toPage(e) {
  115. const that = this;
  116. let list = that.list;
  117. let limit = that.limit;
  118. if (that.total > list.length) {
  119. uni.showLoading({
  120. title: '加载中',
  121. mask: true
  122. })
  123. let page = that.page + 1;
  124. that.$set(that, `page`, page)
  125. let skip = page * limit;
  126. that.$set(that, `skip`, skip)
  127. that.search();
  128. uni.hideLoading();
  129. } else uni.showToast({
  130. title: '没有更多数据了'
  131. });
  132. },
  133. // 清空列表
  134. clearPage() {
  135. const that = this;
  136. that.$set(that, `list`, [])
  137. that.$set(that, `skip`, 0)
  138. that.$set(that, `limit`, 5)
  139. that.$set(that, `page`, 0)
  140. }
  141. }
  142. }
  143. </script>
  144. <style lang="scss">
  145. .main {
  146. background-color: var(--f5Color);
  147. }
  148. </style>