feat: 我的询盘页面调整以及接口调试

xinkeaboard-web/assets/language/en.js

@@ -846,7 +846,8 @@ export const lang_en = {
     loginDialog: {
         '登录': 'Login',
         '邮箱': 'Email',
-        '密码': 'Password'
+        '密码': 'Password',
+        '登录成功': 'Login successful'
     }
 
 };

xinkeaboard-web/assets/language/zh.js

@@ -873,6 +873,7 @@ export const lang_zn = {
     loginDialog: {
         '登录': '登录',
         '邮箱': '邮箱',
-        '密码': '密码'
+        '密码': '密码',
+        '登录成功': '登录成功'
     }
 };

xinkeaboard-web/components/Home/sourcingForm.vue

@@ -1,55 +1,94 @@
 <template>
-    <div class="form">
-        <el-form :model="form"   ref="ruleFormRef"  status-icon  :rules="rules" >
-            <el-form-item prop="name">
-                <el-input v-model="form.name"   :placeholder="L['请输入姓名']"/>
-            </el-form-item>
-            <el-form-item prop="email">
-                <el-input v-model="form.email"   :placeholder="L['请输入邮箱']"/>
-            </el-form-item>
-            <el-form-item prop="quantity">
-                <el-input v-model="form.quantity"  min="0" type="number"  :placeholder="L['请输入数量']"/>
-            </el-form-item>
-            <el-form-item prop="message">
-                <el-input v-model="form.message" type="textarea" :rows="5" :placeholder="L['请输入留言']" />
-            </el-form-item>
-            
-            <el-form-item>
-                <el-col :span="12">
-                    <el-button type="primary" class="self-btn" :loading="loading" block  @click="submitForm(ruleFormRef)">{{L['立即发布您的需求']}}</el-button>
-                </el-col>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="form">
+    <el-form :model="form" ref="ruleFormRef" status-icon :rules="rules">
+      <el-form-item prop="name">
+        <el-input v-model="form.name" :placeholder="L['请输入姓名']" />
+      </el-form-item>
+      <el-form-item prop="email">
+        <el-input v-model="form.email" :placeholder="L['请输入邮箱']" />
+      </el-form-item>
+      <el-form-item prop="quantity">
+        <el-input
+          v-model="form.quantity"
+          min="0"
+          type="number"
+          :placeholder="L['请输入数量']"
+        />
+      </el-form-item>
+      <el-form-item prop="message">
+        <el-input
+          v-model="form.message"
+          type="textarea"
+          :rows="5"
+          :placeholder="L['请输入留言']"
+        />
+      </el-form-item>
+
+      <el-form-item>
+        <el-col :span="12">
+          <el-button
+            type="primary"
+            class="self-btn"
+            :loading="loading"
+            block
+            @click="submitForm(ruleFormRef)"
+            >{{ L["立即发布您的需求"] }}</el-button
+          >
+        </el-col>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script setup>
-import { ElForm,ElFormItem,ElButton,ElSelect,ElOption,ElInput,ElCol,ElMessage } from 'element-plus';
+import {
+  ElForm,
+  ElFormItem,
+  ElButton,
+  ElSelect,
+  ElOption,
+  ElInput,
+  ElCol,
+  ElMessage,
+} from "element-plus";
 import { useFiltersStore } from "@/store/filter.js";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
 const filtersStore = useFiltersStore();
 const L = getCurLanguage();
-const loading = ref(false)
+const loading = ref(false);
 const ruleFormRef = ref(null);
 
 // do not use same name with ref
 const form = reactive({
-    name: '',
-    message: '',
-    email:'',
-    quantity:''
-})
+  name: "",
+  message: "",
+  email: "",
+  quantity: "",
+});
 
-if(filtersStore.getMemberInfo.memberEmail){
-  form.email = filtersStore.getMemberInfo.memberEmail
-}
-if(filtersStore.getMemberInfo.memberNickName || filtersStore.getMemberInfo.memberName){
-  form.name = filtersStore.getMemberInfo.memberNickName || filtersStore.getMemberInfo.memberName
-}
+const email = computed(() => filtersStore.getMemberInfo.memberEmail ?? "");
+const name = computed(
+  () =>
+    filtersStore.getMemberInfo.memberNickName ||
+    filtersStore.getMemberInfo.memberName
+);
 
