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

<!-- 账号密码登录 accountLogin  -->
<template>
	<view>
		<!-- 标题栏 -->
		<!-- <view class="head-box  ss-flex-col">
      <view class="ss-flex ss-m-b-20">
        
        <view class="head-title ss-m-r-40 head-title-animation">账号登录</view>
		<view class="head-title-active head-title-line" @tap="showAuthModal('smsLogin')">
		  短信登录
		</view>
      </view>
      <view class="head-subtitle">如果未设置过密码，请点击忘记密码</view>
    </view> -->

		<!-- 表单项 -->
		<uni-forms ref="accountLoginRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"
			labelWidth="140" labelAlign="center" class="loginUniForm">
			<uni-forms-item name="username" label="用户名" class="loginUniFormItem">
				<uni-easyinput placeholder="请输入用户名" v-model="state.model.username" :inputBorder="false">
				</uni-easyinput>
			</uni-forms-item>

			<uni-forms-item name="password" label="密码" class="loginUniFormItem">
				<uni-easyinput type="password" placeholder="请输入密码" v-model="state.model.password" :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="accountLoginSubmit">登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		unref,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		username,
		password
	} from '@/sheep/validate/form';
	import {
		showAuthModal,
		closeAuthModal
	} from '@/sheep/hooks/useModal';
	import AuthUtil from '@/sheep/api/member/auth';

	const accountLoginRef = ref(null);

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

	const props = defineProps({
		agreeStatus: {
			type: Boolean,
			default: false,
		},
	});

	// 数据
	const state = reactive({
		model: {
			username: '', // 账号
			password: '', // 密码
		},
		rules: {
			username,
			password,
		},
	});

	// 账号登录
	async function accountLoginSubmit() {
		// 表单验证
		const validate = await unref(accountLoginRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) return;
		// 同意协议
		if (!props.agreeStatus) {
			emits('onConfirm', true)
			sheep.$helper.toast('请勾选同意');
			return;
		}
		// 提交数据
		const {
			code,
			data
		} = await AuthUtil.login(state.model);
		if (code === 0) {
			closeAuthModal();
		}
	}
</script>

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



	.login-btn-start {
		background: #55b774;
		width: 60%;
		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>