fix: 登录退出代码整理

src/api/user.js

@@ -13,13 +13,21 @@ export const getCode = (params) => request({
   params: params
 })
 
-export const userLogin = params => request({
+export const login = params => request({
   url: '/user/worker/mobile/login',
   method: 'post',
   params: params,
   json: true
 })
 
+// 退出登录
+
+export const logout = () => request({
+  url: '/user/worker/mobile/logout',
+  method: 'post',
+  data: {}
+})
+
 // 用户注册
 export const userRegister = params => request({
   url: '/user/register/user',
@@ -28,7 +36,7 @@ export const userRegister = params => request({
 })
 
 //  获取用户信息
-export const userLoginData = (params) => request({
+export const getUserDetail = (params) => request({
   url: '/user/user/detail',
   method: 'get',
   params: params

src/pages/home/components/UserModal.vue

@@ -4,7 +4,9 @@
     title="用户信息"
     width="600px"
     placement="right"
-    @close="emits('close')"
+    :keyboard="false"
+    :maskClosable="false"
+    @close="handleClose"
   >
     <div class="drawer-box">
       <a-card size="small" title="用户信息" style="margin-bottom: 15px;">
@@ -49,6 +51,17 @@
         </a-card-grid>
       </a-card>
     </div>
+    <template #footer>
+      <div style="padding: 10px;">
+        <a-button
+          type="primary"
+          danger
+          block
+          :disabled="mainData.disabled"
+          @click="handleLogout"
+        >{{ mainData.btnText }}</a-button>
+      </div>
+    </template>
     <OrderModal
       :open="mainData.openOrder"
       :type="mainData.orderType"
@@ -74,7 +87,9 @@ import OrderModal from './OrderModal.vue';
 import AddressModal from './AddressModal.vue';
 import CreditModal from './CreditModal.vue';
 import CreditRecordModal from './CreditRecordModal.vue';
-import { onMounted, reactive } from 'vue';
+import { Modal } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { reactive, onMounted, createVNode } from 'vue';
 import { useUserStore } from '@/store/user';
 import { getOrderCount } from '@/api/order';
 
@@ -112,7 +127,9 @@ const mainData = reactive({
   openOrder: false,
   openAddress: false,
   openCredit: false,
-  openRecord: false
+  openRecord: false,
+  disabled: false,
+  btnText: '退出登录'
 })
 
 const fetchOrderCount = async () => {
@@ -135,6 +152,31 @@ const handleMoreMenus = menu => {
   mainData[menu.key] = true;
 }
 
+const handleClose = () => {
+  emits('close');
+}
+
+const handleLogout = () => {
+  Modal.confirm({
+    title: '退出登录',
+    icon: createVNode(ExclamationCircleOutlined),
+    centered: true,
+    content: '确定退出登录？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk: () => {
+      mainData.btnText = '退出中...';
+      mainData.disabled = true;
+      userStore.logout().then(() => {
+        handleClose();
+      }).finally(() => {
+        mainData.btnText = '退出登录';
+        mainData.disabled = false;
+      })
+    }
+  })
+}
+
 onMounted(() => {
   fetchOrderCount()
 })

src/pages/login/index.vue

@@ -75,13 +75,12 @@
 <script setup lang="js">
 import Logo from '@/components/logo/index.vue';
 import SliderVerify from './components/verify.vue'
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import { message } from 'ant-design-vue';
-import { getCode, getVerifiImage, userLogin } from '@/api/user';
+import { getCode, getVerifiImage } from '@/api/user';
 import { useUserStore } from '@/store/user';
 import { useStorageStore } from '@/store/storage';
-import { setToken } from '@/utils/token';
 import { validPhone } from '@/utils/validate';
 
 const router = useRouter();
@@ -140,14 +139,11 @@ const fetchLogin = async () => {
     messageCode: mainForm.vrifyCode,
     locate: '0,0',
   }
-  userLogin(params).then(res => {
-    setToken(res.data.token);
-    storageStore.updateActivedId(res.data?.storage?.storageId);
-    userStore.updateUserInfo(res.data);
-    message.success('登录成功');
+  userStore.login(params).then(data => {
+    storageStore.updateActivedId(data.storage?.storageId);
     router.back();
   }).finally(() => {
-    mainForm.submitBtnDisabled = false
+    mainForm.submitBtnDisabled = false;
   })
 }
 

src/pages/train/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <a-card title="培训">
     <a-table :dataSource="mainData.list" :columns="mainData.columns" :pagination="false">
       <template #bodyCell="{record, column}">
         <div v-if="column.key === 'operation'">
@@ -7,7 +7,7 @@
         </div>
       </template>
     </a-table>
-  </div>
+  </a-card>
 </template>
 
 <script setup lang="js">

src/store/user.js

@@ -1,22 +1,44 @@
 import { defineStore } from 'pinia';
-import { userLoginData } from '@/api/user';
+import userUtil from '@/utils/userUtil';
+import { setToken, removeToken } from '@/utils/token';
+import { getUserDetail, login, logout } from '@/api/user';
+import { message } from 'ant-design-vue';
 
 export const useUserStore = defineStore('user', {
   state: () => ({
-    userInfo: window.sessionStorage.getItem('USER_INFO') ? JSON.parse(window.sessionStorage.getItem('USER_INFO')) : null,
+    userInfo: userUtil.getVal(),
     userDetail: {}
   }),
   actions: {
-    updateUserInfo(userInfo) {
-      window.sessionStorage.setItem('USER_INFO', JSON.stringify(userInfo))
-      this.userInfo = userInfo
+    login(params) {
+      return new Promise((resolve, reject) => {
+        login(params).then(res => {
+          message.success('登录成功');
+          setToken(res.data.token);
+          userUtil.setVal(res.data);
+          this.userInfo = res.data;
+          resolve(res.data);
+        }).catch(() => {
+          reject();
+        })
+      })
     },
-    clearUserInfo() {
-      this.userInfo = null
-      window.sessionStorage.removeItem('USER_INFO')
+    logout() {
+      return new Promise((resolve, reject) => {
+        logout().then(() => {
+          message.success('退出成功');
+          removeToken();
+          userUtil.removeVal();
+          this.userInfo = null;
+          this.userDetail = {};
+          resolve();
+        }).catch(() => {
+          reject();
+        })
+      })
     },
     async fetchUserDetail() {
-      const res = await userLoginData({
+      const res = await getUserDetail({
         userId: this.userInfo?.userId || ''
       })
       this.userDetail = res.data || {}

src/utils/userUtil.js

@@ -0,0 +1,16 @@
+class UserUtils {
+  constructor() {
+    this.LOCAL_USER_INFO_KEY = 'USER_INFO';
+  }
+  setVal(val) {
+    window.sessionStorage.setItem(this.LOCAL_USER_INFO_KEY, JSON.stringify(val))
+  }
+  getVal() {
+    return window.sessionStorage.getItem(this.LOCAL_USER_INFO_KEY) ? JSON.parse(window.sessionStorage.getItem(this.LOCAL_USER_INFO_KEY)) : null
+  }
+  removeVal() {
+    window.sessionStorage.removeItem(this.LOCAL_USER_INFO_KEY)
+  }
+}
+
+export default new UserUtils();