index.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
  5. <view class="list-scroll-view">
  6. <discount :Style="Style" :couponList="list" :total="total" @toReceive="toReceive"></discount>
  7. <view class="is_bottom" v-if="is_bottom">
  8. <text>{{config.bottom_title}}</text>
  9. </view>
  10. </view>
  11. </scroll-view>
  12. </view>
  13. </mobile-frame>
  14. </template>
  15. <script>
  16. import discount from '@/components/discount/index.vue';
  17. export default {
  18. components: {
  19. discount
  20. },
  21. data() {
  22. return {
  23. config: {},
  24. user: {},
  25. Style: {
  26. receive: true
  27. },
  28. list: [],
  29. total: 0,
  30. skip: 0,
  31. limit: 6,
  32. page: 0,
  33. // 数据是否触底
  34. is_bottom: false,
  35. scrollTop: 0
  36. };
  37. },
  38. onLoad: function(e) {
  39. const that = this;
  40. // 监听用户是否登录
  41. that.watchLogin();
  42. },
  43. onShow: function() {
  44. const that = this;
  45. that.searchConfig();
  46. },
  47. methods: {
  48. // 查询基本设置
  49. searchConfig() {
  50. const that = this;
  51. uni.getStorage({
  52. key: 'config',
  53. success: function(res) {
  54. if (res.data) that.$set(that, `config`, res.data)
  55. },
  56. })
  57. },
  58. watchLogin() {
  59. const that = this;
  60. uni.getStorage({
  61. key: 'token',
  62. success: function(res) {
  63. let user = that.$jwt(res.data);
  64. if (user) {
  65. that.$set(that, `user`, user);
  66. that.search();
  67. }
  68. },
  69. fail: function(err) {
  70. console.log(err);
  71. }
  72. })
  73. },
  74. // 查询列表
  75. async search() {
  76. const that = this;
  77. let info = {
  78. skip: that.skip,
  79. limit: that.limit,
  80. }
  81. const res = await that.$api(`/coupon/userView`, 'GET', {
  82. ...info
  83. })
  84. if (res.errcode == '0') {
  85. let list = [...that.list, ...res.data];
  86. that.$set(that, `list`, list)
  87. that.$set(that, `total`, res.total)
  88. } else {
  89. uni.showToast({
  90. title: res.errmsg,
  91. });
  92. }
  93. },
  94. // 分页
  95. toPage() {
  96. const that = this;
  97. let list = that.list;
  98. let limit = that.limit;
  99. if (that.total > list.length) {
  100. uni.showLoading({
  101. title: '加载中',
  102. mask: true
  103. })
  104. let page = that.page + 1;
  105. that.$set(that, `page`, page)
  106. let skip = page * limit;
  107. that.$set(that, `skip`, skip)
  108. that.search();
  109. uni.hideLoading();
  110. } else that.$set(that, `is_bottom`, true)
  111. },
  112. toScroll(e) {
  113. const that = this;
  114. let up = that.scrollTop;
  115. that.$set(that, `scrollTop`, e.detail.scrollTop);
  116. let num = Math.sign(up - e.detail.scrollTop);
  117. if (num == 1) that.$set(that, `is_bottom`, false);
  118. },
  119. async toReceive(e) {
  120. const that = this;
  121. uni.showModal({
  122. title: '提示',
  123. content: '确定领取该优惠券?',
  124. success: async function(res) {
  125. if (res.confirm) {
  126. const arr = await that.$api(`/userCoupon/getCoupon/${e._id}`, 'POST');
  127. if (arr.errcode == '0') {
  128. if (arr.data) {
  129. uni.showToast({
  130. title: arr.errmsg,
  131. icon: 'none'
  132. });
  133. } else {
  134. uni.showToast({
  135. title: `领取成功`,
  136. icon: 'none'
  137. })
  138. that.clearPage();
  139. that.search();
  140. }
  141. } else {
  142. uni.showToast({
  143. title: arr.errmsg,
  144. icon: 'none',
  145. });
  146. }
  147. }
  148. }
  149. });
  150. },
  151. // 清空列表
  152. clearPage() {
  153. const that = this;
  154. that.$set(that, `list`, [])
  155. that.$set(that, `skip`, 0)
  156. that.$set(that, `limit`, 6)
  157. that.$set(that, `page`, 0)
  158. }
  159. }
  160. }
  161. </script>
  162. <style lang="scss">
  163. .main {
  164. background-color: var(--f5Color);
  165. }
  166. .scroll-view {
  167. position: absolute;
  168. top: 0;
  169. left: 0;
  170. right: 0;
  171. bottom: 0;
  172. .list-scroll-view {
  173. display: flex;
  174. flex-direction: column;
  175. }
  176. }
  177. .is_bottom {
  178. text-align: center;
  179. text {
  180. padding: 2vw 0;
  181. display: inline-block;
  182. color: #858585;
  183. font-size: 14px;
  184. }
  185. }
  186. </style>