menduner/src/views/recruit/personal/PersonalCenter/resume/template/index.vue

<template>
  <div class="resume-box" style="position: relative; height: 100%;">
    <div class="resume-header">
      <div class="resume-title">简历模板下载</div>
    </div>
    <div style="height: calc(100% - 58px);  width: 100%;" class="mt-3">
      <div v-if="vip" class="mt-5">
        <CtTable
          :items="list"
          :headers="headers"
          :loading="false"
          :elevation="0"
          :isTools="false"
          :showPage="false"
        >
          <template #actions="{ item }">
            <v-btn variant="text" color="primary" prepend-icon="mdi-eye-outline" @click="previewFile(item.url)">预览</v-btn>
            <v-btn variant="text" color="primary" prepend-icon="mdi-square-edit-outline" @click="handleDownload(item)">下载</v-btn>
          </template>
        </CtTable>
      </div>
      <div v-else class="mt-8 tips">
        <span class="color-error" v-if="userStore.userInfo?.vipExpireDate && !userStore.userInfo?.entitlement?.resumeTemplate">
          当前会员套餐的福利不包含简历模板，<span class="text-decoration-underline cursor-pointer" @click="goBuy">去升级</span>
        </span>
        <span class="color-error" v-if="!userStore.userInfo?.vipExpireDate">
          简历模板为会员福利内容，<span class="text-decoration-underline cursor-pointer" @click="goBuy">去开通</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'resume-template'})
import { ref, computed } from 'vue'
import { previewFile, getBlob, saveAs } from '@/utils'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'

const router = useRouter()
const userStore = useUserStore()
// 简历模板列表
const list = ref([
  { active: false, title: '创新精英简历模板', url: 'https://minio.menduner.com/dev/menduner/resumeTemplate/%E5%88%9B%E6%96%B0%E7%B2%BE%E8%8B%B1%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.docx' },
  { active: false, title: '顶尖人才简历模板', url: 'https://minio.menduner.com/dev/menduner/resumeTemplate/%E9%A1%B6%E5%B0%96%E4%BA%BA%E6%89%8D%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.docx' },
  { active: false, title: '高级职业经理人简历模板', url: 'https://minio.menduner.com/dev/menduner/resumeTemplate/%E9%AB%98%E7%BA%A7%E8%81%8C%E4%B8%9A%E7%BB%8F%E7%90%86%E4%BA%BA%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.docx' },
  { active: false, title: '高效职场精英简历模板', url: 'https://minio.menduner.com/dev/menduner/resumeTemplate/%E9%AB%98%E6%95%88%E8%81%8C%E5%9C%BA%E7%B2%BE%E8%8B%B1%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.doc' },
  { active: false, title: '领导力简历模板', url: 'https://minio.menduner.com/dev/menduner/resumeTemplate/%E9%A2%86%E5%AF%BC%E5%8A%9B%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.docx' },
  { active: false, title: '行业精英专属简历模板', url: 'https://minio.menduner.com/dev/menduner/resumeTemplate/%E8%A1%8C%E4%B8%9A%E7%B2%BE%E8%8B%B1%E4%B8%93%E5%B1%9E%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.docx' },
  { active: false, title: '行业领袖简历模板', url: 'https://minio.menduner.com/dev/menduner/resumeTemplate/%E8%A1%8C%E4%B8%9A%E9%A2%86%E8%A2%96%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.docx' },
  { active: false, title: '专业卓越简历模板', url: 'https://minio.menduner.com/dev/menduner/resumeTemplate/%E4%B8%93%E4%B8%9A%E5%8D%93%E8%B6%8A%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.doc' },
  { active: false, title: '卓越成就简历模板', url: 'https://minio.menduner.com/dev/menduner/resumeTemplate/%E5%8D%93%E8%B6%8A%E6%88%90%E5%B0%B1%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.docx' },
  { active: false, title: '卓越职业轨迹简历模板', url: 'https://minio.menduner.com/dev/menduner/resumeTemplate/%E5%8D%93%E8%B6%8A%E8%81%8C%E4%B8%9A%E8%BD%A8%E8%BF%B9%E7%AE%80%E5%8E%86%E6%A8%A1%E6%9D%BF.docx' },
])

const headers = [
  { title: '简历模板名称', key: 'title', sortable: false },
  { title: '操作', key: 'actions', sortable: false, align: 'center' }
]

const vip = computed(() => {
  return userStore.userInfo?.entitlement?.resumeTemplate
})


// 下载附件
const handleDownload = (k) => {
  getBlob(k.url).then(blob => {
    saveAs(blob, k.title)
  })
}

const goBuy = () => {
  router.push('/recruit/personal/personalCenter/memberBenefits/membershipPackage')
}
</script>

<style lang="scss" scoped>
.tips {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>