123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313 |
- <template>
- <el-form ref="formRef" size="large" class="login-content-form" :model="state.ruleForm" :rules="rules" @keyup.enter="loginClick">
- <!-- <el-form-item class="login-animation1" prop="merchant_code">
- <el-input type="text" :placeholder="'请输入商户号'" v-model="ruleForm.merchant_code" clearable autocomplete="off">
- <template #prefix>
- <el-icon class="el-input__icon"><ele-Shop /></el-icon>
- </template>
- </el-input>
- </el-form-item> -->
- <el-form-item class="login-animation1" prop="username">
- <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.username" clearable autocomplete="off">
- <template #prefix>
- <el-icon class="el-input__icon"><ele-User /></el-icon>
- </template>
- </el-input>
- </el-form-item>
- <el-form-item class="login-animation2" prop="password">
- <el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')" v-model="ruleForm.password">
- <template #prefix>
- <el-icon class="el-input__icon"><ele-Unlock /></el-icon>
- </template>
- <template #suffix>
- <i
- class="iconfont el-input__icon login-content-password"
- :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
- @click="isShowPassword = !isShowPassword"
- >
- </i>
- </template>
- </el-input>
- </el-form-item>
- <el-form-item class="login-animation3" v-if="isShowCaptcha" prop="captcha">
- <el-col :span="15">
- <el-input
- type="text"
- maxlength="4"
- :placeholder="$t('message.account.accountPlaceholder3')"
- v-model="ruleForm.captcha"
- clearable
- autocomplete="off"
- >
- <template #prefix>
- <el-icon class="el-input__icon"><ele-Position /></el-icon>
- </template>
- </el-input>
- </el-col>
- <el-col :span="1"></el-col>
- <el-col :span="8">
- <el-button class="login-content-captcha">
- <el-image :src="ruleForm.captchaImgBase" @click="refreshCaptcha" />
- </el-button>
- </el-col>
- </el-form-item>
- <el-form-item>
- <el-checkbox v-model="state.agreePolicy">
- 已阅读并同意
- <a href="/user-agreement" target="_blank" class="login-link">《用户服务协议》</a>
- 与
- <a href="/privacy-policy" target="_blank" class="login-link">《隐私协议》</a>
- </el-checkbox>
- </el-form-item>
- <el-form-item class="login-animation4">
- <el-button type="primary" class="login-content-submit" round @click="loginClick" :loading="loading.signIn" :disabled="!state.agreePolicy">
- <span>{{ $t('message.account.accountBtnText') }}</span>
- </el-button>
- </el-form-item>
- </el-form>
- <!-- 申请试用-->
- <div style="text-align: center" v-if="showApply()">
- <el-button class="login-content-apply" link type="primary" plain round @click="applyBtnClick">
- <span>申请试用</span>
- </el-button>
- </div>
- </template>
- <script lang="ts">
- import { toRefs, reactive, defineComponent, computed, onMounted, onUnmounted, ref } from 'vue';
- import { useRoute, useRouter } from 'vue-router';
- import { ElMessage, FormInstance, FormRules } from 'element-plus';
- import { useI18n } from 'vue-i18n';
- import Cookies from 'js-cookie';
- import { storeToRefs } from 'pinia';
- import { useThemeConfig } from '/@/stores/themeConfig';
- import { initFrontEndControlRoutes } from '/@/router/frontEnd';
- import { initBackEndControlRoutes } from '/@/router/backEnd';
- import { Session } from '/@/utils/storage';
- import { formatAxis } from '/@/utils/formatTime';
- import { NextLoading } from '/@/utils/loading';
- import * as loginApi from '/@/views/system/login/api';
- import { useUserInfo } from '/@/stores/userInfo';
- import { DictionaryStore } from '/@/stores/dictionary';
- import { SystemConfigStore } from '/@/stores/systemConfig';
- import { BtnPermissionStore } from '/@/plugin/permission/store.permission';
- import { Md5 } from 'ts-md5';
- import { errorMessage } from '/@/utils/message';
- import { getBaseURL } from '/@/utils/baseUrl';
- export default defineComponent({
- name: 'loginAccount',
- setup() {
- const { t } = useI18n();
- const storesThemeConfig = useThemeConfig();
- const { themeConfig } = storeToRefs(storesThemeConfig);
- const { userInfos } = storeToRefs(useUserInfo());
- const route = useRoute();
- const router = useRouter();
- const state = reactive({
- isShowPassword: false,
- ruleForm: {
- username: '',
- password: '',
- captcha: '',
- captchaKey: '',
- captchaImgBase: '',
- //merchant_code: localStorage.getItem('merchant_code') || 'ML01',
- tenant_id: 1,
- },
- loading: {
- signIn: false,
- },
- agreePolicy: true,
- });
- const rules = reactive<FormRules>({
- //merchant_code: [{ required: true, message: '请填写商户号', trigger: 'blur' }],
- username: [{ required: true, message: '请填写账号', trigger: 'blur' }],
- password: [
- {
- required: true,
- message: '请填写密码',
- trigger: 'blur',
- },
- ],
- captcha: [
- {
- required: true,
- message: '请填写验证码',
- trigger: 'blur',
- },
- ],
- });
- const formRef = ref();
- // 时间获取
- const currentTime = computed(() => {
- return formatAxis(new Date());
- });
- // 是否关闭验证码
- const isShowCaptcha = computed(() => {
- return SystemConfigStore().systemConfig['base.captcha_state'];
- });
- const getCaptcha = async () => {
- loginApi.getCaptcha().then((ret: any) => {
- state.ruleForm.captchaImgBase = ret.data.image_base;
- state.ruleForm.captchaKey = ret.data.key;
- });
- };
- const applyBtnClick = async () => {
- window.open(getBaseURL('/api/system/apply_for_trial/'));
- };
- const refreshCaptcha = async () => {
- state.ruleForm.captcha = '';
- loginApi.getCaptcha().then((ret: any) => {
- state.ruleForm.captchaImgBase = ret.data.image_base;
- state.ruleForm.captchaKey = ret.data.key;
- });
- };
- const loginClick = async () => {
- if (!formRef.value) return;
- await formRef.value.validate((valid: any) => {
- if (valid) {
- loginApi
- .login({ ...state.ruleForm, password: Md5.hashStr(state.ruleForm.password) })
- .then((res: any) => {
- if (res.code === 2000) {
- const { data } = res;
- Cookies.set('username', res.data.username);
- Session.set('token', res.data.access);
- Session.set('merchant_info', res.data.merchant_info);
- useUserInfo().setPwdChangeCount(data.pwd_change_count);
- /* if (data.pwd_change_count == 0) {
- return router.push('/login');
- } */
- if (!themeConfig.value.isRequestRoutes) {
- // 前端控制路由,2、请注意执行顺序
- initFrontEndControlRoutes();
- loginSuccess();
- } else {
- // 模拟后端控制路由,isRequestRoutes 为 true,则开启后端控制路由
- // 添加完动态路由,再进行 router 跳转,否则可能报错 No match found for location with path "/"
- initBackEndControlRoutes();
- // 执行完 initBackEndControlRoutes,再执行 signInSuccess
- loginSuccess();
- }
- }
- })
- .catch((err: any) => {
- // 登录错误之后,刷新验证码
- refreshCaptcha();
- });
- } else {
- errorMessage('请填写登录信息');
- }
- });
- };
- // 登录成功后的跳转
- const loginSuccess = () => {
- //获取所有字典
- DictionaryStore().getSystemDictionarys();
- // 初始化登录成功时间问候语
- let currentTimeInfo = currentTime.value;
- // 登录成功,跳到转首页
- const pwd_change_count = userInfos.value.pwd_change_count;
- router.push('/');
- state.loading.signIn = true;
- const signInText = t('message.signInText');
- ElMessage.success(`${currentTimeInfo},${signInText}`);
- /* if (pwd_change_count > 0) {
- // 如果是复制粘贴的路径,非首页/登录页,那么登录成功后重定向到对应的路径中
- if (route.query?.redirect) {
- router.push({
- path: <string>route.query?.redirect,
- query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
- });
- } else {
-
- }
- // 登录成功提示
- // 关闭 loading
-
- } */
- // 添加 loading,防止第一次进入界面时出现短暂空白
- NextLoading.start();
- };
- onMounted(() => {
- getCaptcha();
- //获取系统配置
- SystemConfigStore().getSystemConfigs();
- });
- // 是否显示申请试用按钮
- const showApply = () => {
- return window.location.href.indexOf('public') != -1;
- };
- return {
- refreshCaptcha,
- loginClick,
- loginSuccess,
- isShowCaptcha,
- state,
- formRef,
- rules,
- applyBtnClick,
- showApply,
- ...toRefs(state),
- };
- },
- });
- </script>
- <style scoped lang="scss">
- .login-content-form {
- margin-top: 20px;
- @for $i from 1 through 4 {
- .login-animation#{$i} {
- opacity: 0;
- animation-name: error-num;
- animation-duration: 0.5s;
- animation-fill-mode: forwards;
- animation-delay: calc($i/10) + s;
- }
- }
- .login-content-password {
- display: inline-block;
- width: 20px;
- cursor: pointer;
- &:hover {
- color: #909399;
- }
- }
- .login-content-captcha {
- width: 100%;
- padding: 0;
- font-weight: bold;
- letter-spacing: 5px;
- }
- .login-content-submit {
- width: 100%;
- letter-spacing: 2px;
- font-weight: 800;
- margin-top: 15px;
- }
- :deep(.el-checkbox__label) {
- color: #808080 !important;
- }
- :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
- color: #808080 !important;
- }
- .login-link {
- color: #0017ab;
- text-decoration: none;
- cursor: pointer;
- &:hover {
- color: #0017ab;
- }
- }
- }
- </style>
|