<script setup>
|
import { ref } from 'vue'
|
import { balanceChangeApi } from '../../api/index.js'
|
//返回
|
function navBackTo(){
|
uni.navigateBack()
|
}
|
async function getBalanceList(){
|
await balanceChangeApi().then((res) =>{
|
if(res.code == 200){
|
// banlanceList.value = res.data.list
|
}
|
})
|
}
|
const banlanceList = ref([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15])
|
</script>
|
<template>
|
<view class="container">
|
<navbar @navBackTo="navBackTo()" title="余额记录"></navbar>
|
<view class="date">
|
<view>
|
<text>2024年09月</text>
|
</view>
|
<view>
|
<text>支出￥5341.05</text>
|
<text>充值￥941.59</text>
|
</view>
|
</view>
|
<view class="main">
|
<block v-for="(item,index) in banlanceList">
|
<view class="item">
|
<view class="item-left">
|
<text>缴费</text>
|
<text class="methods">支付方式：微信</text>
|
<text>2024年09月20日 18:25</text>
|
</view>
|
<view class="item-right">
|
<text>-￥125.00</text>
|
<text>2000.00</text>
|
</view>
|
</view>
|
</block>
|
</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;
|
view:first-child{
|
font-weight: 300;
|
font-size: 32rpx;
|
color: #000000;
|
}
|
view:last-child{
|
font-weight: 300;
|
font-size: 24rpx;
|
color: #7E7E7E;
|
text:first-child{
|
margin-right:30rpx;
|
}
|
}
|
}
|
.main{
|
width:99%;
|
height: calc(100vh - 84rpx - 176rpx - 70rpx);
|
background: #fff;
|
border-radius:20rpx;
|
margin: 0 auto;
|
padding:28rpx 48rpx;
|
box-sizing: border-box;
|
overflow-y: scroll;
|
// background: #7E7E7E;
|
.item{
|
width:100%;
|
height:184rpx;
|
// 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-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;
|
flex-direction:column;
|
justify-content:flex-end;
|
align-items: flex-end;
|
text:first-child{
|
font-weight: 300;
|
font-size: 32rpx;
|
color: #000000;
|
}
|
text:last-child{
|
font-weight: 300;
|
font-size: 24rpx;
|
color: #A7A7A7;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
