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

<!-- 绑定支付宝帐号 alipayAccount  -->
<template>
	<view>
		<!-- 标题栏 -->
		<view class="head-box ss-m-b-60">
			<view class="head-title ss-m-b-20">
				{{ userInfo.alipayName && userInfo.alipayAccount ? '更换支付宝账号' : '绑定支付宝账号' }}
			</view>
			<view class="head-subtitle">请绑定已实名认证的支付宝账号</view>
		</view>
		<!-- 表单项 -->
		<uni-forms ref="alipayAccountRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"
			labelWidth="140" labelAlign="center" class="loginUniForm">
			<uni-forms-item label="名称" class="loginUniFormItem">
				<uni-easyinput placeholder="请输入名称" v-model="state.model.alipayName" :inputBorder="false">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="alipayAccount"  label="账号" class="loginUniFormItem">
				<uni-easyinput placeholder="请输入账号" v-model="state.model.alipayAccount" :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 {
		alipayAccount
	} 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: {
			alipayName: '', // 名称
			alipayAccount: '', // 账号
		},
		rules:{
			alipayAccount
		}
	});

	// 账号登录
	async function submit() {
		// 表单验证
		console.log(state.model.alipayName ,state.model.alipayAccount)
		if(!state.model.alipayName || !state.model.alipayAccount){
			
			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.updateUserAlipayAccount({
			alipayName: state.model.alipayName,
			alipayAccount: state.model.alipayAccount,
		});
		// const {
		// 	code,
		// 	data
		// } = await AuthUtil.login(state.model);
		if (code === 0) {
			uni.showToast({
				icon: 'success',
				title: "修改成功",
			});
			closeAuthModal();
			uni.$emit('submitComplete');
		}
	}
	onLoad(async (options) => {
		// state.model.alipayName = userInfo.value.alipayName;
		// state.model.alipayAccount = userInfo.value.alipayAccount;
	});
</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:first-child {
		border-bottom: 1rpx solid #d6d6d6;
		padding-bottom: 10rpx;
	}

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

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

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