cloud_admin_app/pagesCenter/accountBalance/accountBalance.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" @click="goRecharge"
									style="background: #fff; color: #2ebc6a;">充值</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tab_cls">
			<uv-subsection :list="tab_list" :current="tab_current" @change="tab_change"></uv-subsection>
		</view>
		<!-- refundStatus == 0  才可以退款 -->
		<!-- <view class="action padding-lr-sm padding-bottom-sm"><text class="cuIcon-titles textBlue"></text>充值明细</view> -->
		<view class="content_pay">
			<view class="cu-card " v-for="(item,index) in payData" :key="index" v-if="payData.length!=0">
				<view class="cu-item shadow" :class="item.refundStatus == 10? 'isopacity': '' ">
					<view class="flex padding-sm justify-between">
						<!-- left -->
						<view>
							<view class="flex" style="align-items: center;">
								<view class="payState">
									付款成功
								</view>
								<text class="refund_moneny"
									v-if="tab_current == 0 && item.refundStatus == 0 && item.payRefundId == null"
									@click="handle_refund(item.id)">退款</text>
								<text class="refund_moneny_ing" v-if="item.refundStatus == 0 && item.payRefundId != null">退款中</text>
								<text class="refund_moneny_fail" v-if="item.refundStatus == 20 && item.payRefundId != null">退款失败</text>
								<text v-if="item.refundStatus == 10 && item.payRefundId != null" class="refund_moneny_10">已退款( {{item.refundTotalPrice / 100}}元 )</text>
							</view>
							<view class="margin-top-sm payTime" v-if="tab_current == 0">{{item.payTime}}</view>
							<view class="margin-top-sm payTime" v-else>{{item.createTime}}</view>
						</view>
						<!-- right -->
						<view>
							<view class="text-price payMoney">
								{{tab_current == 0? (item.payPrice / 100): (item.price / 100) }}
							</view>
							<view class="allMoney" v-if="tab_current == 0">
								<text>实际到账金额：</text>
								{{item.totalPrice?item.totalPrice / 100: 0}}元
							</view>
							<view class="allMoney" v-else>
								<text>实际消费金额：</text>
								{{item.price?item.price / 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 PayWalletApi from '@/sheep/api/pay/wallet';
	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)
	const tab_list = ref([
		'充值明细', '消费明细'
	])
	const tab_current = ref(0)
	onLoad(() => {
		handle_bindType()
		// getPayconsumption()
	})
	onShow(() => {
		getPayList(0)
	})
	const tab_change = (e) => {
		tab_current.value = e
		pageNo.value = 1
		if (e == 1) {
			getPayList_consumption()
		} else if (e == 0) {
			getPayList(0)
		}
	}
	const handle_bindType = async (type) => {
		let data = {
			bindType: 1
		}
		uni.$request({
			url: config.baseUrl + "app-api/pay/wallet/get",
			data
		}).then(res => {
			money.value = res.data.data.balance / 100
		})
	}

	const goRecharge = () => {
		uni.navigateTo({
			url: '/pages/index/recharge/recharge'
		})
	}

	const handle_refund = (id) => {
		uni.showModal({
			title: '提示',
			content: '是否确认提交退款申请？',
			success: function(res) {
				if (res.confirm) {
					handle_refund_submit(id)
				} else if (res.cancel) {
					// console.log('用户点击取消');
				}
			}
		});
	}

	const handle_refund_submit = async (id) => {
		await uni.$request({
			url: config.baseUrl +
				`app-api/pay/wallet-recharge/refund?id=${id}`
		}).then(res => {
			// console.log(res, '退款');
			uni.showLoading({
				title: '申请中...请稍后'
			})
			if (res.data.code == 0) {
				setTimeout(() => {
					uni.showToast({
						title: '申请成功',
						duration: 2000,
						icon: 'success'
					});
				}, 2000)
				setTimeout(() => {
					handle_bindType()
					getPayList(0)
					uni.hideLoading()
				}, 4000)
			} else {
				setTimeout(() => {
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'error'
					});
				}, 2000)
				setTimeout(() => {
					handle_bindType()
					getPayList(0)
					uni.hideLoading()
				}, 4000)

			}
			// if()
		})
	}
	const getPayList = async (type) => {
		let param = {
			pageNo: pageNo.value,
			pageSize: 10
		}
		await uni.$request({
			url: config.baseUrl +
				`app-api/pay/wallet-recharge/page?bindType=1&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
			}
		})
	}

	const getPayList_consumption = async (type) => {
		let param = {
			pageNo: pageNo.value,
			pageSize: 10
		}
		await uni.$request({
			url: config.baseUrl +
				`app-api/pay/wallet-transaction/page?type=3&bindType=1&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
			}
		})
	}

	const getPayconsumption = async () => {
		let param = {
			pageNo: pageNo.value,
		}
		const {
			data,
			code
		} = await PayWalletApi.getWalletTransactionPage(param)
		// console.log(data, 'data')
	}
	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;
		display: flex;
		flex-direction: column;
	}

	.textBlue {
		color: #4C91FF;
	}

	.bgColor {
		background-image: linear-gradient(to right bottom, #42cc7d, #23b360);
	}

	.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;
		border-radius: 40rpx;
	}

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

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tab_cls {
		padding: 0 30rpx;
	}

	.content_pay {
		margin-top: 15rpx;
		flex: 1;
		overflow: hidden;
		overflow-y: scroll;
	}

	.refund_moneny {
		font-size: 13px;
		text-decoration: underline;
		margin-left: 10rpx;
		color: red;
	}
	.refund_moneny_ing {
		font-size: 13px;
		// text-decoration: underline;
		margin-left: 10rpx;
		color: forestgreen;
	}
	.refund_moneny_fail {
		font-size: 13px;
		// text-decoration: underline;
		margin-left: 10rpx;
		color: red;
	}

	.refund_moneny_10 {
		color: #ad8787;
		margin-left: 10rpx;
		font-size: 13px;
	}

	.isopacity {
		background: #dfdfdf;
		opacity: 0.6;
	}
</style>
<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
</style>