web-africa-h5/pages/user/card/otherAdd.vue

<template>
	<view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="form-list">
				<view class="form-item">
					<view class="item-name"><text class="domation mr10">*</text>{{$t('MY_WAL_24')}}</view>
					<input v-model="form.bankNo" type="text" :placeholder="$t('w_0188')"
						placeholder-class="placeholderclass gray9 f28" class="form-input" />
				</view>
				<view class="form-item">
					<view class="item-name"><text class="domation mr10">*</text>{{$t('PER_DA_14')}}</view>
					<input v-model="form.name" type="text" :placeholder="$t('w_0189')"
						placeholder-class="placeholderclass gray9 f28" class="form-input" />
				</view>
				<view class="form-item">
					<view class="item-name"><text class="domation mr10">*</text>{{$t('ENU_I_T_1')}}</view>
					<input v-model="form.idCard" type="text" :placeholder="$t('w_0190')"
						placeholder-class="placeholderclass gray9 f28" class="form-input" />
				</view>
				<view class="form-item">
					<view class="item-name"><text class="domation mr10">*</text>{{$t('w_0180')}}</view>
					<input v-model="form.phone" type="text" :placeholder="$t('w_0191')"
						placeholder-class="placeholderclass gray9 f28" class="form-input" />
				</view>
				<view class="form-item">
					<view class="item-name"><text class="white mr10">*</text>安全码</view>
					<input v-model="form.validdate" type="number" placeholder="信用卡安全码"
						placeholder-class="placeholderclass gray9 f28" class="form-input" />
				</view>
				<view class="form-item">
					<view class="item-name"><text class="white mr10">*</text>有效期</view>
					<input v-model="form.cvv2" type="text" placeholder="信用卡有效期"
						placeholder-class="placeholderclass gray9 f28" class="form-input" />
				</view>
				<view class="form-item">
					<view class="item-name"><text class="domation mr10">*</text>{{$t('w_0043')}}</view>
					<view class="d-b-c">
						<input v-model="form.smsCode" type="text" :placeholder="$t('w_0057')"
							placeholder-class="placeholderclass gray9 f28" class="form-input" />
						<button class="get-code-btn" type="default" @click="sendCode"
							:disabled="is_send">{{ send_btn_txt }}</button>
					</view>
				</view>
			</view>
			<view class="normal-sub-btn "><button form-type="submit" class="f32 mt60 normal-sub-btn">{{$t('w_0035')}}</button></view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/* 0 汇付  1京东 */
				type: 0,
				form: {
					bankNo: '',
					cvv2: '',
					idCard: '',
					name: '',
					idCard: '',
					phone: '',
					validdate: '',
					smsCode: ''
				},
				/*是否已发验证码*/
				is_send: false,
				/*发送按钮文本*/
				send_btn_txt: this.$t('w_0055'),
				/*当前秒数*/
				second: 60,
				bank_index: -1,
				accountList: [],
				bindCode: '',
				account_info: {
					bankName: "",
					enableState: '',
					pkCountry: '',
					pkCreator: '',
					pkId: '',
					pkModified: '',
					pkTransaction: ''
				},
				sendSc: false
			};
		},
		onLoad(e) {
			this.type = e.type || 0;
		},
		methods: {
			/*提交*/
			formSubmit: function(e) {
				let self = this;
				var formdata = self.form;
				if (formdata.bankNo == '') {
					uni.showToast({
						title: self.$t('w_0188'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.accountName == '') {
					uni.showToast({
						title: self.$t('w_0189'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.idCard == '') {
					uni.showToast({
						title:self.$t('w_0269') ,
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.phone == '') {
					uni.showToast({
						title: self.$t('w_0191'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (formdata.smsCode == '') {
					uni.showToast({
						title: self.$t('w_0057'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (!self.sendSc || !self.bindCode) {
					uni.showToast({
						title: self.$t('w_0411'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				let url = 'pay/ada-fast/bind-confirm';
				if (self.type == 1) {
					url = 'pay/jd-fast/bind-confirm';
				}
				self._post(url, {
					bindCode: self.bindCode,
					smsCode: formdata.smsCode
				}, function(res) {
					self.showSuccess(res.msg, function() {
						// #ifndef H5
						uni.navigateBack({
							delta: parseInt(1)
						});
						// #endif
						// #ifdef H5
						history.go(-1);
						// #endif
					});
				});
			},
			bindPickerChange: function(e) {
				this.bank_index = e.detail.value;
				this.account_info = this.accountList[this.bank_index];
			},
			/*发送短信*/
			sendCode() {
				let self = this;
				var formdata = self.form;
				if (formdata.phone == '') {
					uni.showToast({
						title: self.$t('w_0191'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(formdata.phone)) {
					uni.showToast({
						title: self.$t('w_0204')+'!',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (formdata.bankNo == '') {
					uni.showToast({
						title: self.$t('w_0188'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.name == '') {
					uni.showToast({
						title: self.$t('w_0189'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				let url = 'pay/ada-fast/bind';
				if (self.type == 1) {
					url = 'pay/jd-fast/bind';
				}
				self._post(
					url, {
						bankNo: formdata.bankNo,
						cvv2: formdata.cvv2,
						idCard: formdata.idCard,
						name: formdata.name,
						phone: formdata.phone,
						smsCode: formdata.smsCode,
						validdate: formdata.validdate,
					},
					result => {
						uni.showToast({
							title: self.$t('MY_WAL_49')
						});
						self.is_send = true;
						self.sendSc = true;
						self.bindCode = result.data;
						self.changeMsg();
					}
				);
			},
			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + this.$t('S_L_9');
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = this.$t('w_0055');
					this.second = 60;
					this.is_send = false;
				}
			}
		}
	};
</script>

<style lang="scss">
	.form-list {
		padding: 49rpx 58rpx 37rpx 52rpx;
		background-color: #ffffff;
		margin-bottom: 57rpx;

		.form-item {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			min-height: 104rpx;
			border-bottom: 1rpx solid #eee;

			.item-name {
				width: 170rpx;
				flex-shrink: 0;
			}

			.form-input {
				flex: 1;
				height: 76rpx;
				line-height: 76rpx;
				border-radius: 38rpx;
				font-size: 28rpx;
				color: #333;
				background: none;
				padding: 0 20rpx 0 51rpx;
			}
		}

		.form-item:last-child {
			border: none;
		}

		.form-tips {
			color: #fb3024;
			line-height: 60rpx;
			min-height: 56rpx;
			padding-left: 180rpx;
		}
	}

	.placeholderclass {}

	.get-code-btn {
		min-width: 161rpx;
		height: 74rpx;
		background: #333333;
		line-height: 74rpx;
		padding: 0rpx 20rpx;
		border-radius: 40rpx;
		white-space: nowrap;
		// border: 1rpx solid $dominant-color;
		color: #ffffff;
		box-sizing: border-box;
		margin-left: 46rpx;
		font-size: 24rpx;
	}

	.get-code-btn[disabled='true'] {
		// border: 1rpx solid #cccccc;
		color: #333;
		background-color: #ffffff;
	}

	.icon.icon-jiantou {
		font-size: 32rpx;
		color: #999;
	}
</style>