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" v-if="paymentpre.length > 0">
			<view class="recharge-title">
				快速充值
			</view>
			<view class="recharge-fast">
				<block v-for="(item,index) in paymentpre" :key="index">
					<view class="recharge-fast-item" @click="onRecharge(item.price)">
						<view class="recharge-fast-price">{{item.price}}<text>元</text></view>
						<view class="recharge-fast-numb">{{item.dt}}<text>DT积分</text></view>
					</view>
				</block>
			</view>
		</view>
		<view class="recharge-btn">
			<button :disabled="this.priceValue === ''" @click="onRecharge">充值</button>
			<view class="recharge-text">提示：暂时仅支持使用支付宝支付充值</view>
		</view>
	</view>
</template>

<script>
	var hmAppPay = uni.requireNativePlugin('TestModule');
	import { hmPay } from '@/apis/interfaces/pay.js';
	import { recharge, payment, paymentpre } from "@/apis/interfaces/account"
	export default {
		data() {
			return {
				priceValue: '',
				orderId	  : '',
				paymentpre: [],
				hmPayState: false
			};
		},
		onShow() {
			if(this.hmPayState){
				this.$Router.replace({
					name	: 'hmState',
					params	: {
						type	: 'recharge',
						orderId	: this.orderId
					}
				})
				return
			}
		},
		created() {
			paymentpre().then(res => {
				this.paymentpre = res
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		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){
				if(plus.runtime.isApplicationExist({
					pname	: 'com.eg.android.AlipayGphone',
					action	: 'alipay://'
				})){
					uni.showLoading({
						title: '获取支付信息'
					})
					this.getHmPayInfo(order_id)
				}else{
					uni.showToast({
						title: '支付失败，请安装支付宝',
						icon : 'none'
					})
				}
				return
				payment({order_id}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: JSON.parse(res),
						success: res => {
							uni.redirectTo({
								url: './results?type=recharge'
							})
						},
						fail(err) {
							let showToast = err.errMsg
							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'
					})
				})
			},
			// 河马支付
			getHmPayInfo(order_id){
				this.orderId = order_id
				hmPay(order_id).then(res => {
					try{
						hmAppPay.gotoNativePage(JSON.stringify(res.params))
						this.hmPayState = true
					}catch(e){
						uni.showToast({
							title: e
						})
					}
				}).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>