index.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <view class="pages-content">
  3. <view class="tabs">
  4. <u-tabs-swiper ref="uTabs" :list="tabsList" bar-width="100" :current="current" @change="tabsChange" :is-scroll="false"
  5. swiperWidth="750"></u-tabs-swiper>
  6. </view>
  7. <swiper style="height: calc(100% - 40px);" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
  8. <swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
  9. <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
  10. <couponTpl :list="couponList"></couponTpl>
  11. <u-empty :text="noDataText" img-width="120" v-if="couponList.length==0 && status!='loading'" mode="list"></u-empty>
  12. <view style="padding: 20upx;">
  13. <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
  14. </view>
  15. </scroll-view>
  16. </swiper-item>
  17. </swiper>
  18. </view>
  19. </template>
  20. <script>
  21. import couponTpl from '@/pages/coupon/couponTpl.vue'
  22. import {couponListFind} from '@/api/coupon.js'
  23. export default {
  24. components: {
  25. couponTpl
  26. },
  27. data() {
  28. return {
  29. noDataText: '暂无数据',
  30. status: 'loading',
  31. tabsList: [{
  32. name: '未使用',
  33. status: 0
  34. }, {
  35. name: '已使用',
  36. status: 1
  37. }, {
  38. name: '已过期',
  39. status: -1
  40. }],
  41. couponList: [{
  42. id: 23432445,
  43. couponTitle: "满100减50",
  44. couponAmount: 100,
  45. validEndTime: "2020-05-16",
  46. remarks: '优惠卷使用说明优惠卷使用说明优惠卷使用说明',
  47. checked: false
  48. },
  49. {
  50. id: 3544355,
  51. couponTitle: "满100减50",
  52. couponAmount: 100,
  53. validEndTime: "2020-05-16",
  54. remarks: '优惠卷使用说明优惠卷使用说明优惠卷使用说明',
  55. checked: false
  56. },
  57. {
  58. id: 234234234,
  59. couponTitle: "满100减50",
  60. couponAmount: 100,
  61. validEndTime: "2020-05-16",
  62. remarks: '优惠卷使用说明优惠卷使用说明优惠卷使用说明',
  63. checked: false
  64. },
  65. {
  66. id: 66264646,
  67. couponTitle: "满100减50",
  68. couponAmount: 100,
  69. validEndTime: "2020-05-16",
  70. remarks: '优惠卷使用说明优惠卷使用说明优惠卷使用说明',
  71. checked: false
  72. },
  73. {
  74. id: 9794694698,
  75. couponTitle: "满100减50",
  76. couponAmount: 100,
  77. validEndTime: "2020-05-16",
  78. remarks: '优惠卷使用说明优惠卷使用说明优惠卷使用说明',
  79. checked: false
  80. }
  81. ], // 优惠卷列表
  82. // 因为内部的滑动机制限制,请将tabs组件和swiper组件的current用不同变量赋值
  83. current: 0, // tabs组件的current值,表示当前活动的tab选项
  84. swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
  85. pageNo:1,
  86. pageSize:15,
  87. count:0
  88. };
  89. },
  90. onLoad() {
  91. this.pageInit()
  92. },
  93. methods: {
  94. pageInit () {
  95. this.current = 0 // tabs组件的current值,表示当前活动的tab选项
  96. this.swiperCurrent = 0
  97. this.count = 0
  98. this.couponList = []
  99. this.getList()
  100. },
  101. // tabs通知swiper切换
  102. tabsChange(index) {
  103. this.swiperCurrent = index;
  104. this.couponList = []
  105. this.count = 0
  106. this.getList()
  107. },
  108. // swiper-item左右移动,通知tabs的滑块跟随移动
  109. transition(e) {
  110. let dx = e.detail.dx;
  111. this.$refs.uTabs.setDx(dx);
  112. },
  113. // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
  114. // swiper滑动结束,分别设置tabs和swiper的状态
  115. animationfinish(e) {
  116. let current = e.detail.current;
  117. this.$refs.uTabs.setFinishCurrent(current);
  118. this.swiperCurrent = current;
  119. this.current = current;
  120. this.couponList = []
  121. this.count = 0
  122. this.getList()
  123. },
  124. // 获取优惠卷列表
  125. getList(){
  126. this.status = 'loading'
  127. let item = this.tabsList[this.swiperCurrent]
  128. let params = {
  129. pageNo: this.pageNo,
  130. pageSize: this.pageSize,
  131. status: item.status
  132. }
  133. couponListFind(params).then(res=>{
  134. this.status = 'loadmore'
  135. if (res.status == 200) {
  136. let list = res.data.list
  137. this.couponList = this.couponList.concat(list)
  138. this.count = res.data.count
  139. } else {
  140. this.couponList = []
  141. this.count = 0
  142. }
  143. })
  144. },
  145. // scroll-view到底部加载更多
  146. onreachBottom() {
  147. if (this.couponList.length<this.count) {
  148. this.pageNo++
  149. this.getList()
  150. } else {
  151. this.status = "nomore"
  152. }
  153. }
  154. }
  155. };
  156. </script>
  157. <style lang="scss">
  158. page{
  159. height: 100%;
  160. }
  161. .pages-content{
  162. width: 100%;
  163. height: 100%;
  164. display: flex;
  165. flex-direction: column;
  166. uni-swiper{
  167. flex-grow: 1;
  168. }
  169. }
  170. </style>