|
@@ -4,12 +4,14 @@
|
|
|
<img @click="onPath('/')" class="head" src="@/assets/images/head.png" alt="" />
|
|
<img @click="onPath('/')" class="head" src="@/assets/images/head.png" alt="" />
|
|
|
<div class="login-info flex-row-between">
|
|
<div class="login-info flex-row-between">
|
|
|
<div></div>
|
|
<div></div>
|
|
|
- <div class="login-bos">
|
|
|
|
|
|
|
+ <div class="login-bos" :class="{ 'customer-login': type === 3 }">
|
|
|
<el-form ref="loginRef" :model="loginForm" :rules="loginRules">
|
|
<el-form ref="loginRef" :model="loginForm" :rules="loginRules">
|
|
|
<div class="login-type flex-row-between">
|
|
<div class="login-type flex-row-between">
|
|
|
<div :class="type == 1 ? 'hig' : ''" @click="onType(1)">账户登录</div>
|
|
<div :class="type == 1 ? 'hig' : ''" @click="onType(1)">账户登录</div>
|
|
|
- <div class="border"></div>
|
|
|
|
|
|
|
+ <span class="separator">|</span>
|
|
|
<div :class="type == 2 ? 'hig' : ''" @click="onType(2)">验证码登录</div>
|
|
<div :class="type == 2 ? 'hig' : ''" @click="onType(2)">验证码登录</div>
|
|
|
|
|
+ <span class="separator">|</span>
|
|
|
|
|
+ <div :class="type == 3 ? 'hig' : ''" @click="onType(3)">客户编号登录</div>
|
|
|
</div>
|
|
</div>
|
|
|
<template v-if="type == 1">
|
|
<template v-if="type == 1">
|
|
|
<el-form-item prop="username">
|
|
<el-form-item prop="username">
|
|
@@ -27,7 +29,7 @@
|
|
|
</el-input>
|
|
</el-input>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</template>
|
|
</template>
|
|
|
- <template v-else>
|
|
|
|
|
|
|
+ <template v-else-if="type == 2">
|
|
|
<el-form-item prop="mobile">
|
|
<el-form-item prop="mobile">
|
|
|
<el-input :maxlength="11" class="login-input" v-model="loginForm.mobile" placeholder="手机号">
|
|
<el-input :maxlength="11" class="login-input" v-model="loginForm.mobile" placeholder="手机号">
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
@@ -48,6 +50,29 @@
|
|
|
</el-input>
|
|
</el-input>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
+ <template v-else>
|
|
|
|
|
+ <el-form-item prop="customerNo">
|
|
|
|
|
+ <el-input class="login-input" v-model="loginForm.customerNo" placeholder="客户编号">
|
|
|
|
|
+ <template #prefix>
|
|
|
|
|
+ <el-icon><User /></el-icon>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item prop="loginName">
|
|
|
|
|
+ <el-input class="login-input" v-model="loginForm.loginName" placeholder="联系人登录名称">
|
|
|
|
|
+ <template #prefix>
|
|
|
|
|
+ <el-icon><User /></el-icon>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ <el-form-item prop="password">
|
|
|
|
|
+ <el-input class="login-input" type="password" v-model="loginForm.password" placeholder="输入登录密码" @keyup.enter="handleLogin">
|
|
|
|
|
+ <template #prefix>
|
|
|
|
|
+ <el-icon><Lock /></el-icon>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-input>
|
|
|
|
|
+ </el-form-item>
|
|
|
|
|
+ </template>
|
|
|
<el-form-item>
|
|
<el-form-item>
|
|
|
<el-button class="login-btn" type="primary" :loading="loading" @click.prevent="handleLogin">
|
|
<el-button class="login-btn" type="primary" :loading="loading" @click.prevent="handleLogin">
|
|
|
<span v-if="!loading">登录</span>
|
|
<span v-if="!loading">登录</span>
|
|
@@ -112,20 +137,30 @@ const loginForm = ref<LoginData>({
|
|
|
code: '',
|
|
code: '',
|
|
|
uuid: '',
|
|
uuid: '',
|
|
|
clientId: '',
|
|
clientId: '',
|
|
|
- grantType: 'password'
|
|
|
|
|
|
|
+ grantType: 'password',
|
|
|
|
|
+ customerNo: '',
|
|
|
|
|
+ loginName: ''
|
|
|
} as LoginData);
|
|
} as LoginData);
|
|
|
|
|
|
|
|
const loginRules: ElFormRules = {
|
|
const loginRules: ElFormRules = {
|
|
|
username: [{ required: true, trigger: 'blur', message: '请输入员工编号/手机号码' }],
|
|
username: [{ required: true, trigger: 'blur', message: '请输入员工编号/手机号码' }],
|
|
|
password: [{ required: true, trigger: 'blur', message: '请输入登录密码' }],
|
|
password: [{ required: true, trigger: 'blur', message: '请输入登录密码' }],
|
|
|
mobile: [{ required: true, trigger: 'blur', message: '请输入手机号' }],
|
|
mobile: [{ required: true, trigger: 'blur', message: '请输入手机号' }],
|
|
|
- smsCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
|
|
|
|
|
|
|
+ smsCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
|
|
|
|
|
+ customerNo: [{ required: true, trigger: 'blur', message: '请输入客户编号' }],
|
|
|
|
|
+ loginName: [{ required: true, trigger: 'blur', message: '请输入联系人登录名称' }]
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const onType = (val: number) => {
|
|
const onType = (val: number) => {
|
|
|
type.value = val;
|
|
type.value = val;
|
|
|
// 切换登录类型时更新 grantType
|
|
// 切换登录类型时更新 grantType
|
|
|
- loginForm.value.grantType = val === 1 ? 'password' : 'sms';
|
|
|
|
|
|
|
+ if (val === 1) {
|
|
|
|
|
+ loginForm.value.grantType = 'password';
|
|
|
|
|
+ } else if (val === 2) {
|
|
|
|
|
+ loginForm.value.grantType = 'sms';
|
|
|
|
|
+ } else {
|
|
|
|
|
+ loginForm.value.grantType = 'serialNumber';
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -157,7 +192,13 @@ const handleLogin = () => {
|
|
|
localStorage.removeItem('rememberMe');
|
|
localStorage.removeItem('rememberMe');
|
|
|
}
|
|
}
|
|
|
// 调用登录
|
|
// 调用登录
|
|
|
- loginForm.value.phonenumber = loginForm.value.mobile;
|
|
|
|
|
|
|
+ if (type.value === 3) {
|
|
|
|
|
+ // 客户编号登录方式
|
|
|
|
|
+ loginForm.value.customerNo = loginForm.value.customerNo;
|
|
|
|
|
+ loginForm.value.loginName = loginForm.value.loginName;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ loginForm.value.phonenumber = loginForm.value.mobile;
|
|
|
|
|
+ }
|
|
|
const [err] = await to(userStore.login(loginForm.value));
|
|
const [err] = await to(userStore.login(loginForm.value));
|
|
|
if (!err) {
|
|
if (!err) {
|
|
|
const redirectUrl = redirect.value || '/';
|
|
const redirectUrl = redirect.value || '/';
|
|
@@ -293,7 +334,7 @@ onMounted(() => {
|
|
|
|
|
|
|
|
.login-bos {
|
|
.login-bos {
|
|
|
height: 90%;
|
|
height: 90%;
|
|
|
- max-height: 420px;
|
|
|
|
|
|
|
+ max-height: 570px;
|
|
|
aspect-ratio: 1;
|
|
aspect-ratio: 1;
|
|
|
// width: 420px;
|
|
// width: 420px;
|
|
|
// height: 420px;
|
|
// height: 420px;
|
|
@@ -304,6 +345,12 @@ onMounted(() => {
|
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
+ // 客户编号登录时调整布局
|
|
|
|
|
+ &.customer-login {
|
|
|
|
|
+ justify-content: flex-start;
|
|
|
|
|
+ padding-top: 80px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
:deep(.el-form-item) {
|
|
:deep(.el-form-item) {
|
|
|
margin-bottom: 18px;
|
|
margin-bottom: 18px;
|
|
|
}
|
|
}
|
|
@@ -329,6 +376,11 @@ onMounted(() => {
|
|
|
height: 16px;
|
|
height: 16px;
|
|
|
background: #e6e8ec;
|
|
background: #e6e8ec;
|
|
|
}
|
|
}
|
|
|
|
|
+ .separator {
|
|
|
|
|
+ color: #e6e8ec;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ margin: 0 10px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.login-input {
|
|
.login-input {
|
|
|
width: 100%;
|
|
width: 100%;
|