feat: 接入部分登录接口

src/api/module/login.ts

@@ -21,7 +21,7 @@ export const getVerifcationCode = (params: any, config: any) => {
  * 验证用户名是否存在
  */
 export const isUserNameExit = (params: any, config: any) => {
-  return HttpAxios.get(
+  return HttpAxios.post(
     `${baseUrl}`,
     {
       action: 'login',
@@ -36,7 +36,7 @@ export const isUserNameExit = (params: any, config: any) => {
  * 登录
  */
 export const login = (params: any, config: any) => {
-  return HttpAxios.get(
+  return HttpAxios.post(
     `${baseUrl}`,
     {
       action: 'login',
@@ -51,7 +51,7 @@ export const login = (params: any, config: any) => {
  * 忘记密码
  */
 export const forgotPassword = (params: any, config: any) => {
-  return HttpAxios.get(
+  return HttpAxios.post(
     `${baseUrl}`,
     {
       action: 'login',

src/components/ContainerStatus/src/ContainerStatus.vue

@@ -5,6 +5,8 @@ const props = defineProps({
   data: Object
 })
 
+const activeNames = ref<string[]>([])
+
 const containerStatusData: any = ref([])
 watch(
   () => props.data,
@@ -28,35 +30,33 @@ const formatDate = (date: string) => {
 
 <template>
   <div class="container-status">
-    <el-scrollbar style="height: 394px">
-      <el-collapse class="container" v-model="activeNames" @change="handleChange">
-        <el-collapse-item
-          :title="containers.label"
-          v-for="(containers, name) in containerStatusData"
-          :key="name"
-          :name="name"
-        >
-          <template #title>
-            <div class="title">
-              Container <span>{{ containers.label }}</span>
-            </div>
-          </template>
-          <div class="step-item" v-for="(item, index) in containers.content" :key="item.title">
-            <div class="step-data">
-              <div class="step-dot-icon"></div>
-              <div class="info">
-                <div class="left-info">
-                  <div class="title">{{ item.title }}</div>
-                  <div class="date">{{ formatDate(item.date) }}</div>
-                </div>
-                <div class="right-country">{{ item.country }}</div>
+    <el-collapse class="container" v-model="activeNames">
+      <el-collapse-item
+        :title="containers.label"
+        v-for="(containers, name) in containerStatusData"
+        :key="name"
+        :name="name"
+      >
+        <template #title>
+          <div class="title">
+            Container <span>{{ containers.label }}</span>
+          </div>
+        </template>
+        <div class="step-item" v-for="(item, index) in containers.content" :key="item.title">
+          <div class="step-data">
+            <div class="step-dot-icon"></div>
+            <div class="info">
+              <div class="left-info">
+                <div class="title">{{ item.title }}</div>
+                <div class="date">{{ formatDate(item.date) }}</div>
               </div>
+              <div class="right-country">{{ item.country }}</div>
             </div>
-            <div class="line" v-if="index + 1 !== containers.content.length"></div>
           </div>
-        </el-collapse-item>
-      </el-collapse>
-    </el-scrollbar>
+          <div class="line" v-if="index + 1 !== containers.content.length"></div>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
     <div class="footer">
       Tracking on carrier website:
       <a href="http://www.rcjgroup.com/" target="_blank" class="link">http://www.rcjgroup.com/</a>
@@ -71,9 +71,9 @@ const formatDate = (date: string) => {
   height: 100%;
   overflow: auto;
   .container {
-    // height: 394px;
+    height: 394px;
     padding-bottom: 8px;
-    // overflow: auto;
+    overflow: auto;
   }
   .footer {
     line-height: 38px;

src/views/Layout/src/components/Menu/MenuView.vue

@@ -101,9 +101,9 @@ activeMenu.value = (route.meta?.activeMenu as string) || route.path
 //   }
 // }
 
-const getAllMenuPaths = (menuList) => {
-  let paths = []
-  menuList.forEach((item) => {
+const getAllMenuPaths = (menuList: any) => {
+  let paths: any = []
+  menuList.forEach((item: any) => {
     paths.push(item.path) // 添加主菜单路径
     if (item.children && item.children.length > 0) {
       // 递归添加子菜单路径
@@ -119,7 +119,7 @@ const menuPaths = getAllMenuPaths(menuList)
 const whiteList = ['/login', '/public-tracking', '/public-tracking/detail']
 
 // 判断是否允许跳转
-const isAllowJump = (path) => {
+const isAllowJump = (path: any) => {
   // 判断是否登录
   if (!whiteList.includes(path) && !localStorage.getItem('token')) {
     ElMessage.warning('Please log in to use this feature.')
@@ -128,9 +128,14 @@ const isAllowJump = (path) => {
   }
   return true
 }
+// 路由后置守卫
+router.afterEach((to, from) => {
+  console.log('路由后置')
+  activeMenu.value = (route.meta?.activeMenu as string) || route.path
+})
 
 // 路由跳转函数
-const changeRouter = (path) => {
+const changeRouter = (path: any) => {
   let toPath = path
   if (path === '/tracking' && !localStorage.getItem('token')) {
     toPath = '/public-tracking'
@@ -139,9 +144,9 @@ const changeRouter = (path) => {
   // 如果允许跳转，执行跳转
   if (isAllowJump(toPath)) {
     router.push(toPath)
-    nextTick(() => {
-      activeMenu.value = (route.meta?.activeMenu as string) || route.path // 确保菜单栏选中状态为当前路径
-    })
+    console.log('允许跳转')
+
+    console.log('nextTick', activeMenu.value)
   } else {
     // 如果不允许跳转，保持当前 activeMenu 不变
     nextTick(() => {
@@ -160,17 +165,17 @@ const handleCollapseClick = () => {
 }
 const menuRef = ref()
 const test = () => {
-  console.log('test', menuRef.value)
+  console.log('test', activeMenu.value)
 }
 </script>
 
 <template>
-  <!-- <el-button @click="test">测试</el-button> -->
+  <el-button @click="test">测试</el-button>
   <el-menu
     ref="menuRef"
     class="layout-menu"
     @select="changeRouter"
-    :default-active="computedActiveMenu"
+    :default-active="activeMenu"
     :collapse="isCollapse"
   >
     <template v-for="item in menuList" :key="item.index">

src/views/Login/src/loginView.vue

@@ -2,8 +2,8 @@
 import ErrorTips from './components/ErrorTips.vue'
 
 const loginForm = ref({
-  username: '',
-  password: '',
+  username: 'ra.admin',
+  password: 'abc123456789',
   email: '',
   code: ''
 })
@@ -11,8 +11,8 @@ const loginForm = ref({
 const status = ref('login')
 watch(status, () => {
   loginForm.value = {
-    username: '',
-    password: '',
+    username: 'ra.admin',
+    password: 'abc123456789',
     email: '',
     code: ''
   }
@@ -22,10 +22,11 @@ watch(status, () => {
     email: false,
     code: false
   }
+  verificationCode.value = ''
   getCode()
 })
 
-const loginError = ref({
+const loginError: any = ref({
   username: false,
   password: false,
   email: false,
@@ -34,7 +35,7 @@ const loginError = ref({
 const verificationCode = ref()
 // 获取验证码
 const getCode = () => {
-  $api.getVerifcationCode().then((res) => {
+  $api.getVerifcationCode().then((res: any) => {
     verificationCode.value = `data:image/png;base64,${res.data.imagePngBase64}`
     console.log(res)
   })
@@ -47,7 +48,7 @@ const handleCheckUser = () => {
     return
   }
   // 这里是验证用户是否存在的逻辑
-  $api.isUserNameExit({ uname: loginForm.value.username }).then((res) => {
+  $api.isUserNameExit({ uname: loginForm.value.username }).then((res: any) => {
     if (res.code === 200) {
       if (res.data.msg !== 'no_exist') {
         isUserNameExit.value = true
@@ -70,8 +71,29 @@ const handleLogin = () => {
       psw: loginForm.value.password,
       verifcation_code: loginForm.value.code
     })
-    .then((res) => {
+    .then((res: any) => {
       console.log(res)
+      if (res.code === 200) {
+        const { data } = res
+        if (data.msg === 'today') {
+          ElMessageBox.alert('Your password will expire today, please reset', 'Prompt', {
+            confirmButtonText: 'OK',
+            type: 'warning'
+          })
+        } else if (data.msg === 'last') {
+          ElMessageBox.alert(
+            `Your password will expire in${data.data}days, please reset`,
+            'Prompt',
+            {
+              confirmButtonText: 'OK',
+              type: 'warning'
+            }
+          )
+        }
+      }
+    })
+    .finally(() => {
+      getCode()
     })
 }
 
@@ -89,7 +111,7 @@ const handleSendPassword = () => {
       login: loginForm.value.username,
       email: loginForm.value.email
     })
-    .then((res) => {
+    .then((res: any) => {
       if (res.code === 200) {
         isEmailTips.value = true
       }
@@ -97,7 +119,7 @@ const handleSendPassword = () => {
 }
 
 const isEmailTips = ref(false)
-const handleDeleteEmailTips = (type: string) => {
+const handleDeleteEmailTips = (type?: any) => {
   isEmailTips.value = false
   if (type) {
     loginError.value[type] = false
@@ -233,7 +255,7 @@ const errorTipsRef = ref()
           placeholder="Verification Code"
           @focus="handleDeleteEmailTips('code')"
           ><template #append>
-            <img class="verification-code-img" src="./image/code.png" alt="" /> </template
+            <img class="verification-code-img" :src="verificationCode" alt="" /> </template
         ></el-input>
         <div class="error" v-if="loginError.code">
           This is the prompt information given by the verification