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
        style="height: 100%;"
        :class="{
          'disable1': userStore.userInfo?.vipExpireDate > Date.now() && !userStore.userInfo?.entitlement?.resumeTemplate,
          'disable2': !userStore.userInfo?.vipExpireDate || (userStore.userInfo?.vipExpireDate && userStore.userInfo?.vipExpireDate < Date.now())
        }"
      ></div>
    </div>
  </div>
</template>

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

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?.vipFlag && (userStore.userInfo?.vipExpireDate > Date.now()) && userStore.userInfo?.entitlement?.resumeTemplate
})


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

<style lang="scss" scoped>
.tips {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.disable1 {
  position: relative;
  overflow: hidden;
  &::after {
    content: '当前会员套餐的福利不包含简历模板';
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-family: 'MiSans-Bold';
    color: #fff;
    top: 0;
    border-radius: 12px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
  }
}
.disable2 {
  position: relative;
  overflow: hidden;
  &::after {
    content: '简历模板为会员福利内容';
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-family: 'MiSans-Bold';
    color: #fff;
    top: 0;
    border-radius: 12px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
  }
}
</style>