【需求 17679】 feat: 完成登录、清理缓存、切换账号等功能

src/api/login/index.ts

@@ -42,9 +42,9 @@ export const loginByCode = ({
  * 生成随机密钥-切换官方账号用
  */
 interface GenerateLoginKeyData {
-  cutEmail: string
+  cutEmail?: string
   timestamp: number
-  type: 1 | 2 // 1: 多平台跳转 2: 官方账号切换
+  type: 1 | 2 // 1: 多平台跳转 清除缓存 2: 官方账号切换
   userId: number
 }
 export const generateLoginKey = (data: GenerateLoginKeyData) => {

src/api/user/index.ts

@@ -10,6 +10,7 @@ import type {
   SelfCollectDetailDto,
   SelfPraiseSearchParams,
   SelfPraiseDetailDto,
+  OfficialAccountItemDto,
 } from './types'
 import type { BackendServicePageResult, PageSearchParams } from '@/utils/request/types'
 
@@ -28,7 +29,7 @@ export const updateUserInfo = (data: UpdateUserInfoDto) => {
  * 是否有官方账号权限
  */
 export const hasOfficialAccount = () => {
-  return service.request<[]>({
+  return service.request<OfficialAccountItemDto[]>({
     url: '/api/personalCenter/getIsOfficial',
     method: 'POST',
     data: {},

src/api/user/types.ts

-import { ArticleTypeEnum, AuditStatusEnum } from '@/constants'
+import { ArticleTypeEnum, AuditStatusEnum, BooleanFlag } from '@/constants'
 import type { PageSearchParams } from '@/utils/request/types'
 
 export interface SelfPublishSearchParams extends PageSearchParams {
@@ -129,3 +129,45 @@ export interface AuditArticleDto {
   auditResult: Exclude<AuditStatusEnum, AuditStatusEnum.UNAUDITED>
   auditRemark?: string
 }
+
+/**
+ * 官方账号Item
+ */
+export interface OfficialAccountItemDto {
+  account: string
+  address: string
+  avatar: string
+  birthday: string
+  createTime: null
+  createUser: null
+  deptId: number
+  directLeader: string
+  email: string
+  entryDate: null
+  hadFansPoint: number
+  hiddenAvatar: string
+  hiddenName: string
+  interactiveMessageCount: number
+  isOfficialAccount: BooleanFlag
+  isReceiveMsg: BooleanFlag
+  jobNumId: string
+  level: number
+  loginTime: null
+  name: null
+  officialTag: string
+  password: null
+  passwordChangeStatus: number
+  passwordUpdateTime: null
+  phone: null
+  region: string
+  regionHide: BooleanFlag
+  roleId: string
+  salt: null
+  sex: null
+  signature: null
+  status: string
+  updateTime: string
+  updateUser: number
+  userId: number
+  version: null
+}

src/config.ts

@@ -3,8 +3,8 @@ interface IConfig {
   baseUrl: string
   /** 用户登录 type */
   loginType: number
-  // /** 微信登录跳转路径 */
-  // wxRedirect: string
+  /** 微信登录跳转路径 */
+  wxRedirect: string
 }
 
 export const app_config: { [key: string]: IConfig } = {
@@ -12,14 +12,14 @@ export const app_config: { [key: string]: IConfig } = {
   production: {
     baseUrl: 'http://culture.yswg.com.cn:8089',
     loginType: 1, // 3
-    // wxRedirect: 'oa3.yswg.com.cn',
+    wxRedirect: 'culture.yswg.com.cn:3000',
   },
 
   // 测试环境 暂时无测试环境部署
   test: {
     baseUrl: 'http://192.168.2.55:8089', // 首拥本地
     loginType: 1,
-    // wxRedirect: 'oatest.yswg.com.cn:3457',
+    wxRedirect: '',
   },
 
   // 开发环境
@@ -28,6 +28,6 @@ export const app_config: { [key: string]: IConfig } = {
     // baseUrl: 'http://192.168.2.168:8089', // 立鹏本地/
     // baseUrl: 'http://192.168.2.55:8089', // 首拥本地
     loginType: 1,
-    // wxRedirect: 'oatest.yswg.com.cn:3457',
+    wxRedirect: '',
   },
 }

src/router/guards.ts

@@ -28,10 +28,13 @@ export function registerRouterGuards(router: Router) {
     const userStore = useUserStore()
     if (code) {
       console.log('code', code)
-      await userStore.getUserInfoByCode(code, 0)
-      // 去除url里面的code
+      await userStore.getUserInfoByCode({
+        code,
+        isCodeLogin: 0,
+      })
+      // 去除url里面的code 重定向 path 不能重定向首页 因为有消息推送
       return {
-        path: '/', // 重定向到首页 去除code 重定向到首页 没有code 不会进入到这里了
+        path: to.path, // 重定向到首页 去除code 重定向到首页 没有code 不会进入到这里了
         replace: true,
       }
     } else {

src/stores/user.ts

@@ -30,8 +30,16 @@ export const useUserStore = defineStore('user', () => {
   }
 
   // 根据code 获取用户信息
-  const getUserInfoByCode = async (code: string, isCodeLogin: number) => {
-    const { data } = await loginByCode({ code, isCodeLogin })
+  const getUserInfoByCode = async ({
+    code,
+    isCodeLogin,
+    cutEmail,
+  }: {
+    code: string
+    isCodeLogin: number
+    cutEmail?: string
+  }) => {
+    const { data } = await loginByCode({ code, isCodeLogin, cutEmail })
     console.log(data)
     setUserInfo(data)
     setToken(data.token)

src/utils/wxUtil/wxLogin.ts

@@ -6,7 +6,7 @@ import { localCache } from '@/utils/storage'
  * @param fullPath to.fullPath
  */
 export function wxLogin(fullPath: string) {
-  const wxRedirect = app_config[import.meta.env.MODE].wxRedirect
+  const wxRedirect = app_config[import.meta.env.MODE]?.wxRedirect
   localCache.removeCache('token')
   const wxUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize'
   const redirect = encodeURIComponent('http://' + wxRedirect + fullPath)

src/views/userPage/index.vue

@@ -4,16 +4,33 @@
     <div class="box relative h-200px bg-gradient-to-r from-purple-400 via-pink-300 to-blue-300">
       <!-- 顶部操作按钮 -->
       <div class="absolute top-4 right-4 flex gap-2">
-        <el-button type="info" plain size="small" @click="handleClearCache">清除缓存</el-button>
         <el-button
-          v-if="userInfo.isAdmin"
+          v-if="!userInfo.isOfficialAccount"
+          type="info"
+          plain
+          size="small"
+          @click="handleClearCache"
+          >清除缓存</el-button
+        >
+        <el-button
+          v-if="officialAccountList.length"
           type="info"
           plain
           size="small"
           @click="handleSwitchAccount"
           >切换账号</el-button
         >
-        <el-button type="info" plain size="small" @click="handleAdmin">后台管理</el-button>
+        <el-button
+          v-if="userInfo.isOfficialAccount"
+          type="info"
+          plain
+          size="small"
+          @click="handleBackUser"
+          >返回个人账号</el-button
+        >
+        <el-button v-if="userInfo.isAdmin" type="primary" plain size="small" @click="handleAdmin"
+          >后台管理</el-button
+        >
       </div>
     </div>
 
@@ -97,7 +114,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="tsx" setup>
 import {
   User,
   Document,
@@ -119,6 +136,8 @@ import SelfTask from './components/selfTask.vue'
 import SelfComment from './components/selfComment.vue'
 import SelfAudit from './components/selfAudit.vue'
 import { generateLoginKey, hasOfficialAccount } from '@/api'
+import type { OfficialAccountItemDto } from '@/api/user/types'
+import { wxLogin } from '@/utils/wxUtil'
 
 const editUserInfoRef = useTemplateRef<InstanceType<typeof EditUserInfo>>('editUserInfoRef')
 const userStore = useUserStore()
@@ -167,22 +186,99 @@ const handleEdit = () => {
   })
 }
 
-const getIsOfficial = () => {
-  setTimeout(async () => {
-    const { data } = await hasOfficialAccount()
-    console.log(data)
-  }, 1000)
+const officialAccountList = ref<OfficialAccountItemDto[]>([])
+const getIsOfficial = async () => {
+  const { data } = await hasOfficialAccount()
+  console.log(data)
+  officialAccountList.value = data
 }
 
 const handleSwitchAccount = async () => {
-  console.log('切换账号', userInfo)
-  const { data } = await generateLoginKey({
-    cutEmail: 'SzTrain@yswg.com.cn',
-    timestamp: Date.now(),
-    type: 2,
-    userId: userInfo.value.userId,
+  const selectedEmail = ref('')
+  ElMessageBox({
+    title: '切换官方账号',
+    message: () => (
+      <div class="flex flex-wrap gap-3 p-4">
+        {officialAccountList.value.map((item) => {
+          return (
+            <el-card
+              key={item.email}
+              shadow="hover"
+              class={[
+                'flex items-center justify-center cursor-pointer transition-all relative',
+                'hover:shadow-lg border-2 rounded-lg',
+                selectedEmail.value === item.email
+                  ? 'border-blue-500! bg-blue-50!'
+                  : 'border-gray-200!',
+              ]}
+              style="width: 160px; padding: 16px"
+              onClick={() => {
+                selectedEmail.value = item.email
+              }}
+            >
+              {/* 右上角单选框 */}
+              <div class="absolute top-2 right-2">
+                <el-checkbox
+                  modelValue={selectedEmail.value}
+                  true-value={item.email}
+                  size="large"
+                />
+              </div>
+
+              {/* 内容区域 */}
+              <div class="flex flex-col items-center gap-3 w-full">
+                <el-avatar size={80} src={item.avatar} />
+                <div class="flex flex-col items-center gap-1 w-full">
+                  <span class="text-sm font-medium text-gray-800 truncate w-full text-center">
+                    {item.officialTag}
+                  </span>
+                </div>
+              </div>
+            </el-card>
+          )
+        })}
+      </div>
+    ),
+    showCancelButton: true,
+    confirmButtonText: '确认切换',
+    cancelButtonText: '取消',
+    customClass: 'min-w-740px',
+    beforeClose: async (action, instance, done) => {
+      if (action === 'confirm') {
+        if (!selectedEmail.value) return ElMessage.warning('请选择要切换的账号')
+        instance.confirmButtonLoading = true
+        try {
+          const { data } = await generateLoginKey({
+            timestamp: Date.now(),
+            type: 2,
+            userId: userInfo.value.userId,
+            cutEmail: selectedEmail.value,
+          })
+          console.log(data)
+          sessionStorage.clear()
+          await userStore.getUserInfoByCode({
+            code: data,
+            isCodeLogin: 1,
+            cutEmail: selectedEmail.value,
+          })
+          debugger
+          done()
+          window.location.reload()
+        } catch (error) {
+          console.log(error)
+        } finally {
+          instance.confirmButtonLoading = false
+        }
+      } else {
+        done()
+      }
+    },
   })
-  console.log(data)
+}
+
+const handleBackUser = () => {
+  sessionStorage.clear()
+  wxLogin(route.fullPath)
 }
 
 const handleAdmin = () => {
@@ -190,10 +286,19 @@ const handleAdmin = () => {
 }
 
 const handleClearCache = async () => {
+  // 获取登陆的key
+  const { data } = await generateLoginKey({
+    timestamp: Date.now(),
+    type: 1,
+    userId: userInfo.value.userId,
+  })
+  // 清理sessionStorage
   sessionStorage.clear()
-  // await userStore.getUserInfoByCode()
+  await userStore.getUserInfoByCode({
+    code: data,
+    isCodeLogin: 1,
+  })
   window.location.reload()
-  ElMessage.success('清除缓存成功')
 }
 
 onMounted(() => {