web-app-v1/pages/zbs/detail.vue

<template>
	<view>
		<view v-if="showSignup" 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">
					大卫博士学位争霸赛第43季
				</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">支付9.9报名</view>
			</view>
		</view>
		<view v-else class="top">
			<view class="top_flex">
				<image src="../../static/team/green.png" mode="widthFix" style="width: 150rpx;"></image>
				<view class="topt">
					<view class="title">
						报名成功!
					</view>
					<view class="tip">
						感谢您的支持
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="bottom_box">
					<view class="show"></view>
					<view class="bottom-money">
						<text>￥</text>{{ data.money }}
					</view>
					<view class="line" />
					<view class="bottom-p">
						订单编号：{{ data.pay_number }}
					</view>
					<view class="bottom-p">
						支付时间：{{ data.time }}
					</view>
					<view class="bottom-p">
						支付方式：银行卡支付
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { _API_HuiFuCheck, _API_QuickBankPay, _API_QuickBankSms, _API_CheckStatus } from '../../apis/zbs.js';
	export default {
		data() {
			return {
				status: true,
				data: {},
				showSignup: true,
				countDown: 0, // 倒计时,
				sms_code: '', // 验证码,
				id: '',
				payId: ''
			}
		},
		onShow() {
			this.getData()
		},
		computed: {
			userinfo() {
				return this.$store.state.userinfo
			}
		},
		methods: {
			// 查询报名信息
			getData() {
				_API_HuiFuCheck().then(res => {
					if (res.code == 200) {
						this.id = res.data.id
						if (res.data.status) {
							this.showSignup = false
							this.data = res.data
						}
					} else if (res.code == 50014) {
						uni.showModal({
							title: '提示',
							content: '检测到您还未绑定银行卡，请前往绑定',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.redirectTo({
										url: './form'
									})
								}
							}
						})
						return
					} else {
						uni.showModal({
							content: res.message || '获取验证码失败',
							showCancel: false
						});
						return false;
					}
				})
			},
			// 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) {
										that.showSignup = false
									}
								} 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()
							that.getData()
							that.showSignup = false
						} 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>
	.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;
			}
		}
	}
	.top {
		width: 100%;
		height: 340rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: linear-gradient(88deg, #72DB2E 0%, #92E25A 100%);
		&_flex {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			.topt {
				color: #fff;
				margin-left: 24rpx;
				.title {
					font-size: 38rpx;
					font-weight: bold;
					color: #fff;
				}
				.tip {
					font-size: 28rpx;
					color: #fff;
					margin-top: 10rpx;
				}
			}
		}
		.bottom {
			width: 750rpx;
			height: 28rpx;
			border-radius: 490rpx;
			margin-top: 42rpx;
			position: relative;
			background: #419F05;
			&_box {
				// width: 702rpx;
				width: 94%;
				// height: 300rpx;
				background-color: #fff;
				position: absolute;
				left: 24rpx;
				top: 14rpx;
				padding-bottom: 16rpx;
				.tip {
					margin-top: 30rpx;
					padding: 0 24rpx;
					margin-bottom: 150rpx;
					.tipTitle {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 14rpx;
					}
				}
				.show {
					width: 100%;
					height: 38rpx;
					background: linear-gradient(180deg, #419F05 0%, rgba(65, 159, 5, 0) 100%);
					opacity: 0.49;
				}
			}
			&-money {
				text-align: center;
				font-size: 72rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #77C740;
				line-height: 100rpx;
				padding: 10rpx 0 48rpx 0;
				text {
					font-size: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #77C740;
				}
			}
			.line {
				margin: 0 auto;
				width: 654rpx;
				height: 0px;
				opacity: 1;
				border: 2rpx dashed #EEEEEE;
				margin-bottom: 40rpx;
			}
			&-p {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #333333;
				padding: 0 24rpx;
				margin-bottom: 24rpx;
			}
		}
	}
</style>