<script setup>
|
import { onMounted, ref } from 'vue'
|
import { rechargeChangeApi,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
|
console.log('datePay',datePay.value)
|
// return `${year} + '-' + ${month}`
|
}
|
//选中日期
|
async function bindDateChange(e){
|
datePay.value = e.detail.value
|
await getBalanceList(datePay.value)
|
console.log('e',e)
|
}
|
|
//获取消费变动列表
|
const banlanceList = ref([])
|
async function getBalanceList(val){
|
await rechargeChangeApi(val).then(async(res) =>{
|
if(res.code == 200){
|
banlanceList.value = res.data
|
}
|
await getStatistics(val)
|
})
|
}
|
|
//获取用户资金变动统计
|
const rechargeSta = ref()
|
async function getStatistics(val){
|
await balanceStatisticsApi(val).then((res) =>{
|
rechargeSta.value = res.data.rechargeAmount
|
})
|
}
|
onMounted(async() =>{
|
getDate()
|
await getBalanceList(datePay.value)
|
})
|
</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 class="uni-input">日期：{{datePay}}</text>
|
<image src="../../../static/images/other/expand.png" alt=''></image>
|
</view>
|
</picker>
|
</view>
|
<view class="rechargeAll">充值:{{rechargeSta}}元</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>充值</text> -->
|
<text class="methods">水卡充值</text>
|
<text>{{item.createTimeView}}</text>
|
</view>
|
<view class="item-right">
|
<text class="money">{{item.rechargeAmount}}</text>
|
<text>元</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: 28rpx;
|
height:32rpx;
|
transform: rotate(90deg);
|
// margin-top:10rpx;
|
}
|
}
|
}
|
.rechargeAll{
|
font-weight: 300;
|
font-size: 26rpx;
|
color: #3368bd;
|
}
|
}
|
.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:140rpx;
|
// background:rgba(170, 216, 255, 0.2);
|
border-bottom:1rpx solid #D8D8D8;
|
box-sizing:border-box;
|
padding-bottom:20rpx;
|
justify-content:space-between;
|
align-items: flex-end;
|
display: flex;
|
.item-left{
|
height:100%;
|
display:flex;
|
flex-direction:column;
|
justify-content:space-between;
|
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;
|
justify-content:flex-end;
|
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:#bed2fd;
|
}
|
}
|
}
|
</style>
|
