new-dianxiaorui-uniapp/pages/mine/incomeList.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>