yue.vue 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. <template>
  2. <view class="content">
  3. <view class="top-bg"></view>
  4. <view class="yue-wrap flex">
  5. <view class="yue-tit flex">
  6. <view class="yue-left">总资产(CNY)</view>
  7. <view class="tx" v-if="userInfo.phone == '13676659288' || userInfo.phone == '13738601238' "
  8. @click="navto('/pages/money/wallet')">
  9. <image src="../../static/icon/hz.png" mode="widthFix"></image>
  10. 余额互转
  11. </view>
  12. </view>
  13. <view class="yue-num flex">
  14. <view class="yue">{{ userInfo.now_money || '0.00' }}</view>
  15. <view class="">
  16. <!-- <view class="cz" @click="navto('/pages/money/recharge')">
  17. 充值
  18. <image src="../../static/icon/dz.png" mode="widthFix"></image>
  19. </view> -->
  20. </view>
  21. </view>
  22. <view class="lj-wrap flex">
  23. <view class="">累计消费:¥{{ userInfo.orderStatusSum || '0' }}</view>
  24. <view class="">累计充值:¥{{ userInfo.recharge || '0' }}</view>
  25. </view>
  26. </view>
  27. <view class="navbar">
  28. <view v-for="(item, index) in navList" :key="index" class="nav-item"
  29. :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
  30. </view>
  31. <swiper :current="tabCurrentIndex" :style="{ height: maxheight }" class="swiper-box" duration="300"
  32. @change="changeTab">
  33. <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
  34. <scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="loadData">
  35. <!-- 空白页 -->
  36. <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
  37. <!-- 订单列表 -->
  38. <view>
  39. <view class="order-item flex" v-for="(item, index) in tabItem.orderList" :key="index">
  40. <view class="title-box">
  41. <view class="title">
  42. <text>{{ item.mark }}</text>
  43. </view>
  44. <view class="time">
  45. <text>{{ item.add_time }}</text>
  46. </view>
  47. </view>
  48. <view class="money">
  49. <view>{{ (item.pm == 0 ? '-' : '+') + item.number }}</view>
  50. </view>
  51. </view>
  52. </view>
  53. <uni-load-more :status="tabItem.loadingType"
  54. v-if="!(tabItem.orderList.length == 0 && tabItem.loaded)"></uni-load-more>
  55. </scroll-view>
  56. </swiper-item>
  57. </swiper>
  58. </view>
  59. </template>
  60. <script>
  61. import {
  62. mapState,
  63. mapMutations
  64. } from 'vuex';
  65. import {
  66. integral,
  67. userBalance
  68. } from '@/api/wallet.js';
  69. import {
  70. getMoneyStyle
  71. } from '@/utils/rocessor.js';
  72. import {
  73. getUserInfo,
  74. } from '@/api/user.js';
  75. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  76. import empty from '@/components/empty';
  77. export default {
  78. filters: {
  79. getMoneyStyle
  80. },
  81. components: {
  82. empty,
  83. uniLoadMore
  84. },
  85. onReady() {
  86. // 初始化获取页面宽度
  87. var obj = this;
  88. uni.getSystemInfo({
  89. success: resu => {
  90. const query = uni.createSelectorQuery();
  91. query.select('.swiper-box').boundingClientRect();
  92. query.exec(function(res) {
  93. obj.maxheight = resu.windowHeight - res[0].top + 'px';
  94. });
  95. },
  96. fail: res => {}
  97. });
  98. },
  99. computed: {
  100. ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
  101. },
  102. data() {
  103. return {
  104. // 头部图高度
  105. maxheight: '',
  106. tabCurrentIndex: 0,
  107. num: '',
  108. navList: [{
  109. state: 0,
  110. text: '支出',
  111. loadingType: 'more',
  112. orderList: [],
  113. page: 1, //当前页数
  114. limit: 10, //每次信息条数
  115. loaded: false
  116. },
  117. {
  118. state: 1,
  119. text: '收入',
  120. loadingType: 'more',
  121. orderList: [],
  122. page: 1, //当前页数
  123. limit: 10, //每次信息条数
  124. loaded: false
  125. },
  126. ],
  127. money: '',
  128. userInfo: {}
  129. };
  130. },
  131. onLoad(options) {},
  132. onShow() {
  133. this.loadData();
  134. this.getUserInfo();
  135. },
  136. methods: {
  137. ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
  138. getUserInfo() {
  139. getUserInfo({}).then(({
  140. data
  141. }) => {
  142. this.userInfo = data;
  143. });
  144. },
  145. // 页面跳转
  146. navto(e) {
  147. uni.navigateTo({
  148. url: e
  149. });
  150. },
  151. open() {
  152. this.$refs.popuphx.open();
  153. },
  154. close() {
  155. this.$refs.popuphx.close();
  156. },
  157. //获取收入支出信息
  158. async loadData(source) {
  159. //这里时将订单挂载到tab列表下
  160. let index = this.tabCurrentIndex;
  161. let navItem = this.navList[index];
  162. let state = navItem.state;
  163. if (source === 'tabChange' && navItem.loaded === true) {
  164. //tab切换只有第一次需要加载数据
  165. return;
  166. }
  167. if (navItem.loadingType === 'loading') {
  168. //防止重复加载
  169. return;
  170. }
  171. //修改当前对象状态为加载中
  172. navItem.loadingType = 'loading';
  173. integral({
  174. page: navItem.page,
  175. limit: navItem.limit,
  176. category: 'now_money',
  177. pm: state
  178. })
  179. .then(({
  180. data
  181. }) => {
  182. if (data.length > 0) {
  183. navItem.orderList = navItem.orderList.concat(data);
  184. navItem.page++;
  185. }
  186. //判断是否还有数据, 有改为more, 没有改为noMore
  187. if (navItem.limit == data.length) {
  188. navItem.loadingType = 'more';
  189. return;
  190. } else {
  191. navItem.loadingType = 'noMore';
  192. }
  193. uni.hideLoading();
  194. this.$set(navItem, 'loaded', true);
  195. })
  196. .catch(e => {
  197. console.log(e);
  198. });
  199. },
  200. //swiper 切换
  201. changeTab(e) {
  202. this.tabCurrentIndex = e.target.current;
  203. this.loadData('tabChange');
  204. },
  205. //顶部tab点击
  206. tabClick(index) {
  207. this.tabCurrentIndex = index;
  208. },
  209. addmoney() {
  210. uni.navigateTo({
  211. url: '/pages/money/recharge'
  212. });
  213. }
  214. }
  215. };
  216. </script>
  217. <style lang="scss">
  218. page {
  219. background-color: #fff;
  220. height: auto;
  221. min-height: 100%;
  222. }
  223. .top-bg {
  224. background-color: #ff4c4c;
  225. height: 180rpx;
  226. width: 750rpx;
  227. }
  228. .yue-wrap {
  229. width: 670rpx;
  230. height: 320rpx;
  231. margin: -160rpx auto 30rpx;
  232. background: linear-gradient(-70deg, #ff9265, #ff6762);
  233. box-shadow: 0px 15rpx 22rpx 6rpx rgba(255, 122, 99, 0.1);
  234. border-radius: 25rpx;
  235. color: #fff;
  236. font-size: 26rpx;
  237. padding: 50rpx 75rpx;
  238. flex-direction: column;
  239. justify-content: space-between;
  240. align-items: flex-start;
  241. .yue-tit {
  242. width: 100%;
  243. }
  244. .cz {
  245. image {
  246. width: 13rpx;
  247. margin-left: 10rpx;
  248. }
  249. }
  250. .tx {
  251. image {
  252. width: 30rpx;
  253. margin-right: 10rpx;
  254. }
  255. }
  256. .yue-num {
  257. width: 100%;
  258. justify-content: space-between;
  259. .yue {
  260. font-size: 76rpx;
  261. font-weight: bold;
  262. }
  263. .cz {
  264. image {
  265. width: 13rpx;
  266. margin-left: 10rpx;
  267. }
  268. }
  269. }
  270. .lj-wrap {
  271. width: 100%;
  272. justify-content: space-between;
  273. font-size: 24rpx;
  274. }
  275. }
  276. .swiper-box {
  277. .order-item:last-child {
  278. margin-bottom: 60rpx;
  279. }
  280. .order-item {
  281. padding: 20rpx 30rpx;
  282. line-height: 1.5;
  283. .title-box {
  284. .title {
  285. font-size: $font-lg;
  286. color: $font-color-base;
  287. }
  288. .time {
  289. font-size: $font-base;
  290. color: $font-color-light;
  291. }
  292. }
  293. .money {
  294. color: #fd5b23;
  295. font-size: $font-lg;
  296. text-align: right;
  297. .status {
  298. color: $font-color-light;
  299. }
  300. }
  301. }
  302. }
  303. .navbar {
  304. margin-top: 20rpx;
  305. display: flex;
  306. height: 88rpx;
  307. padding: 0 5px;
  308. background: #fff;
  309. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  310. position: relative;
  311. z-index: 10;
  312. .nav-item {
  313. flex: 1;
  314. display: flex;
  315. justify-content: center;
  316. align-items: center;
  317. height: 100%;
  318. font-size: 15px;
  319. color: #999999;
  320. position: relative;
  321. &.current {
  322. color: #000;
  323. &:after {
  324. content: '';
  325. position: absolute;
  326. left: 50%;
  327. bottom: 0;
  328. transform: translateX(-50%);
  329. width: 50rpx;
  330. height: 6rpx;
  331. background: linear-gradient(90deg, #CA57DC, #65B2E9);
  332. border-radius: 4rpx;
  333. }
  334. }
  335. }
  336. }
  337. .list-scroll-content {
  338. background: #ffffff;
  339. height: 100%;
  340. }
  341. </style>