first commit
This commit is contained in:
PC-202306242200\Administrator
225
pages/mine/incomeList.vue
Normal file
225
pages/mine/incomeList.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user