zhywpt-sp/subpackage/personal-center/setting/bank-card/bank-card-add.vue

<template>
	<view class="container">
		<u-form label-width='200' :model="state.form" ref="uForm">
			<u-form-item label="对公用户名">
				<u-input v-model="state.form.name" placeholder='请输入对公用户名' />
			</u-form-item>
			<u-form-item label="银行卡号">
				<u-input v-model="state.form.card" placeholder='请输入银行卡号' />
			</u-form-item>
			<u-form-item label="开户银行">
				<u-input v-model="state.form.bank" placeholder='请输入开户银行' />
			</u-form-item>
			<u-form-item label="银行预留手机号">
				<u-input v-model="state.form.phone" placeholder='请输入银行预留手机号' />
				<text @click="getCode" v-if="waitTime==0" class="search">获取验证码</text>
				<text class="btn" v-else>{{waitTime}}后重试</text>
			</u-form-item>
			<u-form-item label="验证码" placeholder='请输入验证码'>
				<u-input v-model="state.form.code" />
			</u-form-item>
		</u-form>
		<view style='margin-top: 40rpx;'>
			<submit-button title="提交绑定" @submit="submit"></submit-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { request } from "@/utils/network/request.js";
	import { addBankCard, sendCode } from "@/utils/network/api.js";
	import { stringToJson } from "@/utils/network/encryption.js";
	import { msg } from "@/utils/utils";
	let waitTime = ref(0);
	const state = reactive({
		form: {
			name: '',
			card: '',
			bank: '',
			phone: '',
			code: '',
		},
	})

	const submit = () => {
		for (var i in state.form) {
			if (!state.form[i]) {
				msg('请将信息填写完整！');
				return;
			}
		}
		const options = {
			type: 2,
			data: {
				'accountId': state.form.name,
				'bankCardId': state.form.card,
				'bankAddress': state.form.bank,
				'code': state.form.code,
			},
			method: "POST",
			showLoading: true,
		};
		request(addBankCard, options).then((res) => {
			const data = stringToJson(res.bizContent)
			msg('银行卡新增成功')
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 1500)

			console.log("添加银行卡", data)
		})
	}
	const getCode = () => {
		console.log(123);
		if (state.form.phone) {
			sendCodeApi()
			codeInterval()
		} else {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
		}
	}
	// 发送验证码
	const sendCodeApi = () => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				mobile: state.form.phone
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(sendCode, options)
			.then((res) => {

			})
			.catch((err) => {
				console.log(err);
			});
	}
	//倒计时函数
	const codeInterval = () => {
		waitTime.value = 60
		let timer = setInterval(() => {
			if (waitTime.value == 1) {
				clearInterval(timer)
			}
			waitTime.value -= 1
		}, 1000)
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}

	.uni-list-cell {
		display: flex;
		margin: 10rpx auto;
		justify-content: space-between;
		align-items: center;
	}

	::v-deep .u-form-item--right__content__slot {
		display: flex !important;
		align-items: center;
	}

	.btn {
		background: #19BE6B;
		padding: 0rpx 32rpx;
		border-radius: 10rpx;
		color: white;
		font-size: 24rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
	}
	.search{
		    color: #ffffff;
		    border-color: #19be6b;
		    background-color: #19be6b;
		    font-size: 28rpx !important;
		    padding: 8px 30rpx !important;
		    white-space: nowrap;
		    height: 30rpx;
		    line-height: 30rpx;
		    border-radius: 16rpx;
	}
</style>