purchase-let/pages/member/member.vue

<!-- 会员充值 -->
<template>
	<view class="member">
		<view class="card-wrap">
			<view class="card" :style="{'background-image':'url(../../static/icon/account_bg.webp)'}">
				<view class="card-info">
					<up-image width="100rpx" height="100rpx" />
					<view class="card-info-right">
						<view class="phone">155****4444</view>
						<view class="level">开通会员 享折扣权益</view>
					</view>
				</view>

				<view class="charge">
					<view class="charge-left">
						<view>
							<text class="txt">账户余额(元)</text>
							<text class="money">1680.00</text>
						</view>
					</view>
					<view class="charge-right">充值</view>
				</view>
			</view>
		</view>

		<view class="detail">
			<view class="detail-title">账户详情</view>
			<view class="detail-total">
				<view class="detail-total-item">
					<text>累计消费</text>
					<view>1000</view>
				</view>
				<view class="detail-total-item">
					<text>累计充值</text>
					<view>1000</view>
				</view>
			</view>

			<view class="detail-card">
				<view class="detail-card-item">
					<view class="detail-card-item-left">
						<u-image width="60rpx" height="60rpx"></u-image>
					</view>
					<view class="detail-card-item-right">
						<view class="detail-card-item-right-money">
							<text>会员充值</text>
							<text>+1000.00</text>
						</view>
						<viewl class="detail-card-item-right-remind">
							<text>2024-06-04 14:00:00</text>
							<text>余额1000元</text>
						</viewl>
					</view>
				</view>

				<view class="detail-card-item">
					<view class="detail-card-item-left">
						<u-image width="60rpx" height="60rpx"></u-image>
					</view>
					<view class="detail-card-item-right">
						<view class="detail-card-item-right-money">
							<text>会员充值</text>
							<text>+1000.00</text>
						</view>
						<viewl class="detail-card-item-right-remind">
							<text>2024-06-04 14:00:00</text>
							<text>余额1000元</text>
						</viewl>
					</view>
				</view>

				<view class="detail-card-item">
					<view class="detail-card-item-left">
						<u-image width="60rpx" height="60rpx"></u-image>
					</view>
					<view class="detail-card-item-right">
						<view class="detail-card-item-right-money">
							<text>会员充值</text>
							<text>+1000.00</text>
						</view>
						<viewl class="detail-card-item-right-remind">
							<text>2024-06-04 14:00:00</text>
							<text>余额1000元</text>
						</viewl>
					</view>
				</view>

				<view class="detail-card-item" v-for="item in 5">
					<view class="detail-card-item-left">
						<u-image width="60rpx" height="60rpx"></u-image>
					</view>
					<view class="detail-card-item-right">
						<view class="detail-card-item-right-money">
							<text>会员充值</text>
							<text>+1000.00</text>
						</view>
						<viewl class="detail-card-item-right-remind">
							<text>2024-06-04 14:00:00</text>
							<text>余额1000元</text>
						</viewl>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		rechargeApi
	} from "@/api/user.js";
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"

	onLoad(() => {})

	onReachBottom((e) => {
		console.log(e);
	})
	rechargeApi({
		price: 0.01
	}).then(res => {


		if (!res.data?.nonceStr) return uni.$u.toast('支付失败!');
		console.log(2);
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: res.data.timeStamp,
			nonceStr: res.data.nonceStr,
			package: res.data.package,
			signType: res.data.signType,
			paySign: res.data.paySign,
			success: (e) => {
				if (e.errMsg == 'requestPayment:ok') {
					uni.showModal({
						title: '订单支付成功',
						confirmText: '查看订单',
						cancelText: '继续购买',
						success: (e) => {
							if (e.confirm) uni.redirectTo({
								url: '/pagesOrder/order/order?back=-1&type=2'
							})
							else uni.navigateBack();
						}
					})
				} else uni.$u.toast('支付失败')
			},
			fail: (e) => {
				uni.$u.toast('用户取消支付');
				uni.redirectTo({
					url: '/pagesOrder/order/order?back=-1&type=1'
				})
			}
		})
	})
</script>

<style lang="scss">
	.member {
		padding-bottom: 300rpx;

		.card-wrap {
			padding: 40rpx 0 20rpx 0;
			background-color: #fff;
			margin-bottom: 30rpx;

			.card {
				background-size: 100%;
				background-repeat: no-repeat;
				height: 272rpx;
				margin: 0 30rpx;
				border-radius: 10rpx;
				padding: 20rpx 0 0 20rpx;
				box-sizing: border-box;
				background-color: #fff;

				.card-info {
					display: flex;
					align-items: center;
					margin-bottom: 60rpx;

					.card-info-right {
						margin-left: 40rpx;

						.phone {
							margin-bottom: 12rpx;
							font-weight: 600;
							font-size: 32rpx;
							color: #444444;
						}

						.level {
							font-size: 28rpx;
							color: #7B5232;
						}
					}
				}

				.charge {
					display: flex;
					align-items: center;
					padding-right: 38rpx;

					.charge-left {
						flex: 1;
						display: flex;
						margin-right: 30rpx;

						&>view {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 10rpx;

							.txt {
								margin-right: 16rpx;
								font-size: 24rpx;
								color: #7B5232;
							}

							.money {
								font-weight: 600;
								font-size: 48rpx;
								color: #7B5232;
							}
						}
					}

					.charge-right {
						width: 148rpx;
						height: 52rpx;
						line-height: 52rpx;
						background: #7B5232;
						border-radius: 30rpx;
						font-size: 22rpx;
						color: #FFFFFF;
						text-align: center;
					}
				}
			}
		}

		.detail {
			margin: 0 30rpx;

			.detail-title {
				margin-bottom: 16rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #262626;
			}

			.detail-total {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.detail-total-item {
					display: flex;
					align-items: center;
					margin-right: 68rpx;

					text {
						margin-right: 4rpx;
						font-size: 28rpx;
						color: #777777;
					}

					view {
						font-weight: 600;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}

		.detail-card {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			.detail-card-item {
				display: flex;
				align-items: center;
				height: 130rpx;
				border-bottom: 2rpx solid #F3F3F3;

				.detail-card-item-left {
					margin-right: 22rpx;
				}

				.detail-card-item-right {
					flex: 1;

					.detail-card-item-right-money {
						margin-bottom: 14rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 30rpx;
						color: #333333;
					}

					.detail-card-item-right-remind {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						color: #333333;
					}
				}
			}
		}
	}
</style>