feat: 增加登录弹窗组件

xinkeaboard-web/assets/language/en.js

@@ -840,6 +840,13 @@ export const lang_en = {
     humanMachineVerify: {
         '拖动滑块来填充拼图': "Drag the slider to fill the puzzle",
         '刷新': 'Refresh'
+    },
+
+    // 登陆弹窗
+    loginDialog: {
+        '登录': 'Login',
+        '邮箱': 'Email',
+        '密码': 'Password'
     }
 
 };

xinkeaboard-web/assets/language/zh.js

@@ -867,5 +867,12 @@ export const lang_zn = {
     humanMachineVerify: {
         '拖动滑块来填充拼图': "拖动滑块来填充拼图",
         '刷新': '刷新'
+    },
+
+    // 登陆弹窗
+    loginDialog: {
+        '登录': '登录',
+        '邮箱': '邮箱',
+        '密码': '密码'
     }
 };

xinkeaboard-web/components/Home/sourcingForm.vue

@@ -61,12 +61,29 @@ const rules = reactive({
 
 //提交按钮
 const submitForm = async (formEl) => {
+  openLoginDialog({
+          onLogin: (data) => {
+            console.log('登录数据：', data)
+            // 发请求登录等操作
+          },
+          onRegister: () => {
+            console.log('注册点击')
+          },
+          onForgot: () => {
+            console.log('忘记密码点击')
+          },
+          onClose: () => {
+            console.log('弹窗关闭')
+          }
+        })
+        return;
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
       loading.value = true;
       let url = "";
       if (!filtersStore.getLoginFlag) {
+        
         url = apiUrl + "v3/member/front/enquiry/add";
       } else {
         url = apiUrl + "v3/member/front/enquiry/save";

xinkeaboard-web/components/LoginDialog.vue

@@ -0,0 +1,137 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="L['loginDialog']['登录']"
+    width="500px"
+    :before-close="handleClose"
+    align-center
+    modal-class="login-dialog-model"
+  >
+    <div class="login-form">
+      <el-form :model="form" ref="formRef" label-position="top">
+        <el-form-item :label="L['loginDialog']['邮箱']">
+          <el-input v-model="form.email" clearable />
+        </el-form-item>
+
+        <el-form-item class="item-password" :label="L['loginDialog']['密码']">
+          <el-input v-model="form.password" show-password type="password" />
+          <div class="actions">
+            <el-button type="text" @click="onForgotPassword"
+              >{{ L['忘记密码']  }}</el-button
+            >
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="login-bottom">
+      <el-button class="login-btn" @click="onLogin" round>{{ L['loginDialog']['登录']  }}</el-button>
+      <el-button type="default" class="register-btn" @click="onRegister" round
+        >{{ L['注册'] }}</el-button
+      >
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive, defineExpose } from "vue";
+
+const L = getCurLanguage();
+
+
+const visible = ref(false);
+const form = reactive({
+  email: "",
+  password: "",
+});
+
+const emit = defineEmits(["login", "register", "forgot", "close"]);
+
+function open() {
+  visible.value = true;
+}
+
+function close() {
+  visible.value = false;
+}
+
+function handleClose() {
+  close();
+  emit("close");
+}
+
+function onLogin() {
+  emit("login", { ...form });
+  close();
+}
+
+function onRegister() {
+  emit("register");
+  close();
+}
+
+function onForgotPassword() {
+  emit("forgot");
+}
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+.login-dialog-model {
+  .el-dialog__body {
+    padding: 20px 40px;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.login-form {
+  display: flex;
+  justify-content: center;
+
+  :deep(.el-input) {
+    width: 300px;
+  }
+
+  :deep(.el-input__inner) {
+    height: 40px;
+  }
+
+  .item-password {
+    position: relative;
+
+    .actions {
+        position: absolute;
+        right: 0;
+        top: -35px;
+
+        .el-button {
+            color: #606266;
+        }
+    }
+  }
+}
+
+.login-bottom {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  :deep(.el-button) {
+    width: 300px;
+    height: 35px;
+    margin-left: 0;
+    margin-top: 10px;
+  }
+
+  .login-btn {
+    background-color: $colorMain;
+    color: #fff;
+  }
+
+  .register-btn {
+    &:hover {
+      color: $colorMain;
+    }
+  }
+}
+</style>

xinkeaboard-web/composables/useLoginDialog.ts

@@ -0,0 +1,45 @@
+import { createApp, h } from "vue";
+import LoginDialog from "@/components/LoginDialog.vue";
+
+export function openLoginDialog(
+  options: {
+    onLogin?: (data: { username: string; password: string }) => void;
+    onRegister?: () => void;
+    onForgot?: () => void;
+    onClose?: () => void;
+  } = {}
+) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+
+  const app = createApp({
+    render() {
+      return h(LoginDialog, {
+        onLogin: (data: any) => {
+          options.onLogin?.(data);
+          app.unmount();
+          document.body.removeChild(container);
+        },
+        onRegister: () => {
+          options.onRegister?.();
+          app.unmount();
+          document.body.removeChild(container);
+        },
+        onForgot: () => {
+          options.onForgot?.();
+        },
+        onClose: () => {
+          options.onClose?.();
+          app.unmount();
+          document.body.removeChild(container);
+        },
+        ref: "dialog",
+      });
+    },
+    mounted() {
+      this.$refs.dialog.open();
+    },
+  });
+
+  app.mount(container);
+}