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

<template>
	<view class="container card clearfix">
		<view class="card-content">
			<view class="card-row">
				<view class="form-label">卡号</view>
				<view class="form-input">{{ params.cardNumber | formatAccNo }}</view>
			</view>
			<view class="card-row picker">
				<view class="form-label">卡类型</view>
				<view class="form-input">
					<picker @change="bindPicker($event)" :value="index" :range="stateActions" range-key="name">
						<input
							class="form-input"
							:class="cardTytpeText === '请选择卡类型' ? 'none' : ''"
							type="text"
							disabled="false"
							v-model="cardTytpeText"
							value=""
							placeholder="请选择"
						/>
					</picker>
				</view>
				<view class="iconfont icon-xiayibu"></view>
			</view>
			<view class="card-row">
				<view class="form-label">姓名</view>
				<input
					class="form-input"
					type="number"
					name="input"
					v-model="params.name"
					placeholder="请输入您的姓名"
					maxlength="10"
				/>
			</view>
			<view class="card-row">
				<view class="form-label">身份证</view>
				<input
					class="form-input"
					type="number"
					name="input"
					v-model="params.number"
					placeholder="请输入您的身份证号"
					maxlength="18"
				/>
			</view>
			<view class="card-row">
				<view class="form-label">预留手机号</view>
				<input
					class="form-input"
					type="number"
					name="input"
					v-model="params.bindMobile"
					placeholder="请输入您的银行预留手机号"
					maxlength="11"
				/>
			</view>
			<view class="card-row" v-if="params.type === 2">
				<view class="form-label">有效期</view>
				<input
					class="form-input"
					type="number"
					name="input"
					v-model="params.time"
					placeholder="请选择贷记卡有效期"
					maxlength="11"
				/>
			</view>
			<view class="card-row" v-if="params.type === 2">
				<view class="form-label">CVV2</view>
				<input
					class="form-input"
					type="number"
					name="input"
					v-model="params.cvv"
					placeholder="请输入贷记卡背面的安全码"
					maxlength="3"
				/>
			</view>
			<view class="card-mains-btn">
				<button class="add-btn" :disabled="disabled" :class="[disabled ? 'disabled' : '']" @click="handleAddCard">
					{{ subButtonText }}
				</button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			params: {
				type:1,
				name:'',
				number:'',
				bindMobile:'',
				clubId: 0,
				time:'',
				cvv:'',
				cardNumber: '6228481456743154778'
			},
			showCardNumber: '',
			maxLen: 30,
			subType: 1 ,// 1直接绑卡  2//
			cardTytpeText:'请选择卡类型',
			subButtonText:'确认绑卡',
			stateActions: [
				{ name: '借记卡', value: 1 },
				{ name: '贷记卡', value: 2 },
			]
		}
	},
	onLoad() {
		// this.GetAccountInitData()
	},
	filters: {
		formatAccNo(value) {
			const newValue = value.replace(/([^0-9])/g, '') // 只允许输入数字
			const formatValue = newValue.replace(/(\d{4})(?=\d)/g, '$1 ') // 每4个数字后面加一个空格
			return formatValue
		}
	},
	computed: {
		disabled() {
			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`)
		},
		bindPicker(e){//选择联系人身份
			this.cardTytpeText = this.stateActions[e.target.value].name
			this.params.type= this.stateActions[e.target.value].value
		},
		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: 32rpx;
	.card-row{
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #e1e1e1;
		position: relative;
		float: left;
		&.picker{
			padding-right: 60rpx;
		}
		.form-label {
			float: left;
			height: 100%;
			line-height: 98rpx;
			font-size: $font-size-28;
			text-align: left;
			color: #666666;
		}
		.form-input {
			min-width: 500rpx;
			height: 98rpx;
			line-height: 98rpx;
			font-size: $font-size-28;
			text-align: right;
			color: #333333;
			float: right;
		}
		.icon-xiayibu {
			width: 60rpx;
			height: 100rpx;
			position: absolute;
			right: 0;
			top: 0;
			line-height: 100rpx;
			text-align: center;
			color: #b2b2b2;
		}
	}
	.card-mains-btn {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 43rpx;
		margin-top: 180rpx;
		float: left;
		.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>