scoreAccumulate.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. <template>
  2. <view class="content">
  3. <view class="content-money">
  4. <view class="money-box">
  5. <view class="text">我的积分</view>
  6. <view class="money">{{ userInfo.integral | getMoneyStyle }}</view>
  7. </view>
  8. </view>
  9. <view class="navbar">
  10. <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
  11. </view>
  12. <swiper :current="tabCurrentIndex" :style="{ height: maxheight }" class="swiper-box" duration="300" @change="changeTab">
  13. <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
  14. <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
  15. <!-- 空白页 -->
  16. <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
  17. <!-- 订单列表 -->
  18. <template>
  19. <view v-for="(item, i) in tabItem.orderList" class="order-item flex">
  20. <view class="title-box">
  21. <view class="title">
  22. <text>{{ item.mark }}</text>
  23. </view>
  24. <view class="time">
  25. <text>{{ item.add_time }}</text>
  26. </view>
  27. </view>
  28. <view class="money">
  29. <text>{{ (item.pm == 0 ? '-' : '+') + item.number }}</text>
  30. </view>
  31. </view>
  32. </template>
  33. <uni-load-more :status="tabItem.loadingType"></uni-load-more>
  34. </scroll-view>
  35. </swiper-item>
  36. </swiper>
  37. </view>
  38. </template>
  39. <script>
  40. import { integral, userBalance } from '@/api/wallet.js';
  41. import { mapState, mapMutations } from 'vuex';
  42. import { getMoneyStyle } from '@/utils/rocessor.js';
  43. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  44. import empty from '@/components/empty';
  45. export default {
  46. filters: {
  47. getMoneyStyle
  48. },
  49. components: {
  50. empty,
  51. uniLoadMore
  52. },
  53. onReady(res) {
  54. // 初始化获取页面宽度
  55. var _this = this;
  56. uni.getSystemInfo({
  57. success: resu => {
  58. const query = uni.createSelectorQuery();
  59. query.select('.swiper-box').boundingClientRect();
  60. query.exec(function(res) {
  61. _this.maxheight = resu.windowHeight - res[0].top + 'px';
  62. console.log('打印页面的剩余高度', _this.height);
  63. });
  64. },
  65. fail: res => {}
  66. });
  67. },
  68. data() {
  69. return {
  70. // 头部图高度
  71. maxheight: '',
  72. tabCurrentIndex: 0,
  73. navList: [
  74. {
  75. state: 1,
  76. text: '收入',
  77. loadingType: 'more',
  78. orderList: [],
  79. page: 1, //当前页数
  80. limit: 10 //每次信息条数
  81. },
  82. {
  83. state: 0,
  84. text: '支出',
  85. loadingType: 'more',
  86. orderList: [],
  87. page: 1, //当前页数
  88. limit: 10 //每次信息条数
  89. }
  90. ],
  91. money: ''
  92. };
  93. },
  94. onLoad(options) {
  95. this.loadData();
  96. },
  97. computed: {
  98. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  99. },
  100. methods: {
  101. // 页面跳转
  102. navto(e) {
  103. uni.navigateTo({
  104. url: e
  105. });
  106. },
  107. //获取收入支出信息
  108. async loadData(source) {
  109. //这里是将订单挂载到tab列表下
  110. let index = this.tabCurrentIndex;
  111. let navItem = this.navList[index];
  112. let state = navItem.state;
  113. if (source === 'tabChange' && navItem.loaded === true) {
  114. //tab切换只有第一次需要加载数据
  115. return;
  116. }
  117. if (navItem.loadingType === 'noMore') {
  118. //防止重复加载
  119. return;
  120. }
  121. // 修改当前对象状态为加载中
  122. navItem.loadingType = 'loading';
  123. integral({
  124. page: navItem.page,
  125. limit: navItem.limit,
  126. pm: state
  127. })
  128. .then(({ data }) => {
  129. console.log(data);
  130. navItem.orderList = navItem.orderList.concat(data);
  131. console.log(navItem.orderList, '123465');
  132. navItem.page++;
  133. if (navItem.limit == data.length) {
  134. //判断是否还有数据, 有改为 more, 没有改为noMore
  135. navItem.loadingType = 'more';
  136. return;
  137. } else {
  138. //判断是否还有数据, 有改为 more, 没有改为noMore
  139. navItem.loadingType = 'noMore';
  140. }
  141. uni.hideLoading();
  142. this.$set(navItem, 'loaded', true);
  143. })
  144. .catch(e => {
  145. console.log(e);
  146. });
  147. },
  148. //swiper 切换
  149. changeTab(e) {
  150. this.tabCurrentIndex = e.target.current;
  151. this.loadData('tabChange');
  152. },
  153. //顶部tab点击
  154. tabClick(index) {
  155. this.tabCurrentIndex = index;
  156. },
  157. // 点击返回 我的页面
  158. toBack() {
  159. uni.switchTab({
  160. url: '/pages/user/user'
  161. });
  162. }
  163. }
  164. };
  165. </script>
  166. <style lang="scss">
  167. page {
  168. background: #ffffff;
  169. height: 100%;
  170. }
  171. .content-money {
  172. padding-bottom: 30rpx;
  173. background: $page-color-base;
  174. // border: 2px solid #ffffff;
  175. // padding-top: var(--status-bar-height);
  176. .money-box {
  177. background-color: $base-color;
  178. padding-top: var(--status-bar-height);
  179. height: 368rpx;
  180. color: #ffffff;
  181. text-align: center;
  182. .text {
  183. padding-top: 147rpx;
  184. font-size: $font-sm;
  185. }
  186. .money {
  187. font-size: 56rpx;
  188. }
  189. }
  190. }
  191. .navbar {
  192. display: flex;
  193. height: 40px;
  194. padding: 0 5px;
  195. background: #fff;
  196. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  197. position: relative;
  198. z-index: 10;
  199. .nav-item {
  200. flex: 1;
  201. display: flex;
  202. justify-content: center;
  203. align-items: center;
  204. height: 100%;
  205. font-size: 15px;
  206. color: #999999;
  207. position: relative;
  208. &.current {
  209. color: #5dbc7c;
  210. &:after {
  211. content: '';
  212. position: absolute;
  213. left: 50%;
  214. bottom: 0;
  215. transform: translateX(-50%);
  216. width: 44px;
  217. height: 0;
  218. border-bottom: 2px solid #5dbc7c;
  219. }
  220. }
  221. }
  222. }
  223. // 列表
  224. .swiper-box {
  225. padding-top: 10rpx;
  226. .order-item {
  227. padding: 20rpx 30rpx;
  228. line-height: 1.5;
  229. .title-box {
  230. .title {
  231. font-size: $font-lg;
  232. color: $font-color-base;
  233. }
  234. .time {
  235. font-size: $font-base;
  236. color: $font-color-light;
  237. }
  238. }
  239. .money {
  240. color: #ff0000;
  241. font-size: $font-lg;
  242. }
  243. }
  244. }
  245. .list-scroll-content {
  246. height: 100%;
  247. }
  248. .wallet-btn {
  249. width: 674rpx;
  250. height: 88rpx;
  251. background: linear-gradient(90deg, #08c4e6, #50ead2);
  252. border-radius: 44rpx;
  253. font-size: $font-lg;
  254. font-family: PingFang SC;
  255. font-weight: 500;
  256. color: #ffffff;
  257. display: flex;
  258. align-items: center;
  259. justify-content: center;
  260. position: fixed;
  261. left: 38rpx;
  262. bottom: 50rpx;
  263. }
  264. .content {
  265. height: 100%;
  266. .empty-content {
  267. background-color: #ffffff;
  268. }
  269. }
  270. </style>