manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/login.vue

<template>
  <div class="loginView w-screen h-screen overflow-hidden flex">
    <div class="w-96 bg-white m-auto border-t-8 border-blue-400 shadow-xl rounded-md pl-9 pr-9">
      <div class="m-auto pt-4">
        <img class="w-1/5 h-1/5 m-auto" :src="loginLogo" alt="">
      </div>
      <h2 class="text-xl text-center pt-4 font-bold">客户管家</h2>
      <el-form class="pt-4" ref="ruleFormRef" :model="ruleForm" :rules="rules">
        <el-form-item prop="username">
          <el-input clearable :prefix-icon="UserFilled" size="large" class="mt-2" v-model="ruleForm.username"
            autocomplete="off" placeholder="账号/手机号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input clearable :prefix-icon="Lock" show-password size="large" class="mt-4" v-model="ruleForm.password"
            autocomplete="off" placeholder="密码" />
        </el-form-item>
        <div class="pt-4">
          <el-button type="primary" size="large" class="w-full" :loading="loginLoading"
            @click="login(ruleFormRef)">登录</el-button>
        </div>
      </el-form>
      <el-divider content-position="center">或</el-divider>
      <div class="m-auto mb-5">
        <img class="w-9 m-auto p-1 rounded-full border-blue-300 border-2 cursor-pointer" :src="qiyeweixin" alt="">
      </div>
      <div class="flex justify-between pb-5">
        <div class="cursor-pointer text-blue-400 hover:text-blue-300">联系客服</div>
        <div class="flex justify-around">
          <div class="mr-4 cursor-pointer text-blue-400 hover:text-blue-300" @click="useHelp()">使用说明</div>
          <div class="cursor-pointer text-blue-400 hover:text-blue-300" @click="toRegister()">企业注册</div>
        </div>
      </div>
      <el-dialog v-model="helpDialog" width="30%" title="使用说明">
        <div class="p-2 text-xl">文档水水水水</div>
        <div>文档水水水水</div>
        <div>文档水水水水</div>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import loginLogo from "@/assets/login/login_logo.png";
import qiyeweixin from "@/assets/login/qiyeweixin.png";
import { UserFilled, Lock } from '@element-plus/icons-vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useStore } from '@/store/index'
import { post } from "@/utils/request";
import { LOGIN } from "./api";
const { setRouters } = useStore()
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
  username: "",
  password: "",
});
const loginLoading = ref(false);
const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ required: true, trigger: "blur", message: "请输入账号/手机号" }],
  password: [{ required: true, trigger: "blur", message: "请输入密码" }],
})
const helpDialog = ref(false);

const login = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return
  }
  formEl.validate((valid) => {
    if (!valid) {
      return false;
    }
    loginLoading.value = true;
    console.log(ruleForm.value);
    post(LOGIN, { ...ruleForm.value }).then(res => {
      console.log(res);
      if(res.code == 'error') {
        ElMessage.error({
          message: "登录失败",
          type: "error",
          duration: 2000,
        })
        loginLoading.value = false;
        return
      }
      ElMessage.success({
        message: "登录成功",
        type: "success",
        duration: 2000,
      })
      setTimeout(() => {
        loginLoading.value = false;
      }, 1000)
      // loginLoading.value = false;
    }).catch(err => {
      console.log(err);
      loginLoading.value = false;
    })
    return
    let newRouter = [
      {
        path: '/thread',
        name: 'thread'
      }
    ]
    setRouters(newRouter)
    setTimeout(() => {
      loginLoading.value = false;
      router.push(newRouter[0].path);
    }, 1000);
  })

};
const useHelp = () => {
  helpDialog.value = true;
}
const toRegister = () => {
  router.push("/register");
}
</script>

<style lang="scss" scoped>
.loginView {
  background: #f0f2f5 url("../assets/login/background.png") no-repeat;
}
</style>