更新

Your Name

2022-07-27 b78c039181ac316964a0f0de077170de178d90ab

 src/views/loginPage/component/accountLogin.vue

@@ -1,44 +1,55 @@
<template>
   <el-form size="large" class="login-content-form">
      <el-form-item class="login-animation1">
         <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.username" clearable autocomplete="off" size="large">
            <template #prefix>
               <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px;height: 24px"></el-icon>
            </template>
         </el-input>
      </el-form-item>
      <el-form-item class="login-animation2">
         <el-input
            :type="isShowPassword ? 'text' : 'password'"
            :placeholder="$t('message.account.accountPlaceholder2')"
            v-model="ruleForm.password"
            autocomplete="off"
            size="large"
    <el-form size="large" class="login-content-form">
        <el-form-item class="login-animation1">
            <el-input
                type="text"
                :placeholder="$t('message.account.accountPlaceholder1')"
                v-model="ruleForm.username"
                clearable
                autocomplete="off"
                size="large"
            >
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"
                        ><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px; height: 24px"
                    /></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation2">
            <el-input
                :type="isShowPassword ? 'text' : 'password'"
                :placeholder="$t('message.account.accountPlaceholder2')"
                v-model="ruleForm.password"
                autocomplete="off"
                size="large"
                @keyup.enter.native="onSignIn"
         >
            <template #prefix>
               <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px;height: 24px"></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-animation4 codeDeal">
         <el-checkbox v-model="saveCode" label="记住密码" size="large" />
         <span class="forgetCode">忘记密码？</span>
      </el-form-item>
      <el-form-item class="login-animation4">
         <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
            <span>登录系统</span>
         </el-button>
      </el-form-item>
   </el-form>
            >
                <template #prefix>
                    <el-icon class="el-input__icon" style="margin-right: 20px"
                        ><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px; height: 24px"
                    /></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-animation4 codeDeal">
            <el-checkbox v-model="saveCode" label="记住密码" size="large" />
            <span class="forgetCode">忘记密码？</span>
        </el-form-item>
        <el-form-item class="login-animation4">
            <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
                <span>登录系统</span>
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts">
@@ -55,154 +66,155 @@
import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading';
import { useLoginApi } from '/@/api/login';
import {useUserInfo} from "/@/stores/userInfo";
import { useUserInfo } from '/@/stores/userInfo';

