dtx_store/pages/account/recharge.vue

<template>
	<view class="recharge">
		<view class="recharge-block">
			<view class="recharge-title">
				充值金额 <uni-icons class="recharge-title-icon" size="20" @click="rechargeToast" type="info-filled" color="#ddd"></uni-icons>
			</view>
			<view class="recharge-input">
				<label>￥</label>
				<input type="digit" v-model="priceValue" placeholder="输入充值金额" />
			</view>
		</view>
		<view class="recharge-block">
			<view class="recharge-title">
				快速充值
			</view>
			<view class="recharge-fast">
				<view class="recharge-fast-item" @click="onRecharge(50)">
					<view class="recharge-fast-price">100<text>元</text></view>
					<view class="recharge-fast-numb">100<text>DT积分</text></view>
				</view>
				<view class="recharge-fast-item" @click="onRecharge(100)">
					<view class="recharge-fast-price">200<text>元</text></view>
					<view class="recharge-fast-numb">200<text>DT积分</text></view>
				</view>
				<view class="recharge-fast-item" @click="onRecharge(200)">
					<view class="recharge-fast-price">500<text>元</text></view>
					<view class="recharge-fast-numb">500<text>DT积分</text></view>
				</view>
				<view class="recharge-fast-item" @click="onRecharge(500)">
					<view class="recharge-fast-price">1000<text>元</text></view>
					<view class="recharge-fast-numb">1000<text>DT积分</text></view>
				</view>
				<view class="recharge-fast-item" @click="onRecharge(1000)">
					<view class="recharge-fast-price">3000<text>元</text></view>
					<view class="recharge-fast-numb">3000<text>DT积分</text></view>
				</view>
				<view class="recharge-fast-item" @click="onRecharge(5000)">
					<view class="recharge-fast-price">5000<text>元</text></view>
					<view class="recharge-fast-numb">5000<text>DT积分</text></view>
				</view>
			</view>
		</view>
		<view class="recharge-btn">
			<button :disabled="this.priceValue === ''" @click="onRecharge">充值</button>
			<view class="recharge-text">提示：暂时仅支持使用微信支付充值</view>
		</view>
	</view>
</template>

<script>
	import { recharge, payment } from "@/apis/interfaces/account"
	export default {
		data() {
			return {
				priceValue: ''
			};
		},
		methods: {
			// 充值说明
			rechargeToast(){
				uni.showModal({
					title: '充值说明',
					content: '充值比例为1：1',
					showCancel:false
				})
			},
			
			// 充值
			onRecharge(value){
				uni.showLoading({
					title: '提交订单'
				})
				recharge({
					amount: typeof(value) === 'number' ? value: this.priceValue
				}).then(res => {
					if(res.order_id){
						uni.showLoading({
							title: '获取支付信息'
						})
						this.getPayInfo(res.order_id)
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 获取充值信息
			getPayInfo(order_id){
				payment({order_id}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: JSON.parse(res),
						success: res => {
							console.log(res)
						},
						fail(err) {
							let showToast = err.message
							if(err.errMsg === 'requestPayment:fail [payment微信:-2]User canceled'){
								showToast = '充值被取消'
							}
							uni.showToast({
								title: showToast,
								icon : 'none'
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		},
		onNavigationBarButtonTap() {
			this.$Router.push({name: 'AccountLog'})
		}
	}
</script>

<style lang="scss">
	.recharge{
		background: $window-color;
		min-height: 100vh;
		padding-top: $padding;
		box-sizing: border-box;
		.recharge-block{
			background-color: white;
			border-radius: $radius;
			padding: $padding;
			margin: 0 $margin $margin $margin;
			.recharge-title{
				font-weight: bold;
				color: #333;
				font-size: 30rpx;
				line-height: 50rpx;
				.recharge-title-icon{
					margin-left: $margin/2;
					vertical-align: middle;
				}
			}
			.recharge-input{
				position: relative;
				height: 90rpx;
				padding-left: 40rpx;
				padding-top: 20rpx;
				label{
					position: absolute;
					bottom: 0;
					left: 0;
					line-height: 74rpx;
					font-weight: bold;
					font-size: 34rpx;
				}
				input{
					height: 90rpx;
					font-size: 46rpx;
				}
			}
		}
		// 充值金额选择
		.recharge-fast{
			padding-top: $padding/2;
			display: flex;
			flex-wrap: wrap;
			margin: 0 -10rpx;
			&-item{
				width: calc(33.33% - 20rpx);
				margin: 10rpx;
				text-align: center;
				border:solid 1px $main-color;
				box-sizing: border-box;
				border-radius: 10rpx;
				height: 140rpx;
				display: flex;
				justify-content: center;
				flex-direction: column;
			}
			.recharge-fast-numb{
				font-size: 24rpx;
				color: gray;
			}
			.recharge-fast-price{
				color: $main-color;
				font-weight: bold;
				font-size: 34rpx;
			}
		}
		// 充值
		.recharge-btn{
			padding: $padding;
			button{
				height: 90rpx;
				line-height: 90rpx;
				background: $main-color;
				color: white;
				font-weight: bold;
				font-size: 34rpx;
				border-radius: 45rpx;
				&::after{
					display: none;
				}
				&[disabled]{
					opacity: .6;
				}
			}
			.recharge-text{
				padding: $padding 0;
				font-size: 26rpx;
				text-align: center;
				color: gray;
			}
		}
	}
</style>