<template> <view class="page"> <u-navbar :is-back="false" title="我的" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36' height='45'></u-navbar> <view class="cont"> <view class="info_top"> <view class="phone"> {{maskedPhoneNumber}} </view> <!-- <view class="type"> 去实名 </view> --> </view> <view class="balance_box"> <view class="tit"> 账户余额(元) </view> <view class="balance"> {{AccountInfo.balance}} </view> <view class="bot"> <view class="txt"> 累计提现:{{AccountInfo.totalWithdrawAmount}} </view> <view class="btn" @click.stop="toWd()"> 立即提现 </view> </view> </view> <view class="tits"> 金额明细 </view> <view class="tab" style="margin-bottom: 28rpx;"> <view class="tab_li" @click="changeList(0)"> 全部 <view class="bot_line" :class="tabindex==0?'act':''"></view> </view> <view class="tab_li" @click="changeList(1)"> 收入 <view class="bot_line" :class="tabindex==1?'act':''"></view> </view> <view class="tab_li" @click="changeList(2)"> 提现 <view class="bot_line" :class="tabindex==2?'act':''"></view> </view> </view> <view class="order_box"> <view class="order_li" v-for="(item,index) in list " :key="index"> <view class="lis"> <view class="txt1"> {{typeReturn(item.busType)}} </view> <view class="txt2" v-if="item.type==1"> +{{item.amount}} </view> <view class="txt2" v-if="item.type==2" style="color:#F76D6D;"> -{{item.amount}} </view> </view> <view class="lis"> <view class="txt3"> 7月14日 15:22 </view> <view class="txt3"> 余额: {{item.afterBalance}} </view> </view> <view class="lis"> <view class="txt3"> 订单编号:12326812310248512 </view> <view class="txt3"> 查看详情 </view> </view> </view> </view> </view> <tab-bar :indexs='1'></tab-bar> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#F7FAFE", }, AccountInfo:{}, tabindex:0, list:[] } }, onShow() { this.getAccountInfo() this.getList() }, watch: { }, computed: { maskedPhoneNumber() { const phone = this.AccountInfo.phonenumber; if (phone && phone.length === 11) { return phone.slice(0, 3) + '****' + phone.slice(7); // 替换第4到7位为* } return phone; // 如果电话号码长度不符合,返回原号码 } }, methods: { toWd(){ uni.navigateTo({ url:'/pages_withdraw/withdraw' }) }, typeReturn(type){ if(type==1){ return '订单收入' }else if(type==2){ return '续租订单收入' }else if(type==4){ return '订单退款' }else if(type==5){ return '提现' }else if(type==6){ return '提现失败' }else if(type==8){ return '短信扣费' } }, getList(){ let data={ type:this.tabindex } this.$u.get(`appAdmin/myChangeBalanceList?`,data).then((res) => { if (res.code === 200) { this.list=res.data } else { uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }); } }); }, changeList(num){ this.tabindex=num this.getList() }, getAccountInfo(){ this.$u.get(`appAdmin/myAccountInfo`).then((res) => { if (res.code === 200) { this.AccountInfo=res.data } else { uni.showToast({ title: res.msg, icon: 'none', duration: 2000 }); } }); } } } </script> <style lang="scss"> page { background-color: #F7FAFE; } .page { width: 750rpx; padding-bottom: 200rpx; .cont { padding-left: 47rpx; .order_box { width: 658rpx; padding: 0rpx 36rpx; background: #FFFFFF; box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1); border-radius: 20rpx 20rpx 20rpx 20rpx; .order_li { padding: 30rpx 26rpx; border-bottom: 1rpx solid #D8D8D8; .lis { margin-top: 10rpx; width: 100%; display: flex; align-items: center; justify-content: space-between; .text1 { font-weight: 600; font-size: 32rpx; color: #3D3D3D; } .txt2 { font-weight: 600; font-size: 32rpx; color: #5CA8FA; } .txt3 { font-weight: 400; font-size: 28rpx; color: #3D3D3D; } .txt4 { font-weight: 400; font-size: 28rpx; color: #5CA8FA; } } } .order_li:last-child { border-bottom: 1rpx solid #fff; } } .tits { margin-top: 42rpx; margin-bottom: 22rpx; font-weight: 600; font-size: 40rpx; color: #3D3D3D; } .tab { margin-left: 28rpx; display: flex; flex-wrap: nowrap; align-items: center; .tab_li { margin-right: 60rpx; font-weight: 600; font-size: 36rpx; color: #3D3D3D; .bot_line { margin-top: 6rpx; margin-left: 6rpx; width: 58rpx; height: 8rpx; background: #F7FAFE; border-radius: 5rpx 5rpx 5rpx 5rpx; } .act{ background: #5CA8FA; } } } .balance_box { padding: 34rpx 38rpx; margin-top: 50rpx; width: 658rpx; height: 334rpx; background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uhzF0Q3YKytXYOhotXmi'); background-size: cover; /* 背景图片等比缩放以覆盖整个容器 */ background-position: center; .bot { margin-top: 56rpx; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; .txt { font-weight: 600; font-size: 32rpx; color: #FFFFFF; } .btn { display: flex; align-items: center; justify-content: center; width: 182rpx; height: 64rpx; background: #FFFFFF; border-radius: 35rpx 35rpx 35rpx 35rpx; font-weight: 500; font-size: 32rpx; color: #5CA8FA; } } .tit { width: 100%; font-weight: 600; font-size: 32rpx; color: #FFFFFF; } .balance { margin-top: 14rpx; width: 100%; font-weight: 600; font-size: 72rpx; color: #FFFFFF; } } .info_top { display: flex; flex-wrap: nowrap; align-items: center; .phone { font-weight: 600; font-size: 36rpx; color: #3D3D3D; } .type { margin-left: 20rpx; background: #5CA8FA; border-radius: 30rpx 30rpx 30rpx 30rpx; padding: 6rpx 26rpx; font-weight: 400; font-size: 28rpx; color: #FFFFFF; } } } } </style>