<script setup>
|
import { computed, onMounted, ref } from 'vue'
|
import { balanceChangeApi,balanceStatisticsApi} from '../../../api/index.js'
|
//返回
|
function navBackTo(){
|
uni.navigateBack()
|
}
|
//日期
|
const endDate = ref()
|
const startDate = ref()
|
const datePay = ref()
|
const dateNow = ref()
|
//获取当前日期
|
function getDate() {
|
const date = new Date();
|
let year = date.getFullYear();
|
let month = date.getMonth() + 1;
|
dateNow.value = year + '-' + month
|
datePay.value = dateNow.value
|
}
|
//选中日期
|
async function bindDateChange(e){
|
datePay.value = e.detail.value
|
await getBalanceList(datePay.value)
|
}
|
//获取用户资金变动统计
|
const rechargeSta = ref()
|
const expendSta = ref()
|
async function getStatistics(val){
|
await balanceStatisticsApi(val).then((res) =>{
|
rechargeSta.value = res.data.rechargeAmount
|
expendSta.value = res.data.expenditureAmount
|
})
|
}
|
|
//获取余额变动列表
|
const banlanceList = ref([])
|
async function getBalanceList(val){
|
await balanceChangeApi(val).then((res) =>{
|
if(res.code == 200){
|
banlanceList.value = res.data
|
}
|
})
|
await getStatistics(val)
|
}
|
//动态设置用户支出收入对应样式
|
function setStyleMoney(val){
|
if(val == 200){
|
return { color:'#ebc117'}
|
}else{
|
return { color:'#00aa00'}
|
}
|
}
|
onMounted(async() =>{
|
getDate()
|
await getBalanceList(datePay.value)
|
// await getStatistics()
|
})
|
</script>
|
<template>
|
<view class="container">
|
<navbar @navBackTo="navBackTo()" title="余额记录"></navbar>
|
<view class="date">
|
<view class="picker">
|
<picker mode="date" :value="datePay" :fields="'month'" @change="bindDateChange">
|
<view class="date-text">
|
<!-- <text>日期：</text> -->
|
<text class="uni-input">日期：{{datePay}}</text>
|
<image src="../../../static/images/other/expand.png" alt=''></image>
|
</view>
|
</picker>
|
</view>
|
<view class="date-money">
|
<text>支出：{{expendSta}}元</text>
|
<text>充值：{{rechargeSta}}元</text>
|
</view>
|
</view>
|
<view class="main" v-if="banlanceList.length > 0">
|
<block v-for="(item,index) in banlanceList">
|
<view class="item">
|
<view class="item-left">
|
<text class="methods">{{item.businessName}}</text>
|
<text>{{item.createTimeView}}</text>
|
</view>
|
<view class="item-right">
|
<view>
|
<text v-if="item.business == 200" style="color:#ebc117">-</text>
|
<text class="money" :style="setStyleMoney(item.business)">{{item.changeMoney}}</text>
|
<text>元</text>
|
</view>
|
<text>余额：{{item.afterMoney}}</text>
|
</view>
|
</view>
|
</block>
|
</view>
|
<view v-else class="nodata">
|
<image src="../../../static/images/other/nodata.png" alt=""></image>
|
<text>该月暂无记录</text>
|
</view>
|
</view>
|
</template>
|
|
<style lang="scss">
|
.container{
|
width: 100%;
|
height: 100vh;
|
background:linear-gradient(to top,#FFFFFF,#E8EFFF);
|
.date{
|
height: 84rpx;
|
width:100%;
|
display: flex;
|
padding: 0 36rpx;
|
box-sizing: border-box;
|
justify-content:space-between;
|
align-items: center;
|
.picker{
|
.date-text{
|
height: 84rpx;
|
display: flex;
|
align-items: center;
|
text{
|
font-weight: 300;
|
font-size: 32rpx;
|
color: #5487f4;
|
margin-right:10rpx;
|
}
|
image{
|
width:32rpx;
|
height:32rpx;
|
transform: rotate(90deg);
|
// margin-top:10rpx;
|
}
|
}
|
}
|
.date-money{
|
font-weight: 300;
|
font-size: 26rpx;
|
color: #3368bd;
|
text:first-child{
|
margin-right:30rpx;
|
}
|
}
|
}
|
.main{
|
width:99%;
|
height:1200rpx;
|
background: #fff;
|
border-radius:20rpx;
|
margin: 0 auto;
|
padding:28rpx 48rpx;
|
box-sizing: border-box;
|
overflow-y: scroll;
|
// background: #7E7E7E;
|
.item{
|
width:100%;
|
height:160rpx;
|
// background:rgba(170, 216, 255, 0.2);
|
border-bottom:1rpx solid #D8D8D8;
|
box-sizing:border-box;
|
// padding-bottom:38rpx;
|
justify-content:space-between;
|
align-items: flex-end;
|
display: flex;
|
.item-left{
|
height:100%;
|
display:flex;
|
flex-direction:column;
|
justify-content:space-around;
|
align-items: flex-start;
|
text:first-child{
|
font-weight: 300;
|
font-size: 32rpx;
|
color: #000000;
|
}
|
.methods{
|
font-weight: 300;
|
font-size: 32rpx;
|
color: #474646;
|
}
|
text:last-child{
|
font-weight: 300;
|
font-size: 24rpx;
|
color: #A7A7A7;
|
}
|
}
|
.item-right{
|
height:100%;
|
display:flex;
|
flex-direction:column;
|
justify-content:space-around;
|
align-items:flex-end;
|
text{
|
font-weight: 300;
|
font-size: 24rpx;
|
color: #474646;
|
margin-left:5rpx;
|
}
|
.money{
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #0d83bb;
|
}
|
}
|
}
|
}
|
.nodata{
|
width:100%;
|
height:1200rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding-bottom:400rpx;
|
box-sizing: border-box;
|
flex-direction: column;
|
image{
|
width:496rpx;
|
height:488rpx;
|
}
|
text{
|
// color: rgba(111, 111, 111, 0.5);
|
color:#bed2fd;
|
}
|
}
|
}
|
</style>
|
