caimei-applets-mcare/pages/user/pay/card-comfirm.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-row">
					<view class="form-label">卡号</view>
					<view class="form-input">
						<input
							class="card-input"
							v-model="showCardNumber"
							@input="handleInput"
							type="number"
							:maxlength="maxLen"
							placeholder="请输入本人的银行卡号"
						/>
						<view class="card-clear" v-if="!showClear" @click="handleClearInput"
							><text class="iconfont icon-shanchu1"></text
						></view>
					</view>
				</view>
				<view class="card-row picker">
					<view class="form-label">卡类型</view>
					<view class="form-input">
						<picker @change="handleBindPicker($event)" :value="index" :range="stateActions" range-key="name">
							<input
								class="form-input"
								type="text"
								disabled="false"
								v-model="cardTytpeText"
								placeholder="请选择"
							/>
						</picker>
					</view>
					<view class="iconfont icon-xiangyou"></view>
				</view>
				<view class="card-row">
					<view class="form-label">姓名</view>
					<input
						class="form-input"
						type="text"
						name="input"
						v-model="params.quickPayUserName"
						placeholder="请输入您的姓名"
						maxlength="10"
					/>
				</view>
				<view class="card-row">
					<view class="form-label">身份证</view>
					<input
						class="form-input"
						type="text"
						name="input"
						v-model="params.idCard"
						placeholder="请输入您的身份证号"
						maxlength="18"
					/>
				</view>
				<view class="card-row">
					<view class="form-label">预留手机号</view>
					<input
						class="form-input"
						type="number"
						name="input"
						v-model="params.quickPayMobile"
						placeholder="请输入您的银行预留手机号"
						maxlength="11"
					/>
				</view>
				<view class="card-row picker" v-if="pickerIndex === 2">
					<view class="form-label">有效期</view>
					<view class="form-input">
						<picker
							mode="date"
							fields="month"
							:value="date"
							:start="startDate"
							:end="endDate"
							@change="handleDateChange($event)"
						>
							<input
								class="form-input"
								type="text"
								disabled="false"
								:class="handleBankExpireTime === '请选择信用卡有效期' ? 'none' : '' "
								v-model="handleBankExpireTime"
								placeholder="请选择信用卡有效期"
							/>
						</picker>
					</view>	
					<view class="iconfont icon-xiangyou"></view>
				</view>
				<view class="card-row" v-if="pickerIndex === 2">
					<view class="form-label">CVV2</view>
					<input
						class="form-input"
						type="text"
						name="input"
						v-model="params.cvvCode"
						placeholder="请输入贷记卡背面的安全码"
						maxlength="3"
					/>
				</view>
				<view class="card-mains-btn">
					<button
						class="add-btn"
						:disabled="disabled"
						:class="[disabled ? 'disabled' : '']"
						@click="handleAddCard"
					>
						{{ subButtonText }}
					</button>
				</view>
				<view class="card-mains-text" @click="handleGoSusList">查看支持银行 ></view>
			</view>
		</template>		
	</view>
