4pc/src/view/login.vue

<template>
  <div class="system-layer" :style="{ backgroundImage: `url('/image/Frame 208@2x.png')` }">
    <div class="l-content">
      <div class="login-layer">
        <div class="content">
          <div class="info">
            <div class="top">
              <img src="/image/logo@2x.png" />
            </div>
            <div class="center">
              <h1>不可移动文物管理平台</h1>
              <p>
                <img src="/image/logo.png" />
              </p>
            </div>
            <div class="bottom">
              <div class="abr-info">
                <p>Android版</p>
                <div class="e-code">
                  <span v-html="qrUrl"></span>
                  <div class="e-logo">
                    <img src="/image/e-code.png" />
                  </div>
                </div>
                <p class="desc">扫描安装文保1号App</p>
              </div>
              <img class="code" src="/image/pic_camera@2x.png" />
            </div>
          </div>
          <!-- login right panel -->
          <template v-if="currentStatus(0)">
            <el-form class="panel login" :model="form" @submit.stop>
              <h2>欢迎登录</h2>
              <el-form-item class="panel-form-item">
                <p class="err-info">{{ verification.phone }}</p>
                <el-input :maxlength="11" v-model.trim="form.phone" placeholder="手机号"
                  @keydown.enter="submitClick"></el-input>
              </el-form-item>
              <el-form-item class="panel-form-item">
                <p class="err-info">{{ verification.psw }}</p>
                <el-input v-model="form.psw" :maxlength="16" placeholder="密码" :type="flag ? 'text' : 'password'"
                  @keydown.enter="submitClick">
                  <template v-slot:suffix>
                    <el-icon :size="20" @click="flag = !flag" class="icon-style">
                      <View v-if="flag" />
                      <Hide v-else />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item class="panel-form-item" style="user-select: none">
                <DragVerify ref="verify" :class="{ passing: isPassing2 }" :isPassing="isPassing2"
                  @passcallback="isPassing2 = true" handlerIcon="el-icon-d-arrow-right" background="#D9D9D9"
                  textColor="#333333" successIcon="el-icon-circle-check" :text="isPassing2 ? '已通过验证' : '登录需要拖拽验证'"
                  successText="验证通过" :width="400">
                  <template v-slot:handlerIcon>
                    <el-icon :size="20" style="
                      width: 20px;
                      display: inline-block;
                      line-height: 20px;
                      margin-top: 8px;
                    ">
                      <DArrowRight v-if="!isPassing2" />
                      <SuccessFilled v-else />
                    </el-icon>
                  </template>
                </DragVerify>
              </el-form-item>

              <el-form-item class="panel-form-item">
                <el-button type="primary" class="fill submit" @click="submitClick">登录</el-button>
              </el-form-item>

              <div class="register">
                <span @click="handleForgetPassword"> 忘记密码</span> |
                <span @click="handleRegister"> 单位注册</span>
              </div>
            </el-form>
          </template>
          <template v-if="currentStatus(1)">
            <register @done="goTologin"></register>
          </template>
          <template v-if="currentStatus(2)">
            <reset @done="goTologin"></reset>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch, ref, computed } from "vue";
import { View, Hide, DArrowRight, SuccessFilled } from "@element-plus/icons-vue";
import { login } from "@/store/user";
import { ElMessage } from "element-plus";
import { router } from "@/router";
import qrCode from "qrcode";
import DragVerify from "@/components/drag-verify.vue";
import register from '@/view/register/register.vue'
import reset from '@/view/register/reset.vue'
const PHONE = {
  REG: /^1(3|4|5|6|7|8|9)\d{9}$/,
  // REG: /^((13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8})|(8){11}$/,
  tip: "手机号格式不正确！",
};
// 是否显示明文密码
const flag = ref(false);
const verify = ref<any>();
const isPassing2 = ref(false);

const registerStatus = ref(0);
const currentStatus = computed(() => (status: number) => status === registerStatus.value)
// 表单
const form = reactive({
  phone: import.meta.env.DEV ? "13800000001" : "",
  psw: import.meta.env.DEV ? "88888888Sw" : "",
});
const verification = reactive({ phone: "", psw: "" });

const fromVerification = (verification: { phone: string; psw: string }) => {
  if (!form.phone) {
    verification.phone = "请输入手机号";
  } else if (["88888888888", "99999999999"].includes(form.phone)) {
    verification.phone = "";
  } else {
    verification.phone = PHONE.REG.test(form.phone) ? "" : PHONE.tip;
  }
  if (!form.psw) {
    verification.psw = "请输入密码";
  } else {
    verification.psw = "";
  }
};

watch(
  form,
  () => {
    const currentVerification = { phone: "", psw: "" };
    fromVerification(currentVerification);

    if (!currentVerification.phone) {
      verification.phone = "";
    }
    if (!currentVerification.psw) {
      verification.psw = "";
    }
  },
  { immediate: true }
);

const qrUrl = ref<string>();
qrCode.toString(
  `${location.origin}/android-download/app-download.html`,
  { type: "svg", width: 128, margin: 0, errorCorrectionLevel: "L" },
  (_, url) => {
    qrUrl.value = url;
  }
);

