账户余额

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

@@ -1,5 +1,15 @@
 <template>
   <div>
+    <div class="accountBox d-flex mb-3 radius">
+      <div v-for="val in accountList" :key="val.title" class="accountItem white-bgc">
+        <!-- <v-icon color="primary">{{ val.icon }}</v-icon> -->
+        <div class="ml-1">
+          <div class="title-text">{{ val.title }}</div>
+          <div class="tip-text">{{ (userAccount[val.key] || 0) + val.desc }}</div>
+        </div>
+      </div>
+    </div>
+
     <div class="resume d-flex">
       <div v-for="val in resumeList" :key="val.title" class="topping white-bgc radius">
         <v-icon color="primary">{{ val.icon }}</v-icon>
@@ -45,10 +55,22 @@ import { uploadFile } from '@/api/common'
 import { previewFile } from '@/utils'
 import { getPersonResumeCv, savePersonResumeCv, deletePersonResumeCv } from '@/api/resume'
 import { useI18n } from '@/hooks/web/useI18n'
+import { useUserStore } from '@/store/user'
 import Snackbar from '@/plugins/snackbar'
 import Confirm from '@/plugins/confirm'
 
 const { t } = useI18n()
+const userStore = useUserStore()
+
+const accountList = [
+  { icon: 'mdi-upload', title: '账户余额', desc: '元', key: 'balance' },
+  { icon: 'mdi-refresh', title: '剩余积分', desc: '点', key: 'point' }
+]
+let userAccount = ref(JSON.parse(localStorage.getItem('userAccount')) || {}) // 账户信息
+userStore.$subscribe((mutation, state) => {
+  userAccount.value = state.userAccount || {}
+})
+
 const resumeList = [
   { icon: 'mdi-upload', title: t('resume.topResume'), desc: t('resume.increaseMoreExposure') },
   { icon: 'mdi-refresh', title: t('resume.refreshResume'), desc: t('resume.enhanceResumeActivity') }
@@ -140,6 +162,32 @@ const handleDownload = (k) => {
   font-weight: 600;
   font-size: 17px;
 }
+.accountBox {
+  width: 100%;
+  .accountItem {
+    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);
+      // }
+    }
+  }
+}
 .resume {
   width: 100%;
   .topping {