market-app-ui/pages/wallet/topup/edit.vue

<template>
	<view class="recharge-container">
		<view class="amount-options">
			<view v-for="amount in amounts" :key="amount"
				:class="['amount-option', { selected: selectedAmount === amount }]" @tap="selectAmount(amount)">
				{{ amount }}元
			</view>
		</view>
		<view class="custom-amount">
			<input type="number" v-model="customAmount" placeholder="自定义金额" @input="onCustomAmountInput"
				@blur="validateCustomAmount" />
			<text>元</text>
		</view>
		<button class="submit-btn" @tap="submitRecharge">确认充值</button>
		<view style="padding: 15px;line-height: 30px;font-size: 16px;">
			<h3>充值说明：</h3>
			<view>1、充值的金额和服务点数相对应，充值一元=一服务点数；</view>
			<view>2、充值的服务点数仅用于商品上架二级市场的技术服务费。</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				amounts: [5, 10, 20, 30, 50, 100],
				selectedAmount: 5,
				customAmount: '',
			}
		},

		methods: {

			selectAmount(amount) {
				this.selectedAmount = amount
				this.customAmount = ''
			},
			onCustomAmountInput() {
				this.selectedAmount = null;
				this.customAmount = Math.floor(Number(this.customAmount));
			},
			validateCustomAmount() {
				if (this.customAmount < 1) {
					this.customAmount = '';
					uni.showToast({
						title: '充值金额必须大于等于1元',
						icon: 'none'
					});
				}
			},
			submitRecharge() {
				const amount = this.selectedAmount || Number(this.customAmount)
				if (amount && Number.isInteger(amount) && amount > 0) {
					let that = this;
					uni.showModal({
						title: '充值确认',
						content: `您选择充值金额：${amount}点数`,
						success: (res) => {
							if (res.confirm) {
								that.createOrder(amount);
								// 这里可以添加实际的充值逻辑
							}
						}
					})
				} else {
					uni.showToast({
						title: '请选择或输入有效的整数充值点数',
						icon: 'none'
					})
				}
			},

			/**
			 * 发起支付（不唤起收银台，手动指定支付方式）
			 * 在调用此api前，你应该先创建自己的业务系统订单，并获得订单号 order_no，把order_no当参数传给此api，而示例中为了简化跟支付插件无关的代码，这里直接已时间戳生成了order_no
			 */
			createOrder(fee) {
				this.http.request({
					url: '/level-one-server/app/WalletManage/topupSave',
					data: {
						amount: fee, // 支付金额，单位分 100 = 1元
						goodsName: '服务点充值'
					},
					success: res => {
						console.log('WxPayAppOrderResult：', res)
						// 调起支付
						this.orderPayment(res.data.data);
						this.transaction_id = res.data.data.prepayid;
					}
				});
			},

			// 调起支付
			orderPayment(data) {
				uni.requestPayment({
					"provider": "wxpay",
					"orderInfo": data,
					success: (res) => {
						console.log(res);
						uni.navigateTo({
							url: '/pages/wallet/topup/topupSuccess?prePayId=' + data.prepayid
						})
					},
					complete: (resp) => {
						
						console.log(resp);
					},
					fail: (err) => {
						console.log(err);
						// 发起支付失败
						// uni.showToast({
						// 	title: '发起支付失败！' + err.errMsg,
						// });
					}
				});
			},


			// 查询支付状态
			async getOrder() {
				this.getOrderRes = {};
				let res = await this.$refs.pay.getOrder({
					//out_trade_no: this.out_trade_no, // 插件支付单号 两者传1个即可
					transaction_id: this.transaction_id, // 第三方单号 两者传1个即可
					await_notify: true
				});
				if (res) {
					this.getOrderRes = res.pay_order;
					let obj = {
						"-1": "已关闭",
						"1": "已支付",
						"0": "未支付",
						"2": "已部分退款",
						"3": "已全额退款"
					};
					uni.showToast({
						title: obj[res.status] || res.errMsg,
						icon: "none"
					});
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.recharge-container {
		margin-top: 30px;
		padding: 20px;
		background-color: #ffffff;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
	}

	.amount-options {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.amount-option {
		width: 30%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border: 1px solid #007aff;
		border-radius: 4px;
		margin-bottom: 10px;
	}

	.amount-option.selected {
		background-color: #007aff;
		color: #ffffff;
	}

	.custom-amount {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.custom-amount input {
		flex: 1;
		height: 40px;
		border: 1px solid #007aff;
		border-radius: 4px;
		padding: 0 10px;
	}

	.custom-amount text {
		margin-left: 5px;
	}

	.submit-btn {
		width: 100%;
		height: 44px;
		line-height: 44px;
		background-color: #007aff;
		color: #ffffff;
		border-radius: 4px;
		text-align: center;
	}
</style>