cloud_admin_app/pagesCenter/accountBalancePersonnelCar/accountBalancePersonnelCar.vue

<template>
	<view class="content">
		<view class="padding-top-xs">
			<view class="cu-card ">
				<view class="cu-item shadow bgColor">
					<view class="flex padding-sm justify-between">
						<!-- left -->
						<view class="padding-tb-lg">
							<text class="account">账户余额（元）</text>
							<view class="padding-top-xs accountNum">{{money}}</view>
						</view>
						<!-- right -->
						<view class="padding-top-xl">
							<view class="padding-top-sm">
								<button class="cu-btn round line-white" @click="goRecharge">去充值</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="action padding-lr-sm padding-bottom-sm"><text class="cuIcon-titles textBlue"></text>充值明细</view>
		<view>
			<view class="cu-card " v-for="(item,index) in payData" :key="index" v-if="payData.length!=0">
				<view class="cu-item shadow">
					<view class="flex padding-sm justify-between">
						<!-- left -->
						<view>
							<view class="flex">
								<view class="pay">{{item.tradeType== 3?'平台充值':'个人充值'}}</view>

								<view class="payState">
									付款成功
								</view>
							</view>
							<view class="margin-top-sm payTime">{{item.payTime}}</view>
						</view>
						<!-- right -->
						<view>
							<view class="text-price payMoney">{{item.payPrice / 100}}</view>
							<view class="allMoney">
								<text>实际到账余额：</text>
								{{item.totalPrice?item.totalPrice / 100: 0}}元
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="center">
				<image class="noneImg" src="../../static/user/none.png" mode="scaleToFill"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	// import {
	// 	AESDecrypt
	// } from '../../../static/utils/encodes.js';
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	const money = ref(0.00)
	const money_team = ref(0.00)
	const payData = ref([])
	const total = ref()
	const totalPages = ref() //总页数，用于判断是否加载完
	const size = ref(10)
	const pageNo = ref(1)
	onLoad(() => {
		handle_bindType()
	})
	onShow(() => {
		getPayList(0)
	})
	const handle_bindType = async (type) => {
		let data = {
			bindType: 2
		}
		let config_url = ''
		if (uni.getStorageSync("captainOrNot")) {
			config_url = 'app-api/pay/wallet/getTeam'
		} else {
			config_url = 'app-api/pay/wallet/get'
		}
		uni.$request({
			url: config.baseUrl + config_url,
			data
		}).then(res => {
			money.value = res.data.data.balance / 100
		})
	}

	const goRecharge = () => {
		uni.navigateTo({
			url: '/pages/index/recharge/recharge'
		})
	}
	const getPayList = async (type) => {
		let param = {
			pageNo: pageNo.value,
			pageSize: 10
		}
		await uni.$request({
			url: config.baseUrl +
				`app-api/pay/wallet-recharge/page?bindType=2&pageNo=${param.pageNo}&pageSize=${param.pageSize}`
		}).then(res => {
			// console.log(res, '充值明细');
			totalPages.value = res.data.data.total
			if (type == 1) {
				payData.value.concat(res.data.data.list)
			} else {
				payData.value = res.data.data.list
			}
		})
	}
	onReachBottom(async () => {
		if (payData.value.length == totalPages.value) {
			uni.$u.toast('没有更多啦');
			return
		}
		pageNo.value++
		getPayList(1)
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background: #F7F8FA;
	}

	.textBlue {
		color: #4C91FF;
	}

	.bgColor {
		background-image: linear-gradient(to right bottom, #A5C7FF, #4C91FF);
	}

	.account {
		color: #fff;
		font-size: 26rpx;
		font-weight: 400;
	}

	.accountNum {
		font-size: 44rpx;
		font-weight: 700;
		color: #fff;
	}

	.u-button--plain {
		background-color: rgba(255, 255, 255, 0);
	}

	.payState {
		font-size: 20rpx;
		font-weight: 400;
		padding: 4rpx 8rpx;
		border: 1px solid #4C91FF;
		border-radius: 8rpx;
		color: #4C91FF;
		margin-left: 10rpx;
	}

	.non-payment {
		font-size: 20rpx;
		font-weight: 400;
		color: #FF7B0E;
		border: 1px solid #FF7B0E;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		margin-left: 10rpx;
	}

	.refunded-faild {
		font-size: 20rpx;
		font-weight: 400;
		color: #F2634F;
		border: 1px solid #F2634F;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		margin-left: 10rpx;
	}

	.refund-success {
		font-size: 20rpx;
		font-weight: 400;
		color: #6BECA0;
		border: 1px solid #6BECA0;
		padding: 4rpx 8rpx;
		border-radius: 8rpx;
		margin-left: 10rpx;
	}

	.pay {
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
	}

	.payTime {
		color: #808080;
		font-size: 20rpx;
		font-weight: 400;
	}

	.payMoney {
		color: #4C91FF;
		font-size: 40rpx;
		font-weight: 400;
		text-align: right;
	}

	.allMoney {
		color: #808080;
		font-size: 24rpx;
		font-weight: 400;
	}

	.cu-card>.cu-item {
		margin: 0 30rpx 30rpx 30rpx;
	}

	.noneImg {
		width: 336rpx;
		height: 452rpx;
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
</style>