mall-front-app/sheep/components/s-auth-modal/components/bank-account.vue

<!-- 绑定支付宝帐号 alipayAccount  -->
<template>
	<view>
		<!-- 标题栏 -->
		<view class="head-box ss-m-b-60">
			<view class="head-title ss-m-b-20">
				{{ userInfo.bankName && userInfo.accountName && userInfo.bankAccount ? '更换银行卡' : '绑定银行卡' }}
			</view>
			<!-- <view class="head-subtitle">请绑定已实名认证的支付宝开户行</view> -->
		</view>
		<!-- 表单项 -->
		<uni-forms ref="alipayAccountRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"
			labelWidth="160" labelAlign="left" class="loginUniForm" >
			<uni-forms-item  label="开户行" class="loginUniFormItem">
				<uni-easyinput placeholder="例：xx银行股份有限公司xx分行xx支行" v-model="state.model.bankName" :inputBorder="false">
				</uni-easyinput>
			</uni-forms-item>
			
			<uni-forms-item label="开户名" class="loginUniFormItem">
				<uni-easyinput placeholder="个人姓名" v-model="state.model.accountName" :inputBorder="false">
				</uni-easyinput>
			</uni-forms-item>
			
			<uni-forms-item  label="银行卡账号" name="bankCode"  class="loginUniFormItem">
				<uni-easyinput placeholder="银行卡账号" v-model="state.model.bankAccount" :inputBorder="false">
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
			<!-- <button class="ss-reset-button forgot-btn" @tap="showAuthModal('resetPassword')">
				忘记密码
			</button> -->
			<button class="ss-reset-button login-btn-start" @tap="submit">确定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		unref,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		bankCode
	} from '@/sheep/validate/form';
	import {
		showAuthModal,
		closeAuthModal
	} from '@/sheep/hooks/useModal';
	import AuthUtil from '@/sheep/api/member/auth';
	import UserApi from '@/sheep/api/member/user';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const alipayAccountRef = ref(null);

	const emits = defineEmits(['onConfirm']);

	const props = defineProps({
		agreeStatus: {
			type: Boolean,
			default: false,
		},
	});
	
	// 数据
	const state = reactive({
		model: {
			accountName: '', // 开户名
			bankName: '', // 开户行
			bankAccount:'',//银行账号
			
		},
		
		rules:{
			bankCode
		}
	});

	// 开户行登录
	async function submit() {
		// 表单验证
		if(!state.model.accountName || !state.model.bankName || !state.model.bankAccount){
			return false;
		}
		const validate = await unref(alipayAccountRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) return;
		// 同意协议
		// if (!props.agreeStatus) {
		// 	emits('onConfirm', true)
		// 	sheep.$helper.toast('请勾选同意');
		// 	return;
		// }
		// 提交数据
		const {
			code
		} = await UserApi.updateUserBankAccount({
			accountName: state.model.accountName,
			bankName: state.model.bankName,
			bankAccount: state.model.bankAccount,
		});
		// const {
		// 	code,
		// 	data
		// } = await AuthUtil.login(state.model);
		if (code === 0) {
			uni.showToast({
				icon: 'success',
				title: "修改成功",
			});
			closeAuthModal();
			uni.$emit('bankAccountChangeComplete');
		}
	}
	onLoad(async (options) => {
		// getUserInfo();
		// state.model.accountName = userInfo.value.accountName;
		// state.model.bankName = userInfo.value.bankName;
		// state.model.bankAccount = userInfo.value.bankAccount;
	});
</script>

<style lang="scss" scoped>
	@import '../index.scss';



	.login-btn-start {
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
	}

	.loginUniForm {
		border: 1rpx solid #d6d6d6;
		padding: 10rpx 15rpx;
		border-radius: 10rpx;
	}

	.loginUniFormItem {
		border-bottom: 1rpx solid #d6d6d6;
		padding-bottom: 10rpx;
	}
	
	.loginUniFormItem:last-child {
		border-bottom: none;
		padding-top: 10rpx;
	}

	::v-deep .loginUniFormItem .uni-forms-item__inner {
		padding-bottom: 0;
	}

	::v-deep .loginUniFormItem .uni-error-message {
		bottom: -20rpx;
	}
</style>