123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391 |
- <template>
- <div
- class="login-content"
- :style="{ 'background-image': 'url(' + login.config.background + ')' }"
- >
- <el-row>
- <el-col :xs="0" :sm="0" :md="13" :lg="14" :xl="14"></el-col>
- <el-col class="main" :xs="24" :sm="24" :md="11" :lg="10" :xl="10">
- <transition name="el-zoom-in-center">
- <!-- 使用账号密码登录 -->
- <div v-if="login.type == 'input'" class="login-wrap sa-flex sa-flex-center sa-flex-1">
- <div class="admin-name">
- <div>
- <div class="sa-line-1">欢迎来到{{ appName }}</div>
- <div class="admin-welcome">很高兴再次见到您</div>
- </div>
- </div>
- <el-form
- :model="form.data"
- :rules="form.rules"
- label-position="left"
- ref="formRef"
- label-width="0"
- >
- <el-form-item prop="account">
- <el-input :class="form.data.account ? 'is-focus' : ''" v-model="form.data.account">
- <template #prefix>
- <div class="label">账号</div>
- </template>
- </el-input>
- </el-form-item>
- <el-form-item prop="pwd">
- <el-input
- :class="form.data.pwd ? 'is-focus' : ''"
- v-model="form.data.pwd"
- :type="showPwd ? 'password' : 'text'"
- autocomplete="new-password"
- >
- <template #prefix>
- <div class="label">密码</div>
- </template>
- <template #suffix>
- <span v-if="showPwd" @click="showPwd = false">
- <sa-svg name="sa-password-hide" size="24"></sa-svg>
- </span>
- <span v-if="!showPwd" @click="showPwd = true">
- <sa-svg name="sa-password-show" size="24"></sa-svg>
- </span>
- </template>
- </el-input>
- </el-form-item>
- <div>
- <el-checkbox
- v-model="login.last.rememberMe"
- @change="changeRememberMe"
- label="记住我"
- ></el-checkbox>
- </div>
- <el-button type="primary" :loading="loginLoading" @click="accountLogin"
- >登录
- </el-button>
- </el-form>
- </div>
- <!-- 有记住的用户 -->
- <div
- v-else-if="login.type == 'rememberMe'"
- class="login-wrap sa-flex sa-flex-center sa-flex-1"
- >
- <div class="admin-name sa-flex sa-row-center">
- <sa-image :url="login.last.info.avatar" size="80" radius="40"></sa-image>
- </div>
- <el-form
- :model="form.data"
- :rules="form.rules"
- label-position="left"
- ref="formRef"
- label-width="0"
- >
- <el-form-item prop="account">
- <div class="sa-flex-1 sa-flex sa-row-center">
- {{ login.last.info.nickname }}
- </div>
- </el-form-item>
- <el-form-item prop="pwd">
- <el-input
- :class="form.data.pwd ? 'is-focus' : ''"
- v-model="form.data.pwd"
- :type="showPwd ? 'password' : 'text'"
- autocomplete="new-password"
- >
- <template #prefix>
- <div class="label">密码</div>
- </template>
- <template #suffix>
- <span v-if="showPwd" @click="showPwd = false">
- <sa-svg name="sa-password-hide" size="24"></sa-svg>
- </span>
- <span v-if="!showPwd" @click="showPwd = true">
- <sa-svg name="sa-password-show" size="24"></sa-svg>
- </span>
- </template>
- </el-input>
- </el-form-item>
- <el-button type="primary" :loading="loginLoading" @click="accountLogin"
- >登录
- </el-button>
- <el-button @click="changeLoginType('input')"> 使用其他账号登录 </el-button>
- </el-form>
- </div>
- </transition>
- </el-col>
- </el-row>
- </div>
- </template>
- <script setup>
- import { reactive, ref, unref, computed, onBeforeMount, onMounted, onUnmounted } from 'vue';
- import router from '@/sheep/router';
- import { useRoute } from 'vue-router';
- import adminApi from '@/sheep/local-data/admin';
- import storage from '@/sheep/utils/storage';
- import sheep from '@/sheep';
- import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
- import { ElMessage } from 'element-plus';
- const accountStore = sheep.$store('account');
- const appStore = sheep.$store('app');
- const routeQuery = useRoute().query;
- if (routeQuery.token) {
- accountStore.setToken(`${routeQuery.token}`);
- }
- const appName = computed(() => appStore.info.name);
- const showPwd = ref(true);
- const loginLoading = ref(false);
- const formRef = ref(null);
- const form = reactive({
- data: {
- account: '',
- pwd: '',
- },
- rules: {
- account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
- pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
- },
- });
- // 登录
- const accountLogin = async () => {
- // 表单验证
- unref(formRef).validate(async (valid) => {
- if (!valid) return;
- loginLoading.value = true;
- let submit = form.data;
- const { code } = await accountStore.login(submit);
- loginLoading.value = false;
- if (code == '200') {
- ElMessage.success('登录成功');
- storage.set('lastLogin', login.last);
- await appStore.appLoad();
- router.push('/');
- }
- });
- };
- const login = reactive({
- config: {
- background: '',
- },
- type: 'input',
- last: {},
- });
- // 初始化登陆表单
- function checkLastLogin() {
- login.last = storage.get('lastLogin', { rememberMe: false });
- if (login.last.rememberMe) {
- login.type = 'rememberMe';
- form.data.account = login.last.info.account;
- }
- }
- function changeLoginType(type) {
- login.type = type;
- if (type == 'input') {
- form.data.account = '';
- form.data.pwd = '';
- initLogin();
- }
- }
- function changeRememberMe(e) {
- login.last.rememberMe = e;
- }
- onBeforeMount(async () => {
- // 检测登录态
- if (accountStore.isLogin) {
- await appStore.appLoad();
- router.push('/');
- } else {
- initLogin();
- checkLastLogin();
- }
- });
- onMounted(() => {
- document.addEventListener('keyup', enterKey);
- });
- onUnmounted(() => {
- document.removeEventListener('keyup', enterKey);
- });
- function enterKey(event) {
- const code = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
- if (code == 13) {
- accountLogin();
- }
- }
- async function initLogin() {
- const { data } = adminApi.loginConfig();
- console.log(data);
- login.config = data;
- login.config.background = login.config.background;
- }
- </script>
- <style lang="scss">
- .login-content {
- .el-form {
- width: 100%;
- .el-button {
- width: 100%;
- height: 48px;
- line-height: 1;
- margin-top: 10px;
- }
- .el-button--default {
- margin-top: 0;
- .sa-svg {
- font-size: 22px;
- margin-right: 6px;
- }
- }
- .el-form-item {
- margin-bottom: 32px;
- }
- .el-form-item__content {
- line-height: unset;
- }
- }
- }
- </style>
- <style lang="scss" scoped>
- .login-content {
- height: 100%;
- color: var(--sa-subtitle);
- background-size: cover;
- background-repeat: no-repeat;
- background-color: var(--sa-background-assist);
- @media only screen and (max-width: 768px) {
- background-position: center;
- }
- .el-row {
- height: 100%;
- .el-col {
- display: flex;
- align-items: center;
- }
- @media only screen and (max-width: 992px) {
- .el-col {
- justify-content: center;
- }
- }
- }
- .main {
- position: relative;
- }
- .login-wrap {
- width: 460px;
- flex-direction: column;
- padding: 56px 52px 64px;
- border-radius: 8px;
- background: var(--sa-background-assist);
- filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.2));
- position: absolute;
- .admin-name {
- width: 100%;
- height: 112px;
- font-size: 32px;
- text-align: center;
- .admin-welcome {
- font-size: 20px;
- margin-top: 16px;
- text-align: center;
- }
- .sa-image {
- margin-bottom: 32px;
- }
- }
- }
- .login-wrap {
- height: 500px;
- }
- @media only screen and (max-width: 768px) {
- .login-wrap {
- width: 100%;
- max-width: unset;
- height: 100%;
- border-radius: 0;
- padding: 56px 20px 64px;
- background: transparent;
- filter: unset;
- .admin-name {
- font-size: 26px;
- }
- }
- }
- :deep() {
- .el-input {
- --el-input-height: 48px;
- max-width: unset;
- .el-input__wrapper {
- position: relative;
- .label {
- display: flex;
- align-items: center;
- width: fit-content;
- height: 20px;
- position: absolute;
- top: 14px;
- left: 11px;
- pointer-events: none;
- font-size: 18px;
- color: var(--sa-subfont);
- }
- &.is-focus {
- .label {
- top: 4px;
- font-size: 12px;
- transition: ease-in-out 0.2s;
- }
- .el-input__inner {
- padding: 25px 0 9px;
- }
- }
- }
- &.is-focus {
- .label {
- top: 4px;
- font-size: 12px;
- transition: ease-in-out 0.2s;
- }
- .el-input__inner {
- padding: 25px 0 9px;
- }
- }
- }
- }
- }
- </style>
|