jiuyiUniapp/jiuyi2/pages/index/wallet/topUp.vue

<script setup>
	/**
	 * 余额充值
	 */

	import {
		reactive
	} from 'vue';
	import util from '@/common/js/util';
	import api from '@/api/index.js';
	import {
		onLoad,
		onReady,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	// 表单
	const form = reactive({
		totalAmount: '',
	})

	onLoad((option) => {
		if(option.amount) form.totalAmount = option.amount
	})

	// 充值
	function handleSubmit() {
		console.log('handleSubmit')
		// 验证
		util.isAuth({
			success: rs => {
				payment()
			},
		})
	}

	// 调用支付
	function payment() {
		const data = {
			...form
		}

		if (!data.totalAmount) {
			util.alert('金额不正确')
			return
		}
		console.log('payment')

		api.mine.recharge({
			query: {
				...data,
			},
		}).then(rs => {
			console.log('recharge rs', rs)
			if (rs.code == 200) {
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: rs.msg,
					success: rs => {
						console.log('requestPayment', rs)
						util.getPurse()
						uni.navigateBack()
					},
					fail: err => {
						console.log('fail err', err)
					}
				})
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<view class="appbw">
		<!--  -->
		<view class="form mtb30 mlr30">

			<view class="line ptb20">
				<view class="key f36">充值金额</view>
				<view class="value mt10">
					<view class="rows">
						<view class="c333 f40 b">￥</view>
						<input type="text" v-model="form.totalAmount" placeholder="输入金额" />
					</view>
				</view>
			</view>

			<view class="line ptb20">
				<view class="key f36">充值方式</view>
				<view class="value payment mt10">
					<view class="list rows">
						<image class="wh60" src="/static/shop-alipay-payment.png" mode="aspectFit" />
						<view class="f1 mlr20 c333 f30">支付宝</view>
						<uni-icons type="circle-filled" color="#20D200" size="40rpx" />
					</view>
				</view>
			</view>

		</view>

		<view class="footer plr30 shadow bfff">
			<view class="btn lg colourful" @click="handleSubmit">充值</view>
		</view>
	</view>
</template>

<style lang="scss">
	// 表单
	.form {
		.line {
			border-bottom: 1rpx solid #ccc;
		}
	}
</style>