index.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <view>
  3. <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票列表"></u-navbar>
  4. <view class="ticket-box">
  5. <view class="flex ticket-box-list">
  6. <navigator :url="`/pages/ticketBox/detail?boxId=${ item.boxId }`" class="flex ticket-box-list-item"
  7. hover-class="navigator-hover" v-for="(item, index) in list" :key="index">
  8. <image :src="item.picUrl" mode="aspectFill"></image>
  9. <view class="info">
  10. <view class="title ells-one">{{ item.title }}</view>
  11. <view class="price">¥{{ $numberFormat(item.salePrice) }}</view>
  12. </view>
  13. </navigator>
  14. <view class="ticket-box-list-item"></view>
  15. </view>
  16. <view class="flex empty" v-if="!list.length">
  17. <u-empty text="数据为空" mode="order" />
  18. </view>
  19. </view>
  20. </view>
  21. </template>
  22. <script>
  23. import env from '../../config/env.js'
  24. import $http from '@/utils/request.js'
  25. export default {
  26. data() {
  27. return {
  28. pageNum: 1,
  29. total: 0,
  30. list: [],
  31. };
  32. },
  33. onLoad() {
  34. this.getList()
  35. },
  36. methods: {
  37. getList() {
  38. uni.showLoading({
  39. title: '加载中'
  40. });
  41. let data = {
  42. categoryId: '',
  43. tagId: '',
  44. type: 'online',
  45. noToken: true
  46. }
  47. $http.post(`/api/v1/mp/user/mall/ticket/list?pageNum=${this.pageNum}&pageSize=20`, data).then(
  48. res => {
  49. uni.hideLoading();
  50. if (res.code == 0) {
  51. res.rows.forEach(item => {
  52. let picUrlArr = item.picUrl.split(',')
  53. item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/750'
  54. })
  55. this.total = res.total
  56. this.list = this.list.concat(res.rows)
  57. }
  58. }).catch(() => {
  59. uni.hideLoading();
  60. })
  61. },
  62. },
  63. onReachBottom() {
  64. // 判断是否有数据
  65. if (this.total > this.pageNum * 20) {
  66. setTimeout(() => {
  67. ++this.pageNum
  68. this.getList()
  69. }, 500)
  70. } else {
  71. uni.$u.toast('没有更多数据了')
  72. }
  73. },
  74. }
  75. </script>
  76. <style lang="scss">
  77. .ticket-box {
  78. margin: 34rpx 0;
  79. &-list {
  80. justify-content: space-between;
  81. padding: 0 34rpx;
  82. flex-wrap: wrap;
  83. padding-bottom: 100rpx;
  84. &-item {
  85. flex-direction: column;
  86. box-sizing: border-box;
  87. padding: 12rpx;
  88. width: 330rpx;
  89. border-radius: 22rpx;
  90. margin-bottom: 34rpx;
  91. background-color: #FFFFFF;
  92. image {
  93. width: 300rpx;
  94. height: 240rpx;
  95. border-radius: 22rpx;
  96. margin-bottom: 34rpx;
  97. }
  98. .info {
  99. width: 100%;
  100. }
  101. .title {
  102. line-height: 36rpx;
  103. font-size: 36rpx;
  104. font-weight: bold;
  105. margin-bottom: 20rpx;
  106. }
  107. .price {
  108. font-size: 26rpx;
  109. font-weight: bold;
  110. color: #FF4208;
  111. line-height: 42rpx;
  112. margin-bottom: 24rpx;
  113. }
  114. }
  115. &-item:last-child {
  116. border: none;
  117. background: none;
  118. }
  119. }
  120. .empty {
  121. height: 60vh;
  122. }
  123. }
  124. </style>