novel-front-app/pages_order/mine/recharge.vue

<template>
	<!-- 豆豆充值页面 -->
	<view class="recharge-page">
		<!-- 顶部导航栏 -->
		<navbar title="豆豆充值" leftClick @leftClick="$utils.navigateBack" />

		<!-- 当前余额卡片 -->
		<view class="card balance-card">
			<view class="card-title">当前余额</view>
			<view class="current-balance">
				<text class="balance-amount">{{ userInfo.integerPrice || 0 }}</text>
				<text class="balance-unit">豆豆</text>
			</view>
		</view>

		<!-- 充值套餐选择 -->
		<view class="card package-card">
			<view class="card-title">选择充值套餐</view>
			<view class="package-grid">
				<view 
					v-for="(item, index) in rechargePackages" 
					:key="index"
					:class="['package-item', { selected: selectedPackage === index }]"
					@click="selectPackage(index)"
				>
					<view class="package-beans">{{ item.num }}豆豆</view>
					<view class="package-price">¥{{ item.money }}</view>
					<view v-if="item.giveNum" class="package-bonus">送{{ item.giveNum }}豆豆</view>
				</view>
			</view>
		</view>

		<!-- 订单信息卡片 -->
		<view class="card order-card" v-if="totalPrice > 0">
			<view class="order-title">订单信息</view>
			<view class="order-item">
				<text class="order-label">充值金额：</text>
				<text class="order-value">¥{{ totalPrice.toFixed(2) }}</text>
			</view>
			<view class="order-item">
				<text class="order-label">获得豆豆：</text>
				<text class="order-value">{{ totalBeans }}豆豆</text>
			</view>
			<view class="order-divider"></view>
			<view class="order-item total-row">
				<view class="order-total-label">合计：</view>
				<view class="order-total">
					<text class="order-total-highlight">¥{{ totalPrice.toFixed(2) }}</text>
				</view>
			</view>
		</view>

		<!-- 支付方式 -->
		<!-- <view class="card payment-card">
			<view class="card-title">支付方式</view>
			<view class="payment-methods">
				<view 
					v-for="(method, index) in paymentMethods" 
					:key="index"
					:class="['payment-item', { selected: selectedPayment === index }]"
					@click="selectPayment(index)"
				>
					<view class="payment-icon">
                        <uv-icon :name="method.icon" size="40rpx" color="#223a7a" />
					</view>
					<text class="payment-name">{{ method.name }}</text>
					<view class="payment-radio">
						<view v-if="selectedPayment === index" class="radio-checked"></view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 提示信息 -->
		<view class="tip-text">
			请仔细核查并确认相关信息。因用户个人疏忽导致的充值错误，需由用户自行承担。一旦完成充值，概不退换。
		</view>

		<!-- 底部充值按钮 -->
		<view class="footer-bar">
			<button class="recharge-btn" @click="handleRecharge" :disabled="totalPrice <= 0">
				立即充值 ¥{{ totalPrice.toFixed(2) }}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedPackage: null,
				customAmount: '',
				selectedPayment: 0,
				rechargePackages: [
				],
				paymentMethods: [
					{ name: '微信支付', icon: 'weixin-fill' },
				]
			}
		},
		computed: {
			customBeans() {
				const amount = parseFloat(this.customAmount)
				return isNaN(amount) ? 0 : Math.floor(amount * 10)
			},
			totalPrice() {
				if (this.selectedPackage !== null) {
					return this.rechargePackages[this.selectedPackage].money
				} else if (this.customAmount) {
					return parseFloat(this.customAmount) || 0
				}
				return 0
			},
			totalBeans() {
				if (this.selectedPackage !== null) {
					const pkg = this.rechargePackages[this.selectedPackage]
					return pkg.num + (pkg.giveNum || 0)
				} else if (this.customAmount) {
					return this.customBeans
				}
				return 0
			}
		},
		onLoad(query) {
			// 可以通过参数预设充值金额
			if (query.amount) {
				this.customAmount = query.amount
			}
		},
		onShow() {
			this.$store.commit('getUserInfo')
			this.getPayPackageList()
		},
		methods: {
			getPayPackageList(){
				this.$api('getPayPackageList')
				.then(res => {
					if(res.code == 200){
						this.rechargePackages = res.result
					}
				})
			},
			
			// 选择充值套餐
			selectPackage(index) {
				this.selectedPackage = index
				this.customAmount = ''
			},
			
			// 选择支付方式
			selectPayment(index) {
				this.selectedPayment = index
			},
			
			// 自定义金额输入变化
			onCustomAmountChange() {
				if (this.customAmount) {
					this.selectedPackage = null
				}
			},
			
			// 处理充值
			async handleRecharge() {
				if (this.totalPrice <= 0) {
					uni.showToast({
						title: '请选择充值套餐或输入充值金额',
						icon: 'none'
					})
					return
				}
				
				if (this.selectedPayment === null) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
					return
				}
				
				try {
					// 这里应该调用充值接口
					const result = await this.$fetch('createPayPackageOrder', {
						 packageId : this.rechargePackages[this.selectedPackage].id
					})
					
					await uni.requestPaymentWxPay({result})
					
					uni.showToast({
						title: `充值成功，获得${this.totalBeans}豆豆`,
						icon: 'success'
					})
					
					// 更新用户信息
					this.$store.commit('getUserInfo')
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} catch (error) {
					uni.showToast({
						title: '充值失败，请重试',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.recharge-page {
		min-height: 100vh;
		background: #f8f8f8;
		padding-bottom: 120rpx;
	}

	.card {
		background: #fff;
		border-radius: 20rpx;
		margin: 24rpx 16rpx 0 16rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
		margin-bottom: 24rpx;
	}

	// 当前余额卡片
	.balance-card {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		text-align: center;

		.card-title {
			color: #fff;
			opacity: 0.9;
		}

		.current-balance {
			display: flex;
			align-items: baseline;
			justify-content: center;
			gap: 8rpx;
			margin-top: 16rpx;

			.balance-amount {
				font-size: 56rpx;
				font-weight: bold;
			}

			.balance-unit {
				font-size: 28rpx;
				opacity: 0.8;
			}
		}
	}

	// 充值套餐
	.package-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
	}

	.package-item {
		width: calc(50% - 8rpx);
		background: #f8f9ff;
		border: 2rpx solid #f0f0f0;
		border-radius: 16rpx;
		padding: 24rpx 16rpx;
		text-align: center;
		transition: all 0.2s;
		position: relative;
        box-sizing: border-box;

		&.selected {
			border-color: #223a7a;
			background: rgba(34, 58, 122, 0.05);
		}

		.package-beans {
			font-size: 32rpx;
			font-weight: bold;
			color: #222;
			margin-bottom: 8rpx;
		}

		.package-price {
			font-size: 28rpx;
			color: #223a7a;
			font-weight: 500;
			margin-bottom: 4rpx;
		}

		.package-bonus {
			font-size: 20rpx;
			color: #e94f7a;
			background: rgba(233, 79, 122, 0.1);
			padding: 2rpx 8rpx;
			border-radius: 8rpx;
			display: inline-block;
		}
	}

	// 表单样式
	.form-row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 24rpx;
	}

	.form-label {
		color: #888;
		font-size: 28rpx;
		margin-bottom: 12rpx;
		font-weight: 400;

		&.required {
			color: #222;
			font-weight: 500;
			display: flex;
			align-items: center;
		}
	}

	.star {
		color: #e94f7a;
		margin-right: 4rpx;
		font-size: 28rpx;
	}

	.form-value {
		color: #222;
		font-size: 28rpx;
		font-weight: 600;
	}

	.form-input {
		width: 100%;
		border: 1rpx solid #e5e5e5;
		border-radius: 12rpx;
		font-size: 28rpx;
		padding: 16rpx;
		background: #fafafa;
		color: #222;
		box-sizing: border-box;
	}

	.divider {
		height: 1rpx;
		background: #f2f2f2;
		margin: 16rpx 0;
		width: 100%;
	}

	// 订单信息
	.order-card {
		.order-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;

			.order-label {
				font-size: 28rpx;
				color: #666;
			}

			.order-value {
				font-size: 28rpx;
				color: #222;
				font-weight: 500;
			}

			&.total-row {
				margin-bottom: 0;
				margin-top: 16rpx;

				.order-total-label {
					font-size: 32rpx;
					color: #222;
					font-weight: 600;
				}

				.order-total-highlight {
					font-size: 32rpx;
					color: #223a7a;
					font-weight: bold;
				}
			}
		}

		.order-divider {
			height: 1rpx;
			background: #f2f2f2;
			margin: 16rpx 0;
		}
	}

	// 支付方式
	.payment-methods {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.payment-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		border: 2rpx solid #f0f0f0;
		border-radius: 12rpx;
		transition: all 0.2s;

		&.selected {
			border-color: #223a7a;
			background: rgba(34, 58, 122, 0.05);
		}

		.payment-icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.payment-name {
			flex: 1;
			font-size: 28rpx;
			color: #222;
		}

		.payment-radio {
			width: 32rpx;
			height: 32rpx;
			border: 2rpx solid #ddd;
			border-radius: 50%;
			position: relative;

			.radio-checked {
				width: 16rpx;
				height: 16rpx;
				background: #223a7a;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.tip-text {
		color: #bbb;
		font-size: 22rpx;
		margin: 32rpx 32rpx 0 32rpx;
		line-height: 1.6;
	}

	.footer-bar {
		// position: fixed;
		// left: 0;
		// right: 0;
		// bottom: 90rpx;
		background: #fff;
		padding: 24rpx 32rpx 32rpx 32rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 10;
	}

	.recharge-btn {
		width: 100%;
		background: #223a7a;
		color: #fff;
		font-size: 32rpx;
		border-radius: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		border: none;
		font-weight: 500;

		&[disabled] {
			background: #ccc;
			color: #999;
		}
	}
</style>