+const checkEmailFun = (rule, value, callback) => {
+  if (checkEmail(value) !== true) {
+    callback(new Error(checkEmail(value)));
+  }
+  callback();
+};
 
 const rules = reactive({
   name: [{ required: true, message: L["请输入姓名"], trigger: "blur" }],
   quantity: [{ required: true, message: L["请输入数量"], trigger: "blur" }],
-  email: [{ required: true, message: L["请输入邮箱"], trigger: "blur" }],
+  email: [
+    { required: true, message: L["请输入邮箱"], trigger: "blur" },
+    { validator: checkEmailFun, trigger: "blur" },
+  ],
   message: [
     {
       required: true,
@@ -59,42 +98,55 @@ const rules = reactive({
   ],
 });
 
+// 设置表单缓存
+const setFormData2Cache = () => {
+  localStorage.setItem("quotations", JSON.stringify(form));
+};
+
+// 删除表单缓存
+const clearFormDataFromCache = () => {
+  localStorage.removeItem("quotations");
+};
+
+// 获取表单缓存
+const getFormDataFromCache = () => {
+  const data = localStorage.getItem("quotations") ?? "";
+  try {
+    return JSON.parse(data);
+  } catch {
+    return undefined;
+  }
+};
+
 //提交按钮
 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 = "";
+      setFormData2Cache();
+      let url = apiUrl + "v3/member/front/enquiry/save";
       if (!filtersStore.getLoginFlag) {
-        
-        url = apiUrl + "v3/member/front/enquiry/add";
-      } else {
-        url = apiUrl + "v3/member/front/enquiry/save";
+        return openLoginDialog({
+          onRegister: () => {
+            router.push({
+              path: "/register",
+            });
+          },
+          onForgot: () => {
+            router.push({
+              path: "/member/login/forget",
+            });
+          },
+        });
       }
+      loading.value = true;
       form.pageUrl = window.location.href;
-      form.itemType = 'MALL';
+      form.itemType = "MALL";
       post(url, form).then((res) => {
         loading.value = false;
         if (res.state == 200) {
           ElMessage.success(res.msg);
-
+          clearFormDataFromCache();
         } else {
           ElMessage.error(res.msg);
         }
@@ -104,16 +156,30 @@ const submitForm = async (formEl) => {
     }
   });
 };
+
+onMounted(() => {
+  if (getFormDataFromCache() !== undefined) {
+    const data = getFormDataFromCache();
+    form.email = data.email;
+    form.name = data.name;
+    form.message = data.message;
+    form.quantity = data.quantity;
+  } else {
+    form.email = email.value;
+    form.name = name.value;
+  }
+});
 </script>
 
 <style lang="scss">
-    .self-btn{
-        width: 100%;
-        background: #00985E;
-    }
+.self-btn {
+  width: 100%;
+  background: #00985e;
+}
 
-    .self-btn:focus, .self-btn:hover {
-        border-color: #1ba66c;
-        background-color: #1ba66c;
-    }
+.self-btn:focus,
+.self-btn:hover {
+  border-color: #1ba66c;
+  background-color: #1ba66c;
+}
 </style>

xinkeaboard-web/components/LoginDialog.vue

@@ -8,25 +8,44 @@
     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
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-position="top"
+      >
+        <el-form-item :label="L['loginDialog']['邮箱']" prop="email">
+          <el-input v-model="ruleForm.email" clearable />
         </el-form-item>
 
-        <el-form-item class="item-password" :label="L['loginDialog']['密码']">
-          <el-input v-model="form.password" show-password type="password" />
+        <el-form-item
+          class="item-password"
+          :label="L['loginDialog']['密码']"
+          prop="password"
+        >
+          <el-input v-model="ruleForm.password" show-password type="password" />
           <div class="actions">
-            <el-button type="text" @click="onForgotPassword"
-              >{{ L['忘记密码']  }}</el-button
-            >
+            <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
+      <el-button
+        class="login-btn"
+        :loading="loginLoading"
+        @click="onLogin"
+        round
+        >{{ L["loginDialog"]["登录"] }}</el-button
+      >
+      <el-button
+        type="default"
+        class="register-btn"
+        @click="onRegister"
+        round
+        >{{ L["注册"] }}</el-button
       >
     </div>
   </el-dialog>
@@ -34,44 +53,127 @@
 
 <script setup>
 import { ref, reactive, defineExpose } from "vue";
+import { getCurLanguage, checkEmail } from "@/composables/common.js";
+import { useFiltersStore } from "@/store/filter.js";
+
+const filtersStore = useFiltersStore();
 
 const L = getCurLanguage();
 
+const emit = defineEmits(["login", "register", "forgot", "close"]);
 
 const visible = ref(false);
-const form = reactive({
+const loginLoading = ref(false);
+
+const ruleFormRef = ref();
+
+const ruleForm = reactive({
   email: "",
   password: "",
 });
 
-const emit = defineEmits(["login", "register", "forgot", "close"]);
+const checkEmailFun = (rule, value, callback) => {
+  if (checkEmail(value) !== true) {
+    callback(new Error(checkEmail(value)));
+  }
+  callback();
+};
+
+const rules = reactive({
+  email: [
+    { required: true, message: L["请输入邮箱"], trigger: "blur" },
+    { validator: checkEmailFun, trigger: "blur" },
+  ],
+  password: [
+    {
+      required: true,
+      message: L["请输入密码"],
+      trigger: "change",
+    },
+  ],
+});
 
-function open() {
+const open = () => {
   visible.value = true;
-}
+};
 
-function close() {
+const close = () => {
   visible.value = false;
-}
+};
 
-function handleClose() {
+// 关闭弹窗
+const handleClose = () => {
   close();
   emit("close");
-}
-
-function onLogin() {
-  emit("login", { ...form });
-  close();
-}
+};
+
+const login = () => {
+  loginLoading.value = true;
+  post("v3/frontLogin/oauth/token", {
+    username: ruleForm.email,
+    password: ruleForm.password,
+    loginType: 1,
+  })
+    .then((res) => {
+      if (res.state == 200) {
+        //将用户信息存缓存，并跳转到首页
+        filtersStore.setLoginStatus(true);
+        filtersStore.setToken(res.data.access_token);
+        filtersStore.setRefreshToken(res.data.refresh_token);
+        filtersStore.setTime(new Date().getTime().toString()); //存储refresh_token更新时间
+        //获取用户信息，并同步信息到pinia
+        return res;
+      }
+      showMessage({
+        message: res.msg,
+        type: "error",
+      });
+
+      return Promise.reject();
+    })
+    .then(() => {
+      return get("v3/member/front/member/getInfo");
+    })
+    .then((res) => {
+      if (res.state == 200) {
+        filtersStore.setMemberInfo(res.data);
+        showMessage({
+          message: L['loginDialog']['登录成功'],
+          type: "success",
+        });
+        close()
+      } else {
+        showMessage({
+          message: res.msg,
+          type: "error",
+        });
+      }
+    })
+    .finally(() => {
+      loginLoading.value = false;
+    });
+};
+
+// 登陆操作
+const onLogin = async () => {
+  if (!ruleFormRef.value) return;
+  await ruleFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      return login();
+    }
+  });
+};
 
-function onRegister() {
+// 注册
+const onRegister = () => {
   emit("register");
   close();
-}
+};
 
-function onForgotPassword() {
+// 忘记密码
+const onForgotPassword = () => {
   emit("forgot");
-}
+};
 
 defineExpose({ open });
 </script>
@@ -93,20 +195,20 @@ defineExpose({ open });
   }
 
   :deep(.el-input__inner) {
-    height: 40px;
+    height: 35px;
   }
 
   .item-password {
     position: relative;
 
     .actions {
-        position: absolute;
-        right: 0;
-        top: -35px;
+      position: absolute;
+      right: 0;
+      top: -35px;
 
-        .el-button {
-            color: #606266;
-        }
+      .el-button {
+        color: #606266;
+      }
     }
   }
 }