</template>
<script>
export default {
	data() {
		const currentDate = this.getDate({
		    format: true
		})
		return {
			date: currentDate,
			skeletonShow:true,
			pickerIndex: 1,
			orderId: 0,
			payAmount: '',
			params: {
				userId: 0, //机构UserId
				quickPayBankNumber: '', //快捷支付用户银行卡号/信用卡号
				quickPayMobile: '', //快捷支付银行卡绑定手机号
				quickPayBankExpireTime: '', //快捷支付信用卡过期时间,只包含年月，格式yy-MM
				quickPayUserName: '', //快捷支付用户姓名
				idCard: '', //身份证号
				cvvCode: '' //信用卡安全码
			},
			showCardNumber: '',
			maxLen: 26,
			subType: 0, // 1直接绑卡  2//首次绑卡并支付 3//确认支付
			handleBankExpireTime:'请选择信用卡有效期',
			cardTytpeText: '借记卡',
			subButtonText: '下一步',
			stateActions: [{ name: '借记卡', value: 1 }, { name: '贷记卡', value: 2 }]
		}
	},
	onLoad(option) {
		this.subType = Number(option.type)
		this.initGetStotage(option)
	},
	filters: {},
	computed: {
		startDate() {
		    return this.getDate('start')
		},
		endDate() {
		    return this.getDate('end')
		},
		showClear() {
			return this.params.quickPayBankNumber.length <= 12
		},
		disabled() {
			if (this.pickerIndex === 1) {
				return !(
					this.params.quickPayBankNumber.length > 12 &&
					this.params.quickPayUserName != '' &&
					this.params.idCard != '' &&
					this.params.quickPayMobile != ''
				)
			} else {
				return !(
					this.params.quickPayBankNumber.length > 12 &&
					this.params.quickPayUserName != '' &&
					this.params.idCard != '' &&
					this.params.quickPayMobile != '' &&
					this.params.quickPayBankExpireTime != '' &&
					this.params.cvvCode != ''
				)
			}
		}
	},
	methods: {
		async initGetStotage(option) {
			const userInfo = await this.$api.getStorage()
			this.params.userId = userInfo.userId ? userInfo.userId : 0
			if (this.subType != 1) {
				const data = JSON.parse(option.data)
				this.params = { ...this.params, ...data.payData }
				this.orderId = data.orderId ? data.orderId : 0
				this.payAmount = data.payAmount ? data.payAmount :0
			}
			console.log('params', this.params)
			setTimeout(()=>{
				this.skeletonShow = false
			},500)
		},
		handleAddCard() {
			//提交卡号
			if (!this.$reg.isIdCard(this.params.idCard)) {
				this.$util.msg('请输入正确的身份证号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.params.quickPayMobile)) {
				this.$util.msg('请输入正确的手机号', 2000)
				return
			}
			if (this.subType === 1) {
				this.orderPayQuickBindCard()
			} else {
				this.orderPayQuickPay()
			}
		},
		async orderPayQuickBindCard() {
			//直接绑卡
			try {
				const res = await this.PayService.orderPayQuickBindCard(this.params)
				console.log('res', res.data)
				const data = JSON.stringify({ params: this.params, payData: res.data })
				this.$api.navigateTo(`/pages/user/pay/card-comfirm-sub?type=${this.subType}&data=${data}`)
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		async orderPayQuickPay() {
			//绑卡并支付
			try {
				const res = await this.PayService.orderPayQuickPay(this.params)
				console.log('res', res.data)
				const data = {
					params: this.params,
					payData: res.data,
					orderId: this.orderId,
					payAmount: this.payAmount
				}
				this.$api.navigateTo(`/pages/user/pay/card-comfirm-sub?type=${this.subType}&data=${JSON.stringify(data)}`)
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		handleDateChange(event) {
		    //开始时间
			console.log('event',event)
		    this.handleBankExpireTime = this.params.quickPayBankExpireTime = event.detail.value
		},
		handleBindPicker(e) {
			//选择银行卡类型
			this.cardTytpeText = this.stateActions[e.target.value].name
			this.pickerIndex = this.stateActions[e.target.value].value
		},
		handleClearInput() {
			//清空银行卡
			this.params.quickPayBankNumber = this.showCardNumber = ''
		},
		handleInput(e) {
			this.showCardNumber = this.formatAccNo(e.detail.value)
			this.params.quickPayBankNumber = this.showCardNumber.split(/[\t\r\f\n\s]*/g).join('')
		},
		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) {
				// 如果输入的字符大于最大输入长度则禁止继续输入
				return
			}
			return formatValue
		},
		getOriginValue() {
			//获取input的原始值
			return this.showCardNumber.split(' ').join('')
		},
		getDate(type) {
		    const date = new Date()
		    let year = date.getFullYear()
		    let month = date.getMonth() + 1
		    let day = date.getDate()
		    if (type === 'start') {
		        year = year - 1
		    } else if (type === 'end') {
		        year = year + 1
		    }
		    month = month > 9 ? month : '0' + month
		    day = day > 9 ? day : '0' + day
		    return `${year}-${month}`
		}
	},
	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;
			position: relative;
			&.none{
				color: #999999;
			}
			.card-input {
				width: 568rpx;
				height: 100%;
				line-height: 96rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				font-size: $font-size-30;
				color: #333;
				padding-right: 60rpx;
			}
			.card-clear {
				width: 60rpx;
				height: 96rpx;
				position: absolute;
				right: 0;
				top: 0;
				line-height: 96rpx;
				text-align: center;
				.icon-shanchu1 {
					font-size: $font-size-32;
					color: #d5d5d5;
				}
			}
		}
		.icon-xiangyou {
			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;
			}
		}
	}
	.card-mains-text {
		width: 100%;
		line-height: 88rpx;
		box-sizing: border-box;
		padding: 0 56rpx;
		font-size: $font-size-28;
		color: #1890f9;
		text-align: center;
		float: left;
	}
}
</style>