caimei-applets-mcare/pages/user/pay/card-comfirm-sub.vue

<template>
	<view class="container card clearfix">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<template v-else>
			<view class="card-content">
				<view class="card-title" v-if="subType === 2 || subType === 3">
					<view class="card-pay-text">￥{{ payAmount }}</view>
				</view>
				<view class="card-mains">
					<view class="card-form-text">已发送至手机号 {{ phoneNumbe }}</view>
					<view class="card-form">
						<input
							class="card-input"
							v-model="codeParams.bindCode"
							@input="handleInput"
							type="number"
							maxlength="6"
							placeholder="请输入短信验证码"
						/>
						<view
							class="card-form-code"
							:class="isMobileDisabled ? 'disabled' : ''"
							@click.stop="handleMobileCode"
						>
							<text>{{ mobileCodeText }}</text>
						</view>
					</view>
				</view>
				<view class="card-mains-btn">
					<button
						class="add-btn"
						:disabled="disabled"
						:class="[disabled ? 'disabled' : '']"
						@click="handleAddCard"
					>
						{{ suBbtnText }}
					</button>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
export default {
	data() {
		return {
			orderId: 0,
			params: {},
			payAmount: '',
			subType: 1, // 1直接绑卡  2//首次绑卡并支付 3//确认支付
			isMobileDisabled: true, //手机验证码按钮控制
			mobilCount: '', //倒计时
			mobileCodeText: '重新发送',
			mobilTime: null,
			codeParams: {
				orderId: '',
				infoId: '',
				bindCode: '',
				flag: 1 // 1绑卡 2 付款
			},
			skeletonShow: true,
			suBbtnText: '确认绑定'
		}
	},
	onLoad(option) {
		this.initOption(option)
	},
	filters: {},
	computed: {
		phoneNumbe() {
			// 手机号仅显示前三位及后四位数字，隐藏信息用*代替
			return this.params.quickPayMobile.substr(0, 3) + '****' + this.params.quickPayMobile.substring(7)
		},
		disabled() {
			return !(this.codeParams.bindCode.length > 4)
		}
	},
	methods: {
		initOption(option) {
			console.log('option', option)
			const data = JSON.parse(option.data)
			this.subType = Number(option.type)
			this.params = data.params
			this.codeParams = Object.assign(this.codeParams, data.payData)
			if (this.subType === 1) {
				this.codeParams.flag = 1
			} else {
				this.codeParams.flag = 2
				this.orderId = data.orderId
				this.payAmount = this.params.quickPayFlag === 2 ? data.payAmount : this.params.payAmount
			}
			this.handleCodeTime()
			this.handleBbtnText(this.subType)
			setTimeout(() => {
				this.skeletonShow = false
			}, 500)
		},
		handleCodeTime() {
			// 倒计时
			const TIME_COUNT = 60
			if (!this.mobilTime) {
				this.mobilCount = TIME_COUNT
				this.isMobileDisabled = true
				this.mobilTime = setInterval(() => {
					if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
						this.mobilCount--
						this.mobileCodeText = this.mobilCount + '秒后重发'
					} else {
						this.isMobileDisabled = false
						clearInterval(this.mobilTime)
						this.mobilTime = null
						this.mobileCodeText = '重新发送'
					}
				}, 1000)
			}
		},
		handleBbtnText(value) {
			const textMap = {
				1: '确认绑定',
				2: '确认绑定支付',
				3: '确认支付'
			}
			this.suBbtnText = textMap[value]
		},
		async handleAddCard() {
			//提交绑定或支付
			try {
				const loadText = this.subType === 1 ? '绑定中...' : '支付中...'
				const successMsg = this.subType === 1 ? '绑定成功' : '支付成功'
				const res = await this.PayService.orderPayQuickBindCode(this.codeParams, loadText)
				this.$util.msg(successMsg, 2000, true, 'success')
				setTimeout(() => {
					this.handleSuccessHref()
				}, 2000)
			} catch (error) {
				console.log(error)
				this.$util.msg(error.msg, 2000)
			}
		},
		handleSuccessHref() {
			//  tiaozhuan
			if (this.subType === 1) {
				this.$api.navigateBack(2)
			} else {
				if (this.params.quickPayFlag === 1) {
					const linkData = {
						payAmount: this.params.payAmount,
						orderId: this.orderId,
						type: 'success'
					}
					this.$api.redirectTo(`/pages/user/pay/success?data=${JSON.stringify({ data: linkData })}`)
				} else {
					this.$api.redirectTo(`/pages/user/member/member`)
				}
			}
		},
		handleMobileCode() {
			// 获取短信验证码
			this.isMobileDisabled = true
			if (this.subType === 1) {
				this.orderPayQuickBindCard()
			} else {
				this.orderPayQuickPay()
			}
		},
		async orderPayQuickBindCard() {
			//直只绑卡
			try {
				const res = await this.PayService.orderPayQuickBindCard(this.params)
				this.handleCodeTime()
			} catch (error) {
				this.isMobileDisabled = false
			}
		},
		async orderPayQuickPay() {
			//绑卡并支付
			try {
				const res = await this.PayService.orderPayQuickPay(this.params)
				this.handleCodeTime()
			} catch (error) {
				console.log(error)
				this.isMobileDisabled = false
			}
		}
	},
	onShow() {
	}
}
</script>

<style lang="scss">
page,
.container {
	background: #ffffff;
	height: 100%;
}
.card-content {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding-top: 70rpx;
}
.card-title {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0 0 70rpx 0;
	.card-pay-text {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 56rpx;
		color: #F3B574;
		font-weight: bold;
		box-sizing: border-box;
	}
}
.card-mains {
	width: 100%;
	height: 100rpx;
	box-sizing: border-box;
	padding: 0 50rpx 0 32rpx;
	.card-form-text {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: left;
		font-size: $font-size-28;
		color: #333;
		box-sizing: border-box;
		margin-bottom: 16rpx;
	}
	.card-form {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border: 1px solid #cccccc;
		padding: 14rpx 0;
		border-radius: 16rpx;
		position: relative;
		.card-input {
			width: 460rpx;
			height: 100%;
			line-height: 96rpx;
			padding-left: 32rpx;
			box-sizing: border-box;
			font-size: $font-size-30;
			color: #333;
			border-right: 1px solid #e1e1e1;
			float: left;
		}
		.card-form-code {
			width: 204rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			color: $color-system;
			font-size: $font-size-26;
			float: left;
			&.disabled {
				color: #999;
			}
		}
	}
}
.card-mains-btn {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0 75rpx;
	margin-top: 180rpx;
	.add-btn {
		width: 100%;
		height: 90rpx;
		font-size: $font-size-30;
		line-height: 90rpx;
		color: #ffffff;
		text-align: center;
		background: $btn-confirm;
		border-radius: 45rpx;
		border-radius: 44rpx;
		margin-top: 80rpx;
		&.disabled {
			background: #e1e1e1;
			border-radius: 44rpx;
		}
	}
}
</style>