xinkeaboard-web/components/NavTopBar.vue

@@ -95,8 +95,8 @@ const router = useRouter();
 const route = useRoute()
 // const L = lang_zn;
 const filtersStore = useFiltersStore();
-const loginFlag = filtersStore.getLoginFlag;
-const memberInfo = filtersStore.getMemberInfo;
+const loginFlag = computed(() => filtersStore.getLoginFlag)
+const memberInfo = computed(() => filtersStore.getMemberInfo);
 const L = getCurLanguage();
 
 // 判断当前页面是否为注册页面
@@ -148,7 +148,7 @@ const loginOut = async () => {
   filtersStore.setToken("");
   filtersStore.setRefreshToken("");
   filtersStore.setTime(new Date().getTime().toString()); //存储refresh_token更新时间
-  window.location.reload();
+  // window.location.reload();
 };
 
 

xinkeaboard-web/components/enquiryModal.vue

@@ -169,13 +169,22 @@ const submitForm = async (formEl) => {
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
-      loading.value = true;
-      let url = ''
+      const url = apiUrl + "v3/member/front/enquiry/save";
       if (!filtersStore.getLoginFlag) {
-        url = apiUrl + "v3/member/front/enquiry/add";
-      } else {
-        url = apiUrl + "v3/member/front/enquiry/save";
+        return openLoginDialog({
+          onRegister: () => {
+            router.push({
+              path: "/register",
+            });
+          },
+          onForgot: () => {
+            router.push({
+              path: "/member/login/forget",
+            });
+          },
+        });
       }
+      loading.value = true;
       let d = {}
       d = Object.assign({},form) 
 

xinkeaboard-web/composables/index.js

@@ -1,8 +1,8 @@
 // 测试环境
-export const apiUrl = 'http://54.46.9.88:8001/';
+// export const apiUrl = 'http://54.46.9.88:8001/';
 
 // 本地后端
-// export const apiUrl = 'http://192.168.0.158:8001/';
+export const apiUrl = 'http://192.168.0.158:8001/';
 
 export const defaultUrl = 'http://54.46.9.88:8001/';
 export const supplierUrl = 'http://54.46.9.88:82/user/login';

xinkeaboard-web/composables/useLoginDialog.ts

@@ -27,17 +27,19 @@ export function openLoginDialog(
         },
         onForgot: () => {
           options.onForgot?.();
+          app.unmount();
+          document.body.removeChild(container);
         },
         onClose: () => {
           options.onClose?.();
           app.unmount();
           document.body.removeChild(container);
         },
-        ref: "dialog",
+        ref: "loginDialog",
       });
     },
     mounted() {
-      this.$refs.dialog.open();
+      this.$refs.loginDialog.open();
     },
   });
 

