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

<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>