xinkeaboard/xinkeaboard-web/components/SldLoginModal.vue

<!--登录弹框 @zjf-2021-01-08-->
<template>
  <div class="sld_login_modal">
    <el-dialog
      title=""
      :model-value="modalVisible"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="sld_login_content">
        <span
          class="iconfont icon-shanchutupian close_icon"
          @click="closeModal"
        />
        <div class="login">
          <div class="login_box">
            <div class="top">
              <div class="item1">{{ L["账号登录"] }}</div>
            </div>
            <div class="center">
              <div class="item account">
                <span
                  style="color: #bbb; font-size: 19px; padding-top: 7px"
                  class="icon iconfont icon-wode"
                ></span>
                <input
                  type="text"
                  v-model="name"
                  :placeholder="L['请输入账号']"
                  class="input"
                />
                <div
                  data-type="userName"
                  class="cancel"
                  @click="clearInputVal('name')"
                >
                  <span style="color: #bbb" class="iconfont icon-cuowu"></span>
                </div>
              </div>
              <div class="item password">
                <span
                  style="color: #bbb; font-size: 21px; padding-top: 7px"
                  class="icon iconfont icon-mima1"
                ></span>
                <input
                  type="password"
                  v-model="password"
                  :placeholder="L['请输入密码']"
                  class="input"
                  autocomplete="new-password"
                />
                <div
                  data-type="password"
                  class="cancel"
                  @click="clearInputVal('password')"
                >
                  <span style="color: #bbb" class="iconfont icon-cuowu"></span>
                </div>
              </div>
              <div class="error">
                <span
                  v-if="errorMsg"
                  style="color: #e1251b; font-size: 14px"
                  class="iconfont icon-jubao"
                ></span>
                {{ errorMsg }}
              </div>
              <a href="javascript:void(0)" @click="login" class="login_btn">{{
                L["登录"]
              }}</a>
            </div>
            <div :class="{ bottom: true, flex_row_between_center: true }">
              <router-link tag="a" :to="`/register`">
                {{ L["立即注册"] }}
              </router-link>
              <router-link tag="a" :to="`/member/login/forget`">
                {{ L["忘记密码"] }}
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, watchEffect } from "vue";
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
import { useFiltersStore } from "@/store/filter.js";
import { ElMessage, ElButton, ElInput,ElDialog,ElCheckbox } from "element-plus";

const filtersStore = useFiltersStore();
// const L = lang_zn;
const L = getCurLanguage();
const modalVisible = ref(true);
const route = useRoute();
const name = ref(""); //用户名
const errorMsg = ref(); //错误提示
const password = ref(""); //密码
const loginType = ref(1); //登陆类型：1-账号密码登陆，2-手机验证码登陆
const fromurl = ref("");
const emit = defineEmits(['refreshInfo','closeLoingModal'])
const login = () => {
  let param = {};
  param.username = name.value;
  param.password = password.value;
  param.loginType = loginType.value;

  //账号验证
  if (!param.username) {
    errorMsg.value = L["请输入账号"];
    return false;
  }

  //密码校验
  if (!param.password) {
    errorMsg.value = L["请输入密码"];
    return false;
  } else {
    let checkPwdVal = checkPwd(param.password);
    if (checkPwdVal !== true) {
      errorMsg.value = checkPwdVal;
      return false;
    }
  }
  post("v3/frontLogin/oauth/token", param).then((res) => {
    if (res.state == 200) {
      //将用户信息存缓存，并跳转到首页
      filtersStore.setLoginStatus(true);
      filtersStore.setToken(res.data.access_token);
      filtersStore.setRefreshToken(res.data.refresh_token)
      filtersStore.setTime(new Date().getTime().toString())//存储refresh_token更新时间
      //获取用户信息，并同步信息到vuex
      get("v3/member/front/member/getInfo").then((res) => {
        if (res.state == 200) {
          emit("refreshInfo");
          filtersStore.setMemberInfo(res.data)
          closeModal();
          if(process.client){
            if (window.history.state.back) {
                if(window.history.state.back == '/register' || window.history.state.back == '/member/login/forget'){
                window.location.href = '/'
                }else{
                window.location.href = window.history.state.back;
                }
            }else{
                window.location.reload()
            }
          }

        }
      });
    } else {
      //提示错误
      errorMsg.value = res.msg;
    }
  });
};

//清空输入框内容
const clearInputVal = (type) => {
  if (type == "name") {
    name.value = "";
  } else if (type == "password") {
    password.value = "";
  }
};



watchEffect(() => {
  if(process.client){
    if (modalVisible.value == false) {
        document.body.style.overflow = "";
    } else {
        fromurl.value = window.location.origin + route.fullPath;
    }
  }

});

//关闭登录modal
const closeModal = () => {
  emit("closeLoingModal");
};
</script>

<style lang="scss">
@use "@/assets/style/loginModal.scss" as *;

.sld_login_modal {
  .el-dialog {
    width: 376px !important;
  }

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__headerbtn {
    z-index: 999;
  }
}

.sld_login_modal {
  .sld_login_content {
    .login {
      .login_box {
        .top {
          .item1 {
            flex: 1;
            text-align: center;
            font-size: 18px;
            color: #666;
            position: relative;
            cursor: default;
          }
        }
      }
    }
  }
}
</style>