225 lines
4.9 KiB
Vue
225 lines
4.9 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="balance-section text-center">
|
||
<view class="grey-text mb12">总余额（元）</view>
|
||
<view class="amount">{{ info.balance || 0 }}</view>
|
||
<view class="details">
|
||
<view class="detail-item right-border">
|
||
<view class="grey-text mb12">可提取金额</view>
|
||
<view class="text-40-bold">{{ userInfo.balance || 0 }}</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="grey-text mb12">冻结金额</view>
|
||
<view class="text-40-bold">0</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="transaction-section">
|
||
<view class="transaction-date">
|
||
<picker mode="date" :value="date" fields="month" @change="bindDateChange">
|
||
<text>{{ date }}</text>
|
||
<image src="/static/icon/xai.png"></image>
|
||
</picker>
|
||
</view>
|
||
<view class="text-24-bold mx-24">充值￥{{ statistics.inMoney }} 提现/支出人民币{{ statistics.outMoney }}</view>
|
||
<z-paging ref="paging" v-model="recordData" use-page-scroll @query="queryList">
|
||
<view class="transaction-list">
|
||
<view class="transaction-item" v-for="(item, index) in recordData" :key="index">
|
||
<text class="text-24-bold" :class="[getItemColor(item.sourceType)]">
|
||
{{item.recordName}}{{item.amount}}
|
||
</text>
|
||
<view class="line"></view>
|
||
<text class="text-24-bold">{{item.createTime}}</text>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
</view>
|
||
|
||
<view class="button-section">
|
||
<!-- <button class="withdraw-button">提现</button> -->
|
||
<button class="recharge-button" @click="navTo('/pages/money/recharge')">充值</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
import { userInfo, walletRecord } from '@/api/api.js';
|
||
import { useNav } from '@/hooks/useNav.js';
|
||
const { navTo } = useNav();
|
||
|
||
const info = ref({});
|
||
const date = ref()
|
||
const statistics = reactive({
|
||
outMoney: 0,
|
||
inMoney: 0,
|
||
})
|
||
const paging = ref()
|
||
|
||
const currentDate = new Date();
|
||
const year = currentDate.getFullYear();
|
||
const month = currentDate.getMonth() + 1;
|
||
date.value = year + "-" + (month < 10 ? "0" + month : month);
|
||
|
||
onMounted(async () => {
|
||
const res = await userInfo();
|
||
info.value = res;
|
||
});
|
||
|
||
const recordData = ref()
|
||
const getItemColor = v => {
|
||
if (v == 11) {
|
||
return "text-green-dark"
|
||
} else if(v == 21) {
|
||
return "text-red"
|
||
} else {
|
||
return ""
|
||
}
|
||
}
|
||
|
||
const queryList = async (pageNo, pageSize) => {
|
||
walletRecord({
|
||
current: pageNo,
|
||
pageSize,
|
||
time: date.value
|
||
})
|
||
.then((res) => {
|
||
statistics.inMoney = res.inMoney;
|
||
statistics.outMoney = res.outMoney;
|
||
paging.value.complete(res.record);
|
||
uni.hideLoading();
|
||
})
|
||
.catch((res) => {
|
||
paging.value.complete(false);
|
||
uni.hideLoading();
|
||
});
|
||
};
|
||
const bindDateChange = e => {
|
||
date.value = e.detail.value;
|
||
paging.value.reload();
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
// padding: 36rpx 30rpx;
|
||
.balance-section {
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
margin: 36rpx 30rpx;
|
||
padding: 36rpx 48rpx;
|
||
.grey-text {
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #232323;
|
||
}
|
||
.amount {
|
||
font-weight: bold;
|
||
font-size: 54rpx;
|
||
color: #232323;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
.details {
|
||
border-top: 2rpx solid #EEEEEE;
|
||
padding-top: 20rpx;
|
||
display: flex;
|
||
.detail-item {
|
||
width: 50%;
|
||
}
|
||
.right-border {
|
||
border-right: 2rpx solid #EEEEEE;
|
||
}
|
||
}
|
||
}
|
||
.text-40-bold {
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #232323;
|
||
}
|
||
.text-24-bold {
|
||
font-weight: bold;
|
||
font-size: 24rpx;
|
||
color: #232323;
|
||
}
|
||
.mb12 {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
.transaction-section {
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx;
|
||
margin: 36rpx 30rpx;
|
||
.transaction-date {
|
||
font-family: DIN, DIN;
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #232323;
|
||
padding: 24rpx 24rpx 14rpx;
|
||
image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 18rpx;
|
||
}
|
||
}
|
||
.mx-24 {
|
||
margin-left: 24rpx;
|
||
margin-right: 24rpx;
|
||
}
|
||
.transaction-list {
|
||
padding: 36rpx 24rpx;
|
||
.transaction-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
.line {
|
||
flex: 1;
|
||
height: 0;
|
||
border-top: 2rpx dashed #999999;
|
||
margin: 0 32rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.text-green-dark {
|
||
color: #6FA256;
|
||
}
|
||
.text-green-bright {
|
||
color: #3BCF73;
|
||
}
|
||
.text-red {
|
||
color: #FF2C2C;
|
||
}
|
||
.button-section {
|
||
position: fixed;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
left: 0;
|
||
bottom: 76rpx;
|
||
.withdraw-button, .recharge-button {
|
||
width: 330rpx;
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
border-radius: 46rpx;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
margin: 0;
|
||
border-width: 0;
|
||
}
|
||
.withdraw-button::after, .recharge-button::after {
|
||
border-width: 0;
|
||
}
|
||
.withdraw-button {
|
||
background: #eaf1e7;
|
||
color: #77B658;
|
||
}
|
||
.recharge-button {
|
||
background: #77B658;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
</style> |