vue-pure-admin/src/components/info/index.vue

<template>
  <div class="info">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="rule-form">
      <el-form-item prop="userName">
        <el-input
          clearable
          v-model="ruleForm.userName"
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <el-form-item prop="passWord">
        <el-input
          clearable
          type="password"
          show-password
          v-model="ruleForm.passWord"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>
      <el-form-item prop="verify">
        <el-input
          maxlength="2"
          onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
          v-model.number="ruleForm.verify"
          placeholder="请输入验证码"
        ></el-input>
        <span
          class="verify"
          title="刷新"
          v-html="ruleForm.svg"
          @click.prevent="refreshVerify"
        ></span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.prevent="onBehavior">
          {{ tipsFalse }}
        </el-button>
        <el-button @click="resetForm">重置</el-button>
        <span class="tips" @click="changPage">{{ tips }}</span>
      </el-form-item>
      <span title="测试用户 直接登录" class="secret" @click="noSecret"
        >免密登录</span
      >
    </el-form>
  </div>
</template>

<script lang='ts'>
import {
  ref,
  defineComponent,
  PropType,
  onBeforeMount,
  getCurrentInstance,
  watch,
  nextTick,
} from "vue";
import { storageSession } from "/@/utils/storage";

export interface ContextProps {
  userName: string;
  passWord: string;
  verify: number | null;
  svg: any;
  telephone?: number;
  dynamicText?: string;
}

import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  name: "Info",
  props: {
    ruleForm: {
      type: Object as PropType<ContextProps>,
      require: true,
    },
  },
  emits: ["onBehavior", "refreshVerify"],
  setup(props, ctx) {
    let vm: any;

    let tips = ref("注册");
    let tipsFalse = ref("登录");

    const route = useRoute();
    const router = useRouter();

    watch(
      route,
      async ({ path }, prevRoute: unknown): Promise<void> => {
        await nextTick();
        path.includes("register")
          ? (tips.value = "登录") && (tipsFalse.value = "注册")
          : (tips.value = "注册") && (tipsFalse.value = "登录");
      },
      { immediate: true }
    );

    const rules: Object = ref({
      userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      passWord: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 6, message: "密码长度必须不小于6位", trigger: "blur" },
      ],
      verify: [
        { required: true, message: "请输入验证码", trigger: "blur" },
        { type: "number", message: "验证码必须是数字类型", trigger: "blur" },
      ],
    });

    // 点击登录或注册
    const onBehavior = (evt: Object): void => {
      vm.refs.ruleForm.validate((valid: Boolean) => {
        if (valid) {
          ctx.emit("onBehavior", evt);
        } else {
          return false;
        }
      });
    };

    // 刷新验证码
    const refreshVerify = (): void => {
      ctx.emit("refreshVerify");
    };

    // 表单重置
    const resetForm = (): void => {
      vm.refs.ruleForm.resetFields();
    };

    // 登录、注册页面切换
    const changPage = (): void => {
      tips.value === "注册" ? router.push("/register") : router.push("/login");
    };

    const noSecret = (): void => {
      storageSession.setItem("info", {
        username: "测试用户",
        accessToken: "eyJhbGciOiJIUzUxMiJ9.test",
      });
      router.push("/");
    };

    onBeforeMount(()=>{
      vm = getCurrentInstance(); //获取组件实例
    })

    return {
      rules,
      tips,
      tipsFalse,
      resetForm,
      onBehavior,
      refreshVerify,
      changPage,
      noSecret,
    };
  },
});
</script>

<style lang="scss" scoped>
.info {
  width: 30vw;
  height: 48vh;
  background: url("../../assets/login.png") no-repeat center;
  background-size: cover;
  position: absolute;
  border-radius: 20px;
  right: 100px;
  top: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
  @media screen and (max-width: 750px){
    width: 88vw;
    right: 25px;
    top: 22vh;
  }
  .rule-form {
    width: 80%;
    .verify {
      position: absolute;
      margin: -10px 0 0 -120px;
      &:hover {
        cursor: pointer;
      }
    }
    .tips {
      color: #409eff;
      float: right;
      &:hover {
        cursor: pointer;
      }
    }
  }
  .secret {
    color: #409eff;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>