<template>
|
<div class="verification-code-login-form-wrapper">
|
<nut-form class="verification-code-login-form" ref="formRef" :model-value="form" :rules="rules">
|
<nut-form-item label="" class="bole-form-item" prop="userName" required>
|
<nut-input
|
v-model.trim="form.userName"
|
class="bole-input-text"
|
placeholder="请输入账号/手机号/邮箱"
|
type="text"
|
/>
|
</nut-form-item>
|
<nut-form-item label="" class="bole-form-item" prop="userPassword" required>
|
<nut-input
|
v-model.trim="form.userPassword"
|
class="bole-input-text"
|
placeholder="请输入密码"
|
:type="isShowPassword ? 'text' : 'password'"
|
:key="isShowPassword ? 'text' : 'password'"
|
>
|
<template #right>
|
<div class="password-icon-wrapper" @click="isShowPassword = !isShowPassword">
|
<Eye v-if="isShowPassword"></Eye>
|
<Marshalling v-else></Marshalling>
|
</div>
|
</template>
|
</nut-input>
|
</nut-form-item>
|
</nut-form>
|
<LargeButton class="login-btn" @click="handleLogin" :loading="form.loading">登录</LargeButton>
|
<div class="go-register-btn" @click="goRegister">立即注册</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Message } from '@12333/utils';
|
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
|
import { LargeButton } from '@/components';
|
import { useLoginedJump } from '@/hooks';
|
import { useUserStore } from '@/stores/modules/user';
|
import { Eye, Marshalling } from '@nutui/icons-vue-taro';
|
import Taro from '@tarojs/taro';
|
|
defineOptions({
|
name: 'AccountLoginForm',
|
});
|
|
type Props = {
|
policyChecked?: boolean;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const userStore = useUserStore();
|
|
const { jump } = useLoginedJump();
|
|
const isShowPassword = ref(false);
|
|
const formRef = ref(null);
|
|
const form = reactive({
|
loading: false,
|
userName: '',
|
userPassword: '',
|
});
|
|
const rules = reactive<FormRules>({
|
userName: [{ required: true, message: '请输入账号/手机号/邮箱' }],
|
userPassword: [{ required: true, message: '请输入密码' }],
|
});
|
|
async function handleLogin() {
|
try {
|
if (props.policyChecked) {
|
const { valid } = await formRef.value.validate();
|
if (valid) {
|
form.loading = true;
|
await userStore.loginByPassword({
|
userName: form.userName,
|
password: form.userPassword,
|
});
|
jump();
|
}
|
} else {
|
noAccess();
|
}
|
} catch (error) {
|
} finally {
|
form.loading = false;
|
}
|
}
|
|
function noAccess() {
|
Message.warning('请先阅读并勾选协议');
|
}
|
|
function goRegister() {
|
console.log('RouterPath.registerForm: ', RouterPath.registerForm);
|
Taro.navigateTo({
|
url: RouterPath.registerForm,
|
});
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.verification-code-login-form-wrapper {
|
.password-icon-wrapper {
|
padding: 0 10px;
|
display: inline-flex;
|
|
.nutui-iconfont {
|
font-size: 28px;
|
}
|
}
|
}
|
</style>
|