xinkeaboard-web/pages/login.vue

@@ -215,8 +215,11 @@ const login = () => {
           if (res.state == 200) {
             filtersStore.setMemberInfo(res.data);
             if (window.history.state.back) {
+              router.replace({
+                path: '/'
+              })
               // if(window.history.state.back == '/register' || window.history.state.back == '/member/login/forget' || window.history.state.back == '/member/login/forget' || window.history.state.back == '/member/login/forget'){
-              window.location.href = "/";
+              // window.location.href = "/";
               // }else{
               //   window.location.href = window.history.state.back;
               // }

xinkeaboard-web/pages/member/enquiry/list.vue

@@ -21,32 +21,6 @@
       </div>
 
       <div class="point_list">
-        <!-- <table class="point_table">
-          <tbody>
-            <tr class="voucher_tabeltitle">
-              <th>{{ L["序号"] }}</th>
-              <th>{{ L["姓名"] }}</th>
-              <th>{{ L["邮箱"] }}</th>
-              <th>{{ L["电话"] }}</th>
-              <th>{{ L["公司"] }}</th>
-              <th>{{ L["内容"] }}</th>
-              <th>{{ L["发送时间"] }}</th>
-              <th class="oprate">{{ L["操作"] }}</th>
-            </tr>
-            <tr v-for="(item, index) in enquiryList.list" :key="index">
-              <td>{{ index + 1 }}</td>
-              <td>{{ item.name }}</td>
-              <td>{{ item.email }}</td>
-              <td>{{ item.phoneCode }}-{{ item.phone }}</td>
-              <td>{{ item.company }}</td>
-              <td>{{ item.message }}</td>
-              <td>{{ item.createTime }}</td>
-              <td>
-
-              </td>
-            </tr>
-          </tbody>
-        </table> -->
         <el-table :data="enquiryList.list" style="width: 100%">
 
           <el-table-column :label="L['序号']" type="index" :index="indexMethod" width="80"/>
@@ -216,7 +190,7 @@ const getEnquiryList = () => {
   }
   get("v3/member/front/enquiry/list", params).then((res) => {
     if (res.state == 200) {
-      enquiryList.list = res.data.list;
+      enquiryList.list = res.data.list.filter(item => item.itemType !== 'MALL');
       pageData.page = res.data.pagination;
     }
   });