Browse Source

feat(login): 新增客户编号登录功能并优化搜索页品牌显示

- 新增客户编号登录类型,支持客户编号+联系人登录名称+密码的登录方式
- 更新登录表单验证规则,添加客户编号和登录名称字段验证
- 调整登录页面布局样式以适配新的登录类型
- 搜索页面品牌列表新增更多按钮,支持查看全部品牌
- 修改导航数据获取接口参数,统一使用空字符串作为页面类型参数
- 更新开发环境API代理地址配置
肖路 2 tuần trước cách đây
mục cha
commit
48040fb9cd

+ 2 - 0
src/api/types.ts

@@ -29,6 +29,8 @@ export interface LoginData {
   mobile?: string;
   smsCode?: string;
   phonenumber?: string;
+  customerNo?: string;
+  loginName?: string;
 }
 
 /**

+ 1 - 1
src/layout/components/foot.vue

@@ -71,7 +71,7 @@ const bottomNavList = ref<any[]>([]);
 // 获取底部导航数据
 const fetchBottomNav = async () => {
   try {
-    const res = await getBottomNav('footer'); // 使用 footer 作为页面类型参数
+    const res = await getBottomNav(''); // 使用 footer 作为页面类型参数
     if (res.code == 200 && res.data) {
       // 后端返回的是扁平列表,使用 handleTree 转换为树形结构
       // parentId 为 0、null 或 undefined 的是父级节点

+ 1 - 1
src/layout/components/header.vue

@@ -155,7 +155,7 @@ const onlogout = () => {
 // 获取头部导航数据
 const fetchHeaderNav = async () => {
   try {
-    const res = await getHeaderNav('header'); // 使用 header 作为页面类型参数
+    const res = await getHeaderNav(''); // 使用 header 作为页面类型参数
     if (res.code == 200 && res.data) {
       headerNavList.value = res.data;
     }

+ 60 - 8
src/views/login.vue

@@ -4,12 +4,14 @@
       <img @click="onPath('/')" class="head" src="@/assets/images/head.png" alt="" />
       <div class="login-info flex-row-between">
         <div></div>
-        <div class="login-bos">
+        <div class="login-bos" :class="{ 'customer-login': type === 3 }">
           <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
             <div class="login-type flex-row-between">
               <div :class="type == 1 ? 'hig' : ''" @click="onType(1)">账户登录</div>
-              <div class="border"></div>
+              <span class="separator">|</span>
               <div :class="type == 2 ? 'hig' : ''" @click="onType(2)">验证码登录</div>
+              <span class="separator">|</span>
+              <div :class="type == 3 ? 'hig' : ''" @click="onType(3)">客户编号登录</div>
             </div>
             <template v-if="type == 1">
               <el-form-item prop="username">
@@ -27,7 +29,7 @@
                 </el-input>
               </el-form-item>
             </template>
-            <template v-else>
+            <template v-else-if="type == 2">
               <el-form-item prop="mobile">
                 <el-input :maxlength="11" class="login-input" v-model="loginForm.mobile" placeholder="手机号">
                   <template #prefix>
@@ -48,6 +50,29 @@
                 </el-input>
               </el-form-item>
             </template>
+            <template v-else>
+              <el-form-item prop="customerNo">
+                <el-input class="login-input" v-model="loginForm.customerNo" placeholder="客户编号">
+                  <template #prefix>
+                    <el-icon><User /></el-icon>
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="loginName">
+                <el-input class="login-input" v-model="loginForm.loginName" placeholder="联系人登录名称">
+                  <template #prefix>
+                    <el-icon><User /></el-icon>
+                  </template>
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="password">
+                <el-input class="login-input" type="password" v-model="loginForm.password" placeholder="输入登录密码" @keyup.enter="handleLogin">
+                  <template #prefix>
+                    <el-icon><Lock /></el-icon>
+                  </template>
+                </el-input>
+              </el-form-item>
+            </template>
             <el-form-item>
               <el-button class="login-btn" type="primary" :loading="loading" @click.prevent="handleLogin">
                 <span v-if="!loading">登录</span>
@@ -112,20 +137,30 @@ const loginForm = ref<LoginData>({
   code: '',
   uuid: '',
   clientId: '',
-  grantType: 'password'
+  grantType: 'password',
+  customerNo: '',
+  loginName: ''
 } as LoginData);
 
 const loginRules: ElFormRules = {
   username: [{ required: true, trigger: 'blur', message: '请输入员工编号/手机号码' }],
   password: [{ required: true, trigger: 'blur', message: '请输入登录密码' }],
   mobile: [{ required: true, trigger: 'blur', message: '请输入手机号' }],
-  smsCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }]
+  smsCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }],
+  customerNo: [{ required: true, trigger: 'blur', message: '请输入客户编号' }],
+  loginName: [{ required: true, trigger: 'blur', message: '请输入联系人登录名称' }]
 };
 
 const onType = (val: number) => {
   type.value = val;
   // 切换登录类型时更新 grantType
-  loginForm.value.grantType = val === 1 ? 'password' : 'sms';
+  if (val === 1) {
+    loginForm.value.grantType = 'password';
+  } else if (val === 2) {
+    loginForm.value.grantType = 'sms';
+  } else {
+    loginForm.value.grantType = 'serialNumber';
+  }
 };
 
 /**
@@ -157,7 +192,13 @@ const handleLogin = () => {
         localStorage.removeItem('rememberMe');
       }
       // 调用登录
-      loginForm.value.phonenumber = loginForm.value.mobile;
+      if (type.value === 3) {
+        // 客户编号登录方式
+        loginForm.value.customerNo = loginForm.value.customerNo;
+        loginForm.value.loginName = loginForm.value.loginName;
+      } else {
+        loginForm.value.phonenumber = loginForm.value.mobile;
+      }
       const [err] = await to(userStore.login(loginForm.value));
       if (!err) {
         const redirectUrl = redirect.value || '/';
@@ -293,7 +334,7 @@ onMounted(() => {
 
     .login-bos {
       height: 90%;
-      max-height: 420px;
+      max-height: 570px;
       aspect-ratio: 1;
       // width: 420px;
       // height: 420px;
@@ -304,6 +345,12 @@ onMounted(() => {
       justify-content: space-around;
       align-items: center;
 
+      // 客户编号登录时调整布局
+      &.customer-login {
+        justify-content: flex-start;
+        padding-top: 80px;
+      }
+
       :deep(.el-form-item) {
         margin-bottom: 18px;
       }
@@ -329,6 +376,11 @@ onMounted(() => {
           height: 16px;
           background: #e6e8ec;
         }
+        .separator {
+          color: #e6e8ec;
+          font-size: 14px;
+          margin: 0 10px;
+        }
       }
       .login-input {
         width: 100%;

+ 29 - 2
src/views/search/index.vue

@@ -71,6 +71,9 @@
           >
             {{ item.brandName }}
           </div>
+          <div v-if="brandHasMore" @click="getBrandAll" class="classify-list" style="color: var(--el-color-primary); cursor: pointer;">
+            更多
+          </div>
         </div>
       </div>
       <div class="head-bos">
@@ -516,8 +519,8 @@ const onHead1 = (index1: any, item2: any) => {
 
 //查询品牌
 const getBrand1 = () => {
-  getBrandPage({
-    categoryName: categoryName.value,
+  getBrandByCategoryList({
+    name: categoryName.value,
     categoryId: httpObj.value.topCategoryId,
     pageSize: 100,
     pageNum: 1
@@ -529,7 +532,11 @@ const getBrand1 = () => {
 };
 
 //查询分类下得品牌
+const brandTotal = ref(0);
+const brandHasMore = ref(false);
+
 const getBrand2 = () => {
+  brandHasMore.value = false;
   getBrandByCategoryList({
     categoryId: httpObj.value.topCategoryId,
     pageSize: 100,
@@ -541,6 +548,26 @@ const getBrand2 = () => {
         id: ''
       });
       brandList.value = res.rows;
+      brandTotal.value = res.total;
+      brandHasMore.value = res.total > 100;
+    }
+  });
+};
+
+// 点击更多,查询全部品牌
+const getBrandAll = () => {
+  getBrandByCategoryList({
+    categoryId: httpObj.value.topCategoryId,
+    pageSize: brandTotal.value,
+    pageNum: 1
+  }).then((res) => {
+    if (res.code == 200) {
+      res.rows.unshift({
+        brandName: '全部',
+        id: ''
+      });
+      brandList.value = res.rows;
+      brandHasMore.value = false;
     }
   });
 };

+ 1 - 1
vite.config.ts

@@ -47,7 +47,7 @@ export default defineConfig(({ mode, command }) => {
         [env.VITE_APP_BASE_API]: {
           // target: 'http://localhost:8080',
           // target: 'http://yp1.yingpaipay.com:9026',
-          target: 'https://jingyang.xiaoluwebsite.xyz',
+          target: 'http://jingyang.yoe365.com:8080',
           // target: 'https://one.yoe365.com',
           // target: 'http://192.168.1.52:8080',
           // target: 'https://apiyouyida.xiaoluwebsite.xyz',//线上