个人中心页面调整

src/components/Position/longCompany.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="sub-li mb-3" v-for="item in list" :key="item.id" @mouseenter="item.active = true" @mouseleave="item.active = false">
+    <div class="sub-li mb-3 elevation-2" v-for="item in list" :key="item.id" @mouseenter="item.active = true" @mouseleave="item.active = false">
       <div class="company-info-top">
         <div class="company-info">
           <div class="float-left mr-5">
@@ -69,7 +69,7 @@ const handleCancel = async (item) => {
     margin-right: 0;
   }
   &:hover {
-    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
+    box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 5px 8px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 14px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important;
   }
 }
 .company-info {

src/components/Position/longStrip.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="position-item mb-3 job-closed" v-for="(val, i) in props.items" :key="i" @mouseenter="val.active = true" @mouseleave="val.active = false">
+    <div class="position-item mb-3 job-closed elevation-2" v-for="(val, i) in props.items" :key="i" @mouseenter="val.active = true" @mouseleave="val.active = false">
       <div class="info-header">
         <div v-if="val.active" class="header-btn">
           <v-btn v-if="props.showCancelBtn" class="half-button ml-3" color="primary" size="small" @click="handleCancel(val)">取消收藏</v-btn>
@@ -89,7 +89,7 @@ const handleToPositionDetails = (item) => {
   background-color: #fff;
   border-radius: 12px;
   &:hover {
-    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
+    box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 5px 8px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 14px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important;
   }
   .info-header {
     height: 48px;

src/layout/personal/navBar.vue

@@ -248,13 +248,13 @@ const handleLogout = async () => {
 }
 
 const items = ref([
-  { title: t('vipPackage.purchasePackage'), icon: 'mdi-gift-outline', change: () => router.push({ path: '/recruit/personal/purchasePackage' }) },
-  { title: t('resume.onlineResume'), icon: 'mdi-list-box-outline', change: () => router.push({ path: '/recruit/personal/resume' }) },
-  { title: t('setting.accountSettings'), icon: 'mdi-cog-outline', change: () => router.push({ path: '/recruit/personal/accountSettings/accountBinding' }) },
+  // { title: t('vipPackage.purchasePackage'), icon: 'mdi-gift-outline', change: () => router.push({ path: '/recruit/personal/purchasePackage' }) },
+  // { title: t('resume.onlineResume'), icon: 'mdi-list-box-outline', change: () => router.push({ path: '/recruit/personal/resume' }) },
+  // { title: t('setting.accountSettings'), icon: 'mdi-cog-outline', change: () => router.push({ path: '/recruit/personal/accountSettings/accountBinding' }) },
   // { title: t('setting.switchToRecruit'), icon: 'mdi-swap-horizontal', change: handleSwitch },
   { title: t('publicRecruitment.bountyRewards'), icon: 'mdi-google-circles-extended', change: () => router.push({ path: '/publicRecruitment' }) },
-  { title: t('points.wallet'), icon: ' mdi-database-outline', change: () => router.push({ path: '/recruit/personal/myWallet' }) },
-  { title: t('taskCenter.taskCenter'), icon: 'mdi-calendar-check-outline', change: () => router.push({ path: '/recruit/personal/TaskCenter' }) },
+  // { title: t('points.wallet'), icon: ' mdi-database-outline', change: () => router.push({ path: '/recruit/personal/myWallet' }) },
+  // { title: t('taskCenter.taskCenter'), icon: 'mdi-calendar-check-outline', change: () => router.push({ path: '/recruit/personal/TaskCenter' }) },
   { title: t('setting.logOut'), icon: 'mdi-logout', change: handleLogout }
 ])
 

src/router/modules/components/recruit/personCenter.js

@@ -0,0 +1,94 @@
+// 个人中心路由
+import Layout from '@/layout'
+
+const personCenter = [
+  {
+    path: '/recruit/personal/personalCenter',
+    component: Layout,
+    name: 'personalCenter',
+    meta: {
+      title: '个人中心'
+    },
+    children: [
+      {
+        path: '/recruit/personal/personalCenter',
+        redirect: '/recruit/personal/personalCenter/jobFeedback',
+        component: () => import('@/views/recruit/personal/PersonalCenter/index'),
+        children: [
+          {
+            path: '/recruit/personal/personalCenter/jobFeedback',
+            name: 'Job Feedback',
+            component: () => import('@/views/recruit/personal/PersonalCenter/jobFeedback/index.vue'),
+            meta: {
+              title: '求职反馈',
+              enName: 'Job Feedback',
+              icon: 'mdi-account-sync-outline'
+            }
+          },
+          {
+            path: '/recruit/personal/personalCenter/wallet',
+            name: 'My Wallet',
+            component: () => import('@/views/recruit/personal/PersonalCenter/wallet/index.vue'),
+            meta: {
+              title: '我的钱包',
+              enName: 'My Wallet',
+              icon: 'mdi-wallet-outline'
+            }
+          },
+          {
+            path: '/recruit/personal/personalCenter/taskCenter',
+            name: 'Task Center',
+            component: () => import('@/views/recruit/personal/PersonalCenter/taskCenter/index.vue'),
+            meta: {
+              title: '任务中心',
+              enName: 'Task Center',
+              icon: 'mdi-movie-star-outline'
+            }
+          },
+          {
+            path: '/recruit/personal/personalCenter/accountSettings',
+            redirect: '/recruit/personal/personalCenter/accountSettings/editPassword',
+            name: 'Account Settings',
+            meta: {
+              title: '账号设置',
+              enName: 'Account Settings',
+              icon: 'mdi-cog-outline'
+            },
+            children: [
+              {
+                path: '/recruit/personal/personalCenter/accountSettings/editPassword',
+                component: () => import('@/views/recruit/personal/PersonalCenter/accountSettings/editPassword'),
+                meta: {
+                  title: '修改密码'
+                }
+              },
+              // {
+              //   path: '/recruit/personal/personalCenter/accountSettings/accountBinding',
+              //   component: () => import('@/views/recruit/personal/PersonalCenter/accountSettings/accountBinding'),
+              //   meta: {
+              //     title: '账号绑定'
+              //   }
+              // },
+              // {
+              //   path: '/recruit/personal/personalCenter/accountSettings/realAuthentication',
+              //   component: () => import('@/views/recruit/personal/PersonalCenter/accountSettings/realAuthentication'),
+              //   meta: {
+              //     title: '实名认证'
+              //   }
+              // },
+              // {
+              //   path: '/recruit/personal/personalCenter/accountSettings/privacySettings',
+              //   component: () => import('@/views/recruit/personal/PersonalCenter/accountSettings/privacySettings'),
+              //   meta: {
+              //     title: '隐私设置'
+              //   }
+              // }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+]
+
+export default personCenter

src/router/modules/components/recruit/personal.js

@@ -1,51 +1,9 @@
 // 个人路由信息
 
 import Layout from '@/layout'
+import personCenter from './personCenter'
+
 const personal = [
-  {
-    path: '/recruit/personal/accountSettings',
-    component: Layout,
-    name: 'personalAccount',
-    children: [
-      {
-        path: '/recruit/personal/accountSettings',
-        component: () => import('@/views/recruit/personal/accountSettings/index'),
-        meta: {
-          title: '账号设置'
-        },
-        children: [
-          {
-            path: '/recruit/personal/accountSettings/editPassword',
-            component: () => import('@/views/recruit/personal/accountSettings/dynamic/editPassword'),
-            meta: {
-              title: '修改密码'
-            }
-          },
-          {
-            path: '/recruit/personal/accountSettings/accountBinding',
-            component: () => import('@/views/recruit/personal/accountSettings/dynamic/accountBinding'),
-            meta: {
-              title: '账号加入'
-            }
-          },
-          {
-            path: '/recruit/personal/accountSettings/realAuthentication',
-            component: () => import('@/views/recruit/personal/accountSettings/dynamic/realAuthentication'),
-            meta: {
-              title: '实名认证'
-            }
-          },
-          {
-            path: '/recruit/personal/accountSettings/privacySettings',
-            component: () => import('@/views/recruit/personal/accountSettings/dynamic/privacySettings'),
-            meta: {
-              title: '隐私设置'
-            }
-          }
-        ]
-      }
-    ]
-  },
   {
     path: '/recruit/personal/resume',
     component: Layout,
@@ -60,27 +18,27 @@ const personal = [
       }
     ]
   },
-  {
-    path: '/recruit/personal/personalCenter',
-    component: Layout,
-    name: 'personalCenter',
-    meta: {
-      title: '个人中心'
-    },
-    children: [
-      {
-        path: '/recruit/personal/personalCenter',
-        component: () => import('@/views/recruit/personal/PersonalCenter/index')
-      },
-      {
-        path: '/recruit/personal/tradeOrder',
-        meta: {
-          title: '我的订单'
-        },
-        component: () => import('@/views/recruit/personal/PersonalCenter/components/order.vue')
-      }
-    ]
-  },
+  // {
+  //   path: '/recruit/personal/personalCenter',
+  //   component: Layout,
+  //   name: 'personalCenter',
+  //   meta: {
+  //     title: '个人中心'
+  //   },
+  //   children: [
+  //     {
+  //       path: '/recruit/personal/personalCenter',
+  //       component: () => import('@/views/recruit/personal/PersonalCenter/index')
+  //     },
+  //     {
+  //       path: '/recruit/personal/tradeOrder',
+  //       meta: {
+  //         title: '我的订单'
+  //       },
+  //       component: () => import('@/views/recruit/personal/PersonalCenter/components/order.vue')
+  //     }
+  //   ]
+  // },
   {
     path: '/publicRecruitment',
     component: Layout,
@@ -204,5 +162,6 @@ const personal = [
       }
     ]
   },
+  ...personCenter
 ]
 export default personal

src/views/recruit/personal/PersonalCenter/dynamic/left.vue

@@ -1,187 +0,0 @@
-<template>
-  <div>
-    <div class="left-top">
-      <v-badge 
-        bordered 
-        offset-x="10" 
-        offset-y="50" 
-        :color="baseInfo?.sex ? (baseInfo?.sex === '1' ? '#1867c0' : 'error') : 'error'" 
-        :icon="baseInfo?.sex ? (baseInfo?.sex === '1' ? 'mdi-gender-male' : 'mdi-gender-female') : 'mdi-gender-female'">
-        <v-avatar size="x-large" :image="getUserAvatar(baseInfo?.avatar, baseInfo?.sex)"></v-avatar>
-      </v-badge>
-      <div class="ml-5 content">
-        <div class="username">
-          <span class="mr-2">{{ baseInfo?.name || userInfo.phone }}</span>
-        </div>
-        <div class="userInfo">
-          {{ baseInfo?.expTypeText || $t('common.currentlyUnavailable') }}<span class="septal-line"></span>{{ baseInfo?.eduTypeText || $t('common.currentlyUnavailable') }}
-        </div>
-        <div class="mt-3">
-          <v-select 
-            v-model="selectVal" 
-            :items="items" 
-            density="compact" 
-            variant="outlined" 
-            item-title="label" 
-            item-value="value" 
-            hide-details 
-            color="primary"
-            @update:model-value="handleChangeJobStatus"
-          ></v-select>
-        </div>
-      </div>
-      <div class="otherInfo">
-        <div>
-          <span>{{ $t('resume.phoneNumber') }}：{{ baseInfo?.phone || $t('common.currentlyUnavailable') }}</span>
-        </div>
-        <div class="my-3">
-          <span>{{ $t('resume.userEmail') }}：{{ baseInfo?.email || $t('common.currentlyUnavailable') }}</span>
-        </div>
-        <div>
-          <span>{{ $t('resume.dateOfBirth') }}：{{ baseInfo?.birthdayText || $t('common.currentlyUnavailable') }}</span>
-        </div>
-        <div class="mt-3">{{ $t('resume.currentAddress') }}： {{ baseInfo?.areaName || $t('common.currentlyUnavailable') }}</div>
-      </div>
-      <div class="slider-btn">
-        <v-btn class="slider-btn-item" rounded variant="outlined" color="primary" append-icon="mdi-menu-right" to="/recruit/personal/resume">{{ $t('resume.onlineResume') }}</v-btn>
-      </div>
-    </div>
-
-    <div class="left-tabs mt-3">
-      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff">
-        <v-tab v-for="(val, i) in list" :key="i" :value="i">{{ val.title }}</v-tab>
-      </v-tabs>
-    </div>
-    <div :class="['left-bottom', {'mt-3': list[tab].path !== interview && list[tab].path !== interested}]">
-      <component :is="list[tab].path"></component>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineOptions({ name: 'personal-center-left'})
-import { getDict } from '@/hooks/web/useDictionaries'
-import { ref, watch } from 'vue'
-import { useUserStore } from '@/store/user'
-import { updateJobStatus } from '@/api/recruit/personal/resume'
-import { useI18n } from '@/hooks/web/useI18n'
-import Snackbar from '@/plugins/snackbar'
-// import communication from '../components/communication.vue'
-import delivery from '../components/delivery.vue'
-import interview from '../components/interview/index.vue'
-import interested from '../components/interested.vue'
-import seenMe from '../components/seenMe.vue'
-import { getUserAvatar } from '@/utils/avatar'
-
-const { t } = useI18n()
-const list = [
-  // { title: t('position.throughCommunication'), path: communication },
-  { title: t('position.delivered'), path: delivery },
-  { title: t('position.interview'), path: interview },
-  { title: t('position.interested'), path: interested },
-  { title: t('position.haveSeenMe'), path: seenMe }
-]
-
-const tab = ref(0)
-
-import { useRoute } from 'vue-router'; const route = useRoute()
-import { useRouter } from 'vue-router'; const router = useRouter()
-watch(() => route.query, (newQuery) => { // newQuery, oldQuery
-  if (newQuery?.showInterviewScheduleMore) { // 去掉面试日程参数
-    tab.value = 2
-    const query = { ...route.query }
-    delete query.showInterviewScheduleMore
-    const path = route.path
-    router.replace({ path, query })
-  }
-}, { deep: true, immediate: true })
-
-const selectVal = ref('0')
-const items = ref([])
-const userStore = useUserStore()
-
-// 求职类型字典
-getDict('menduner_job_status').then(({ data }) => {
-  data = data?.length && data || []
-  items.value = data
-})
-
-let baseInfo = ref({})
-let userInfo = ref({})
-const getBasicInfo = () => {
-  baseInfo.value = JSON.parse(localStorage.getItem('baseInfo')) // 人才信息
-  userInfo.value = JSON.parse(localStorage.getItem('userInfo')) // 人才信息
-  selectVal.value = baseInfo?.value?.jobStatus || '0'
-}
-getBasicInfo()
-
-// 求职类型更换
-const handleChangeJobStatus = async () => {
-  await updateJobStatus(selectVal.value)
-  Snackbar.success('更新成功')
-  await userStore.getUserBaseInfos(baseInfo.value.userId)
-  getBasicInfo()
-}
-</script>
-
-<style scoped lang="scss">
-.left-top {
-  display: flex;
-  align-items: center;
-  padding: 12px 0 12px 12px;
-  height: 144px;
-  border-radius: 12px;
-  background-color: #fff;
-  .content {
-    height: 100%;
-    .username {
-      font-weight: 500;
-      font-size: 20px;
-      color: var(--color-222);
-      height: 24px;
-      line-height: 24px;
-    }
-    .userInfo {
-      height: 21px;
-      margin-top: 8px;
-      color: var(--color-666);
-      font-size: 14px;
-    }
-  }
-  .otherInfo {
-    flex: 1;
-    height: 100%;
-    margin-left: 50px;
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--color-333);
-    text-align: left;
-    .salary {
-      font-size: 16px;
-      font-family: 'kanzhun-Regular';
-      font-weight: 500;
-      color: var(--v-error-base);
-      margin: -1px 0 0 16px;
-    }
-    .edu-time {
-      color: var(--color-999);
-      font-weight: 400;
-      margin-left: 20px;
-    }
-    .edu {
-      margin: 12px 0;
-    }
-  }
-  .slider-btn {
-    position: relative;
-    min-width: 188px;
-    height: 100%;
-    overflow: hidden;
-    .slider-btn-item {
-      position: absolute;
-      top: 4px;
-      right: -15px;
-    }
-  }
-}
-</style>

src/views/recruit/personal/PersonalCenter/dynamic/right.vue

@@ -1,207 +0,0 @@
-<template>
-  <div>
-    <div class="accountBox d-flex mb-3 radius white-bgc flex-column">
-      <div class="resume-header ml-3 mt-2">
-        <div class="resume-title">{{ $t('points.wallet') }}</div>
-      </div>
-      <div class="d-flex" v-if="userAccount && Object.keys(userAccount).length">
-        <div v-for="val in accountList" :key="val.title" class="accountItem cursor-pointer" @click="router.push({ path: '/recruit/personal/myWallet' })">
-          <v-icon color="primary">{{ val.icon }}</v-icon>
-          <div class="ml-1">
-            <div v-if="val.key === 'balance'" class="title-text">{{ (userAccount[val.key] && userAccount[val.key] > 0 ? (userAccount[val.key] / 100.0).toFixed(2) : 0) + val.desc }}</div>
-            <div v-else class="title-text">{{ (userAccount[val.key] || 0) + val.desc }}</div>
-            <div class="tip-text">{{ val.title }}</div>
-          </div>
-        </div>
-      </div>
-      <div v-else class="text-center font-size-14 mb-3">
-        请先登录
-      </div>
-    </div>
-
-    <div class="resume d-flex">
-      <div v-for="val in resumeList" :key="val.title" class="topping white-bgc radius" @click="resumeClick(val)">
-        <v-icon color="primary">{{ val.icon }}</v-icon>
-        <div class="ml-1">
-          <div class="title-text">{{ val.title }}</div>
-          <div class="tip-text">{{ val.desc }}</div>
-        </div>
-      </div>
-    </div>
-    <div class="attachment white-bgc radius mt-3">
-      <div>
-        <span class="title">{{ $t('resume.attachmentResume') }}</span>
-        <span class="upload--text cursor-pointer" @click="openFileInput">
-          {{ $t('common.upload') }}
-          <File ref="uploadFile" @success="handleUploadResume"></File>
-        </span>
-      </div>
-      <span class="more-text">{{ $t('resume.uploadUpToFiveCopies') }}</span>
-      <div v-if="attachmentList.length">
-        <div class="d-flex attachment-item my-2" v-for="k in attachmentList" :key="k.id">
-          <v-icon color="primary">mdi-file-account</v-icon>
-          <div class="file-name ellipsis ml-2">{{ k.title }}</div>
-          <span class="cursor-pointer color-primary" @click="previewFile(k.url)">预览</span>
-          <span class="cursor-pointer mx-2 color-primary" @click="handleDownload(k)">下载</span>
-          <span class="cursor-pointer color-error" @click="handleDelete(k)">删除</span>
-        </div>
-      </div>
-      <div v-else class="more-text d-flex justify-center">暂无简历，请先上传</div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-defineOptions({ name: 'personal-center-right'})
-import { ref } from 'vue'
-import { previewFile } from '@/utils'
-import { useRouter } from 'vue-router'
-import { getPersonResumeCv, savePersonResumeCv, deletePersonResumeCv } from '@/api/recruit/personal/resume'
-import { useI18n } from '@/hooks/web/useI18n'
-import { useUserStore } from '@/store/user'
-import Snackbar from '@/plugins/snackbar'
-import Confirm from '@/plugins/confirm'
-import { getBlob, saveAs } from '@/utils'
-
-const { t } = useI18n()
-const router = useRouter()
-const userStore = useUserStore()
-
-const accountList = [
-  { icon: 'mdi-currency-cny', title: t('enterprise.account.accountBalances'), desc: t('unit.rmb'), key: 'balance' },
-  { icon: 'mdi-octagram-outline', title: t('resume.goldCoins'), desc: t('unit.ge'), key: 'point' }
-]
-let userAccount = ref(JSON.parse(localStorage.getItem('userAccount')) || {}) // 账户信息
-userStore.$subscribe((mutation, state) => {
-  userAccount.value = state.userAccount || {}
-})
-
-const resumeList = ref([
-  { name: 'refresh', icon: 'mdi-refresh', title: t('resume.refreshResume'), desc: t('resume.enhanceResumeActivity') },
-  { name: 'order', icon: 'mdi-clipboard-list-outline', title: '我的订单', desc: '交易订单' },
-])
-const resumeClick = async (val) => {
-  if (val.name === 'order') router.push('/recruit/personal/tradeOrder')
-}
-
-// 获取附件
-const attachmentList = ref([])
-const getList = async () => {
-  const data = await getPersonResumeCv()
-  attachmentList.value = data
-}
-getList()
-
-// 选择文件
-const uploadFile = ref()
-const openFileInput = () => {
-  if (attachmentList.value.length >= 5) return Snackbar.warning(t('resume.uploadFiveCopies'))
-  uploadFile.value.trigger()
-}
-
-// 上传附件
-const handleUploadResume = async (url, title) => {
-  if (!url || !title) return
-  Snackbar.success(t('common.uploadSucMsg'))
-  await savePersonResumeCv({ title, url })
-  getList()
-}
-
-// 删除
-const handleDelete = ({ id }) => {
-  Confirm(t('common.confirmTitle'), t('resume.deleteAttachment')).then(async () => {
-    await deletePersonResumeCv(id)
-    Snackbar.success(t('common.delMsg'))
-    getList()
-  })
-}
-
-// 下载附件
-const handleDownload = (k) => {
-  getBlob(k.url).then(blob => {
-    saveAs(blob, k.title)
-  })
-}
-</script>
-
-<style scoped lang="scss">
-.radius {
-  border-radius: 8px;
-}
-.title {
-  font-weight: 600;
-  font-size: 17px;
-}
-.accountBox {
-  width: 100%;
-  .accountItem {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50%;
-    height: 80px;
-    padding: 0 12px;
-    .tip-text {
-      font-size: 13px;
-      color: var(--color-666);
-    }
-    .title-text {
-      font-weight: 600;
-      font-size: 18px;
-      &:hover {
-        color: var(--v-primary-base);
-      }
-    }
-  }
-}
-.resume {
-  width: 100%;
-  .topping {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50%;
-    height: 90px;
-    padding: 12px;
-    margin-right: 12px;
-    cursor: pointer;
-    &:nth-child(2n) {
-      margin-right: 0;
-    }
-    .tip-text {
-      font-size: 12px;
-      color: var(--color-666);
-    }
-    .title-text {
-      font-weight: 600;
-      &:hover {
-        color: var(--v-primary-base);
-      }
-    }
-  }
-}
-.attachment {
-  padding: 12px;
-  .more-text {
-    font-size: 12px;
-    color: var(--color-666);
-    margin-left: 4px;
-  }
-  .upload--text {
-    float: right;
-    color: var(--v-primary-base);
-    font-size: 12px;
-  }
-  .last-update {
-    font-size: 12px;
-    color: var(--color-666);
-  }
-  .attachment-item {
-    color: #555;
-    font-size: 14px;
-    .file-name {
-      width: 219px;
-    }
-  }
-}
-</style>

src/views/recruit/personal/PersonalCenter/index.vue

@@ -1,21 +1,84 @@
 <template>
-  <div class="default-width d-flex pt-3">
-    <div class="left mr-3">
-      <LeftPage></LeftPage>
-    </div>
-    <div class="right">
-      <RightPage></RightPage>
-    </div>
+  <div class="pt-3 default-width d-flex parent">
+    <v-card class="left">
+      <v-list class="side-box" color="primary">
+        <v-list-subheader class="title mb-3">个人中心</v-list-subheader>
+        <template v-for="(item, index) in list">
+          <template v-if="!item.children.length">
+            <v-list-item
+              :key="`${item.name}_${index}`"
+              active-class="active"
+              color="primary"
+              :href="item.path"
+              :to="item.path"
+              :prepend-icon="item.icon"
+              :title="getCurrentLocaleLang() === 'zh_CN' ? item.title : item.enName"
+            >
+            </v-list-item>
+          </template>
+          <v-list-group
+            v-else
+            color="primary"
+            :key="`${item.path}_${item.title}`"
+            :prepend-icon="item.icon"
+          >
+            <template v-slot:activator="{ props }">
+              <v-list-item v-bind="props" :title="getCurrentLocaleLang() === 'zh_CN' ? item.title : item.enName"></v-list-item>
+            </template>
+            <v-list-item
+              v-for="(val, i) in item.children"
+              :key="i"
+              color="primary"
+              :href="val.path"
+              style="padding-left: 40px;"
+              :to="val.path"
+              :title="getCurrentLocaleLang() === 'zh_CN' ? val.title : val.enName"
+              :value="val.path"
+            ></v-list-item>
+          </v-list-group>
+        </template>
+      </v-list>
+    </v-card>
+
+    <v-card class="ml-3 pa-3 page">
+      <router-view></router-view>
+    </v-card>
   </div>
 </template>
 
 <script setup>
-defineOptions({ name: 'personal-center'})
-
-import LeftPage from './dynamic/left.vue'
-import RightPage from './dynamic/right.vue'
+defineOptions({ name: 'person-center'})
+import { computed } from 'vue'
+import { getCurrentLocaleLang } from '@/utils/lang.js'
 import { useUserStore } from '@/store/user'
+import personCenterRoute from '@/router/modules/components/recruit/personCenter'
+
+// 左侧菜单列表
+const list = computed(() => {
+  return getList(personCenterRoute[0].children[0].children)
+})
 
+const getList = (arr, obj = []) => {
+  arr.forEach(element => {
+    if (element.show) return
+    let data = {}
+    data = {
+      title: element?.meta?.title,
+      enName: element?.meta?.enName,
+      icon: element?.meta?.icon,
+      name: element?.name,
+      path: element?.path,
+      children: []
+    }
+    if (element?.children) {
+      getList(element.children, data.children)
+    }
+    obj.push(data)
+  })
+  return obj
+}
+
+// 更新账户信息
 const store = useUserStore()
 const updateAccountInfo = async () => {
   await store.getUserAccountInfo()
@@ -24,10 +87,36 @@ updateAccountInfo()
 </script>
 
 <style scoped lang="scss">
-.left {
-  width: 800px;
+.parent {
+  height: calc(100vh - 150px);
+  overflow-y: auto;
 }
-.right {
+.page {
   flex: 1;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.left {
+  position: sticky;
+  width: 250px;
+  height: calc(100vh - 173px);
+}
+.title {
+  color: var(--color-333);
+  font-weight: 600;
+  font-size: 20px;
+}
+::-webkit-scrollbar {
+  width: 6px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
+  // 滚动条-颜色
+  background: #c3c3c379;
+}
+::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
+  // 滚动条-底色
+  background: #e5e5e58f;
 }
 </style>

src/views/recruit/personal/PersonalCenter/components/interview/item.vue → src/views/recruit/personal/PersonalCenter/jobFeedback/components/interview/item.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="position-item mb-3 job-closed" v-for="(val, i) in props.items" :key="i" @mouseenter="val.active = true" @mouseleave="val.active = false">
+  <div class="position-item mb-3 job-closed elevation-2" v-for="(val, i) in props.items" :key="i" @mouseenter="val.active = true" @mouseleave="val.active = false">
       <div class="info-header">
         <div v-if="val.active && val.status === '0'" class="header-btn">
           <v-btn color="primary" size="small" @click="handleAgree(val)">同意</v-btn>
@@ -120,7 +120,7 @@ const handleRefuse = (val) => {
   background-color: #fff;
   border-radius: 12px;
   &:hover {
-    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
+    box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 5px 8px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 14px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important;
   }
   .info-header {
     height: 48px;

src/views/recruit/personal/PersonalCenter/components/seenMe.vue → src/views/recruit/personal/PersonalCenter/jobFeedback/components/seenMe.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="items.length" class="mt-3">
-      <div class="positionItem" v-for="(item, index) in items" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
+      <div class="positionItem elevation-2" v-for="(item, index) in items" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
         <div class="position-and-company">
           <div class="position">
             <div class="float-left">
@@ -116,7 +116,7 @@ const handleEnterprise = (item) => {
   transition: all .2s linear;
   background-color: #fff;
   &:hover {
-    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
+    box-shadow: 0px 3px 5px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 5px 8px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 14px 0px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12)) !important;
   }
   .position-and-company {
     display: flex;

src/views/recruit/personal/PersonalCenter/jobFeedback/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
+      <v-tab v-for="(val, i) in list" :key="i" :value="i">{{ val.title }}</v-tab>
+    </v-tabs>
+    <div :class="['left-bottom', {'mt-3': list[tab].path !== interview && list[tab].path !== interested}]">
+      <component :is="list[tab].path"></component>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'person-center-job-feedback' })
+import { ref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import delivery from './components/delivery.vue'
+import interview from './components/interview/index.vue'
+import interested from './components/interested.vue'
+import seenMe from './components/seenMe.vue'
+
+const { t } = useI18n()
+const list = [
+  { title: t('position.delivered'), path: delivery },
+  { title: t('position.interview'), path: interview },
+  { title: t('position.interested'), path: interested },
+  { title: t('position.haveSeenMe'), path: seenMe }
+]
+
+const tab = ref(0)
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/recruit/personal/PersonalCenter/taskCenter/components/daily.vue

@@ -0,0 +1,30 @@
+<!-- 每日任务 -->
+<template>
+  <div>
+    <div class="resume-title my-5">{{ $t('taskCenter.dailyTask') }}</div>
+    <div v-for="(item, index) in list" :key="'suggest' + index">
+      <div class="d-flex ml-2 my-5">
+        <div class="ellipsis" style="width: 50%;">{{ item.title }}</div>
+        <div class="ellipsis d-flex" style="width: calc(50% - 88px);">
+          <svg-icon class="mx-1" name="integral" size="24"></svg-icon>
+          <span style="color: #10897bad;">{{ item.奖励积分数 }}</span>
+        </div>
+        <v-chip label :color="item.状态 ? 'success' : 'error'">{{ item.状态 ? '已完成' : '未完成' }}</v-chip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'personal-taskCenter-daily'})
+const list = [
+  { title: '收藏5个职位', 奖励积分数: '5', 状态: false },
+  { title: '收藏5个公司', 奖励积分数: '5', 状态: true },
+  { title: '投递简历10次', 奖励积分数: '10', 状态: false },
+  { title: '主动沟通10次', 奖励积分数: '10', 状态: false },
+  { title: '分享职位5次', 奖励积分数: '5', 状态: true },
+  { title: '推荐入职成功', 奖励积分数: '50', 状态: false },
+]
+</script>
+<style lang="scss" scoped>
+</style>

src/views/recruit/personal/PersonalCenter/taskCenter/components/signIn.vue

@@ -0,0 +1,105 @@
+<!-- 签到 -->
+<template>
+  <div>
+    <integralShow ref="integralRef"></integralShow>
+    <div class="d-flex justify-center mt-10">
+      <div v-for="(item, index) in configList" :key="'signInKey' + index" >
+        <div
+          class="borderRadius-5 mx-5 py-3 px-4"
+          style="text-align: center;"
+          :style="{'background-color': index < continuousDay ? '#10897ba8' : 'var(--color-f2f4f7)'}"
+        >
+          <!-- 图标 -->
+          <div class="mt-1">
+            <svg-icon v-if="index < continuousDay" name="tick" size="36"></svg-icon>
+            <svg-icon v-else name="integral" size="38"></svg-icon>
+          </div>
+          <div class="mt-2" :style="{'color': index < continuousDay ? '#fff' : 'var(--color-333)'}">
+            <span class="font-12">+</span>
+            <span>{{ item.point }}</span>
+          </div>
+        </div>
+        <div class="mt-2 font-13" style="text-align: center;" :style="{'color': index < continuousDay ? '#10897b' : 'var(--color-333)'}">
+          {{ `${index === todayNumber ? '今天' : '第' + item.day + '天'}` }}
+        </div>
+      </div>
+    </div>
+    <div class="mt-8" style="text-align: right;">
+      <span v-if="continuousDay > 0" class="font-13 color-777 mr-3">
+        您已经连续签到
+        <span class="mx-1" style="color: var(--v-primary-base); font-weight: 600;"> {{ continuousDay }} </span>
+        天，明天再来吧
+      </span>
+      <v-btn class="half-button" color="primary" size="small" :loading="signLoading" :disabled="todaySignIn" @click="handleSignIn">{{ todaySignIn ? '已签到' : '签到' }}</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'personal-taskCenter-signIn'})
+import { ref } from 'vue'
+import { useUserStore } from '@/store/user'
+import { useI18n } from '@/hooks/web/useI18n'
+import { getRewardSignInRecordSummary, getRewardSignInConfigList, createRewardSignInRecord } from '@/api/sign'
+import integralShow from '@/views/integral/pointsManagement/components/integralShow.vue'
+import Snackbar from '@/plugins/snackbar'
+
+const { t } = useI18n()
+const userStore = useUserStore()
+const integralRef = ref()
+// 连续签到天数
+const continuousDay = ref(0)
+// 今天有无签到
+const todaySignIn = ref(false)
+// 规则列表
+const configList = ref([])
+const todayNumber = ref()
+const signLoading = ref(false)
+
+// 获取签到规则列表
+const getConfigList = async () => {
+  const data = await getRewardSignInConfigList()
+  configList.value = data
+}
+getConfigList()
+
+// 获取个人签到统计
+const getSummary = async () => {
+  const data = await getRewardSignInRecordSummary()
+  if (!data) return
+  continuousDay.value = data.continuousDay // 连续签到第n天
+  todaySignIn.value = data.todaySignIn // 今天有无签到
+  todayNumber.value = todaySignIn.value ? continuousDay.value - 1 : continuousDay.value
+}
+getSummary()
+
+// 签到
+const handleSignIn = async () => {
+  signLoading.value = true
+  await createRewardSignInRecord()
+  setTimeout(async () => {
+    await getSummary()
+    Snackbar.success(t('taskCenter.signInSuccess'))
+    signLoading.value = false
+
+    // 更新积分数
+    await userStore.getUserAccountInfo()
+  }, 1000)
+}
+</script>
+
+<style lang="scss" scoped>
+.color-333 { color: var(--color-333); }
+.color-fff { color: #fff; }
+.color-777 { color: var(--color-666); }
+.font-12 { font-size: 12px; }
+.font-13 { font-size: 13px; }
+.font-14 { font-size: 14; }
+.font-16 { font-size: 16px; }
+.borderRadius-5 { border-radius: 5px; }
+.signInRecord {
+  font-size: 14px;
+  color: var(--v-primary-base);
+  cursor: pointer;
+}
+</style>

src/views/recruit/personal/PersonalCenter/taskCenter/components/suggest.vue

@@ -0,0 +1,30 @@
+<!-- 推荐任务 -->
+<template>
+  <div>
+    <div class="resume-title my-5">{{ $t('taskCenter.suggestTask') }}</div>
+    <div v-for="(item, index) in list" :key="'suggest' + index">
+      <div class="d-flex ml-2 my-5">
+        <div class="ellipsis" style="width: 50%;">{{ item.title }}</div>
+        <div class="ellipsis d-flex" style="width: calc(50% - 88px);">
+          <svg-icon class="mx-1" name="integral" size="24"></svg-icon>
+          <span style="color: #10897bad;">{{ item.奖励积分数 }}</span>
+        </div>
+        <v-chip label :color="item.状态 ? 'success' : 'error'">{{ item.状态 ? '已完成' : '未完成' }}</v-chip>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'personal-taskCenter-suggest'})
+const list = [
+  { title: '首次登录奖励', 奖励积分数: '5', 状态: true },
+  { title: '上传个人头像', 奖励积分数: '10', 状态: false },
+  { title: '完成工作经历', 奖励积分数: '5', 状态: true },
+  { title: '首次投递简历并主动沟通', 奖励积分数: '5', 状态: true },
+  { title: '个人简历被企业接收并回复', 奖励积分数: '20', 状态: false },
+  { title: '购买会员服务费', 奖励积分数: '20', 状态: false },
+]
+</script>
+<style lang="scss" scoped>
+</style>

src/views/recruit/personal/PersonalCenter/taskCenter/index.vue

@@ -0,0 +1,21 @@
+<!-- 任务中心 -->
+<template>
+  <div class="py-3">
+    <!-- 签到 -->
+    <signIn class="white-bgc borderRadius5 mb-3 pa-3"></signIn>
+    <!-- 推荐任务 -->
+    <suggest class="white-bgc borderRadius5 mb-3 pa-3"></suggest>
+    <!-- 每日任务 -->
+    <daily class="white-bgc borderRadius5 mb-3 pa-3"></daily>
+  </div>
+</template>
+
+<script setup>
+import signIn from './components/signIn.vue'
+import suggest from './components/suggest.vue'
+import daily from './components/daily.vue'
+defineOptions({name: 'personal-taskCenter-index'})
+</script>
+<style lang="scss" scoped>
+.borderRadius5 { border-radius: 5px; }
+</style>

src/views/recruit/personal/PersonalCenter/wallet/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <div class="mb-3 pa-3">
+      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
+        <v-tab :value="0">{{ $t('enterprise.account.accountBalances') }}</v-tab>
+        <v-tab :value="1">{{ $t('resume.goldCoins') }}</v-tab>
+      </v-tabs>
+    </div>
+    <myBalance v-if="tab === 0"></myBalance>
+    <IntegralPage v-if="tab === 1" :type="1"></IntegralPage>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'person-center-wallet'})
+import myBalance from './myBalance'
+import IntegralPage from '@/views/integral/pointsManagement'
+import { useUserStore } from '@/store/user'
+import { ref } from 'vue'
+
+const tab = ref(0)
+
+const store = useUserStore()
+const updateAccountInfo = async () => {
+  await store.getUserAccountInfo()
+}
+updateAccountInfo()
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/recruit/personal/PersonalCenter/wallet/myBalance/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <div class="pa-3 mb-2 white-bgc">
+      <!-- 余额展示 -->
+      <div class="statisticsBox">
+        <div class="ml-10 mt-2">
+          <div class="item-title">
+            您当前可用余额
+          </div>
+          <div class="item-value">
+            {{ userAccount?.balance && userAccount?.balance > 0 ? (userAccount?.balance / 100.0).toFixed(2) : 0 }}
+            <span
+              class="text-decoration-underline cursor-pointer"
+              style="color: #666; font-size: 13px;"
+              @click="handleRecharge"
+            >充值</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 表格 -->
+    <div class="mt-3 white-bgc pa-3 pt-3">
+      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="handleChangeTab">
+        <v-tab value="rechargeDetails">{{ $t('points.rechargeDetails') }}</v-tab>
+        <!-- <v-tab :value="otherHeader">otherHeader</v-tab> -->
+      </v-tabs>
+      <CtTable
+        class="mt-3"
+        :items="dataList"
+        :headers="headerList[tab]"
+        :loading="false"
+        :elevation="0"
+        :isTools="false"
+        :showPage="true"
+        :total="total"
+        :page-info="query"
+        itemKey="id"
+        @pageHandleChange="handleChangePage"
+      >
+      </CtTable>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'myWallet-myBalance-index'})
+import { ref } from 'vue'
+import { timesTampChange } from '@/utils/date'
+import { FenYuanTransform } from '@/utils/position'
+import { getUserWalletRechargePage } from '@/api/recruit/personal/myWallet.js'
+
+const tab = ref('rechargeDetails')
+
+const userAccount = ref(JSON.parse(localStorage.getItem('userAccount')) || {}) // 账户信息
+
+const total = ref(0)
+const query = ref({
+  pageNo: 1,
+  pageSize: 10,
+})
+const dataList = ref([])
+
+const headerList = {
+  rechargeDetails: [
+    { title: '充值金额', key: 'payPrice', value: item =>  FenYuanTransform(item.payPrice) + '元', sortable: false },
+    { title: '支付方式', key: 'payChannelName', sortable: false },
+    { title: '支付订单编号', key: 'payOrderId', sortable: false },
+    { title: '交易时间', key: 'payTime', value: item =>  timesTampChange(item.payTime), sortable: false },
+  ],
+  // otherHeader: []
+}
+
+
+// 积分、签到明细
+const getData = async () => {
+  const res = await getUserWalletRechargePage(query.value)
+  dataList.value = res.list
+  total.value = res.total
+}
+getData()
+
+const handleChangePage = (e) => {
+  query.value.pageNo = e
+  getData()
+}
+
+// 切换
+const handleChangeTab = () => {
+  query.value.pageNo = 1
+  getData()
+}
+
+// 充值
+import { useRouter } from 'vue-router'; const router = useRouter()
+const handleRecharge = () => {
+  router.push({ path: '/personalRecharge' })
+}
+</script>
+
+<style lang="scss" scoped>
+.statisticsBox {
+  padding: 10px 0;
+  border-radius: 10px;
+  background-color: var(--default-bgc);
+  // background-color: var(--color-f3);
+  // font-family: 宋体, SimSun;
+}
+.item-title {
+  font-size: 20px; 
+  color: var(--color-333); 
+  line-height: 28px; 
+  font-weight: bold;
+}
+.item-value {
+  font-size: 42px; 
+  color: #10897bba;
+  line-height: 50px;
+}
+</style>
+

src/views/recruit/personal/accountSettings/index.vue

@@ -1,67 +0,0 @@
-<!-- 账号与安全中心 -->
-<template>
-  <div class="d-flex pa-3 default-width" style="height: 700px;">
-    <v-card class="left">
-      <h3>{{ $t('setting.accountSettings') }}</h3>
-      
-      <v-list>
-        <v-list-item
-          v-for="item in items"
-          :key="item.value"
-          :to="item.path"
-          color="primary"
-        >
-          <v-list-item-title class="list-item">{{ item.title }}</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-card>
-
-    <v-card class="right ml-3" style="padding: 30px 60px">
-      <router-view></router-view>
-    </v-card>
-  </div>
-</template>
-
-<script setup>
-defineOptions({ name:'personal-account-index'})
-import { useI18n } from '@/hooks/web/useI18n'
-const { t } = useI18n()
-
-const items = [
-  // { title: t('setting.accountBinding'), path: '/recruit/personal/accountSettings/accountBinding', },
-  // { title: t('setting.realNameAuthentication'), path: '/recruit/personal/accountSettings/realAuthentication', },
-  { title: t('setting.editPassword'), path: '/recruit/personal/accountSettings/editPassword', },
-  // { title: t('setting.privacyPolicySettings'), path: '/recruit/personal/accountSettings/privacySettings' }
-]
-</script>
-
-<style lang="scss" scoped>
-.left {
-  width: 220px;
-}
-.right {
-  flex: 1;
-}
-:deep(.v-list-item) {
-  padding: 0 !important;
-}
-.list-item {
-  height: 62px;
-  width: 100%;
-  line-height: 62px;
-  font-weight: 500;
-  // color: var(--color-666);
-  font-size: 16px;
-  cursor: pointer;
-  margin: 0;
-  padding-left: 40px;
-  text-align: left;
-  transition: all .3s;
-}
-h3 {
-  font-size: 20px;
-  padding: 30px 0 30px 40px;
-  text-align: left;
-  font-weight: 600;
-}
-</style>