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

<template>
	<view class="container card clearfix">
		<view class="card-content">
			<view class="card-title" v-if="subType === 2">
				<view class="card-pay-text">￥{{ payMoney }}</view>
			</view>
			<view class="card-mains">
				<view class="card-form-text">已发送至手机号 {{ phoneNumbe }}</view>
				<view class="card-form">
					<input
						class="card-input"
						v-model="params.code"
						@input="handleInput"
						type="number"
						maxlength="6"
						placeholder="请输入短信验证码"
					/>
					<view class="card-form-code" @click.stop="handleMobileCode"> {{ mobileCodeText }} </view>
				</view>
			</view>
			<view class="card-mains-btn">
				<button
					class="add-btn"
					:disabled="disabled"
					:class="[disabled ? 'disabled' : '']"
					@click="handleAddCard"
				>
					{{ suBbtnText }}
				</button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			params: {
				code: '',
				mobile: '15817887257',
				payMoney: '1000'
			},
			payMoney: '1000',
			subType: 2, // 1直接绑卡  2//首次绑卡并支付 3//确认支付
			isMobileDisabled: false, //手机验证码按钮控制
			mobilCount: '', //倒计时
			mobileCodeText: '获取验证码',
			mobilTime: null
		}
	},
	onLoad() {
		// this.GetAccountInitData()
	},
	filters: {
		NumFormat(value) {
			//处理金额
			if (value) {
				return Number(value).toFixed(2)
			} else {
				return '0.00'
			}
		}
	},
	computed: {
		phoneNumbe() {
			// 手机号仅显示前三位及后四位数字，隐藏信息用*代替
			return this.params.mobile.substr(0, 3) + '****' + this.params.mobile.substring(7)
		},
		disabled() {
			if (this.params.code.length > 6) {
				return false
			} else {
				return true
			}
		},
		suBbtnText() {
			const textMap = {
				1: '确认绑定',
				2: '确认绑定支付',
				3: '确认支付'
			}
			return textMap[this.subType]
		}
	},
	methods: {
		handleAddCard() {
			//提交卡号
		},
		handleClearInput() {
			//清空银行卡
			this.params.cardNumber = this.showCardNumber = ''
		},
		handleInput(e) {
			this.params.cardNumber = e.detail.value
			this.showCardNumber = this.formatAccNo(e.detail.value)
		},
		handleMobileCode() {
			// 获取短信验证码
			if (this.smsCodeParams.mobile == '') {
				this.$util.msg('请输入手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.smsCodeParams.mobile)) {
				this.$util.msg('请输入正确的手机号', 2000)
				return
			}
			this.isMobileDisabled = true
			this.userLoginCode(this.smsCodeParams)
		},
		userLoginCode(params) {
			// 获取登录短息验证码
			this.UserService.userLoginCode(params)
				.then(response => {
					this.$util.msg('获取验证码成功', 2000)
					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 + 's'
							} else {
								this.isMobileDisabled = false
								clearInterval(this.mobilTime)
								this.mobilTime = null
								this.mobileCodeText = '获取验证码'
							}
						}, 1000)
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
					this.isMobileDisabled = false
				})
		},
		handleGoSusList() {
			// 跳转支持银行
			this.$api.navigateTo(`/pages/user/pay/card-sus-list`)
		},
		formatAccNo(value) {
			const newValue = value.replace(/([^0-9])/g, '') // 只允许输入数字
			const formatValue = newValue.replace(/(\d{4})(?=\d)/g, '$1 ') // 每4个数字后面加一个空格
			const inputLen = this.getOriginValue().length
			if (inputLen > this.maxLen) {
				// 如果输入的字符大于最大输入长度则禁止继续输入
				// this.inputRef.inputRef.value = this.state.recharge_phone
				return
			}

			// const end = () => {
			// 	setTimeout(() => {
			// 		this.end()
			// 	}, 10)
			// }

			// if (inputLen >= this.minLen) {
			// 	this.setState({ isValidNo: true, recharge_phone: formatValue }, end)
			// } else {
			// 	this.setState({ isValidNo: false, recharge_phone: formatValue, activeItem: -1 }, end)
			// }
			return formatValue
		},
		getOriginValue() {
			//获取input的原始值
			return this.showCardNumber.split(' ').join('')
		}
	},
	onShow() {
		// this.beansList = []
	}
}
</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: #333;
		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;
		}
	}
}
.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>