feat：接入登录部分接口

src/api/module/login.ts

@@ -3,7 +3,37 @@ import HttpAxios from '@/utils/axios'
 const baseUrl = 'http://localhost/api/Customer_Service_Online/login.php'
 
 /**
- * Tracking首页表格列数据
+ * 获取验证码
+ */
+export const getVerifcationCode = (params: any, config: any) => {
+  return HttpAxios.get(
+    `${baseUrl}`,
+    {
+      action: 'login',
+      operate: 'verifcation_code',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 验证用户名是否存在
+ */
+export const isUserNameExit = (params: any, config: any) => {
+  return HttpAxios.get(
+    `${baseUrl}`,
+    {
+      action: 'login',
+      operate: 'check_uname',
+      ...params
+    },
+    config
+  )
+}
+
+/**
+ * 登录
  */
 export const login = (params: any, config: any) => {
   return HttpAxios.get(
@@ -16,3 +46,18 @@ export const login = (params: any, config: any) => {
     config
   )
 }
+
+/**
+ * 忘记密码
+ */
+export const forgotPassword = (params: any, config: any) => {
+  return HttpAxios.get(
+    `${baseUrl}`,
+    {
+      action: 'login',
+      operate: 'forgot_password',
+      ...params
+    },
+    config
+  )
+}

src/components/CustomizeColumns/src/CustomizeColumns.vue

@@ -165,7 +165,6 @@ const openDialog = async (paramsData: Object, rightDistance: number) => {
   await getData()
   rightArrowHideDistance.value = rightDistance
   nextTick(() => {
-    console.log('rightArrowHideDistance', step1.value?.[0])
     if (!firstLoad.value) {
       open1.value = true
       isShowStep1.value = true

src/styles/elementui.scss

@@ -239,6 +239,30 @@ label.el-radio {
   }
 }
 
+// message
+div.el-message {
+  display: flex;
+  justify-content: center;
+  width: 800px;
+}
+div.el-message--error {
+  --el-message-bg-color: #faebec;
+  --el-message-border-color: #faebec;
+  --el-message-text-color: var(--color-danger);
+}
+
+div.el-message--success {
+  --el-message-bg-color: #e5f6f1;
+  --el-message-border-color: #e5f6f1;
+  --el-message-text-color: var(--color-success);
+}
+
+div.el-message--warning {
+  --el-message-bg-color: #fef5eb;
+  --el-message-border-color: #fef5eb;
+  --el-message-text-color: #f19d38;
+}
+
 // drawer抽屉
 div.el-drawer {
   .el-drawer__header {
@@ -512,10 +536,13 @@ div .el-tabs__active-bar {
   background-color: var(--color-accent-2);
 }
 
-div .el-radio-button.is-active .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner {
+div
+  .el-radio-button.is-active
+  .el-radio-button__original-radio:not(:disabled)
+  + .el-radio-button__inner {
   background-color: var(--color-theme);
   border-color: var(--color-theme);
-  box-shadow:none
+  box-shadow: none;
 }
 div .el-radio-button__inner:hover {
   color: var(--color-theme);
@@ -523,4 +550,4 @@ div .el-radio-button__inner:hover {
 div .el-space {
   flex-wrap: wrap;
   margin: 3px 0 0 0;
-}
+}

src/styles/vxeTable.scss

@@ -86,3 +86,20 @@ div.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-
 .vxe-table--tooltip-wrapper.is--active {
   z-index: 9999 !important;
 }
+
+div.w-e-bar svg {
+  height: 16px;
+  width: 16px;
+}
+
+[data-menu-key='group-image'] {
+  & + .w-e-bar-item-menus-container {
+    .w-e-bar-item:first-child {
+      display: none;
+    }
+  }
+}
+
+.w-e-bar.w-e-hover-bar.w-e-bar-show {
+  display: none;
+}

src/views/Booking/src/components/BookingDetail/src/components/EmailView.vue

@@ -322,17 +322,3 @@ const sendEmail = () => {
   }
 }
 </style>
-<style lang="scss">
-div.w-e-bar svg {
-  height: 16px;
-  width: 16px;
-}
-
-[data-menu-key='group-image'] {
-  & + .w-e-bar-item-menus-container {
-    .w-e-bar-item:first-child {
-      display: none;
-    }
-  }
-}
-</style>

src/views/Booking/src/components/BookingTable/src/BookingTable.vue

@@ -135,7 +135,6 @@ const searchTableData = (data: any) => {
     })
     .then((res: any) => {
       if (res.code === 200) {
-        console.log(res.data)
         bookingTable.value.data = res.data.searchData
         tableLoading.value = false
       }

src/views/Layout/src/components/Header/HeaderView.vue

@@ -21,7 +21,6 @@ const handleChangePassword = () => {
 const logoutDialogRef = ref()
 
 const handleLogout = () => {
-  console.log('logout')
   logoutDialogRef.value.openDialog()
 }
 

src/views/Login/src/components/LoginCard.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts"></script>
+
+<template>
+  <el-card class="login-card">
+    <div class="title">
+      <span class="welcome">Welcome to KLN Portal</span>
+      <span class="tips">Login to your account</span>
+    </div>
+    <div class="send-email-tips" :style="{ display: isEmailTips ? 'block' : 'none' }">
+      <span class="font_family icon-icon_confirm_b success-icon"></span>
+      New Password sent to registered email.
+      <span
+        @click="handleDeleteEmailTips"
+        class="font_family icon-icon_reject_b delete-icon"
+      ></span>
+    </div>
+    <div class="login-form">
+      <div class="label">
+        <span>User Name</span>
+      </div>
+      <el-input
+        ref="userNameRef"
+        :class="{ 'is-error': loginError.username }"
+        v-model="loginForm.username"
+        class="user-name"
+        placeholder="Please input user name"
+        @focus="handleDeleteEmailTips"
+        @change="isUserNameExit = true"
+      >
+        <template #prefix>
+          <span class="font_family icon-icon_username_b"></span>
+        </template>
+        <template #suffix>
+          <span v-if="isUserNameExit" class="font_family icon-icon_confirm_b confirm-icon"></span>
+        </template>
+      </el-input>
+      <div class="error" v-if="loginError.username">This account does not exist.</div>
+      <div class="label">
+        <span>Password</span>
+        <span class="forgot-password" @click="handleForgot">Forgot Password?</span>
+      </div>
+      <el-input
+        ref="passWordRef"
+        :class="{ 'is-error': loginError.password }"
+        v-model="loginForm.password"
+        type="password"
+        placeholder="Please input password"
+        show-password
+        @focus="handleDeleteEmailTips"
+        ><template #prefix>
+          <span class="font_family icon-icon_password_b"></span>
+        </template>
+      </el-input>
+      <div class="error" v-if="loginError.password">Incorrect password. Please try again.</div>
+      <el-input
+        ref="codeRef"
+        :class="{ 'is-error': loginError.code }"
+        class="verification-code"
+        v-model="loginForm.code"
+        placeholder="Verification Code"
+        @focus="handleDeleteEmailTips"
+      >
+        <template #append>
+          <img class="verification-code-img" src="./image/code.png" alt="" />
+        </template>
+      </el-input>
+      <div class="error" v-if="loginError.code">Incorrect verification code.</div>
+      <el-button @click="handleSubmit" class="el-button--dark login-btn">Login</el-button>
+    </div>
+    <template #footer>
+      <div class="license">
+        <span>© 2024 KTreker from <span class="company">Kerry Logistics</span></span>
+        <span>Version 0.67</span>
+      </div>
+    </template>
+  </el-card>
+</template>
+
+<style lang="scss" scoped></style>

src/views/Login/src/loginView.vue

@@ -16,13 +16,61 @@ watch(status, () => {
     email: '',
     code: ''
   }
+  loginError.value = {
+    username: false,
+    password: false,
+    email: false,
+    code: false
+  }
+  // getCode()
 })
 
 const loginError = ref({
   username: false,
   password: false,
+  email: false,
   code: false
 })
+const verificationCode = ref()
+// 获取验证码
+const getCode = () => {
+  $api.getVerifcationCode().then((res) => {
+    verificationCode.value = `data:image/png;base64,${res}`
+    console.log(res)
+  })
+}
+// getCode()
+
+// 验证当前用户是否存在
+const handleCheckUser = () => {
+  // 这里是验证用户是否存在的逻辑
+  $api.isUserNameExit({ uname: loginForm.value.username }).then((res) => {
+    if (res.code === 200) {
+      if (res.data.msg !== 'no_exist') {
+        isUserNameExit.value = true
+      } else {
+        loginError.value.username = true
+        isUserNameExit.value = false
+      }
+    } else {
+      isUserNameExit.value = false
+    }
+  })
+}
+
+// 点击登录按钮
+const handleLogin = () => {
+  // 这里是登录逻辑
+  $api
+    .login({
+      uname: loginForm.value.username,
+      psw: loginForm.value.password,
+      verifcation_code: loginForm.value.code
+    })
+    .then((res) => {
+      console.log(res)
+    })
+}
 
 const isUserNameExit = ref(false)
 
@@ -31,18 +79,26 @@ const handleForgot = () => {
   isUserNameExit.value = false
   handleDeleteEmailTips()
 }
-
-const handleSubmit = () => {
-  if (status.value === 'reset') {
-    isEmailTips.value = true
-    status.value = 'login'
-    return
-  }
+const handleSendPassword = () => {
+  // 这里是发送密码逻辑
+  $api
+    .forgotPassword({
+      login: loginForm.value.username,
+      email: loginForm.value.email
+    })
+    .then((res) => {
+      if (res.code === 200) {
+        isEmailTips.value = true
+      }
+    })
 }
 
 const isEmailTips = ref(false)
-const handleDeleteEmailTips = () => {
+const handleDeleteEmailTips = (type: string) => {
   isEmailTips.value = false
+  if (type) {
+    loginError.value[type] = false
+  }
 }
 
 const errorTipsRef = ref()
@@ -73,8 +129,8 @@ const errorTipsRef = ref()
           v-model="loginForm.username"
           class="user-name"
           placeholder="Please input user name"
-          @focus="handleDeleteEmailTips"
-          @change="isUserNameExit = true"
+          @focus="handleDeleteEmailTips('username')"
+          @change="handleCheckUser"
         >
           <template #prefix>
             <span class="font_family icon-icon_username_b"></span>
@@ -95,7 +151,7 @@ const errorTipsRef = ref()
           type="password"
           placeholder="Please input password"
           show-password
-          @focus="handleDeleteEmailTips"
+          @focus="handleDeleteEmailTips('password')"
           ><template #prefix>
             <span class="font_family icon-icon_password_b"></span>
           </template>
@@ -107,14 +163,14 @@ const errorTipsRef = ref()
           class="verification-code"
           v-model="loginForm.code"
           placeholder="Verification Code"
-          @focus="handleDeleteEmailTips"
+          @focus="handleDeleteEmailTips('code')"
         >
           <template #append>
-            <img class="verification-code-img" src="./image/code.png" alt="" />
+            <img class="verification-code-img" :src="verificationCode" alt="" />
           </template>
         </el-input>
         <div class="error" v-if="loginError.code">Incorrect verification code.</div>
-        <el-button @click="handleSubmit" class="el-button--dark login-btn">Login</el-button>
+        <el-button @click="handleLogin" class="el-button--dark login-btn">Login</el-button>
       </div>
       <template #footer>
         <div class="license">
@@ -138,7 +194,7 @@ const errorTipsRef = ref()
           v-model="loginForm.username"
           class="user-name"
           placeholder="Please input user name"
-          @focus="handleDeleteEmailTips"
+          @focus="handleDeleteEmailTips('username')"
         >
           <template #prefix>
             <span class="font_family icon-icon_username_b"></span>
@@ -155,10 +211,10 @@ const errorTipsRef = ref()
         </div>
         <el-input
           ref="passWordRef"
-          :class="{ 'is-error': loginError.password }"
+          :class="{ 'is-error': loginError.email }"
           v-model="loginForm.email"
           placeholder="Please input your email address"
-          show-password
+          @focus="handleDeleteEmailTips('email')"
           ><template #prefix>
             <span class="font_family icon-icon_email_b"></span>
           </template>
@@ -172,13 +228,16 @@ const errorTipsRef = ref()
           class="verification-code"
           v-model="loginForm.code"
           placeholder="Verification Code"
+          @focus="handleDeleteEmailTips('code')"
           ><template #append>
             <img class="verification-code-img" src="./image/code.png" alt="" /> </template
         ></el-input>
         <div class="error" v-if="loginError.code">
           This is the prompt information given by the verification
         </div>
-        <el-button @click="handleSubmit" class="el-button--dark login-btn">Send Password</el-button>
+        <el-button @click="handleSendPassword" class="el-button--dark login-btn"
+          >Send Password</el-button
+        >
         <div @click="status = 'login'" class="back-text">
           <span class="font_family icon-icon_back_b"></span>
           <span class="text"> Back to login</span>

src/views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue

@@ -3,11 +3,23 @@ import BasicInformation from './BasicInformation.vue'
 import MilestonesTable from './MilestonesTable.vue'
 
 const test = (type: string) => {
-  ElMessage({
-    message: 'This is a message',
-    type: type,
-    duration: 0
+  ElMessageBox.confirm('proxy will permanently delete the file. Continue?', 'Warning', {
+    confirmButtonText: 'OK',
+    cancelButtonText: 'Cancel',
+    type: 'warning'
   })
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: 'Delete completed'
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: 'Delete canceled'
+      })
+    })
 }
 </script>
 
@@ -76,6 +88,8 @@ const test = (type: string) => {
     </div>
     <el-button @click="test('error')">error</el-button>
     <el-button @click="test('success')">success</el-button>
+    <el-button @click="test('info')">info</el-button>
+    <el-button @click="test('warning')">warning</el-button>
   </div>
 </template>
 

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -89,7 +89,6 @@ const getData = () => {
       a: 'AjxXeBouEvrDQ6jYG3xp9V208RYJ6UrRpAH%2FRna8t%2BqjYnUcZnqOnvrE4Gg5'
     })
     .then((res: any) => {
-      console.log('res', res)
       if (res.code === 200) {
         // 获取数据
         allData.value = res.data

src/views/Tracking/src/components/TrackingDetail/src/components/AttachmentView.vue

@@ -124,8 +124,6 @@ const handleDownload = (row: any) => {
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
-
-  console.log('Download', row.file)
 }
 const handleDelete = (row: any) => {
   console.log('Delete', row)

src/views/Tracking/src/components/TrackingDetail/src/components/EmailDrawer.vue

@@ -313,16 +313,3 @@ defineExpose({
   }
 }
 </style>
-<style lang="scss">
-div.w-e-bar svg {
-  height: 16px;
-  width: 16px;
-}
-[data-menu-key='group-image'] {
-  & + .w-e-bar-item-menus-container {
-    .w-e-bar-item:first-child {
-      display: none;
-    }
-  }
-}
-</style>

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -222,7 +222,7 @@ const handleCustomizeColumns = () => {
       model_name: 'Ocean_Search'
     }
   }
-  CustomizeColumnsRef.value.openDialog(params, -194)
+  CustomizeColumnsRef.value.openDialog(params, -153)
 }
 
 // 定制表格