export default defineComponent({
   name: 'accountLogin',
   setup() {
      const { t } = useI18n();
      const userInfo = useUserInfo()
      const route = useRoute();
      const router = useRouter();
      const state = reactive({
         isShowPassword: false,
         ruleForm: {
            username: '',
            password: '',
         },
         loading: {
            signIn: false,
         },
      });
      // 时间获取
      const currentTime = computed(() => {
         return formatAxis(new Date());
      });
      // 登录
      const onSignIn = async () => {
         state.loading.signIn = true;
         // 存储 token 到浏览器缓存
         let res = await useLoginApi().signIn(state.ruleForm)
         if(res.data.code === '200'){
            userInfo.setUserInfos(res.data.data)
            Session.set('token', res.data.data.accessToken);
            Session.set('projectId','');
            Session.set('uid',res.data.data.uid);
            signInSuccess();
         }else{
            state.loading.signIn = false
            ElMessage({
               type:'warning',
               message:res.data.msg
            })
         }
         // Session.set('token', Math.random().toString(36).substr(0));
         // // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
         // Cookies.set('userName', state.ruleForm.username);
         // if (!themeConfig.value.isRequestRoutes) {
         //    // 前端控制路由，2、请注意执行顺序
         //    await initFrontEndControlRoutes();
         //    signInSuccess();
         // } else {
         //    // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
         //    // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
         //    await initBackEndControlRoutes();
         //    // 执行完 initBackEndControlRoutes，再执行 signInSuccess
         //    signInSuccess();
         // }
      };
      // 登录成功后的跳转
      const signInSuccess = async () => {
         // 初始化登录成功时间问候语
         let currentTimeInfo = currentTime.value;
         // 登录成功，跳到转首页
         // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
         if (route.query?.redirect) {
            router.push('/homeMenu');
            // router.push({
            //    path: <string>route.query?.redirect,
            //    query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
            // });
         } else {
            router.push('/loginPage');
         }
         state.loading.signIn = true;
         const signInText = t('message.signInText');
         ElMessage.success(`${currentTimeInfo}，${signInText}`);
         // 登录成功提示
         // 关闭 loading
         // 添加 loading，防止第一次进入界面时出现短暂空白
         // NextLoading.start();
      };
      return {
         onSignIn,
         ...toRefs(state),
      };
   },
    name: 'accountLogin',
    setup() {
        const { t } = useI18n();
        const userInfo = useUserInfo();
        const route = useRoute();
        const router = useRouter();
        const state = reactive({
            isShowPassword: false,
            ruleForm: {
                username: '',
                password: ''
            },
            loading: {
                signIn: false
            }
        });
        // 时间获取
        const currentTime = computed(() => {
            return formatAxis(new Date());
        });
        // 登录
        const onSignIn = async () => {
            state.loading.signIn = true;
            // 存储 token 到浏览器缓存
            let res = await useLoginApi().signIn(state.ruleForm);
            if (res.data.code === '200') {
                await userInfo.setUserInfos(res.data.data);
                Session.set('token', res.data.data.accessToken);
                Session.set('projectId', '');
                Session.set('uid', res.data.data.uid);
                await signInSuccess();
            } else {
                state.loading.signIn = false;
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
            state.loading.signIn = false;
            // Session.set('token', Math.random().toString(36).substr(0));
            // // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
            // Cookies.set('userName', state.ruleForm.username);
            // if (!themeConfig.value.isRequestRoutes) {
            //    // 前端控制路由，2、请注意执行顺序
            //    await initFrontEndControlRoutes();
            //    signInSuccess();
            // } else {
            //    // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
            //    // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
            //    await initBackEndControlRoutes();
            //    // 执行完 initBackEndControlRoutes，再执行 signInSuccess
            //    signInSuccess();
            // }
        };
        // 登录成功后的跳转
        const signInSuccess = async () => {
            // 初始化登录成功时间问候语
            let currentTimeInfo = currentTime.value;
            // 登录成功，跳到转首页
            // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
            if (route.query?.redirect) {
                router.push('/homeMenu');
                // router.push({
                //    path: <string>route.query?.redirect,
                //    query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
                // });
            } else {
                router.push('/loginPage');
            }
            state.loading.signIn = true;
            const signInText = t('message.signInText');
            ElMessage.success(`${currentTimeInfo}，${signInText}`);
            // 登录成功提示
            // 关闭 loading
            // 添加 loading，防止第一次进入界面时出现短暂空白
            // NextLoading.start();
        };
        return {
            onSignIn,
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="scss">
.login-content-form {
   margin-top: 40px;
   width: 420px;
    margin-top: 40px;
    width: 420px;

   .el-input::v-deep .el-input__wrapper{
      height: 56px;
      border-radius: 28px;
      padding: 0 30px;
      background: #F2F2F2;
      &:focus-within{
         border: 1px solid #2053D7;
      }
   }
   @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;
      }
   }
   .codeDeal::v-deep .el-form-item__content{
      display: flex;
      justify-content: space-between;
    .el-input::v-deep .el-input__wrapper {
        height: 56px;
        border-radius: 28px;
        padding: 0 30px;
        background: #f2f2f2;
        &:focus-within {
            border: 1px solid #2053d7;
        }
    }
    @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;
        }
    }
    .codeDeal::v-deep .el-form-item__content {
        display: flex;
        justify-content: space-between;

      .forgetCode{
         color: #2053D7;
         cursor: pointer;
      }
   }
   .login-content-password {
      width: 100%;
      display: inline-block;
      width: 20px;
      cursor: pointer;
      &:hover {
         color: #909399;
      }
   }
   .login-content-code {
      width: 100%;
      padding: 0;
      font-weight: bold;
      letter-spacing: 5px;
   }
   .login-content-submit {
      width: 100%;
      height: 56px;
      font-size: 16px;
      border-radius: 28px;
      letter-spacing: 4px;
      font-weight: 300;
      margin-top: 15px;
      background: #2053D7;
      transition: .3s;
      &:hover{
         letter-spacing: 6px;
         background: #4E7AEC;
      }
   }
        .forgetCode {
            color: #2053d7;
            cursor: pointer;
        }
    }
    .login-content-password {
        width: 100%;
        display: inline-block;
        width: 20px;
        cursor: pointer;
        &:hover {
            color: #909399;
        }
    }
    .login-content-code {
        width: 100%;
        padding: 0;
        font-weight: bold;
        letter-spacing: 5px;
    }
    .login-content-submit {
        width: 100%;
        height: 56px;
        font-size: 16px;
        border-radius: 28px;
        letter-spacing: 4px;
        font-weight: 300;
        margin-top: 15px;
        background: #2053d7;
        transition: 0.3s;
        &:hover {
            letter-spacing: 6px;
            background: #4e7aec;
        }
    }
}
</style>