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

<template>
	<view>
		<view class="top" v-show="!showSignup">
			<image src="https://qnys.chuliu.cc/daweiboshi_szy/1_1615541900_nrG1vctYn8.jpg"
				mode="widthFix" style="width: 750rpx;margin-bottom: 60rpx;"></image>
			<view class="title">
				第{{ data.season }}届大卫博士创业实战营（直播）
			</view>
			<view class="time">
				举办时间：{{ data.start + '-' + data.end }}
			</view>
			<view class="item">
				<input maxlength="6" type="number" v-model="sms_code" placeholder="请输入验证码" />
				<view v-throttle="2000" class="countdown"  :class="status ? 'red2' : 'gray2'" @tap="getCode">
					{{ countDown ? `重新获取(${countDown}s)` : '获取验证码' }}
				</view>
			</view>
			<view v-throttle="2000" class="pay_btnSig" :class="status ? 'red' : 'gray'" @click="singup">{{ status ? `支付${data.cost}报名` : '立即支付' }}</view>
		</view>
		<view v-show="!showSignup && id" class="payB" @click="goUnbank">
			支付不了，重新绑定？
		</view>
		<view v-show="showSignup" class="voucher">
			<image src="../../static/new_my/bg.png" class="bgImg" mode="widthFix" style="width: 750rpx;"></image>
			<view class="bgImg">
				<text style="margin-top: 30rpx;">第{{ data.season }}届大卫博士创业实战营（直播）</text>
			</view>
			<view class="voucher_con">
				<view class="voucher_icon">
					<image src="../../static/icon/success.png" mode="widthFix" style="width: 300rpx;margin-top: 78rpx;">
					</image>
					<view class="success">报名成功</view>
					<view class="timed">
						举办时间：{{ data.start+ '-' +data.end }}
					</view>
				</view>
				<view class="info" v-show="data.pay_status">
					<view>
						<text>收货人：</text>
						<text>{{ info.username }}</text>
					</view>
					<view>
						<text>手机号：</text>
						<text>{{ info.mobile }}</text>
					</view>
					<view>
						<text>收货地址：</text>
						<text>{{ info.local }}</text>
					</view>
					<navigator url="./information" class="info_btn">编辑地址</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		GetEnrollInfo_online,
		_API_HuiFuCheck_online,
		_API_QuickBankPay_online,
		_API_QuickBankSms_online,
		_API_CheckStatus_online,
		GetEnrollUserAddress
	} from '@/apis/szy.js';
	import {
		UploadSzyImg
	} from '@/common/util/request'
	export default {
		data() {
			return {
				status: false,
				info: {},
				data: {
					season: '',
					start: '',
					end: '',
					name: '',
					mobile: '',
					cost: '',
					local: ''
				},
				noClick: true,
				showSignup: false,
				countDown: 0, // 倒计时,
				sms_code: '', // 验证码,
				id: '',
				payId: ''
			}
		},
		onShow() {
			this.getInfo()
			this.getBank()
			// this.getData()
		},
		computed: {
			userinfo() {
				return this.$store.state.userinfo
			}
		},
		onPullDownRefresh() {
			this.getInfo()
		},
		methods: {
			// 获取地址
			getAddress() {
				GetEnrollUserAddress().then(res => {
					if (res.code === 200) {
						this.info = res.data
						const data = res.data
						this.info.local = data.province + data.city + data.area + data.address
					} else {
						uni.showModal({
							content: res.message || '获取失败',
							showCancel: false
						})
					}
				})
			},
			// 去重新绑定
			goUnbank() {
				uni.navigateTo({
					url: '../zbs/unBank?type=2'
				})
			},
			// 查询绑卡信息
			getBank() {
				uni.showLoading()
				_API_HuiFuCheck_online().then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.id = res.data.id
					} else if (res.code == 50014) {
						this.id = ''
						uni.showModal({
							title: '提示',
							content: '检测到您还未绑定银行卡，请前往绑定',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.navigateTo({
										url: '../zbs/form?type=2'
									})
								}
							}
						})
						return
					} else {
						this.id = ''
						uni.showModal({
							content: res.message || '获取失败',
							showCancel: false
						});
						return false;
					}
				})
			},
			// 1.发送验证码
			getCode() {
				if (!this.status) {
					return
				}
				if (!this.id) {
					uni.showModal({
						content: '未绑定银行卡',
						showCancel: false
					})
					return
				}
				let that = this
				_API_QuickBankPay_online({ 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.status) {
					return
				}
				if (!this.sms_code) {
					uni.showModal({
						content: '请先输入验证码',
						showCancel: false
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确定要支付吗？',
					success: (res) => {
						if (res.confirm) {
							_API_QuickBankSms_online({ 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
										})
									}
								} 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_online({ id: this.payId }).then(res => {
					if (res.code == 200) {
						if (res.data.status == 1) {
							uni.hideLoading()
							uni.navigateBack({
							  delta: 2
							})
						} else {
							that.SearchStatus()
						}
					} else {
						uni.hideLoading()
						uni.showModal({
							content: res.message || '查询失败',
							showCancel: false
						})
					}
				}).catch(err => {
					uni.hideLoading()
					uni.showModal({
						content: err || '查询失败',
						showCancel: false
					})
				})
			},
			
			getTimes(data) {
				var time = new Date(data)
				var year = time.getFullYear()
				var month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
				var day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
				var today = year + '.' + month + '.' + day;
				return today;
			},
			
			// 获取赛季信息
			getInfo() {
				GetEnrollInfo_online().then(res => {
					if (res.code == 200) {
						// res.data.enroll_start_time = "2023-12-05 10:30:00" // 报名时间
						// res.data.status = 0
						this.data = res.data
						// uni.setStorageSync("szy_data", res.data)
						this.data.start = this.getTimes(res.data.start_time)
						this.data.end = this.getTimes(res.data.end_time)
						const a = new Date(res.data.enroll_start_time.replace(/-/g,'/')).getTime()
						const b = new Date(res.data.enroll_end_time.replace(/-/g,'/')).getTime()
						const now = Date.parse(new Date())
						if (now > a && now < b &&  res.data.limit_num >  res.data.num) {
							this.status = true
						}
						if (res.data.status == 1 && res.data.pay_status == 1) {
							this.getAddress()
							this.showSignup = true
						} else {
							this.showSignup = false
						}
					} else {
						uni.showModal({
							content: res.message || '获取失败',
							showCancel: false
						})
					}
				})
			},
		}
	}
</script>

<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;
			margin-right: 20rpx;
			border-radius: 33rpx;
	
			text {
				margin-left: 8rpx;
			}
		}
		.red2 {
			border: 2rpx solid #FB231F;
			color: $base-color;
		}
		.gray2 {
			border: 2rpx solid #999;
			color: #999;
		}
	}
	.top {
		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;
	}

	.voucher {
		hieght: 100vh;
		min-height: 100vh;
		width: 100vw;
		position: relative;

		.bgImg {
			height: 100vh;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 46rpx;
			font-weight: bold;

			text {
				color: #FFFFFF;
				margin-top: 10rpx;
			}

		}

		.voucher_con {
			position: fixed;
			height: 85%;
			width: 100%;
			bottom: 0;
			left: 0;
			background: #fff;
			border-top-left-radius: 60rpx;
			border-top-right-radius: 60rpx;

			.line {
				width: 128rpx;
				height: 8rpx;
				background: #f1f3f5;
				margin: 36rpx auto 0;
			}

			.title {
				color: #333;
				font-size: 38rpx;
				// margin: 48rpx auto 60rpx;
				text-align: center;
				font-weight: bold;
			}

			.voucher_icon {
				text-align: center;

				// image {
				// 	height: 192rpx;
				// 	width: 192rpx;
				// 	margin-bottom: 30rpx;
				// }
				.success {
					margin-top: 18rpx;
					font-size: 48rpx;
					color: #333;
					font-weight: bold;
				}

				.timed {
					margin-top: 36rpx;
					font-size: 40rpx;
					font-weight: bold;
					color: #FF0000;
				}
			}

			.logistics {
				width: 250rpx;
				height: 68rpx;
				margin: 0 auto;
				background: rgba(255, 244, 243, 0.39);
				border: 2rpx solid #FB231F;
				opacity: 1;
				border-radius: 44rpx;
				color: #FB231F;
			}

			.info {
				margin: 68rpx 50rpx 40rpx 50rpx;
				color: #333333;
			
				text {
					font-size: 32rpx;
				}
			
				>view {
					margin-top: 20rpx;
				}
				&_btn {
					margin: 30rpx auto 0 !important;
					width: 388rpx;
					line-height: 80rpx;
					text-align: center;
					background: #FFF4F3;
					border: 2rpx solid #FB231F;
					opacity: 1;
					border-radius: 44rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #FB231F;
				}
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		padding: 6rpx 30rpx;
		background-color: #fff;
		border-top: 1px solid #eeeeee;

		&-btn {
			color: #fff;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 88rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #F30000 0%, #FE4815 100%);
			opacity: 1;
			border-radius: 44px;
		}
	}
</style>