// 表单提交
const submitClick = async () => {
  fromVerification(verification);
  if (verification.phone && verification.phone !== "88888888888") {
    return ElMessage.error(verification.phone);
  }
  if (verification.psw) return ElMessage.error(verification.psw);

  if (!isPassing2.value) {
    return ElMessage.error("登录需要拖拽验证");
  }
  try {
    await login({ phoneNum: form.phone, password: form.psw });
    router.replace("scene");
  } catch (e) {
    console.error(e);
  }
  verify.value.reset();
  isPassing2.value = false;
};

// 忘记密码
const handleForgetPassword = () => {
  registerStatus.value = 2
}
// 注册
const handleRegister = () => {
  registerStatus.value = 1
}
// 业务回到login
const goTologin = () => {
  registerStatus.value = 0
}


</script>

<style lang="scss" scoped>
.login-layer {
  width: 100%;
  height: 100%;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  max-width: 1620px;
  height: 100vh;
  padding: 0 50px 0 50px;
}

.info {
  color: #000;
  flex: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 800px;
  height: 100vh;
  flex: 1;
  margin-right: 10%;

  .top {
    margin-top: 50px;

    img {
      width: 142px;
    }
  }

  .bottom {
    height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;

    .code {
      height: 100%;
      flex: none;
    }

    .abr-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      p:first-child {
        font-size: 20px;
        line-height: 32px;
        color: #93795d;
        padding-left: 32px;
        position: relative;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 32px;
          height: 32px;
          background: url("/image/Android@2x.png") no-repeat center center;
          background-size: 100% 100%;
        }
      }

      .e-code {
        width: 128px;
        margin-top: 13px;
        position: relative;

        >img {
          width: 100%;
        }

        .e-logo {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 40px;
          height: 40px;
          transform: translate(-50%, -50%);
          padding: 7px;
          border-radius: 4px;
          text-align: center;

          img {
            height: 100%;
            width: 100%;
            background-size: cover;
          }
        }
      }

      p:last-child {
        font-weight: 400;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }

  .center {
    text-align: center;

    h1 {
      color: #781c0b;
      font-size: 48px;
      line-height: 3.7rem;
      margin-bottom: 0.7rem;
    }

    p {
      width: 100%;
      margin-top: 40px;

      img {
        width: 320px;
      }
    }
  }
}

.top-text {
  margin-bottom: 50px;
  pointer-events: none;
  height: 153px;
  min-width: 1200px;

  img {
    position: absolute;
    right: 0;
  }
}

.fill {
  width: 100%;
}

.login {
  width: 400px;
  // padding: 40px 40px 30px;
  position: relative;
  display: inline-block;
  flex: none;

  h2 {
    padding-left: 0;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 24px;

    span {
      color: #646566;
      font-size: 1.33rem;
      margin-top: 0.71rem;
      display: block;
    }
  }

  .panel-form-item {
    padding-left: 0;
    padding-right: 0;

    .icon-style {
      margin-right: 14px;
      font-size: 20px;
      line-height: 50px;
    }
  }

  .more a:first-child::after {
    content: "";
    position: absolute;
    right: -5px;
    width: 1px;
    height: 8px;
    background: #dcdee0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.code-img {
  width: 100%;
  height: 100%;
  // object-fit: cover;
}

.system-layer {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: no-repeat left bottom;
  background-size: auto 100%;
}

.l-content {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: flex-start;
}

.register {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: center;

  span {
    padding: 0 10px;
  }
}
</style>

<style>
.login .code-form-item .el-input {
  display: flex;
}

.login .code-form-item .el-input-group__append {
  flex: none;
  margin-left: 10px;
  width: 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.login .code-form-item .el-input__inner {
  flex: 1;
}

.login .code-form-item .el-input-group__append,
.login .code-form-item .el-input__inner {
  border-radius: 4px;
}

input[type="password"]::-ms-reveal {
  display: none;
}

.panel {
  /* background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 20px 0px rgba(5, 38, 38, 0.15);
  border-radius: 10px; */
  width: 400px;
  /* padding: 30px 0 40px; */
  text-align: initial;

  h2 {
    font-weight: bold;
    font-size: 30px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 2.14rem;
    padding-left: 60px;
    padding-bottom: 20px;
  }

  .panel-form-item {
    position: relative;
    padding-bottom: 24px;
    margin: 0;
    padding-left: 90px;
    padding-right: 90px;

    &.remember {
      padding: 0;
    }

    .err-info {
      position: absolute;
      top: 100%;
      left: 0;
      margin: 0;
      font-size: 0.8rem;
      line-height: 1.14rem;
      color: #fa5555;
    }
  }

  .more {
    text-align: center;

    a {
      color: #323233;
      line-height: 21px;
      font-size: 16px;
      margin: 0 5px;
      position: relative;
      text-decoration: none;
      cursor: pointer;
    }
  }
}

.panel-form-item .el-select {
  width: 100%;
}

.panel-form-item .el-button,
.panel-form-item .el-input__inner {
  height: 40px;
  font-size: 1.14rem;
}

.panel-form-item .el-button {
  line-height: 26px;
  font-weight: bold;
  font-size: 16px;
}

.panel-form-item .el-form-item__label {
  line-height: 50px;
}

.e-code img {
  width: 100%;
}

.submit {
  --el-color-primary: #93795d;
  --el-button-hover-border-color: #93795d;
  --el-button-hover-bg-color: #93795d;
  --el-button-active-bg-color: #93795d;
  --el-button-active-border-color: #93795d;
}

.drag_verify {
  border: 1px solid #dcdfe6;
}

.register span {
  cursor: pointer;
}
</style>