frontend-app/pages/mine_package/mine_purse/mine_purse.vue

<template>
	<view class="purse_warp">
		<header-component :leftTitle="$t('purse.title')" left-path-type="switchTab" left-path="/pages/mine/mine" />
		<view class="purse_content_warp">
			<view v-for="item in balanceList" :key="item.id" class="purse_warp_item" @click="jumpBonus(item)">
				<view class="purse_item_title">
					<view class="purse_item_title-left">
						<up-image src="/static/mine/purse_amount.png" width="22" height="22" bgColor="#f1f6ff00"
							class="purse_amount"></up-image>
						<view class="title">{{ item.name }}</view>
						<up-image src="/static/common/right_soild.png" width="10" height="10" bgColor="#fff"
							class="right_soild"></up-image>
					</view>

					<view class="purse_item_title-right">
						<view v-for="(btn, index) in getOperationButtons(item)" :key="index" :type="btn.type" class="button"
							:class="btn.type + '_button'" @click="jumpInfo(item, btn.type)">{{ btn.text }}</view>
					</view>

				</view>

				<!-- 下 -->
				<view class="purse_item_bottom">
					<view class="bottom_item">
						<view class="bottom_item_amount">{{ item.curAmount || 0 }}</view>
						<view class="bottom_item_title">{{ item.categoty === 'raffle' ? '可用次数' : '可用余额' }}</view>
					</view>

					<view class="bottom_item ">
						<view class="bottom_item_lock">{{ item.lockAmount || 0 }}</view>
						<view class="bottom_item_title">{{ item.categoty === 'raffle' ? '不可用次数' : '不可用余额' }}</view>
					</view>

				</view>


			</view>
		</view>

	</view>
</template>

<script>
import Header from '@/components/header.vue';
import { getAcctBalance } from '@/api/finance.js';
import { getValue } from '@/utils/enumUtils.js';
import { formatDate, handleAmount } from '@/utils/index.js';

export default {
	components: { headerComponent: Header },
	data() {
		return {
			balanceLoading: false,
			balanceList: [],
		}
	},
	onLoad() {
		this.getAcctBalance();
	},
	methods: {
		getValue,
		formatDate,
		handleAmount,
		getOperationButtons(item) {
			return [
				{ type: 'recharge', text: '充值', show: item.isRecharge },
				{ type: 'withdraw', text: '提现', show: item.isWithdrawal },
				{ type: 'exchange', text: '兑换', show: item.isExchange }
			].filter(btn => btn.show);
		},

		// 跳转到详情
		jumpBonus(item) {
			uni.navigateTo({
				url: "/pages/mine_package/mine_purse_log/mine_purse_log?category=" + item.categoty + "&lockId=" + item.lockId + "&curId=" + item.curId,
			})
		},
		// 查询余额
		async getAcctBalance() {
			this.balanceLoading = true;
			const resp = await getAcctBalance();
			let data = [];
			if (resp && resp.bizcode === 100) {
				data = resp.data || [];
			}
			this.balanceList = data;
			this.balanceLoading = false;
		},
		// 提现
		jumpInfo(row, type) {
			console.log("row", row);
			if (type === "withdraw") {// 提现
				uni.navigateTo({
					url: "/pages/mine_package/mine_purse_bonus_withdraw/mine_purse_bonus_withdraw?amount=" + row.curAmount + "&category=" + row.categoty,
				})
			} else if (type === "recharge") {// 充值
				uni.navigateTo({
					url: "/pages/mine_package/mine_purse_recharge/mine_purse_recharge?amount=" + row.curAmount + "&category=" + row.categoty,
				})
			} else if (type === "exchange") {// 兑换
				uni.navigateTo({
					url: "/pages/mine_package/mine_purse_exchange/mine_purse_exchange?amount=" + row.curAmount + "&category=" + row.categoty,
				})
			} else if (type === "transfer") {
				console.log("transfer转出...")
			}

		}
	}
}
</script>

<style lang="scss" scoped>
.purse_warp {
	height: 100%;
	overflow-y: hidden;
	background-color: $app-bj;

	.purse_content_warp {
		padding: 30rpx 30rpx 10rpx;
		height: calc(100vh - 218rpx);
		overflow-y: auto;
	}

	.purse_warp_item {
		margin-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;

		.purse_item_title {
			display: flex;
			justify-content: space-between;

			.purse_item_title-left {
				display: flex;
				align-items: center;

				.title {
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}

				.purse_amount {
					margin-right: 15rpx;
				}

				.right_soild {
					margin-left: 12rpx;
				}
			}

			.purse_item_title-right {
				.button {
					border-radius: 12rpx;
					width: 120rpx;
					height: 60rpx;
					font-weight: 500;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.exchange_button {
					background: #FFFFFF;
					color: #7934F6;
					border: 2rpx solid rgba(174, 57, 197, 1);
				}

				.recharge_button {
					background: linear-gradient(270deg, #B164FB 0%, #7934F6 100%);
					color: #fff;
				}
			}

		}

		.purse_item_bottom {
			display: flex;
			justify-content: space-between;

			.bottom_item {
				margin-top: 16rpx;

				.bottom_item_amount {
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}

				.bottom_item_lock {
					font-weight: bold;
					font-size: 36rpx;
					color: #999999;
					text-align: end;
				}

				.bottom_item_title {
					margin-top: 16rpx;
					font-size: 20rpx;
					color: #999999;
				}
			}
		}
	}

}
</style>