pay-video-applet-uniapp-24-8-22/pages_mine/mine/purse.vue

<template>
	<view class="purse">
		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="我的钱包" />


		<!--内容区-->
		<view class="content">

			<!--上部分-->
			<view class="content-top">
				<view class="aaa">
					<view class="top">￥{{ money.money }}</view>
					<view class="bottom">可提现金额</view>
				</view>
				<view class="b">
					<view class="bb">
						<view class="top">今日收益</view>
						<view class="bottom">￥{{ money.todayMoney }}</view>
					</view>
					<view class="bb">
						<view class="top">累计收益</view>
						<view class="bottom">￥{{ money.userSumMoney }}</view>
					</view>
					<view class="bb">
						<view class="top">已提现</view>
						<view class="bottom">￥{{ money.userMoney }}</view>
					</view>
				</view>
			</view>

			<!--下部分-->
			<view class="content-bottom">
				<view class="card-record">银行卡</view>
				<!--具体银行卡-->
				<view class="cards">
					<view class="cardItem" v-for="(item, index) in list" :key="index">
						<view class="cardImage">
							<image
								src="https://tennis-oss.xzaiyp.top/2024-09-09/85fe8ad3-5094-473f-b184-ef4cf5c1db6e.svg"
								style="width: 100%;height: 100%;"></image>
							<!-- <image src="../static/addBankCard/1.svg" style="width: 100%;height: 100%;"></image> -->
						</view>
						<view class="cardInfo">
							<view class="cardNum">
								{{ item.bankId }}
							</view>
							<view class="cardName">
								{{ item.bankAddress }}
							</view>
						</view>
						<view class="cardIcon">
							<!-- <image src="../static/purse/1.svg" style="width: 70%;height: 70%;"></image> -->
						</view>
					</view>

				</view>
			</view>
		</view>


		<!--收益记录和去提现-->
		<span class="income-record" 
		style="bottom: 220rpx;"
		@click="$utils.navigateTo('/pages_mine/mine/withdrawalRecord')">提现记录</span>
		
		
		<span class="income-record" @click="gotoIncomeRecordPage">收益记录</span>


		<!--去提现按钮-->
		<button @click="gotoWithdrawPage" class="bottomBtn">
			去提现
		</button>
	</view>
</template>

<script>
	import '../../common.css'; // 引入公共 CSS 文件

	export default {
		data() {
			return {
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
				total: 0,
				list: [],
				money: {}
			};
		},
		onShow() {
			this.getData()
			this.infoGetInfoMoney()
		},
		//滚动到屏幕底部
		// onReachBottom() {
		// 	console.log(1111111);
		// 	if(this.queryParams.pageSize < this.total){
		// 		this.queryParams.pageSize += 10
		// 		this.getData()
		// 	}
		// },
		methods: {
			// 跳转到收益记录页面
			gotoIncomeRecordPage() {
				uni.navigateTo({
					url: '/pages_mine/mine/incomeRecord'
				});
			},
			// 跳转到提现页面
			gotoWithdrawPage() {
				uni.navigateTo({
					url: '/pages_mine/mine/withdraw'
				})
			},
			getData() {
				this.$api('infoGetBankCardPage', res => {
					if (res.code == 200) {
						this.list = res.result ? [res.result] : []
					}
				})
			},
			infoGetInfoMoney() {
				this.$api('infoGetInfoMoney', res => {
					if (res.code == 200) {
						this.money = res.result
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.purse {
		.content {
			.content-top {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 60rpx;
				padding-bottom: 40rpx;
				background-color: #f8faff;

				height: 18vh;

				.aaa {
					color: #000000;

					.top {
						font-size: 50rpx;
					}

					.bottom {
						font-size: 28rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.b {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 100rpx;
					width: 100%;
					margin: 30rpx 40rpx 0 40rpx;
					color: #4b4b4d;

					.bb {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						gap: 10px;

					}
				}
			}

			.content-bottom {
				border-radius: 50rpx 50rpx 0 0;
				box-shadow: 0 -10rpx 10rpx rgba(0, 0, 0, 0.2);
				/* 仅上边的阴影效果 */
				background-color: #fff;
				overflow: auto;
				height: calc(82vh - 240rpx);
				width: 100vw;

				.card-record {
					font-size: 34rpx;
					padding: 40rpx 0 0 40rpx;
				}

				.cards {
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					//width: 100vw;
					padding: 40rpx;

					.cardItem {
						display: flex;
						gap: 20rpx;
						height: 100rpx;
						//border: 1px solid red;
						//width: 100vw;

						.cardImage {
							width: 30%;
							//height: 100%;
						}

						.cardInfo {
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							gap: 6rpx;
							width: 60%;


							.cardName {
								font-size: 28rpx;
								color: #8f92a1;
							}

							.cardNum {
								font-size: 24rpx;
								color: #000000;
							}

						}

						.cardIcon {
							width: 10%;

						}
					}
				}
			}
		}

		.withdraw-button {
			position: fixed;
			bottom: 80rpx;
			left: 16px; // 与页面左边保持一定距离
			right: 16px; // 与页面右边保持一定距离
			background: $uni-linear-gradient-btn-color; // 按钮背景渐变
			color: white; // 按钮文字颜色
			text-align: center; // 文字居中
			padding: 10px 0; // 内边距，增加按钮的高度
			font-size: 18px; // 按钮文字大小
			z-index: 1000; // 确保按钮位于其他内容的上方
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50%;
			height: 80rpx;
			border-radius: 10rpx;
		}

		.income-record {
			position: fixed;
			bottom: 160rpx;
			right: 40%;
			margin-bottom: 40rpx;
			background: $uni-linear-gradient-color;
			-webkit-background-clip: text;
			/*将设置的背景颜色限制在文字中*/
			-webkit-text-fill-color: transparent;
			/*给文字设置成透明*/
		}
	}
</style>