<template> <view class="content"> <view class="content-money"> <view class="status_bar"><!-- 这里是状态栏 --></view> <view class="body-title"> <view class="goback-box" @click="toBack"><image class="goback" src="../../static/icon/fanhui.png" mode=""></image></view> <view class="header">我的钱包</view> </view> <view class="content-bg"></view> <view class="money-box"> <view class="money">{{money | getMoneyStyle}}</view> <view>余额</view> </view> <view class="moneybtn-box"> <view class="money-btn" @click="navto('/pages/money/withdmoenys?type=yue')"> <!-- 易货券转账 --> </view> <view class="money-btn" @click="navto('/pages/money/recharge')"> 钱包充值> </view> </view> </view> <view class="info-box flex"> <view class="info-item"> <view class="info-font">累计收入</view> <view class="info-num">{{shouzhi.income || '0.00'}}</view> </view> <view class="shu"></view> <view class="info-item"> <view class="info-font">累计支出</view> <view class="info-num">{{shouzhi.expen|| '0.00'}}</view> </view> </view> <view class="navbar"> <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view> </view> <swiper :current="tabCurrentIndex" :style="{ height: height }" class="swiper-box" duration="300" @change="changeTab"> <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex"> <scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="loadData"> <!-- 空白页 --> <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> <!-- 订单列表 --> <view> <view class="order-item flex" v-for="(item, index) in tabItem.orderList" :key="index"> <view class="title-box"> <view class="title"> <text>{{ item.title }}</text> </view> <view class="time"> <text>{{ item.add_time }}</text> </view> </view> <view class="money"> <view>{{ (tabItem.state==1?'-':'+')+item.number }}</view> <view v-if="item.status == 0" class="status">待发放</view> </view> </view> </view> <uni-load-more :status="tabItem.loadingType" v-if="!(tabItem.orderList.length == 0 && tabItem.loaded)"></uni-load-more> </scroll-view> </swiper-item> </swiper> </view> </template> <script> import { spreadCommission, userBalance,getSpreadsum } from '@/api/wallet.js'; import { getMoneyStyle } from '@/utils/rocessor.js'; import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; import empty from '@/components/empty'; export default { filters: { getMoneyStyle }, components: { empty, uniLoadMore }, onReady(res) { var _this = this; uni.getSystemInfo({ success: resu => { const query = uni.createSelectorQuery(); query.select('.swiper-box').boundingClientRect(); query.exec(function(res) { _this.height = resu.windowHeight - res[0].top + 'px'; console.log('打印页面的剩余高度', _this.height); }); }, fail: res => {} }); }, data() { return { height: '', // 头部图高度 maxheight:'', tabCurrentIndex: 0, orderStatusSum: 0, recharge: 0, navList: [ // { // state: 0, // text: '全部', // loadingType: 'more', // orderList: [], // page: 1, //当前页数 // limit: 10 //每次信息条数 // }, { state: 1, text: '支出', loadingType: 'more', orderList: [], page: 1, //当前页数 limit: 10 //每次信息条数 }, { state: 2, text: '收入', loadingType: 'more', orderList: [], page: 1, //当前页数 limit: 10 //每次信息条数 } ], money: '', shouzhi:[], }; }, onLoad(options) {}, onShow() { getSpreadsum().then(res=>{ this.shouzhi = res.data console.log(res,'在拍卖行'); }) this.loadData(); // 获取用户余额 userBalance({}).then(({ data }) => { this.money = data.now_money; }); }, methods: { // 页面跳转 navto(e) { uni.navigateTo({ url: e }); }, //获取收入支出信息 async loadData(source) { let obj = this //这里是将订单挂载到tab列表下 let index = this.tabCurrentIndex; let navItem = this.navList[index]; let state = navItem.state; if (source === 'tabChange' && navItem.loaded === true) { //tab切换只有第一次需要加载数据 return; } if (navItem.loadingType === 'loading') { //防止重复加载 return; } // 修改当前对象状态为加载中 navItem.loadingType = 'loading'; spreadCommission( { page: navItem.page, limit: navItem.limit }, state ) .then(({ data }) => { console.log(navItem.state); console.log(data,'1'); console.log(JSON.stringify(data),'2') obj.recharge = data.income;//累计收入 obj.orderStatusSum = data.expend;//支出 if (data.length > 0) { navItem.orderList = navItem.orderList.concat(data[0].list); console.log(navItem.orderList,'徐浩岚'); navItem.page++; }else { navItem.loadingType = 'noMore'; } if (navItem.limit == data[0].list.length) { //判断是否还有数据, 有改为 more, 没有改为noMore navItem.loadingType = 'more'; return; } else { //判断是否还有数据, 有改为 more, 没有改为noMore navItem.loadingType = 'noMore'; } uni.hideLoading(); this.$set(navItem, 'loaded', true); }) .catch(e => { console.log(e); }); }, //swiper 切换 changeTab(e) { this.tabCurrentIndex = e.target.current; this.loadData('tabChange'); }, //顶部tab点击 tabClick(index) { this.tabCurrentIndex = index; } } }; </script> <style lang="scss"> page { background: #f1f1f1; height: 100%; } .status_bar { height: var(--status-bar-height); width: 100%; } .content-money { position: relative; height: 480rpx; .content-bg { background: #303030; position: absolute; top: 0; left: 0; right: 0; width: 750rpx; height: 480rpx; image { width: 100%; height: 100%; } } .body-title { height: 80rpx; text-align: center; font-size: 35rpx; position: relative; .header { position: absolute; left: 0; top: 0; width: 100%; font-size: 36rpx; font-family: PingFang SC; font-weight: bold; color: #fffeff; height: 80rpx; font-size: 36rpx; font-weight: 700; z-index: 9; display: flex; justify-content: center; align-items: center; } .goback-box { position: absolute; left: 18rpx; top: 0; height: 80rpx; display: flex; align-items: center; } .goback { z-index: 100; width: 34rpx; height: 34rpx; } } } .info-box { width: 670rpx; height: 186rpx; background: #ffffff; box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06); border-radius: 20rpx; margin: -100rpx auto 0; position: relative; z-index: 2; .info-item { width: 50%; display: flex; flex-direction: column; align-items: center; line-height: 1; .info-font { font-size: 30rpx; font-family: PingFang SC; font-weight: bold; color: #999999; } .info-num { margin-top: 30rpx; font-size: 30rpx; font-family: PingFang SC; font-weight: bold; color: #181818; } } .shu { width: 2rpx; height: 74rpx; background: #dcdfe6; } } .money-box { position: relative; z-index: 2; padding-top: 70rpx; color: #ffffff; text-align: center; .money { font-size: 72rpx; font-family: PingFang SC; font-weight: bold; color: #ffffff; } .text { font-size: 30rpx; } } .moneybtn-box { display: flex; justify-content: space-between; position: relative; z-index: 2; color: #F8DABA; padding:20rpx 50rpx ; font-size: 30rpx; font-family: PingFang SC; font-weight: bold; color: #F8DABA; } .navbar { margin-top: 20rpx; display: flex; height: 88rpx; padding: 0 5px; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06); position: relative; z-index: 10; .nav-item { flex: 1; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 15px; color: #999999; position: relative; &.current { color: #000; &:after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 44px; height: 0; border-bottom: 2px solid #F8DABA; } } } } //列表 .swiper-box { .order-item:last-child { margin-bottom: 60rpx; } .order-item { padding: 20rpx 30rpx; line-height: 1.5; .title-box { .title { font-size: $font-lg; color: $font-color-base; } .time { font-size: $font-base; color: $font-color-light; } } .money { color: #fd5b23; font-size: $font-lg; text-align: right; .status { color: $font-color-light; } } } } .list-scroll-content { background: #ffffff; height: 100%; } .content { height: 100%; .empty-content { background-color: #ffffff; } } .btn-box { width: 674rpx; height: 88rpx; background: linear-gradient(0deg, #2e58ff, #32c6ff); border-radius: 44rpx; font-size: 36rpx; font-family: PingFang SC; font-weight: 500; color: #ffffff; text-align: center; line-height: 88rpx; position: fixed; bottom: 48rpx; left: 0; right: 0; margin: 0 auto; } </style>