|
|
@@ -1,18 +1,18 @@
|
|
|
<template>
|
|
|
<view class="container account clearfix">
|
|
|
+ <au-custom :navbar-data='nvabarData' @navigateBack="hanldNavigateBack"></au-custom>
|
|
|
<view class="account-header">
|
|
|
- <view class="h-account">
|
|
|
- <image src="https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SACLslAAGcgkqy28c861.png" mode=""></image>
|
|
|
+ <view class="h-account" :style="{paddingTop:CustomBar+'px',backgroundImage: 'url('+account_bg+')'}">
|
|
|
<view class="m-account">
|
|
|
- <view class="m-m title">
|
|
|
- <text class="m-p">可用余额</text>
|
|
|
- <text class="iconfont icon-shuoming" @click="showAccounExp"></text>
|
|
|
- </view>
|
|
|
<view class="m-m money">
|
|
|
<text class="m-t s">￥</text>
|
|
|
<text class="m-t b">{{showIndexOfMoney}}</text>
|
|
|
<text class="m-t s">{{smallMoney}}</text>
|
|
|
</view>
|
|
|
+ <view class="m-m title">
|
|
|
+ <text class="m-p">可用余额(元)</text>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont icon-tishi" @click="showAccounExp"></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="h-calendar">
|
|
|
@@ -27,11 +27,12 @@
|
|
|
@click="tabClick(index)"
|
|
|
>
|
|
|
{{item.text}}
|
|
|
+ <view class="line"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- @scrolltolower="toLower" -->
|
|
|
- <scroll-view class="h-swiper-content" scroll-y >
|
|
|
+ <scroll-view class="h-swiper-content" scroll-y :style="{paddingTop:CustomBar+234+'px'}">
|
|
|
<!-- 空白页 -->
|
|
|
<view v-if="isEmpty" class="empty-account">
|
|
|
<image class="empty-account-image" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6ADg5RAABQ9EmRCGk830.png" mode="aspectFit"></image>
|
|
|
@@ -41,20 +42,20 @@
|
|
|
<view v-else class="list-account">
|
|
|
<view v-for="(item,index) in accountList" :key="index" class="list-item">
|
|
|
<view class="list-t">
|
|
|
- <view class="t-t">{{item.addDate}}</view>
|
|
|
- <view class="t-t bold">{{item.type =='1'? '收入' : '支出'}}</view>
|
|
|
- </view>
|
|
|
- <view class="list-b">
|
|
|
- <view class="t-t bold">{{cheakType(item.balanceType)}}</view>
|
|
|
- <view class="t-t">
|
|
|
+ <view class="t-t">{{cheakType(item.balanceType)}}</view>
|
|
|
+ <view class="t-t bold" :style="{color:item.type == '1' ? '#ff2a2a' : '#15C47A'}">
|
|
|
<text class="txt">{{item.type =='1'? '+' : '-'}}</text>
|
|
|
<text class="txt">￥{{item.amount}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="list-b">
|
|
|
+ <view class="t-t">{{item.addDate}}</view>
|
|
|
+ <view class="t-t">{{item.type =='1'? '收入' : '支出'}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<!--加载loadding-->
|
|
|
<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
- <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
|
|
|
+ <tui-nomore :visible="!pullUpOn" bgcolor="#FFFFFF" :text='nomoreText'></tui-nomore>
|
|
|
<!--加载loadding-->
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
@@ -78,6 +79,17 @@
|
|
|
},
|
|
|
data() {
|
|
|
return{
|
|
|
+ nvabarData: { //顶部自定义导航
|
|
|
+ showCapsule:1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
+ showSearch: 0,
|
|
|
+ title: '账户余额明细', // 导航栏 中间的标题
|
|
|
+ haveBack:true,
|
|
|
+ textColor:'#ffffff',
|
|
|
+ textLeft:this.$store.state.isIphone,
|
|
|
+ },
|
|
|
+ account_bg:'https://img.caimei365.com/group1/M00/03/D0/Cmis21-PpUqAbubBAADf1kTyhjs098.png',
|
|
|
+ isIphoneX:this.$store.state.isIphoneX,
|
|
|
+ CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
year: date.getFullYear(), //年
|
|
|
month: date.getMonth()+1, //月
|
|
|
userID: '', //用户ID
|
|
|
@@ -165,7 +177,7 @@
|
|
|
},
|
|
|
getOnReachBottomData(index,year,month){//上拉加载
|
|
|
this.pageNum+=1
|
|
|
- let param = {year:year,month:month,userId:this.userID,pageNum:this.pageNum,pageSize:this.pageSize,type:this.balanceType}
|
|
|
+ let params = {year:year,month:month,userId:this.userID,pageNum:this.pageNum,pageSize:this.pageSize,type:this.balanceType}
|
|
|
accountInfo(params).then(response =>{
|
|
|
let infoData = response.data
|
|
|
this.initAbleUserMoney(infoData.ableUserMoney)
|
|
|
@@ -218,25 +230,29 @@
|
|
|
this.getAccountInitData(this.tabCurrentIndex,this.year,this.month);
|
|
|
},
|
|
|
cheakType(type){
|
|
|
- let text;
|
|
|
- switch(type){
|
|
|
- case '1':
|
|
|
- text ='余额抵扣'
|
|
|
- break;
|
|
|
- case '2':
|
|
|
- text ='多收退款到余额'
|
|
|
- break;
|
|
|
- case '3':
|
|
|
- text ='申请退款'
|
|
|
- break;
|
|
|
- case '4':
|
|
|
- text ='余额充值'
|
|
|
- break;
|
|
|
- case '5':
|
|
|
- text ='余额提现'
|
|
|
- break;
|
|
|
- }
|
|
|
- return text;
|
|
|
+ let typeTextHtml,
|
|
|
+ typeObject={
|
|
|
+ 1:'余额抵扣',
|
|
|
+ 2:'多收退款到余额',
|
|
|
+ 3:'申请退款',
|
|
|
+ 4:'余额充值',
|
|
|
+ 5:'余额提现',
|
|
|
+ 6:'订金订单充值',
|
|
|
+ 7:'余额订单充值',
|
|
|
+ 8:'订金订单退款',
|
|
|
+ 9:'余额订单退款'
|
|
|
+ };
|
|
|
+ Object.keys(typeObject).forEach(function(key){
|
|
|
+ if(key == type){
|
|
|
+ typeTextHtml = typeObject[key]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return typeTextHtml;
|
|
|
+ },
|
|
|
+ hanldNavigateBack(){
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ });
|
|
|
},
|
|
|
showAccounExp(){
|
|
|
this.isShowAccounExp = true
|
|
|
@@ -264,7 +280,7 @@
|
|
|
<style lang="scss">
|
|
|
|
|
|
page, .container{
|
|
|
- background: #F7F7F7;
|
|
|
+ background: #FFFFFF;
|
|
|
height: 100%;
|
|
|
}
|
|
|
.account{
|
|
|
@@ -282,52 +298,49 @@ page, .container{
|
|
|
}
|
|
|
.h-account{
|
|
|
width: 100%;
|
|
|
- height: 264rpx;
|
|
|
+ height: 258rpx;
|
|
|
position: relative;
|
|
|
- image{
|
|
|
- width: 750rpx;
|
|
|
- height: 264rpx;
|
|
|
- }
|
|
|
+ background-size: cover;
|
|
|
}
|
|
|
.h-calendar{
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
}
|
|
|
.m-account{
|
|
|
- width: 702rpx;
|
|
|
- height: 216rpx;
|
|
|
- padding: 24rpx;
|
|
|
- position:absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 258rpx;
|
|
|
+ padding:50rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ .icon-tishi{
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ top: 20rpx;
|
|
|
+ font-size: 44rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: right;
|
|
|
+ line-height: 74rpx;
|
|
|
+ }
|
|
|
.m-m{
|
|
|
- width: 702rpx;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
.title{
|
|
|
- height: 74rpx;
|
|
|
- display: flex;
|
|
|
+ height: 48rpx;
|
|
|
+ text-align: center;
|
|
|
.m-p{
|
|
|
- flex: 1;
|
|
|
- font-size: 40rpx;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 28rpx;
|
|
|
color: #FFFFFF;
|
|
|
- text-align: left;
|
|
|
- line-height: 74rpx;
|
|
|
- }
|
|
|
- .iconfont{
|
|
|
- flex: 1;
|
|
|
- font-size: 52rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- text-align: right;
|
|
|
- line-height: 74rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
}
|
|
|
}
|
|
|
.money{
|
|
|
- height: 142rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
.m-t{
|
|
|
- font-size: 84rpx;
|
|
|
+ font-size:58rpx;
|
|
|
color: #FFFFFF;
|
|
|
- text-align: left;
|
|
|
- line-height: 142rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
&.b{
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
@@ -370,17 +383,36 @@ page, .container{
|
|
|
color: $text-color;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
+ .line{
|
|
|
+ width: 70rpx;
|
|
|
+ height: 4rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10rpx;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -35rpx;
|
|
|
+ }
|
|
|
&.current{
|
|
|
color: $color-system;
|
|
|
+ .line{
|
|
|
+ background-color: $color-system;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.h-swiper-content{
|
|
|
width: 100%;
|
|
|
- padding:478rpx 0 0 0;
|
|
|
height: calc(100% - 478rpx);
|
|
|
position: relative;
|
|
|
- background: #F7F7F7;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .list-account{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
.icon-jiazai{
|
|
|
color: #666666;
|
|
|
font-size: 36rpx;
|
|
|
@@ -417,23 +449,22 @@ page, .container{
|
|
|
}
|
|
|
|
|
|
}
|
|
|
-
|
|
|
.list-item{
|
|
|
- width: 702rpx;
|
|
|
- height: 100rpx;
|
|
|
- padding: 20rpx 24rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 140rpx;
|
|
|
+ padding: 20rpx 0;
|
|
|
border-bottom: 1px solid #EBEBEB;
|
|
|
+ box-sizing: border-box;
|
|
|
background: #FFFFFF;
|
|
|
&:last-child{
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
.list-t{
|
|
|
- height: 34rpx;
|
|
|
- line-height: 34rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
+ height: 54rpx;
|
|
|
+ line-height: 54rpx;
|
|
|
+ font-size: $font-size-32;
|
|
|
+ color: #333333;
|
|
|
display: flex;
|
|
|
- margin-bottom: 28rpx;
|
|
|
.t-t{
|
|
|
flex: 1;
|
|
|
&:nth-child(1){
|
|
|
@@ -449,14 +480,14 @@ page, .container{
|
|
|
|
|
|
}
|
|
|
.list-b{
|
|
|
- height: 34rpx;
|
|
|
- line-height: 34rpx;
|
|
|
+ height: 46rpx;
|
|
|
+ line-height: 46rpx;
|
|
|
font-size:$font-size-28;;
|
|
|
- margin-top: 24rpx;
|
|
|
color: $text-color;
|
|
|
display: flex;
|
|
|
.t-t{
|
|
|
flex: 1;
|
|
|
+ color: #9aa5b5;
|
|
|
&:nth-child(1){
|
|
|
text-align: left;
|
|
|
}
|
|
|
@@ -483,7 +514,7 @@ page, .container{
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
top: 100%;
|
|
|
- display: none;
|
|
|
+ opacity: 0;
|
|
|
background: rgba(0,0,0,.5);
|
|
|
z-index: 999;
|
|
|
image{
|
|
|
@@ -491,10 +522,10 @@ page, .container{
|
|
|
height: 1052rpx;
|
|
|
}
|
|
|
.icon-close{
|
|
|
- position: relative;
|
|
|
+ position: absolute;
|
|
|
color: #FFFFFF;
|
|
|
font-size:60rpx ;
|
|
|
- bottom: 60rpx;
|
|
|
+ bottom: 15%;
|
|
|
left: 50%;
|
|
|
margin-left: -32rpx;
|
|
|
|
|
|
@@ -502,21 +533,21 @@ page, .container{
|
|
|
}
|
|
|
.showAccounExp.show{
|
|
|
top: 0;
|
|
|
- display: block;
|
|
|
+ opacity: 1;
|
|
|
animation:rundtop 0.3s;
|
|
|
}
|
|
|
.showAccounExp.hide{
|
|
|
top: 100%;
|
|
|
- display: none;
|
|
|
+ opacity: 0;
|
|
|
animation:rundbottom 0.3s;
|
|
|
}
|
|
|
@keyframes rundtop{
|
|
|
- 0%{top: 100%;display: none;}
|
|
|
- 100%{top:0;display: block;}
|
|
|
+ 0%{top: 100%;opacity: 0;}
|
|
|
+ 100%{top:0;opacity: 1;}
|
|
|
}
|
|
|
@keyframes rundbottom{
|
|
|
- 0%{top: 0;display: block;}
|
|
|
- 100%{top:100%;display: none;}
|
|
|
+ 0%{top: 0;opacity: 1;}
|
|
|
+ 100%{top:100%;opacity: 0;}
|
|
|
}
|
|
|
/*空列表显示样式*/
|
|
|
.empty-account {
|
