zhapp/pages/wallet/myWallet.vue

<template>
	<!-- 主容器：钱包管理页面 -->
	<view class="page">
		<!-- 模块1：余额概览 -->
		<view class="dis f-c a-c walletBalance">
			<!-- 余额卡片容器 -->
			<view class="box">
				<!-- 卡片主体 -->
				<view class="card dis f-c">
					<text>我的余额</text> <!-- 标题 -->
					<!-- 金额展示行 -->
					<view class="mt-2 mb-1 dis a-c j-s">
						<text class="sum">{{walletInfo.walletBalanceRemoveWithdraw}}</text> <!-- 当前余额 -->
						<view class="cashOut-btn" @click="goWithdrawal">提现</view> <!-- 提现操作入口 -->
					</view>
					<text>还有{{walletInfo.withdrawingBalance}}元待审核</text> <!-- 状态提示 -->
				</view>
			</view>

			<!-- 收支统计面板 -->
			<view class="drawer dis f-c ">

				<!-- 收支标题+箭头 -->
				<view class=" dis j-s a-c">
					<text style="color: #333;font-size: 30rpx;">今日收支</text>
					<view class="todayFinanceBtn dis a-c" @click="incomeExpenseRecord">
						<text>全部</text>
						<image src="/static/icon/my/arrowRight1.png" mode=""></image>
					</view>
				</view>

				<!-- 收支数据网格 -->
				<view class="statistics dis j-s mt-2">
					<view class="price dis f-c a-c">
						<text>¥{{walletInfo.todayIncome}}</text>
						<text>收入</text>
					</view>
					<view class="price dis f-c a-c">
						<text>¥{{walletInfo.todayExpense}}</text>
						<text>支出</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 模块2：银行卡管理头部 -->
		<view class="bank-block mt-2 mb-2 dis a-c">
			<text class="title">我的银行卡</text>
			<!-- 添加银行卡按钮 -->
			<view class="addbank dis a-c" @click="addBankCard">
				<text style="font-size: 25px;line-height: 0.8;">+</text>
				<text>添加新卡</text>
			</view>
		</view>

		<!-- 模块3：银行卡列表 -->
		<view class="bankCardAuditList">
			<!-- 状态筛选选项卡 -->
			<u-tabs :list="bankstatuslist" @click="click" :scrollable="false" lineWidth="32" :current="currentTab"
				:activeStyle="{ color: '#333', fontWeight: 'bold' }" :inactiveStyle="{ color: '#999' }"
				style="border-bottom: 1rpx solid #eee;">
			</u-tabs>

			<!-- 银行卡列表内容 -->
			<view class="bank-content dis f-c">
				<!-- 单张银行卡示例 -->

				<view class="bankCard mb-2 dis f-c" :style="{background:item.stylelist.background}"
					@click="bankCardDetails(item)" v-for="item in cardPackList1" v-if="currentTab==0" :key="item.id">
					<!-- 装饰性背景图案 -->
					<image class="decor" src="/static/image/my/bank-decorImage.png" mode=""></image>
					<!-- 银行信息行 -->
					<view class="bankCard_header dis a-c">
						<image :src="item.stylelist.logo" mode=""></image> <!-- 银行LOGO -->
						<text>{{item.bankName}}</text> <!-- 银行名称 -->
					</view>
					<!-- 卡号（实际项目建议做隐私处理） -->
					<view class="cardNumber dis a-c j-s ">
						<text v-for="(card,index) in item.bankArray" :key="index">{{card}}</text>
					</view>
					<!-- 操作按钮组 -->
					<view class="action dis j-s">
						<!-- 复制卡号 -->
						<view class="btn dis a-c j-c" @click.stop="copyCardNumber(item.bankCardNumber)">
							<image src="/static/icon/my/copy.png" mode=""></image>
							<text>复制卡号</text>
						</view>
						<!-- 删除 -->
						<view class="btn dis a-c j-c" @click.stop="delbank(item.id)">
							<image src="/static/icon/my/del.png" mode=""></image>
							<text>删除</text>
						</view>
					</view>
				</view>
				<view class="bankCard mb-2 dis f-c" :style="{background:item.stylelist.background}"
					@click="bankCardDetails(item)" v-for="item in cardPackList2" v-if="currentTab==1" :key="item.id">
					<!-- 装饰性背景图案 -->
					<image class="decor" src="/static/image/my/bank-decorImage.png" mode=""></image>
					<!-- 银行信息行 -->
					<view class="bankCard_header dis a-c">
						<image :src="item.stylelist.logo" mode=""></image> <!-- 银行LOGO -->
						<text>{{item.bankName}}</text> <!-- 银行名称 -->
					</view>
					<!-- 卡号（实际项目建议做隐私处理） -->
					<view class="cardNumber dis a-c j-s ">
						<text v-for="(card,index) in item.bankArray" :key="index">{{card}}</text>
					</view>
					<!-- 操作按钮组 -->
					<view class="action dis j-s">
						<!-- 设为默认 -->
						<view class="btn dis a-c j-c" @click.stop="setDefault(item)">
							<u-radio-group v-model="item.isDefault" @change="val=>setDefaultCard(val,item)"
								iconPlacement="right" style="flex: none;">
								<u-radio activeColor="#FDE935" iconColor="#333" labelSize="15px" shape="circle"
									:name="true" size="28rpx"></u-radio>
							</u-radio-group>
							<text>设为默认卡</text>
						</view>
						<!-- 复制卡号 -->
						<view class="btn dis a-c j-c" @click.stop="copyCardNumber(item.bankCardNumber)">
							<image src="/static/icon/my/copy.png" mode=""></image>
							<text>复制卡号</text>
						</view>
						<!-- 删除 -->
						<view class="btn dis a-c j-c" @click.stop="delbank(item.id)">
							<image src="/static/icon/my/del.png" mode=""></image>
							<text>删除</text>
						</view>
					</view>
				</view>
				<view class="bankCard mb-2 dis f-c" :style="{background:item.stylelist.background}"
					@click="bankCardDetails(item)" v-for="item in cardPackList3" v-if="currentTab==2" :key="item.id">
					<!-- 装饰性背景图案 -->
					<image class="decor" src="/static/image/my/bank-decorImage.png" mode=""></image>
					<!-- 银行信息行 -->
					<view class="bankCard_header dis a-c">
						<image :src="item.stylelist.logo" mode=""></image> <!-- 银行LOGO -->
						<text>{{item.bankName}}</text> <!-- 银行名称 -->
					</view>
					<!-- 卡号（实际项目建议做隐私处理） -->
					<view class="cardNumber dis a-c j-s ">
						<text v-for="(card,index) in item.bankArray" :key="index">{{card}}</text>
					</view>
					<!-- 操作按钮组 -->
					<view class="action dis j-s">
						<!-- 复制卡号 -->
						<view class="btn dis a-c j-c" @click.stop="copyCardNumber(item.bankCardNumber)">
							<image src="/static/icon/my/copy.png" mode=""></image>
							<text>复制卡号</text>
						</view>
						<!-- 删除 -->
						<view class="btn dis a-c j-c" @click.stop="delbank(item.id)">
							<image src="/static/icon/my/del.png" mode=""></image>
							<text>删除</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<uni-PopupMessage :show="deleteShow" @close='deleteShow=false' @cancelEvent='deletesubOrderEvent'
			headerTitle="提示" @confirmEvent="deleteShow=false" cancelText="确认删除" confirmText="关闭">
			<template #content>
				<view class="dis a-c j-c ">
					确认要删除该银行卡吗
				</view>
			</template>
		</uni-PopupMessage>
		<!-- 自定义加载动画 -->
		<global-loading :show="loadingShow" :text="loadingText"></global-loading>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				loadingShow: false,
				loadingText: '数据加载中',
				deleteShow: false, //
				defaultCard: false, // 控制默认银行卡的单选状态
				currentTab: 1, // 当前激活的选项卡索引
				// 银行卡状态筛选选项
				bankstatuslist: [{
						name: '待审核',
						value: 0
					},
					{
						name: '审核通过',
						value: 1
					},
					{
						name: '审核不通过',
						value: 2
					}
				],
				//银行卡样式匹配列表
				bankList: [{
						bankName: "中国邮政储蓄银行",
						logo: "/static/image/bankLogo/youzheng.png",
						background: "linear-gradient(90deg, rgba(39, 219, 168, 0.7) 0%, #27DBA8 100%)"
					},
					{
						bankName: "中国工商银行",
						logo: "/static/image/bankLogo/gongshang.png",
						background: "linear-gradient(90deg, rgba(242, 38, 46, 0.7) 0%, #F2262E 100%)"
					},
					{
						bankName: "中国农业银行",
						logo: "/static/image/bankLogo/nongye.png",
						background: "linear-gradient(90deg, rgba(39, 219, 168, 0.7) 0%, #27DBA8 100%)"
					},
					{
						bankName: "中国银行",
						logo: "/static/image/bankLogo/zhongguo.png",
						background: "linear-gradient(90deg, rgba(242, 38, 46, 0.7) 0%, #F2262E 100%)"
					},
					{
						bankName: "中国建设银行",
						logo: "/static/image/bankLogo/jianshe.png",
						background: "linear-gradient(90deg, rgba(29, 118, 243, 0.7) 0%, #1D76F3 100%)"
					},
					{
						bankName: "招商银行",
						logo: "/static/image/bankLogo/zhaoshang.png",
						background: "linear-gradient(90deg, rgba(242, 38, 46, 0.7) 0%, #F2262E 100%)"
					},
					{
						bankName: "中国民生银行",
						logo: "/static/image/bankLogo/minsheng.png",
						background: "linear-gradient(90deg, rgba(39, 219, 168, 0.7) 0%, #27DBA8 100%)"
					},
					{
						bankName: "中国光大银行",
						logo: "/static/image/bankLogo/guangda.png",
						background: "linear-gradient(90deg, rgba(141, 37, 246, 0.7) 0%, #8D25F6 100%)"
					},
					{
						bankName: "中信银行",
						logo: "/static/image/bankLogo/zhongxin.png",
						background: "linear-gradient(90deg, rgba(242, 38, 46, 0.7) 0%, #F2262E 100%)"
					},
					{
						bankName: "华夏银行",
						logo: "/static/image/bankLogo/huaxia.png",
						background: "linear-gradient(90deg, rgba(242, 38, 46, 0.7) 0%, #F2262E 100%)"
					},
					{
						bankName: "中国交通银行",
						logo: "/static/image/bankLogo/jiaotong.png",
						background: "linear-gradient(90deg, rgba(29, 118, 243, 0.7) 0%, #1D76F3 100%)"
					},
					{
						bankName: "晋商银行",
						logo: "/static/image/bankLogo/jinshang.png",
						background: "linear-gradient(90deg, rgba(141, 37, 246, 0.7) 0%, #8D25F6 100%)"
					},
					{
						bankName: "山西银行",
						logo: "/static/image/bankLogo/shanxi.png",
						background: "linear-gradient(90deg, rgba(242, 38, 46, 0.7) 0%, #F2262E 100%)"
					},
					{
						bankName: "农村商业银行",
						logo: "/static/image/bankLogo/nongcun.png",
						background: "linear-gradient(90deg, rgba(39, 219, 168, 0.7) 0%, #27DBA8 100%)"
					},
				],
				cardPackList1: [], //审核中
				cardPackList2: [], //审核通过
				cardPackList3: [], //不通过
				bankCardId: "",
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		async onShow() {
			this.loadingShow = true;
			try {
				let res = await this.$http.get('/userAccount/userWallet'); //获取钱包信息
				if (res.code == '200') {
					this.walletInfo = res.data;
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg,
					})
				}
				await this.getcardPack();
				this.loadingShow = false;
			} catch {
				this.loadingShow = false;
			}

		},
		async onLoad(options) {
			if (options) {
				this.walletInfo = JSON.parse(options.info) //钱包余额信息
			}
		},
		methods: {
			//删除银行卡
			delbank(id) {
				this.bankCardId = id;
				this.deleteShow = true;
			},
			async deletesubOrderEvent() {
				let res = await this.$http.post('/userBankCard/deleteBankCard', {
					id: this.bankCardId,
				});
				if (res.code == 200) {
					uni.showToast({ //提示
						icon: 'none',
						title: res.msg
					})
					this.deleteShow = false;
					this.getcardPack() //刷新银行卡列表
				} else {
					uni.showToast({ //提示
						icon: 'none',
						title: res.msg || '接口未知错误'
					})
				}
			},
			//复制卡号
			copyCardNumber(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							icon: 'none',
							title: '已复制'
						})
					}
				});
			},
			//跳转收支记录
			incomeExpenseRecord() {
				uni.navigateTo({
					url: '/pages/wallet/incomeExpenseRecord'
				})
			},
			//跳转银行卡详情
			bankCardDetails(item) {
				console.log(item);
				let params = {
					auditStatus: item.auditStatus,
					userJzgInfoId: this.userInfo.sysUser.infoId,
					cardHolderName: item.cardHolderName,
					cardHolderMobile: item.cardHolderMobile,
					bankCardNumber: item.bankCardNumber,
					bankAddress: item.bankAddress,
					bankName: item.bankName,
					sysUserJzgInfoBankCardRecordList: item.sysUserJzgInfoBankCardRecordList,

				}
				uni.navigateTo({
					url: '/pages/wallet/bankCardDetails?info=' + JSON.stringify(params)
				})
			},
			//设置默认
			async setDefault(item) {
				let res = await this.$http.post('/userBankCard/setDefaultCard', {
					userId: item.userInfoId,
					id: item.id,
				});
				if (res.code == 200) {
					this.getcardPack();
				}
			},
			//跳转添加银行卡
			addBankCard() {
				uni.navigateTo({
					url: '/pages/wallet/addBankCard'
				})
			},
			//跳转提现页面
			goWithdrawal() {
				if (this.cardPackList2.length == 0) {
					return uni.showToast({
						icon: 'none',
						title: '请先绑定银行卡'
					})
				}
				uni.navigateTo({
					url: '/pages/wallet/withdrawal?amount=' + this.walletInfo.walletBalanceRemoveWithdraw
				})
			},
			/**
			 * 选项卡切换事件
			 * @param {Object} tab - 被点击的tab对象，包含value属性
			 */
			click(tab) {
				console.log(tab);
				this.currentTab = tab.value;
				// 实际项目这里应加载对应状态的银行卡列表
			},

			/**
			 * 设置默认银行卡
			 * @param {Boolean} val - 单选按钮的选中状态
			 */
			async setDefaultCard(val, item) {
				this.defaultCard = val;
				let res = await this.$http.post('/userBankCard/setDefaultCard', {
					userId: item.userInfoId,
					id: item.id,
				});
				if (res.code == 200) {
					this.getcardPack();
				}
				// 实际项目这里应调用API更新默认卡
			},
			async getcardPack() {
				let res = await this.$http.post('/userBankCard/queryUserBankCardList', {
					userId: this.userInfo.sysUser.userId,
				});
				let list1 = [];
				let list2 = [];
				let list3 = [];
				if (res.code == '200' && res.data.records) {
					res.data.records.map(val => {
						let name = this.bankList.find(ele => ele.bankName === val.bankName || ele.bankName
							.includes(val.bankName))
						if (name) {
							val.stylelist = {
								...name
							};
						} else {
							val.stylelist = {
								logo: "/static/image/bindBank/img1.png",
								background: 'linear-gradient(90deg, rgba(255, 192, 18, 0.7) 0%, #FFC012 100%)',
							}
						}
						val.isDefault == 1 ? val.isDefault = true : val.isDefault = false
						const resultArray = [];
						for (let i = 0; i < val.bankCardNumber.length; i += 4) {
							resultArray.push(val.bankCardNumber.substring(i, i + 4));
						}
						val.bankArray = resultArray;
						switch (val.auditStatus) {
							case "0":
								list1.push(val);
								break;
							case "1":
								list2.push(val);
								break;
							case "2":
								list3.push(val);
								break;
						}
					})
					this.cardPackList1 = list1;
					this.cardPackList2 = list2;
					this.cardPackList3 = list3;
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		background-color: #f8f8f8;
		height: calc(100vh - 88rpx);
		padding: 20rpx;
		box-sizing: border-box;
	}

	.walletBalance {
		width: 100%;

		.box {
			padding: 20rpx 20rpx 0;
			box-sizing: border-box;
			width: 100%;
			position: relative;

			::after {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				bottom: 70rpx;
				left: 0;
				border-left: 20rpx solid transparent;
				border-bottom: 10rpx solid #E3D76F;
			}

			::before {
				content: "";
				width: 0;
				height: 0;
				position: absolute;
				bottom: 70rpx;
				right: 0;
				border-right: 20rpx solid transparent;
				border-bottom: 10rpx solid #E3D76F;
			}
		}

		.card {
			width: 100%;
			height: 283rpx;
			border-radius: 20rpx 20rpx 0 0;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			color: #333;
			background-image: url('../../static/image/my/wallet-bg1.png');
			background-size: 100% 100%;

			text:nth-child(1) {
				font-size: 32rpx;
			}

			view:nth-child(2) {
				.sum {
					font-size: 50rpx;
					font-weight: bold;
				}

				.cashOut-btn {
					background: #333;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					padding: 6rpx 40rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					color: #fff;
				}
			}

			text:nth-child(3) {
				font-size: 28rpx;
			}
		}

		.drawer {
			width: 100%;
			margin-top: -70rpx;
			background: linear-gradient(to top,
					#fff 50%,
					#FEF5AC 100%);
			backdrop-filter: blur(50rpx);
			border-radius: 0rpx 0rpx 10rpx 10rpx;
			padding: 25rpx;
			box-sizing: border-box;

			.todayFinanceBtn {
				padding: 4rpx 20rpx;
				box-sizing: border-box;
				background: rgba(253, 234, 62, 0.5);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-size: 24rpx;
				color: #333;

				image {
					width: 22rpx;
					height: 22rpx;
				}
			}

			.statistics {
				width: 100%;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-template-rows: auto;

				.price {
					text:first-child {
						font-size: 36rpx;
						color: #333;
						font-weight: bold;
					}

					text:last-child {
						font-size: 24rpx;
						color: #666;
						margin-top: 10rpx;
					}
				}

				.price:first-child {
					border-right: 1rpx solid #eee;
				}
			}
		}
	}

	.bank-block {
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;

		.title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}

		.addbank {
			background: #FDEA3E;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			padding: 6rpx 30rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			color: #333;
			margin-left: auto;
		}
	}

	.bankCardAuditList {
		background: #fff;
		border-radius: 10rpx;

		.tabs {}

		.bank-content {
			padding: 20rpx;
			box-sizing: border-box;
			overflow-y: auto;
			height: calc(100vh - 778rpx);

			.bankCard {
				width: 100%;
				// background: linear-gradient(90deg, rgba(242, 38, 46, 0.7) 0%, #F2262E 100%);
				// background: linear-gradient(90deg, rgba(39, 219, 168, 0.7) 0%, #27DBA8 100%);
				// background: linear-gradient(90deg, rgba(141, 37, 246, 0.7) 0%, #8D25F6 100%);
				// background: linear-gradient(90deg, rgba(29, 118, 243, 0.7) 0%, #1D76F3 100%);
				// background: linear-gradient(90deg, rgba(255, 192, 18, 0.7) 0%, #FFC012 100%);
				padding: 32rpx 0 0;
				box-sizing: border-box;
				border-radius: 10rpx;
				position: relative;

				.decor {
					width: 198rpx;
					height: 178rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}

				.bankCard_header {
					padding: 0 30rpx;
					box-sizing: border-box;

					image {
						width: 54rpx;
						height: 54rpx;
						margin-right: 20rpx;
					}

					text {
						font-size: 32rpx;
						color: #fff;
					}
				}

				.cardNumber {
					padding: 0 30rpx;
					box-sizing: border-box;
					font-size: 36rpx;
					margin-top: 25rpx;
					margin-bottom: 10rpx;
					color: #fff;
					width: 100%;
				}

				.action {
					width: 100%;
					background: rgba(0, 0, 0, 0.1);
					backdrop-filter: blur(20rpx);
					border-radius: 0 0 10rpx 10rpx;
					padding: 16rpx 0;
					box-sizing: border-box;

					text {
						font-size: 28rpx;
						color: #fff;
					}

					.btn {
						width: 50%;

						text {
							margin-left: 8rpx;
						}

						image {
							width: 26rpx;
							height: 26rpx;
						}
					}

					.btn {
						border-right: 1px solid #fff;
					}

					.btn:last-child {
						border: none;
					}
				}
			}
		}
	}

	::v-deep .u-tabs__wrapper__nav__line {
		background: #FDEA3E !important;
		border-radius: 6rpx;
	}
</style>