web-app-v1/pages/payment/bankPay.vue

<template>
	<view>
		<view style="padding-top: 50rpx;">
			<view class="pay">
				<image src="https://qnys.chuliu.cc/daweiboshi_szy/1_1615541900_nrG1vctYn8.jpg"
					mode="widthFix" style="width: 750rpx;margin-bottom: 60rpx;"></image>
				<view class="pay_title">
					第{{ data.season }}届大卫博士创业实战营
				</view>
				<view class="item">
					<input maxlength="6" type="number" v-model="sms_code" placeholder="请输入验证码" />
					<view v-throttle="2000" class="countdown" @tap="getCode">
						{{ countDown ? `重新获取(${countDown}s)` : '获取验证码' }}
					</view>
				</view>
				<view v-throttle="2000" class="pay_btnSig" :class="status ? 'red' : 'gray'" @click="singup">支付{{ data.cost }}报名</view>
			</view>
			<view class="payB" @click="goUnbank">
				支付不了，重新绑定？
			</view>
		</view>
	</view>
</template>

<script>
	import { getSignPackage } from '@/apis/app.js';
	import { _API_HuiFuCheck, _API_QuickBankPay, _API_QuickBankSms, _API_CheckStatus } from '../../apis/szy.js';
	const jweixin = require('jweixin-module');
	export default {
		data() {
			return {
				status: true,
				countDown: 0, // 倒计时,
				sms_code: '', // 验证码,
				id: '',
				payId: ''
			}
		},
		computed: {
			data() {
				return this.$store.state.singup.szy_data
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		methods: {
			// 去重新绑定
			goUnbank() {
				uni.navigateTo({
					url: '../zbs/unBank?type=2'
				})
			},
			// 1.发送验证码
			getCode() {
				let that = this
				_API_QuickBankPay({ id: this.id }).then(res => {
					if (res.code == 200) {
						uni.showModal({
							content: '验证码发送成功',
							showCancel: false,
							success: (e) => {
								if (e.confirm) {
									that.payId = res.data.id
									that.countDown = 180;
									that.timer = setInterval(() => {
										that.countDown--;
										if (!that.countDown) {
											that.countDown = 0;
											clearInterval(that.timer);
										}
									}, 1000);
								}
							}
						})
					} else {
						uni.showModal({
							content: res.message || '获取验证码失败',
							showCancel: false
						});
						return false;
					}
				})
			},
			// 2. 携带验证码支付
			singup() {
				let that = this
				if (!this.sms_code) {
					uni.showModal({
						content: '请先输入验证码',
						showCancel: false
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确定要支付吗？',
					success: (res) => {
						if (res.confirm) {
							_API_QuickBankSms({ id: that.payId, sms_code: that.sms_code }).then(res => {
								if (res.code == 200) {
									if (res.data.status == 0) {
										that.SearchStatus()
									} else if (res.data.status == 1) {
										// uni.navigateBack({
										//   delta: 2
										// })
										uni.reLaunch({
										    url: '/pages/payment/payment'
										  });
									}
								} else {
									uni.showModal({
										title: '失败',
										content: res.message || '获取失败',
										showCancel: false
									})
									return false;
								}
							})
								.catch(err => {})
								.finally(() => {
									setTimeout(() => {}, 3000)
								})
						}
					}
				})
			},
			// 3. 查询支付状态
			SearchStatus() {
				let that = this
				uni.showLoading({
				    title: '查询支付状态中...',
				    mask: true
				});
				_API_CheckStatus({ id: this.payId }).then(res => {
					if (res.code == 200) {
						if (res.data.status == 1) {
							uni.hideLoading()
							// uni.navigateBack({
							//   delta: 2
							// })
							uni.reLaunch({
							    url: '/pages/payment/payment'
							  });
						} else {
							that.SearchStatus()
						}
					} else {
						uni.hideLoading()
						uni.showModal({
							content: res.message || '查询失败',
							showCancel: false
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showModal({
						content: err || '查询失败',
						showCancel: false
					})
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	
	.payB {
		margin-top: 30rpx;
		text-align: center;
		color: #FF232C;
		font-weight: bold;
	}
	.pay {
		margin: 0 30rpx 0 30rpx;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 40rpx 20rpx 40rpx 20rpx;
		&_title {
			font-size: 34rpx;
			font-weight: bold;
		}
		
		&_time {
			margin-top: 20rpx;
			font-size: 32rpx;
		}
		
		&_btnSig {
			margin: 50rpx auto 0;
			width: 600rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
		}
		.red {
			background: linear-gradient(93deg, #FF232C 0%, #FF571B 100%);
		}
		.gray {
			background-color: #E1E1E1;
		}
	}
	.item {
		@include flex();
		height: 104rpx;
		box-sizing: border-box;
		color: $app-sec-text-color;
		background: #F8F8F8;
		margin: 50rpx 0 40rpx 0;
		border-radius: 8rpx;
		padding-left: 24rpx;
	
	
	
		.login_icon {
			width: 36rpx;
			height: 44rpx;
		}
	
		.icon,
		.cuIcon-roundclosefill {
			margin: 0 20rpx;
			font-size: 36rpx;
		}
	
		input {
			flex: 1;
			height: 104rpx;
			margin-left: 15rpx;
		}
	
		.countdown {
			@include flex();
			height: 60rpx;
			font-size: 24rpx;
			padding: 0 20rpx;
			border: 2rpx solid #FB231F;
			margin-right: 20rpx;
			border-radius: 33rpx;
			color: $base-color;
	
			text {
				margin-left: 8rpx;
			}
		}
	}
</style>