caimei-applets-mcare/pages/user/pay/card-add.vue

<template>
	<view class="container card clearfix">
		<view class="card-title">输入卡号添加</view>
		<view class="card-mains">
			<view class="card-form">
				<input
					class="card-input"
					v-model="showCardNumber"
					@input="handleInput"
					type="number"
					:maxlength="maxLen"
					placeholder="请输入本人的银行卡号"
				/>
				<view class="card-clear" v-if="!disabled" @click="handleClearInput"
					><text class="iconfont icon-shanchu1"></text
				></view>
			</view>
		</view>
		<view class="card-mains-text" @click="handleGoSusList">查看支持银行 ></view>
		<view class="card-mains-btn">
			<button class="add-btn" :disabled="disabled" :class="[disabled ? 'disabled' : '']" @click="handleAddCard">
				提交卡号
			</button>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			params: {
				clubId: 0,
				cardNumber: ''
			},
			showCardNumber: '',
			maxLen:30,
			subType: 2, // 1直接绑卡  2//首次绑卡并支付 3//确认支付
		}
	},
	onLoad() {
		// this.GetAccountInitData()
	},
	filters: {},
	computed: {
		disabled: function() {
			if (this.params.cardNumber.length > 12) {
				return false
			} else {
				return true
			}
		}
	},
	methods: {
		handleAddCard() {
			//提交卡号
		},
		handleClearInput() {
			//清空银行卡
			this.params.cardNumber = this.showCardNumber = ''
		},
		handleInput(e) {
			this.params.cardNumber = e.detail.value
			this.showCardNumber = this.formatAccNo(e.detail.value)
		},
		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-title {
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	font-size: $font-size-32;
	color: #333;
	font-weight: bold;
	box-sizing: border-box;
	padding: 0 32rpx;
}
.card-mains {
	width: 100%;
	height: 100rpx;
	box-sizing: border-box;
	padding: 0 50rpx 0 32rpx;
	.card-form {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border: 1px solid #cccccc;
		padding-right: 96rpx;
		border-radius: 16rpx;
		position: relative;
		.card-input {
			width: 568rpx;
			height: 100%;
			line-height: 96rpx;
			padding-left: 20rpx;
			box-sizing: border-box;
			font-size: $font-size-30;
			color: #333;
		}
		.card-clear {
			width: 96rpx;
			height: 96rpx;
			position: absolute;
			right: 0;
			top: 0;
			line-height: 96rpx;
			text-align: center;
			.icon-shanchu1 {
				font-size: $font-size-32;
				color: #d5d5d5;
			}
		}
	}
}
.card-mains-text {
	width: 100%;
	line-height: 88rpx;
	box-sizing: border-box;
	padding: 0 56rpx;
	font-size: $font-size-28;
	color: #1890f9;
}
.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>