myWaterList.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <template>
  2. <view class="good-list">
  3. <uni-nav-bar class="nav" @clickLeft='back' :border='false' backgroundColor='transparent' leftIcon='left'
  4. color='#FFF' title="我的水票" />
  5. <view class="content-money">
  6. <view class="conetnt-box">
  7. <view class="money-box">
  8. <view class="money">{{ allNumber }}</view>
  9. <view class="text">剩余总数</view>
  10. </view>
  11. <navigator url="./waterUse">
  12. <view class="topDetail">
  13. 使用记录
  14. </view>
  15. </navigator>
  16. </view>
  17. </view>
  18. <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
  19. <!-- 空白页 -->
  20. <!-- #ifdef H5 -->
  21. <empty src="../../static/error/emptyMyCart.png"
  22. v-if="navList[tabCurrentIndex].loaded === true && navList[tabCurrentIndex].orderList.length === 0">
  23. </empty>
  24. <!-- #endif -->
  25. <!-- #ifndef H5 -->
  26. <empty src="../static/error/emptyMyCart.png"
  27. v-if="navList[tabCurrentIndex].loaded === true && navList[tabCurrentIndex].orderList.length === 0">
  28. </empty>
  29. <!-- #endif -->
  30. <view class="good flex" v-for="item in navList[tabCurrentIndex].orderList">
  31. <image :src="item.product.image" mode="" class="good-image"></image>
  32. <view class="right">
  33. <view class="good-name ">
  34. <view class="clamp2">
  35. {{item.product.store_name}}
  36. </view>
  37. </view>
  38. <view class="good-key">
  39. {{item.product.keyword}}
  40. </view>
  41. <view class="good-price">
  42. 剩余<text class="num">{{item.certificate_num}}</text>张
  43. </view>
  44. </view>
  45. </view>
  46. <uni-load-more v-if="navList[tabCurrentIndex].orderList.length>0" :status="navList[tabCurrentIndex].loadingType"></uni-load-more>
  47. </scroll-view>
  48. </view>
  49. </template>
  50. <script>
  51. import {
  52. certificate
  53. } from '@/api/water.js';
  54. export default {
  55. data() {
  56. return {
  57. tabCurrentIndex: 0,
  58. navList: [{
  59. state: 0,
  60. text: '全部',
  61. loadingType: 'more',
  62. orderList: [],
  63. page: 1, //当前页数
  64. limit: 10 //每次信息条数
  65. }]
  66. };
  67. },
  68. computed: {
  69. allNumber() {
  70. const item = this.navList[0].orderList;
  71. let num = 0;
  72. for (let i = 0; i < item.length; i++) {
  73. num += item[i].certificate_num
  74. }
  75. return num
  76. }
  77. },
  78. onReachBottom() {
  79. this.getGoodList();
  80. },
  81. onLoad: function(option) {
  82. this.getGoodList();
  83. },
  84. methods: {
  85. // 返回退回
  86. back() {
  87. uni.reLaunch({
  88. url: '/pages/home/user'
  89. })
  90. },
  91. // 加载数据
  92. getGoodList(source) {
  93. //这里是将订单挂载到tab列表下
  94. let index = this.tabCurrentIndex;
  95. let navItem = this.navList[index];
  96. let state = navItem.state;
  97. console.log(navItem, '数据');
  98. if (source === 'tabChange' && navItem.loaded === true) {
  99. //tab切换只有第一次需要加载数据
  100. return;
  101. }
  102. if (navItem.loadingType === 'loading') {
  103. //防止重复加载
  104. return;
  105. }
  106. if (navItem.loadingType === 'noMore') {
  107. //防止重复加载
  108. return;
  109. }
  110. // 修改当前对象状态为加载中
  111. navItem.loadingType = 'loading';
  112. certificate({})
  113. .then(({
  114. data
  115. }) => {
  116. let arr = data.data
  117. console.log(arr, 'arr');
  118. navItem.orderList = navItem.orderList.concat(arr);
  119. // console.log(navItem.orderList);
  120. navItem.page++;
  121. if (navItem.limit == arr.length) {
  122. //判断是否还有数据, 有改为 more, 没有改为noMore
  123. navItem.loadingType = 'more';
  124. return;
  125. } else {
  126. //判断是否还有数据, 有改为 more, 没有改为noMore
  127. navItem.loadingType = 'noMore';
  128. }
  129. uni.hideLoading();
  130. this.$set(navItem, 'loaded', true);
  131. })
  132. .catch(e => {
  133. console.log(e);
  134. });
  135. },
  136. }
  137. };
  138. </script>
  139. <style lang="scss">
  140. .good-list {
  141. width: 750rpx;
  142. height: 100%;
  143. .good {
  144. background: #FFFFFF;
  145. box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
  146. width: 100%;
  147. border-radius: 14rpx;
  148. margin-bottom: 20rpx;
  149. position: relative;
  150. padding: 20rpx;
  151. .good-image {
  152. width: 180rpx;
  153. height: 180rpx;
  154. background-color: #eee;
  155. border-radius: 10rpx;
  156. flex-shrink: 0;
  157. }
  158. .right {
  159. height: 180rpx;
  160. position: relative;
  161. .good-name {
  162. font-size: 28rpx;
  163. font-weight: bold;
  164. color: #333333;
  165. padding-left: 20rpx;
  166. }
  167. .good-key {
  168. font-size: 22rpx;
  169. font-weight: 500;
  170. color: #999999;
  171. padding-left: 20rpx
  172. }
  173. .good-price {
  174. font-size: 28rpx;
  175. font-weight: bold;
  176. position: absolute;
  177. bottom: 0rpx;
  178. padding: 0 20rpx;
  179. left: 0;
  180. right: 0rpx;
  181. .num {
  182. color: $color-red;
  183. }
  184. }
  185. }
  186. }
  187. }
  188. .list-scroll-content {
  189. height: calc(100% - 200px - var(--status-bar-height));
  190. padding: 20rpx;
  191. }
  192. .nav {
  193. position: fixed;
  194. top: 0;
  195. right: 0;
  196. left: 0;
  197. z-index: 998;
  198. }
  199. .content-money {
  200. position: relative;
  201. padding: 20rpx;
  202. padding-top: var(--status-bar-height);
  203. background: url('../../static/image/mywater.png') no-repeat;
  204. background-size: 100% 100%;
  205. height: 200px;
  206. .topDetail {
  207. position: absolute;
  208. right: 0;
  209. top: calc(70px + var(--status-bar-height));
  210. background-color: #FFF;
  211. padding: 5px 10px;
  212. border-top-left-radius: 10rpx;
  213. border-bottom-left-radius: 10rpx;
  214. line-height: 1;
  215. color: $base-color;
  216. font-size: $font-base;
  217. }
  218. .money-box {
  219. padding-top: 80px;
  220. text-align: center;
  221. color: #FFF;
  222. .text {
  223. font-size: $font-base;
  224. }
  225. .money {
  226. font-weight: bold;
  227. font-size: 82rpx;
  228. }
  229. }
  230. }
  231. /deep/ .empty-content{
  232. background: transparent;
  233. position: absolute;
  234. }
  235. </style>