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-[#075985] 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.trim="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.trim="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">
        <el-link type="primary" :underline="false">联系客服</el-link>
        <div class="flex justify-around">
          <el-link class="mr-4" type="primary" :underline="false"  @click="useHelp()">使用说明</el-link>
          <el-link type="primary" :underline="false" @click="toRegister()">企业注册</el-link>
        </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, inject } 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 { type FormInstance, type FormRules } from 'element-plus'
import { useStore } from '@/store/index'
import { post } from "@/utils/request";
import { LOGIN } from "./api";
const { setRouters, setValue } = useStore()
const router = useRouter();
const globalPopup = inject<GlobalPopup>('globalPopup')
const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
  username: "18122222222",
  password: "000000",
});
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: boolean) => {
    if (!valid) {
      return false as any;
    }
    loginLoading.value = true;
    post(LOGIN, { ...ruleForm.value }).then(res => {
      if(res.code == 'error') {
        globalPopup?.showError(res.msg)
        loginLoading.value = false;
        return
      }
      globalPopup?.showSuccess('登录成功')
      sessionStorage.setItem('token', res.data.id)
      setValue(res.data, 'userInfo')
      // 将数据分析放到第一位
      const index = res.data?.moduleList.findIndex((obj: any) => obj.path === '/analysis');
      if (index !== -1) {
        const item = res.data?.moduleList.splice(index, 1)[0];
        res.data?.moduleList.unshift(item);
      }
      console.log(res.data?.moduleList)
      setValue(res.data?.moduleList, 'routers')
      setTimeout(() => {
        loginLoading.value = false;
        // router.push(res.data?.moduleList[0].path);
        router.push('/analysis');
      }, 100)
    }).catch(_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>