Initial commit
This commit is contained in:
南宁网宿科技
@@ -0,0 +1,428 @@
|
||||
<template>
|
||||
<div class="login-wrapper">
|
||||
<a-form class="login-form ele-bg-white">
|
||||
<h4>忘记密码</h4>
|
||||
<a-form-item v-bind="validateInfos.phone">
|
||||
<a-input
|
||||
placeholder="请输入绑定手机号"
|
||||
v-model:value="form.phone"
|
||||
:maxlength="11"
|
||||
allow-clear
|
||||
size="large"
|
||||
>
|
||||
<template #prefix>
|
||||
<mobile-outlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item v-bind="validateInfos.password">
|
||||
<a-input-password
|
||||
placeholder="请输入新的登录密码"
|
||||
v-model:value="form.password"
|
||||
size="large"
|
||||
>
|
||||
<template #prefix>
|
||||
<lock-outlined />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item v-bind="validateInfos.password2">
|
||||
<a-input-password
|
||||
placeholder="请再次输入登录密码"
|
||||
v-model:value="form.password2"
|
||||
size="large"
|
||||
>
|
||||
<template #prefix>
|
||||
<key-outlined />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item v-bind="validateInfos.code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
size="large"
|
||||
>
|
||||
<template #prefix>
|
||||
<safety-certificate-outlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<router-link
|
||||
to="/login"
|
||||
class="ele-pull-right"
|
||||
style="line-height: 22px"
|
||||
>
|
||||
返回登录
|
||||
</router-link>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
修改密码
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="login-copyright">
|
||||
{{ t('layout.footer.copyright') }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="340"
|
||||
:footer="null"
|
||||
title="发送验证码"
|
||||
v-model:visible="visible"
|
||||
>
|
||||
<div class="login-input-group" style="margin-bottom: 16px">
|
||||
<a-input
|
||||
v-model:value="imgCode"
|
||||
placeholder="请输入图形验证码"
|
||||
allow-clear
|
||||
size="large"
|
||||
/>
|
||||
<a-button class="login-captcha">
|
||||
<img alt="" :src="captcha" @click="changeCaptcha" />
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="codeLoading"
|
||||
@click="sendCode"
|
||||
>
|
||||
立即发送
|
||||
</a-button>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onBeforeUnmount } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import {
|
||||
MobileOutlined,
|
||||
LockOutlined,
|
||||
KeyOutlined,
|
||||
SafetyCertificateOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import type { RuleObject } from 'ant-design-vue/es/form';
|
||||
import { getCaptcha, sendSmsCaptcha, updatePassword } from '@/api/login';
|
||||
import { phoneReg } from 'ele-admin-pro';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const { push } = useRouter();
|
||||
const { t } = useI18n();
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
// 表单数据
|
||||
const form = reactive({
|
||||
phone: '',
|
||||
password: '',
|
||||
password2: '',
|
||||
code: '',
|
||||
oldPassword: ''
|
||||
});
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
phone: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入绑定手机号',
|
||||
type: 'string'
|
||||
},
|
||||
{
|
||||
pattern: phoneReg,
|
||||
message: '手机号格式不正确',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入新的登录密码',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
password2: [
|
||||
{
|
||||
required: true,
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请再次输入新密码');
|
||||
}
|
||||
if (value !== form.password) {
|
||||
return Promise.reject('两次输入密码不一致');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
type: 'string'
|
||||
}
|
||||
]
|
||||
});
|
||||
// 是否显示图形验证码弹窗
|
||||
const visible = ref(false);
|
||||
// 图形验证码
|
||||
const imgCode = ref('');
|
||||
// 发送验证码按钮loading
|
||||
const codeLoading = ref(false);
|
||||
// 验证码倒计时时间
|
||||
const countdownTime = ref(0);
|
||||
// 图形验证码地址
|
||||
const captcha = ref('');
|
||||
// 验证码倒计时定时器
|
||||
let countdownTimer: number | null = null;
|
||||
|
||||
const { validate, validateInfos, clearValidate } = useForm(form, rules);
|
||||
|
||||
/* 提交 */
|
||||
const submit = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
updatePassword(form)
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
push('/login');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 获取图形验证码 */
|
||||
const changeCaptcha = () => {
|
||||
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
||||
getCaptcha()
|
||||
.then((data) => {
|
||||
captcha.value = data.base64;
|
||||
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
||||
// text.value = data.text;
|
||||
// 自动回填验证码, 实际项目去掉这个
|
||||
// form.code = data.text;
|
||||
clearValidate();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
if (!imgCode.value) {
|
||||
message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
codeLoading.value = true;
|
||||
sendSmsCaptcha({ phone: form.phone }).then((res) => {
|
||||
console.log(res);
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 30;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
});
|
||||
// setTimeout(() => {
|
||||
// message.success('短信验证码发送成功, 请注意查收!');
|
||||
// visible.value = false;
|
||||
// codeLoading.value = false;
|
||||
// countdownTime.value = 30;
|
||||
// // 开始对按钮进行倒计时
|
||||
// countdownTimer = window.setInterval(() => {
|
||||
// if (countdownTime.value <= 1) {
|
||||
// countdownTimer && clearInterval(countdownTimer);
|
||||
// countdownTimer = null;
|
||||
// }
|
||||
// countdownTime.value--;
|
||||
// }, 1000);
|
||||
// }, 1000);
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 背景 */
|
||||
.login-wrapper {
|
||||
padding: 48px 16px 0 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/bg-2.jpeg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.login-form {
|
||||
width: 360px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding: 0 28px 16px 28px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
h4 {
|
||||
padding: 22px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-right .login-form {
|
||||
margin: 0 15% 0 auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
margin: 0 auto 0 15%;
|
||||
}
|
||||
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 第三方登录图标 */
|
||||
.login-oauth-icon {
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
margin: 0 12px;
|
||||
font-size: 18px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 底部版权 */
|
||||
.login-copyright {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
padding: 48px 0 22px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (min-height: 640px) {
|
||||
.login-wrapper {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: auto;
|
||||
right: 15%;
|
||||
transform: translateX(0);
|
||||
margin: -230px auto auto auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
right: auto;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.login-copyright {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<a-form
|
||||
class="login-form ele-bg-white"
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
>
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
size="large"
|
||||
allow-clear
|
||||
:maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
disabled
|
||||
placeholder="请输入手机号码"
|
||||
>
|
||||
<template #addonBefore> +86 </template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
size="large"
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
/>
|
||||
<a-button
|
||||
size="large"
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="340"
|
||||
:footer="null"
|
||||
title="发送验证码"
|
||||
v-model:visible="visible"
|
||||
>
|
||||
<div class="login-input-group" style="margin-bottom: 16px">
|
||||
<a-input
|
||||
size="large"
|
||||
v-model:value="imgCode"
|
||||
:maxlength="5"
|
||||
placeholder="请输入图形验证码"
|
||||
allow-clear
|
||||
@pressEnter="sendCode"
|
||||
/>
|
||||
<a-button size="large" class="login-captcha">
|
||||
<img alt="" :src="captcha" @click="changeCaptcha" />
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="codeLoading"
|
||||
@click="sendCode"
|
||||
>
|
||||
立即发送
|
||||
</a-button>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import type { StepForm } from '../model';
|
||||
import { assignObject, phoneReg } from 'ele-admin-pro';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { getCaptcha, sendSmsCaptcha, registerUser } from '@/api/login';
|
||||
import { User } from '@/api/system/user/model';
|
||||
|
||||
const props = defineProps<{
|
||||
// 修改回显的数据
|
||||
data?: StepForm | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', data: StepForm): void;
|
||||
(e: 'back'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示图形验证码弹窗
|
||||
const visible = ref(false);
|
||||
// 图形验证码
|
||||
const imgCode = ref('');
|
||||
// 发送验证码按钮loading
|
||||
const codeLoading = ref(false);
|
||||
// 验证码倒计时时间
|
||||
const countdownTime = ref(0);
|
||||
// 图形验证码地址
|
||||
const captcha = ref('');
|
||||
const text = ref('');
|
||||
// 验证码倒计时定时器
|
||||
let countdownTimer: number | null = null;
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
if (!imgCode.value) {
|
||||
message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
if (text.value !== imgCode.value) {
|
||||
message.error('图形验证码不正确');
|
||||
return;
|
||||
}
|
||||
codeLoading.value = true;
|
||||
sendSmsCaptcha({ phone: form.phone, key: imgCode.value })
|
||||
.then(() => {
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 60;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((e) => {
|
||||
codeLoading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<User>({
|
||||
type: 10,
|
||||
phone: '',
|
||||
username: '',
|
||||
nickname: '',
|
||||
roles: [],
|
||||
companyName: '',
|
||||
organizationName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password2: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
message: '手机号格式不正确',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写短信验证码',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 获取图形验证码 */
|
||||
const changeCaptcha = () => {
|
||||
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
||||
getCaptcha()
|
||||
.then((data) => {
|
||||
captcha.value = data.base64;
|
||||
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
||||
text.value = data.text;
|
||||
// 自动回填验证码, 实际项目去掉这个
|
||||
// form.code = data.text;
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
?.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// roleId 6开发者 10商户
|
||||
const addData = {
|
||||
...form,
|
||||
username: props.data?.username,
|
||||
password: props.data?.password,
|
||||
phone: props.data?.phone,
|
||||
nickname: props.data?.nickname,
|
||||
roles: [{ roleId: form.type }]
|
||||
};
|
||||
registerUser(addData)
|
||||
.then((data) => {
|
||||
loading.value = false;
|
||||
message.success('注册成功');
|
||||
form.tenantId = Number(data) || 0;
|
||||
emit('done', form);
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
emit('back');
|
||||
};
|
||||
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<a-form
|
||||
class="login-form ele-bg-white"
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
>
|
||||
<a-form-item name="companyName" v-if="form.type === 10">
|
||||
<a-input
|
||||
size="large"
|
||||
placeholder="请输入应用名称"
|
||||
v-model:value="form.companyName"
|
||||
:maxlength="24"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="email">
|
||||
<a-input
|
||||
size="large"
|
||||
placeholder="请输入电子邮箱地址"
|
||||
v-model:value="form.email"
|
||||
:maxlength="24"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="phone">
|
||||
<a-input
|
||||
size="large"
|
||||
placeholder="请输入手机号码"
|
||||
v-model:value="form.phone"
|
||||
:maxlength="11"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="password">
|
||||
<a-input
|
||||
size="large"
|
||||
allow-clear
|
||||
:maxlength="24"
|
||||
type="password"
|
||||
v-model:value="form.password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item name="password2">
|
||||
<a-input
|
||||
size="large"
|
||||
allow-clear
|
||||
:maxlength="24"
|
||||
type="password"
|
||||
v-model:value="form.password2"
|
||||
placeholder="请输入确认密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="昵称" name="nickname">-->
|
||||
<!-- <a-input-->
|
||||
<!-- placeholder="请输入昵称"-->
|
||||
<!-- v-model:value="form.nickname"-->
|
||||
<!-- :maxlength="24"-->
|
||||
<!-- allow-clear-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label=" " name="register" v-if="form.type === 1">-->
|
||||
<!-- 我已阅读并同意 <a>用户协议</a> 和 <a>隐私权政策</a>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import type { StepForm } from '../model';
|
||||
import { emailReg, phoneReg } from 'ele-admin-pro/es';
|
||||
import type { RuleObject } from 'ant-design-vue/es/form';
|
||||
import { createCode } from '@/utils/common';
|
||||
import { checkExistence } from '@/api/system/company';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', data: StepForm): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<User>({
|
||||
type: 10,
|
||||
phone: '',
|
||||
username: createCode(),
|
||||
nickname: '',
|
||||
organizationName: '',
|
||||
companyName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password2: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: (_rule: Rule, value: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请填写应用名称');
|
||||
}
|
||||
checkExistence('shortName', value)
|
||||
.then(() => {
|
||||
if (form.type === 10) {
|
||||
reject('该名称已经存在');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择账号类型',
|
||||
type: 'number',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择账号类型',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
pattern: emailReg,
|
||||
message: '邮箱格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: (_rule: Rule, value: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请输入邮箱地址');
|
||||
}
|
||||
checkExistence('email', value)
|
||||
.then(() => {
|
||||
reject('该邮箱已经存在');
|
||||
})
|
||||
.catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
message: '手机号格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: (_rule: Rule, value: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请输入手机号码');
|
||||
}
|
||||
checkExistence('phone', value)
|
||||
.then(() => {
|
||||
reject('该手机号码已经存在');
|
||||
})
|
||||
.catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: async (_rule: Rule, value: string) => {
|
||||
if (/^[\S]{8,32}$/.test(value)) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject('密码必须为8-32位非空白字符');
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password2: [
|
||||
{
|
||||
required: true,
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请再次输入新密码');
|
||||
}
|
||||
if (value !== form.password) {
|
||||
return Promise.reject('两次输入密码不一致');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 步骤一提交 */
|
||||
const submit = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
emit('done', form);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
} else {
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div style="padding-bottom: 40px">
|
||||
<a-result :title="`注册成功`" status="success" :sub-title="subTitle">
|
||||
<div class="desc">
|
||||
<p> 租户ID：{{ data.tenantId }} </p>
|
||||
<p> 名称：{{ data.companyName }} </p>
|
||||
<p> 账号：{{ data.phone }} </p>
|
||||
<p> 密码：{{ data.password }} </p>
|
||||
</div>
|
||||
</a-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { StepForm } from '../model';
|
||||
import { ref } from 'vue';
|
||||
|
||||
defineProps<{
|
||||
// 修改回显的数据
|
||||
data?: StepForm | null;
|
||||
}>();
|
||||
|
||||
const subTitle = ref('注册资料已发到您预留的邮箱地址');
|
||||
</script>
|
||||
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<step-edit v-model:visible="showEdit" v-if="active === 0" @done="onDone" />
|
||||
<step-confirm
|
||||
v-if="active === 1"
|
||||
:data="form"
|
||||
@done="onNext"
|
||||
@back="onBack"
|
||||
/>
|
||||
<step-success v-if="active === 2" :data="form" @back="onBack" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import StepEdit from './components/step-edit.vue';
|
||||
import StepConfirm from './components/step-confirm.vue';
|
||||
import StepSuccess from './components/step-success.vue';
|
||||
import type { StepForm } from './model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
// 选中步骤
|
||||
const active = ref(0);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 登录框方向, 0 居中, 1 居右, 2 居左
|
||||
const direction = ref(0);
|
||||
const form = reactive<StepForm>({});
|
||||
|
||||
//
|
||||
const onDone = (data: StepForm) => {
|
||||
Object.assign(form, data);
|
||||
active.value = 1;
|
||||
};
|
||||
|
||||
//
|
||||
const onNext = (data: StepForm) => {
|
||||
Object.assign(form, data);
|
||||
active.value = 2;
|
||||
};
|
||||
|
||||
//
|
||||
const onBack = () => {
|
||||
active.value = 0;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'FormStep'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.account-type {
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.account-desc {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,12 @@
|
||||
export interface StepForm {
|
||||
type?: number;
|
||||
apply?: string;
|
||||
username?: string;
|
||||
password?: string;
|
||||
password2?: string;
|
||||
phone?: string;
|
||||
code?: string;
|
||||
nickname?: string;
|
||||
companyName?: string;
|
||||
tenantId?: number;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div id="ww_login"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as ww from '@wecom/jssdk';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const wwLoginInstance = ref(null);
|
||||
|
||||
const wwLogin = () => {
|
||||
wwLoginInstance.value = ww.createWWLoginPanel({
|
||||
el: '#ww_login',
|
||||
params: {
|
||||
login_type: 'ServiceApp',
|
||||
appid: 'wx5400ab7aebf0f3c3',
|
||||
agentid: '10000xx',
|
||||
redirect_uri: 'https://oa.gxwebsoft.com/wx-work-login',
|
||||
state: 'loginState',
|
||||
redirect_type: 'callback',
|
||||
panel_size: 'small'
|
||||
},
|
||||
onCheckWeComLogin({ isWeComLogin }) {
|
||||
console.log('1111');
|
||||
console.log(isWeComLogin);
|
||||
},
|
||||
onLoginSuccess({ code }) {
|
||||
console.log('222');
|
||||
console.log({ code });
|
||||
},
|
||||
onLoginFail(err) {
|
||||
console.log('333');
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
wwLogin();
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,532 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'login-wrapper',
|
||||
['', 'login-form-right', 'login-form-left'][direction]
|
||||
]"
|
||||
>
|
||||
<div class="logo-login" v-if="config.shortName">
|
||||
<img :src="config.companyLogo" class="logo" />
|
||||
<h4>{{ config.shortName }}</h4>
|
||||
</div>
|
||||
<a-form class="login-form ele-bg-white">
|
||||
<a-space class="login-title">
|
||||
<h4
|
||||
class="title-btn"
|
||||
:class="loginType === 'account' ? 'active' : ''"
|
||||
@click="onLoginType('account')"
|
||||
>账号登录</h4
|
||||
>
|
||||
<a-divider type="vertical" style="height: 20px" />
|
||||
<h4
|
||||
class="title-btn"
|
||||
:class="loginType === 'scan' ? 'active' : ''"
|
||||
@click="onLoginType('scan')"
|
||||
>扫码登录</h4
|
||||
>
|
||||
</a-space>
|
||||
<template v-if="loginType === 'account'">
|
||||
<a-form-item v-bind="validateInfos.tenantId" v-if="showTenantId">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
v-model:value="form.tenantId"
|
||||
:placeholder="`租户ID`"
|
||||
>
|
||||
<template #prefix>
|
||||
<BankOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item v-bind="validateInfos.username">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
v-model:value="form.username"
|
||||
:placeholder="`登录账号 | 手机号码`"
|
||||
>
|
||||
<template #prefix>
|
||||
<user-outlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item v-bind="validateInfos.password">
|
||||
<a-input-password
|
||||
size="large"
|
||||
v-model:value="form.password"
|
||||
placeholder="登录密码"
|
||||
@pressEnter="submit"
|
||||
>
|
||||
<template #prefix>
|
||||
<lock-outlined />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
<a-form-item v-bind="validateInfos.code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
allow-clear
|
||||
size="large"
|
||||
type="text"
|
||||
:maxlength="5"
|
||||
v-model:value="form.code"
|
||||
placeholder="图形验证码"
|
||||
@pressEnter="submit"
|
||||
>
|
||||
<template #prefix>
|
||||
<safety-certificate-outlined />
|
||||
</template>
|
||||
</a-input>
|
||||
<a-button class="login-captcha" @click="changeCaptcha">
|
||||
<img v-if="captcha" :src="captcha" alt="" />
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-checkbox v-model:checked="form.remember">
|
||||
{{ t('login.remember') }}
|
||||
</a-checkbox>
|
||||
<!-- <router-link-->
|
||||
<!-- to="/register"-->
|
||||
<!-- class="ele-pull-right"-->
|
||||
<!-- style="line-height: 22px"-->
|
||||
<!-- >-->
|
||||
<!-- 免费注册-->
|
||||
<!-- </router-link>-->
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
{{ loading ? t('login.loading') : t('login.login') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<template v-if="loginType === 'scan'">
|
||||
<Register />
|
||||
</template>
|
||||
</a-form>
|
||||
<div class="login-copyright">
|
||||
<p>
|
||||
copyright © {{ new Date().getFullYear() }}
|
||||
{{ config.companyName ? config.companyName : 'Websoft Inc.' }} All
|
||||
Rights Reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, computed, unref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getTenantId } from '@/utils/domain';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
// import WxWork from './components/wx-work.vue';
|
||||
import Register from './components/register/step/index.vue';
|
||||
import {
|
||||
UserOutlined,
|
||||
LockOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
BankOutlined,
|
||||
QqOutlined,
|
||||
WechatOutlined,
|
||||
WeiboOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
// import I18nIcon from '@/layout/components/i18n-icon.vue';
|
||||
// import { getToken } from '@/utils/token-util';
|
||||
// import { TENANT_ID } from '@/config/setting';
|
||||
import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
|
||||
import { login, getCaptcha, registerUser } from '@/api/passport/login';
|
||||
// import { navTo } from '@/utils/common';
|
||||
|
||||
import { User } from '@/api/system/user/model';
|
||||
import { THEME_STORE_NAME } from '@/config/setting';
|
||||
import { sendSmsCaptcha } from '@/api/login';
|
||||
import { useTenantStore } from '@/store/modules/tenant';
|
||||
import { Company } from '@/api/system/company/model';
|
||||
import useFormData from '@/utils/use-form-data';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { getDomain } from '@/utils/domain';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
const { currentRoute } = useRouter();
|
||||
const { t } = useI18n();
|
||||
const tenantStore = useTenantStore();
|
||||
|
||||
// 登录框方向, 0 居中, 1 居右, 2 居左
|
||||
const direction = ref(0);
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
// 是否显示tenantId填写输入框
|
||||
const showTenantId = ref(true);
|
||||
const loginType = ref('account');
|
||||
// 配置信息
|
||||
const { form } = useFormData<User>({
|
||||
username: '',
|
||||
password: '',
|
||||
code: '',
|
||||
remember: true,
|
||||
tenantId: undefined
|
||||
});
|
||||
// 表单数据
|
||||
const config = reactive<Company>({
|
||||
shortName: '',
|
||||
companyName: '',
|
||||
companyLogo: '',
|
||||
tenantId: undefined
|
||||
});
|
||||
// 验证码 base64 数据
|
||||
const captcha = ref('');
|
||||
// 验证码内容, 实际项目去掉
|
||||
const text = ref('');
|
||||
// 是否显示图形验证码弹窗
|
||||
const visible = ref(false);
|
||||
// 图形验证码
|
||||
const imgCode = ref('');
|
||||
// 发送验证码按钮loading
|
||||
const codeLoading = ref(false);
|
||||
// 验证码倒计时时间
|
||||
const countdownTime = ref(0);
|
||||
// 验证码倒计时定时器
|
||||
let countdownTimer: number | null = null;
|
||||
|
||||
// 表单验证规则
|
||||
const rules = computed(() => {
|
||||
return {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.username'),
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.password'),
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: t('login.code'),
|
||||
type: 'string'
|
||||
}
|
||||
]
|
||||
};
|
||||
});
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
if (!imgCode.value) {
|
||||
message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
codeLoading.value = true;
|
||||
sendSmsCaptcha({ phone: form.phone }).then((res) => {
|
||||
console.log(res);
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 30;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
|
||||
const { clearValidate, validate, validateInfos } = useForm(form, rules);
|
||||
|
||||
const goHome = () => {
|
||||
const { query } = unref(currentRoute);
|
||||
goHomeRoute(query.from as string);
|
||||
localStorage.removeItem(THEME_STORE_NAME);
|
||||
};
|
||||
|
||||
/* 提交 */
|
||||
const submit = () => {
|
||||
validate().then(() => {
|
||||
if (form.code?.toLowerCase() !== text.value) {
|
||||
message.error('验证码错误');
|
||||
changeCaptcha();
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
login(form)
|
||||
.then((msg) => {
|
||||
message.success(msg);
|
||||
loading.value = false;
|
||||
cleanPageTabs();
|
||||
goHome();
|
||||
})
|
||||
.catch((e: Error) => {
|
||||
message.error(e.message);
|
||||
loading.value = false;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const doRegister = () => {
|
||||
registerUser(form)
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
message.success('注册成功');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
const onLoginType = (text) => {
|
||||
loginType.value = text;
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
openUrl(getDomain());
|
||||
return;
|
||||
};
|
||||
|
||||
const loginConnect = () => {
|
||||
// getWxWorkQrConnect().then((result) => {
|
||||
// console.log(result);
|
||||
// qrConnect.value = result;
|
||||
// });
|
||||
};
|
||||
|
||||
/* 获取图形验证码 */
|
||||
const changeCaptcha = () => {
|
||||
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
||||
getCaptcha()
|
||||
.then((data) => {
|
||||
captcha.value = data.base64;
|
||||
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
||||
text.value = data.text;
|
||||
// 自动回填验证码, 实际项目去掉这个
|
||||
// form.code = data.text;
|
||||
clearValidate();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 首次加载
|
||||
changeCaptcha();
|
||||
loginConnect();
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
() => {
|
||||
// 解析二级域名获取租户ID
|
||||
const tenantId = getTenantId();
|
||||
if (tenantId) {
|
||||
form.tenantId = Number(tenantId);
|
||||
showTenantId.value = false;
|
||||
}
|
||||
// 获取租户信息
|
||||
const { company } = tenantStore;
|
||||
if (company) {
|
||||
config.companyName = company.companyName;
|
||||
config.companyLogo = company.companyLogo;
|
||||
config.shortName = company.shortName;
|
||||
config.tenantId = company.tenantId;
|
||||
config.domain = company.domain;
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 背景 */
|
||||
.login-wrapper {
|
||||
padding: 48px 16px 0 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/bg-2.jpeg');
|
||||
background-color: #333333;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
/* 卡片 */
|
||||
.login-form {
|
||||
width: 380px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding: 0 28px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
h4 {
|
||||
padding: 22px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.title-btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
.login-title {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
line-height: 50px;
|
||||
.active {
|
||||
color: #007dff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-form-right .login-form {
|
||||
margin: 0 15% 0 auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
margin: 0 auto 0 15%;
|
||||
}
|
||||
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 第三方登录图标 */
|
||||
.login-oauth-icon {
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
margin: 0 12px;
|
||||
font-size: 18px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.work-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
/* 底部版权 */
|
||||
.login-copyright {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
padding: 48px 0 22px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (min-height: 640px) {
|
||||
.login-wrapper {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: auto;
|
||||
right: 15%;
|
||||
transform: translateX(0);
|
||||
margin: -230px auto auto auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
right: auto;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.login-copyright {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.wwLogin_qrcode_head {
|
||||
padding: 10px 0 40px 0 !important;
|
||||
}
|
||||
.logo-login {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
h4 {
|
||||
margin-left: 6px;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<a-row type="flex" justify="center" align="top">
|
||||
<a-col :span="10">
|
||||
<div class="container">
|
||||
<div class="ele-body ele-body-card">
|
||||
<h2 style="text-align: center; font-size: 28px; line-height: 3em"
|
||||
>申请免费体验</h2
|
||||
>
|
||||
<a-form
|
||||
:label-col="{ md: { span: 4 }, sm: { span: 24 } }"
|
||||
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
|
||||
>
|
||||
<a-form-item label="手机号码" v-bind="validateInfos.customerMobile">
|
||||
<a-input
|
||||
v-model:value="form.customerMobile"
|
||||
placeholder="请输入手机号码"
|
||||
:maxlength="11"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="验证码" v-bind="validateInfos.code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
/>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item label="企业名称" v-bind="validateInfos.customerName">
|
||||
<a-input
|
||||
v-model:value="form.customerName"
|
||||
placeholder="请输入企业名称"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="企业编号"
|
||||
v-bind="validateInfos.customerCode"
|
||||
style="display: none"
|
||||
>
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="20"
|
||||
v-model:value="form.customerCode"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item :wrapper-col="{ md: { offset: 5 } }">
|
||||
<a-button
|
||||
type="primary"
|
||||
style="width: 100px"
|
||||
:loading="loading"
|
||||
@click="submit"
|
||||
>
|
||||
{{ loading ? '提交..' : '提交' }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="340"
|
||||
:footer="null"
|
||||
title="发送验证码"
|
||||
v-model:visible="visible"
|
||||
>
|
||||
<div class="login-input-group" style="margin-bottom: 16px">
|
||||
<a-input
|
||||
v-model:value="imgCode"
|
||||
placeholder="请输入图形验证码"
|
||||
allow-clear
|
||||
/>
|
||||
<a-button class="login-captcha">
|
||||
<img alt="" :src="captcha" @click="changeCaptcha" />
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="codeLoading"
|
||||
@click="sendCode"
|
||||
>
|
||||
立即发送
|
||||
</a-button>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onBeforeUnmount } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { Form, message } from 'ant-design-vue';
|
||||
import { getCaptcha } from '@/api/passport/login';
|
||||
import { apply } from '@/api/oa/apply';
|
||||
import { phoneReg } from 'ele-admin-pro';
|
||||
import { Customer } from '@/api/oa/apply/model';
|
||||
import { createCode } from '@/utils/common';
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
||||
const { push } = useRouter();
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
// 表单数据
|
||||
const form = reactive<Customer>({
|
||||
customerCode: createCode(),
|
||||
customerName: '',
|
||||
customerType: undefined,
|
||||
customerMobile: '',
|
||||
customerAvatar: '',
|
||||
customerPhone: '',
|
||||
customerContacts: '',
|
||||
customerAddress: '',
|
||||
comments: '',
|
||||
status: '0',
|
||||
sortNumber: 100,
|
||||
customerId: 0,
|
||||
code: ''
|
||||
});
|
||||
// 表单验证规则
|
||||
const rules = reactive({
|
||||
customerName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入企业名称',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
customerMobile: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号',
|
||||
type: 'string'
|
||||
},
|
||||
{
|
||||
pattern: phoneReg,
|
||||
message: '手机号格式不正确',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
type: 'string'
|
||||
}
|
||||
]
|
||||
});
|
||||
// 是否显示图形验证码弹窗
|
||||
const visible = ref(false);
|
||||
// 图形验证码
|
||||
const imgCode = ref('');
|
||||
// 发送验证码按钮loading
|
||||
const codeLoading = ref(false);
|
||||
// 验证码倒计时时间
|
||||
const countdownTime = ref(0);
|
||||
// 图形验证码地址
|
||||
const captcha = ref('');
|
||||
// 验证码倒计时定时器
|
||||
let countdownTimer: number | null = null;
|
||||
|
||||
const { validate, validateInfos, clearValidate } = useForm(form, rules);
|
||||
|
||||
/* 提交 */
|
||||
const submit = () => {
|
||||
validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
apply({ ...form })
|
||||
.then((msg) => {
|
||||
loading.value = false;
|
||||
message.success(msg);
|
||||
push('/');
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/* 获取图形验证码 */
|
||||
const changeCaptcha = () => {
|
||||
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
||||
getCaptcha()
|
||||
.then((data) => {
|
||||
captcha.value = data.base64;
|
||||
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
||||
// text.value = data.text;
|
||||
// 自动回填验证码, 实际项目去掉这个
|
||||
// form.code = data.text;
|
||||
clearValidate();
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.customerMobile) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
if (!imgCode.value) {
|
||||
message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
codeLoading.value = true;
|
||||
setTimeout(() => {
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 30;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 背景 */
|
||||
.login-wrapper {
|
||||
padding: 48px 16px 0 16px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
background-image: url('@/assets/bg-2.jpeg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.login-form {
|
||||
width: 360px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding: 0 28px 16px 28px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
h4 {
|
||||
padding: 22px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-right .login-form {
|
||||
margin: 0 15% 0 auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
margin: 0 auto 0 15%;
|
||||
}
|
||||
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 第三方登录图标 */
|
||||
.login-oauth-icon {
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
margin: 0 12px;
|
||||
font-size: 18px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 底部版权 */
|
||||
.login-copyright {
|
||||
color: #eee;
|
||||
text-align: center;
|
||||
padding: 48px 0 22px 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (min-height: 640px) {
|
||||
.login-wrapper {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: -230px;
|
||||
}
|
||||
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: auto;
|
||||
right: 15%;
|
||||
transform: translateX(0);
|
||||
margin: -230px auto auto auto;
|
||||
}
|
||||
|
||||
.login-form-left .login-form {
|
||||
right: auto;
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.login-copyright {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.login-form-right .login-form,
|
||||
.login-form-left .login-form {
|
||||
left: 50%;
|
||||
right: auto;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="register">
|
||||
<!-- 加载主体部分 -->
|
||||
<!-- <register />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// import Register from './setp/index.vue';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Index'
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,276 @@
|
||||
<template>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { sm: 5, xs: 24 } : { flex: '130px' }"
|
||||
:wrapper-col="styleResponsive ? { sm: 19, xs: 24 } : { flex: '1' }"
|
||||
>
|
||||
<a-form-item label="手机号码" name="phone">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="11"
|
||||
v-model:value="form.phone"
|
||||
placeholder="请输入手机号码"
|
||||
>
|
||||
<template #addonBefore> +86 </template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="验证码" name="code">
|
||||
<div class="login-input-group">
|
||||
<a-input
|
||||
placeholder="请输入验证码"
|
||||
v-model:value="form.code"
|
||||
:maxlength="6"
|
||||
allow-clear
|
||||
/>
|
||||
<a-button
|
||||
class="login-captcha"
|
||||
:disabled="!!countdownTime"
|
||||
@click="openImgCodeModal"
|
||||
>
|
||||
<span v-if="!countdownTime">发送验证码</span>
|
||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||
</a-button>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:wrapper-col="styleResponsive ? { sm: { offset: 5 } } : { offset: 4 }"
|
||||
style="margin-top: 24px"
|
||||
>
|
||||
<a-space size="middle">
|
||||
<a-button @click="back">上一步</a-button>
|
||||
<a-button type="primary" :loading="loading" @click="submit">
|
||||
下一步
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<!-- 编辑弹窗 -->
|
||||
<a-modal
|
||||
:width="340"
|
||||
:footer="null"
|
||||
title="发送验证码"
|
||||
v-model:visible="visible"
|
||||
>
|
||||
<div class="login-input-group" style="margin-bottom: 16px">
|
||||
<a-input
|
||||
v-model:value="imgCode"
|
||||
:maxlength="5"
|
||||
placeholder="请输入图形验证码"
|
||||
allow-clear
|
||||
@pressEnter="sendCode"
|
||||
/>
|
||||
<a-button class="login-captcha">
|
||||
<img alt="" :src="captcha" @click="changeCaptcha" />
|
||||
</a-button>
|
||||
</div>
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
type="primary"
|
||||
:loading="codeLoading"
|
||||
@click="sendCode"
|
||||
>
|
||||
立即发送
|
||||
</a-button>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import type { StepForm } from '../model';
|
||||
import { assignObject, phoneReg } from 'ele-admin-pro';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { getCaptcha, sendSmsCaptcha, registerUser } from '@/api/login';
|
||||
import { User } from '@/api/system/user/model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const props = defineProps<{
|
||||
// 修改回显的数据
|
||||
data?: StepForm | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', data: StepForm): void;
|
||||
(e: 'back'): void;
|
||||
}>();
|
||||
|
||||
// 是否显示图形验证码弹窗
|
||||
const visible = ref(false);
|
||||
// 图形验证码
|
||||
const imgCode = ref('');
|
||||
// 发送验证码按钮loading
|
||||
const codeLoading = ref(false);
|
||||
// 验证码倒计时时间
|
||||
const countdownTime = ref(0);
|
||||
// 图形验证码地址
|
||||
const captcha = ref('');
|
||||
const text = ref('');
|
||||
// 验证码倒计时定时器
|
||||
let countdownTimer: number | null = null;
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
/* 发送短信验证码 */
|
||||
const sendCode = () => {
|
||||
if (!imgCode.value) {
|
||||
message.error('请输入图形验证码');
|
||||
return;
|
||||
}
|
||||
if (text.value !== imgCode.value) {
|
||||
message.error('图形验证码不正确');
|
||||
return;
|
||||
}
|
||||
codeLoading.value = true;
|
||||
sendSmsCaptcha({ phone: form.phone, key: imgCode.value })
|
||||
.then(() => {
|
||||
message.success('短信验证码发送成功, 请注意查收!');
|
||||
visible.value = false;
|
||||
codeLoading.value = false;
|
||||
countdownTime.value = 60;
|
||||
// 开始对按钮进行倒计时
|
||||
countdownTimer = window.setInterval(() => {
|
||||
if (countdownTime.value <= 1) {
|
||||
countdownTimer && clearInterval(countdownTimer);
|
||||
countdownTimer = null;
|
||||
}
|
||||
countdownTime.value--;
|
||||
}, 1000);
|
||||
})
|
||||
.catch((e) => {
|
||||
codeLoading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<User>({
|
||||
type: 10,
|
||||
phone: '',
|
||||
username: '',
|
||||
nickname: '',
|
||||
roles: [],
|
||||
companyName: '',
|
||||
organizationName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password2: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
message: '手机号格式不正确',
|
||||
type: 'string'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请填写短信验证码',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 获取图形验证码 */
|
||||
const changeCaptcha = () => {
|
||||
// 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
|
||||
getCaptcha()
|
||||
.then((data) => {
|
||||
captcha.value = data.base64;
|
||||
// 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
|
||||
text.value = data.text;
|
||||
// 自动回填验证码, 实际项目去掉这个
|
||||
// form.code = data.text;
|
||||
})
|
||||
.catch((e) => {
|
||||
message.error(e.message);
|
||||
});
|
||||
};
|
||||
|
||||
/* 显示发送短信验证码弹窗 */
|
||||
const openImgCodeModal = () => {
|
||||
if (!form.phone) {
|
||||
message.error('请输入手机号码');
|
||||
return;
|
||||
}
|
||||
imgCode.value = '';
|
||||
changeCaptcha();
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
?.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
// roleId 6开发者 10商户
|
||||
const addData = {
|
||||
...form,
|
||||
username: props.data?.username,
|
||||
password: props.data?.password,
|
||||
phone: props.data?.phone,
|
||||
nickname: props.data?.nickname,
|
||||
roles: [{ roleId: form.type }]
|
||||
};
|
||||
registerUser(addData)
|
||||
.then(() => {
|
||||
loading.value = false;
|
||||
message.success('注册成功');
|
||||
emit('done', form);
|
||||
})
|
||||
.catch((e) => {
|
||||
loading.value = false;
|
||||
message.error(e.message);
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
emit('back');
|
||||
};
|
||||
|
||||
if (props.data) {
|
||||
assignObject(form, props.data);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,302 @@
|
||||
<template>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="styleResponsive ? { sm: 5, xs: 24 } : { flex: '130px' }"
|
||||
:wrapper-col="styleResponsive ? { sm: 19, xs: 24 } : { flex: '1' }"
|
||||
>
|
||||
<!-- <a-form-item-->
|
||||
<!-- label="账号类型"-->
|
||||
<!-- name="type"-->
|
||||
<!-- extra="请慎重选择，注册成功后不允许修改"-->
|
||||
<!-- >-->
|
||||
<!-- <a-radio-group v-model:value="form.type">-->
|
||||
<!-- <a-radio :value="10">企业主</a-radio>-->
|
||||
<!-- <a-radio :value="6">开发者</a-radio>-->
|
||||
<!-- </a-radio-group>-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label="企业名称" name="companyName" v-if="form.type === 10">-->
|
||||
<!-- <a-input-->
|
||||
<!-- placeholder="请输入企业名称"-->
|
||||
<!-- v-model:value="form.companyName"-->
|
||||
<!-- :maxlength="24"-->
|
||||
<!-- allow-clear-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item label="开发者名称" name="companyName" v-if="form.type === 6">
|
||||
<a-input
|
||||
placeholder="请输入开发团队名称"
|
||||
v-model:value="form.companyName"
|
||||
:maxlength="25"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="电子邮箱" name="email">
|
||||
<a-input
|
||||
placeholder="注册成功自动发送邮件通知"
|
||||
v-model:value="form.email"
|
||||
:maxlength="24"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="手机号码" name="phone">
|
||||
<a-input
|
||||
placeholder="请输入手机号码"
|
||||
v-model:value="form.phone"
|
||||
:maxlength="11"
|
||||
allow-clear
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="登录密码" name="password">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="24"
|
||||
type="password"
|
||||
v-model:value="form.password"
|
||||
placeholder="请输入密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="确认密码" name="password2">
|
||||
<a-input
|
||||
allow-clear
|
||||
:maxlength="24"
|
||||
type="password"
|
||||
v-model:value="form.password2"
|
||||
placeholder="请输入确认密码"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item label="昵称" name="nickname">-->
|
||||
<!-- <a-input-->
|
||||
<!-- placeholder="请输入昵称"-->
|
||||
<!-- v-model:value="form.nickname"-->
|
||||
<!-- :maxlength="24"-->
|
||||
<!-- allow-clear-->
|
||||
<!-- />-->
|
||||
<!-- </a-form-item>-->
|
||||
<!-- <a-form-item label=" " name="register" v-if="form.type === 1">-->
|
||||
<!-- 我已阅读并同意 <a>用户协议</a> 和 <a>隐私权政策</a>-->
|
||||
<!-- </a-form-item>-->
|
||||
<a-form-item
|
||||
:wrapper-col="styleResponsive ? { sm: { offset: 5 } } : { offset: 4 }"
|
||||
>
|
||||
<a-button type="primary" :loading="loading" @click="submit">
|
||||
下一步
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
|
||||
import type { StepForm } from '../model';
|
||||
import { emailReg, phoneReg } from 'ele-admin-pro/es';
|
||||
import type { RuleObject } from 'ant-design-vue/es/form';
|
||||
import { createCode } from '@/utils/common';
|
||||
import { checkExistence } from '@/api/system/user';
|
||||
import type { User } from '@/api/system/user/model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'done', data: StepForm): void;
|
||||
}>();
|
||||
|
||||
const props = defineProps<{
|
||||
// 弹窗是否打开
|
||||
visible: boolean;
|
||||
}>();
|
||||
|
||||
const formRef = ref<FormInstance | null>(null);
|
||||
|
||||
// 提交状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 表单数据
|
||||
const form = reactive<User>({
|
||||
type: 10,
|
||||
phone: '',
|
||||
username: createCode(),
|
||||
nickname: '',
|
||||
organizationName: '',
|
||||
companyName: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password2: ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = reactive<Record<string, Rule[]>>({
|
||||
companyName: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: (_rule: Rule, value: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请填写企业名称或姓名');
|
||||
}
|
||||
checkExistence('realName', value)
|
||||
.then(() => {
|
||||
if (form.type === 10) {
|
||||
reject('该企业名称已经存在');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
type: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择账号类型',
|
||||
type: 'number',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
nickname: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择账号类型',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
pattern: emailReg,
|
||||
message: '邮箱格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: (_rule: Rule, value: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请输入用户账号');
|
||||
}
|
||||
checkExistence('email', value)
|
||||
.then(() => {
|
||||
reject('该邮箱已经存在');
|
||||
})
|
||||
.catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: phoneReg,
|
||||
message: '手机号格式不正确',
|
||||
type: 'string',
|
||||
trigger: 'blur'
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: (_rule: Rule, value: string) => {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
if (!value) {
|
||||
return reject('请输入用户账号');
|
||||
}
|
||||
checkExistence('phone', value)
|
||||
.then(() => {
|
||||
reject('该手机号码已经存在');
|
||||
})
|
||||
.catch(() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
type: 'string',
|
||||
validator: async (_rule: Rule, value: string) => {
|
||||
if (/^[\S]{8,32}$/.test(value)) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return Promise.reject('密码必须为8-32位非空白字符');
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password2: [
|
||||
{
|
||||
required: true,
|
||||
validator: async (_rule: RuleObject, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请再次输入新密码');
|
||||
}
|
||||
if (value !== form.password) {
|
||||
return Promise.reject('两次输入密码不一致');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/* 步骤一提交 */
|
||||
const submit = () => {
|
||||
if (!formRef.value) {
|
||||
return;
|
||||
}
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
loading.value = true;
|
||||
emit('done', form);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.visible,
|
||||
(visible) => {
|
||||
if (visible) {
|
||||
} else {
|
||||
formRef.value?.clearValidate();
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
/* 验证码 */
|
||||
.login-input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.ant-input-affix-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.login-captcha {
|
||||
width: 102px;
|
||||
margin-left: 10px;
|
||||
padding: 0;
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-result
|
||||
title="注册成功"
|
||||
status="success"
|
||||
sub-title="注册资料已发到您预留的邮箱地址请查收"
|
||||
/>
|
||||
<div style="display: flex; justify-content: center">
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="openUrl('https://admin.gxwebsoft.com')"
|
||||
>
|
||||
后台管理系统
|
||||
</a-button>
|
||||
<a-button type="primary" @click="openUrl('/login')">
|
||||
开发者中心
|
||||
</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { StepForm } from '../model';
|
||||
import { openUrl } from '@/utils/common';
|
||||
|
||||
defineProps<{
|
||||
// 修改回显的数据
|
||||
data?: StepForm | null;
|
||||
}>();
|
||||
</script>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'login-wrapper',
|
||||
['', 'login-form-right', 'login-form-left'][direction]
|
||||
]"
|
||||
>
|
||||
<div class="ele-body" style="width: 1000px">
|
||||
<a-card :bordered="false">
|
||||
<div style="max-width: 700px; margin: 0 auto">
|
||||
<div style="margin: 10px 0 30px 0">
|
||||
<a-steps
|
||||
:current="active"
|
||||
direction="horizontal"
|
||||
:responsive="styleResponsive"
|
||||
>
|
||||
<a-step title="第一步" description="基本信息" />
|
||||
<a-step title="第二步" description="验证信息" />
|
||||
<a-step title="第三步" description="注册成功" />
|
||||
</a-steps>
|
||||
</div>
|
||||
<step-edit
|
||||
v-model:visible="showEdit"
|
||||
v-if="active === 0"
|
||||
@done="onDone"
|
||||
/>
|
||||
<step-confirm
|
||||
v-if="active === 1"
|
||||
:data="form"
|
||||
@done="onNext"
|
||||
@back="onBack"
|
||||
/>
|
||||
<step-success v-if="active === 2" :data="form" @back="onBack" />
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import StepEdit from './components/step-edit.vue';
|
||||
import StepConfirm from './components/step-confirm.vue';
|
||||
import StepSuccess from './components/step-success.vue';
|
||||
import type { StepForm } from './model';
|
||||
|
||||
// 是否开启响应式布局
|
||||
const themeStore = useThemeStore();
|
||||
const { styleResponsive } = storeToRefs(themeStore);
|
||||
|
||||
// 选中步骤
|
||||
const active = ref(0);
|
||||
// 是否显示编辑弹窗
|
||||
const showEdit = ref(false);
|
||||
// 登录框方向, 0 居中, 1 居右, 2 居左
|
||||
const direction = ref(0);
|
||||
const form = reactive<StepForm>({});
|
||||
|
||||
//
|
||||
const onDone = (data: StepForm) => {
|
||||
Object.assign(form, data);
|
||||
active.value = 1;
|
||||
};
|
||||
|
||||
//
|
||||
const onNext = (data: StepForm) => {
|
||||
Object.assign(form, data);
|
||||
active.value = 2;
|
||||
};
|
||||
|
||||
//
|
||||
const onBack = () => {
|
||||
active.value = 0;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'FormStep'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.account-type {
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.account-desc {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,11 @@
|
||||
export interface StepForm {
|
||||
type?: number;
|
||||
apply?: string;
|
||||
username?: string;
|
||||
password?: string;
|
||||
password2?: string;
|
||||
phone?: string;
|
||||
code?: string;
|
||||
nickname?: string;
|
||||
companyName?: string;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div id="token_login" style="width: 100%; height: 100%">登录中...</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { unref, watch } from 'vue';
|
||||
|
||||
import { useRouter } from 'vue-router';
|
||||
import { setToken } from '@/utils/token-util';
|
||||
import { openUrl } from '@/utils/common';
|
||||
import { getRootDomain } from '@/utils/domain';
|
||||
const { currentRoute } = useRouter();
|
||||
|
||||
const rootDomain = getRootDomain();
|
||||
|
||||
watch(
|
||||
currentRoute,
|
||||
(route) => {
|
||||
const { query } = unref(route);
|
||||
const { tid, token } = query;
|
||||
if (rootDomain !== 'gxwebsoft.com') {
|
||||
return false;
|
||||
}
|
||||
if (token) {
|
||||
setToken(token, true);
|
||||
localStorage.setItem('TenantId', tid);
|
||||
openUrl('/');
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
</script>
|
||||
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div id="ww_login" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as ww from '@wecom/jssdk';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const wwLoginInstance = ref(null);
|
||||
|
||||
const wwLogin = () => {
|
||||
wwLoginInstance.value = ww.createWWLoginPanel({
|
||||
el: '#ww_login',
|
||||
params: {
|
||||
login_type: 'ServiceApp',
|
||||
appid: 'wx5400ab7aebf0f3c3',
|
||||
agentid: '10000xx',
|
||||
redirect_uri: 'https://oa.gxwebsoft.com/wx-work-login',
|
||||
state: 'loginState',
|
||||
redirect_type: 'callback',
|
||||
panel_size: 'small'
|
||||
},
|
||||
onCheckWeComLogin({ isWeComLogin }) {
|
||||
console.log('1111');
|
||||
console.log(isWeComLogin);
|
||||
},
|
||||
onLoginSuccess({ code }) {
|
||||
console.log('222');
|
||||
console.log({ code });
|
||||
},
|
||||
onLoginFail(err) {
|
||||
console.log('333');
|
||||
console.log(err);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
wwLogin();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user