menduner/src/views/mall/purchasePackage/index.vue

<!-- 购买套餐 -->
<template>
  <div class="default-width py-3">
    <div class="white-bgc resume-box">
      <div class="resume-header">
        <div class="resume-title">购买会员</div>
      </div>
      <div class="d-flex align-center justify-center my-5">
        <div
          v-for="(item, index) in packList"
          :key="index"
          :elevation="tab === (index+1) ? 3 : 2"
          class="packagesItem cursor-pointer mx-3"
          :class="{'active': tab === (index+1)}"
          style="width: 200px;"
          @click="tab = index + 1"
        >
          <div class="d-flex flex-column align-center pb-5">  
            <div class="mt-4 font16 fontBold titleColor">{{ item.title }}</div>  
            <div class="mt-2 fontBold priceBox">
              <span>￥</span>
              <span class="font28">{{ item.price }}</span>
            </div>  
            <div class="dailyPrice font13 mt-2">开通会员</div>  
          </div> 
        </div>
      </div>
      <v-data-table
        :items="!type ? personalItems : enterpriseItems"
        :headers="headers"
      > 
        <template v-slot:[`item.equity`]="{ item }">
          <span class="font-weight-bold font-size-14">{{ item.equity }}</span>
        </template>
        <template #bottom></template>
      </v-data-table>
    </div>
  </div>
</template>

<script setup>
defineOptions({name: 'purchasePackage'})
import { ref } from 'vue'
const tab = ref(1)

defineProps({
  type: {
    type: Number,
    default: 0 // 0个人 1企业
  }
})

const packList = [
  { title: '14天双周卡', price: 38 },
  { title: '30天月卡', price: 58 },
  { title: '60天月卡', price: 78 },
  { title: '季度卡', price: 108 },
  { title: '年度卡', price: 388 }
]

const headers = [
  { title: '权益', key: 'equity', value: 'equity', sortable: false },
  { title: '14天双周卡', key: 'weeklyCard', sortable: false },
  { title: '30天月卡', key: 'thirtyCard', sortable: false },
  { title: '60天月卡', key: 'sixtyCard', sortable: false },
  { title: '季度卡', key: 'seasonCard', sortable: false },
  { title: '年度卡', key: 'yearCard', sortable: false }
]

const personalItems = [
  { equity: '简历刷新pro', weeklyCard: '5次/天', thirtyCard: '5次/天', sixtyCard: '15次/天', seasonCard: '40次/天', yearCard: '40次/天' },
  { equity: '竞争力分析', weeklyCard: '20次/天', thirtyCard: '25次/天', sixtyCard: '35次/天', seasonCard: '无限', yearCard: '无限' },
  { equity: '谁对我有兴趣', weeklyCard: '3次/天', thirtyCard: '无限查看', sixtyCard: '无限查看', seasonCard: '无限查看', yearCard: '无限查看' },
  { equity: '投递优先查看', weeklyCard: '✓', thirtyCard: '✓', sixtyCard: '✓', seasonCard: '✓', yearCard: '✓' },
  { equity: 'VIP会员标识', weeklyCard: '✓', thirtyCard: '✓', sixtyCard: '✓', seasonCard: '✓', yearCard: '✓' },
  { equity: 'VIP专属折扣', weeklyCard: '✓', thirtyCard: '✓', sixtyCard: '✓', seasonCard: '✓', yearCard: '✓' },
  { equity: '简历内容范例', weeklyCard: '×', thirtyCard: '×', sixtyCard: '×', seasonCard: '5条', yearCard: '✓' },
  { equity: '会员简历模版', weeklyCard: '×', thirtyCard: '×', sixtyCard: '×', seasonCard: '3次', yearCard: '✓' },
  { equity: '一键润色简历', weeklyCard: '×', thirtyCard: '×', sixtyCard: '×', seasonCard: '10次/天', yearCard: '无限' },
  { equity: '导入解析简历', weeklyCard: '×', thirtyCard: '×', sixtyCard: '×', seasonCard: '10次/天', yearCard: '无限' },
  { equity: '简历草稿数', weeklyCard: '×', thirtyCard: '×', sixtyCard: '×', seasonCard: '5份', yearCard: '20份' },
  { equity: '全年简历回收', weeklyCard: '×', thirtyCard: '×', sixtyCard: '×', seasonCard: '×', yearCard: '✓' },
  { equity: '会员求职大礼包', weeklyCard: '×', thirtyCard: '×', sixtyCard: '×', seasonCard: '×', yearCard: '✓' },
]

const enterpriseItems = [
  { equity: '职位发布', weeklyCard: '3个', thirtyCard: '5个', sixtyCard: '10个', seasonCard: '15个', yearCard: '20个' },
  { equity: '发布岗位置顶', weeklyCard: '1次/天', thirtyCard: '3次/天', sixtyCard: '5次/天', seasonCard: '10次/天', yearCard: '无限' },
  { equity: '优质人才搜索', weeklyCard: '3次/天', thirtyCard: '5次/天', sixtyCard: '10次/天', seasonCard: '20次/天', yearCard: '无限' },
  { equity: '专属职位推荐', weeklyCard: '×', thirtyCard: '×', sixtyCard: '1次/天', seasonCard: '10次/天', yearCard: '25次/天' },
  { equity: '候选推荐', weeklyCard: '×', thirtyCard: '×', sixtyCard: '2次/天', seasonCard: '10次/天', yearCard: '无限' },
  { equity: '背景调查及报告', weeklyCard: '×', thirtyCard: '×', sixtyCard: '×', seasonCard: '×', yearCard: '赠送2次' },
  { equity: '保入职服务', weeklyCard: '×', thirtyCard: '×', sixtyCard: '×', seasonCard: '✓', yearCard: '✓' },
  { equity: '主页轮播广告', weeklyCard: '×', thirtyCard: '×', sixtyCard: '×', seasonCard: '×', yearCard: '✓' },
  { equity: 'AI分析简历', weeklyCard: '×', thirtyCard: '×', sixtyCard: '×', seasonCard: '2次', yearCard: '✓' }
]
</script>

<style lang="scss" scoped>
:deep(.v-data-table-header__content) {
  color: #883a19;
  font-size: 16px;
  font-weight: 700;
}
.font13 { font-size: 13px; }
.font16 { font-size: 16px; }
.font28 { font-size: 28px; }
.fontBold { font-weight: bold; }
.titleColor { color: #883a19; }
.packagesItem {
  border: 1px solid var(--color-f3);
  border-radius: 8px;
  background-color: var(--color-f2f4f742);
}
.dailyPrice {
  border-radius: 14px;
  background-color: #dde3e94f;
  padding: 2px 18px;
  color: var(--color-666);
}
.active {
  padding: 4px 8px;
  border: 1px solid #cf990c;
  background-color: #fff;
  .titleColor {
    color: #cf990c;
  }
  .priceBox {
    color: #ff4747;
  }
  .dailyPrice {
    color: #ff4747;
    background-color: #fff4e7;
  }
}
</style>