会员权益改为列表展示

src/layout/personal/navBar.vue

@@ -176,7 +176,7 @@ const handleLogout = async () => {
 }
 
 const items = ref([
-  { title: t('vipPackage.purchasePackage'), icon: 'mdi-gift-outline', change: () => router.push({ path: '/mall/purchasePackage' }) },
+  { title: t('vipPackage.purchasePackage'), icon: 'mdi-gift-outline', change: () => router.push({ path: '/recruit/personal/purchasePackage' }) },
   { title: t('resume.onlineResume'), icon: 'mdi-list-box-outline', change: () => router.push({ path: '/recruit/personal/resume' }) },
   { title: t('setting.accountSettings'), icon: 'mdi-cog-outline', change: () => router.push({ path: '/recruit/personal/accountSettings/accountBinding' }) },
   { title: t('setting.switchToRecruit'), icon: 'mdi-swap-horizontal', change: changeLoginType },

src/router/modules/components/recruit/personal.js

@@ -154,7 +154,7 @@ const personal = [
     ]
   },
   {
-    path: '/mall/purchasePackage',
+    path: '/recruit/personal/purchasePackage',
     component: Layout,
     name: 'personalPurchasePackage',
     meta: {
@@ -162,11 +162,11 @@ const personal = [
     },
     children: [
       {
-        path: '/mall/purchasePackage',
-        component: () => import('@/views/mall/purchasePackage/index'),
+        path: '/recruit/personal/purchasePackage',
+        component: () => import('@/views/recruit/personal/purchasePackage'),
         meta: {
           title: '购买套餐'
-        },
+        }
       }
     ]
   },

src/utils/purchasePackage.js

@@ -1,142 +0,0 @@
-const commonList = [
-  { label: '简历刷新pro', value: 'resumeRefresh' },
-  { label: '竞争力分析', value: 'competitiveAnalysis' },
-  { label: '谁对我有兴趣', value: 'interestedInMe' },
-  { label: '投递优先查看', value: 'priorityViewDelivery' },
-  { label: 'VIP会员标识', value: 'memberIdentification' },
-  { label: 'VIP专属折扣', value: 'exclusiveDiscount' }
-]
-
-const commonList2 = [
-  { label: '简历刷新pro', value: 'resumeRefresh' },
-  { label: '竞争力分析', value: 'competitiveAnalysis' },
-  { label: '谁对我有兴趣', value: 'interestedInMe' },
-  { label: '投递优先查看', value: 'priorityViewDelivery' },
-  { label: 'VIP会员标识', value: 'memberIdentification' },
-  { label: 'VIP专属折扣', value: 'exclusiveDiscount' },
-  { label: '简历内容范例', value: 'resumeExample' },
-  { label: '会员简历模版', value: 'resumeTemplate' },
-  { label: '一键润色简历', value: 'proofreadingResume' },
-  { label: '导入解析简历', value: 'analyzeResume' },
-  { label: '简历草稿数', value: 'resumeDraftNumber' },
-  { label: '全年简历回收', value: 'resumeRecovery' },
-  { label: '会员求职大礼包', value: 'jobHuntGiftPacks' }
-]
-
-const commonOrdinary = {
-  resumeRefresh: '20元5次',
-  competitiveAnalysis: '20元5次',
-  interestedInMe: '10元/当日3次',
-  priorityViewDelivery: false,
-  memberIdentification: false,
-  exclusiveDiscount: false
-}
-
-const commonOrdinary2 = {
-  resumeRefresh: '20元5次',
-  competitiveAnalysis: '20元5次',
-  interestedInMe: '10元/当日3次',
-  priorityViewDelivery: false,
-  memberIdentification: false,
-  exclusiveDiscount: false,
-  resumeExample: false,
-  resumeTemplate: false,
-  proofreadingResume: false,
-  analyzeResume: false,
-  resumeDraftNumber: false,
-  resumeRecovery: false,
-  jobHuntGiftPacks: false
-}
-
-
-export const personal = [
-  {
-    title: '14天双周卡',
-    price: 38,
-    dailyPrice: 2.8,
-    contrastList: commonList,
-    ordinary: commonOrdinary,
-    vip: {
-      resumeRefresh: '5次/天',
-      competitiveAnalysis: '20次/天',
-      interestedInMe: '3次/天',
-      priorityViewDelivery: true,
-      memberIdentification: true,
-      exclusiveDiscount: true
-    }
-  },
-  {
-    title: '30天月卡',
-    price: 58,
-    dailyPrice: 2,
-    contrastList: commonList,
-    ordinary: commonOrdinary,
-    vip: {
-      resumeRefresh: '5次/天',
-      competitiveAnalysis: '25次/天',
-      interestedInMe: '无限查看',
-      priorityViewDelivery: true,
-      memberIdentification: true,
-      exclusiveDiscount: true
-    }
-  },
-  {
-    title: '60天月卡',
-    price: 78,
-    dailyPrice: 1.3,
-    contrastList: commonList,
-    ordinary: commonOrdinary,
-    vip: {
-      resumeRefresh: '15次/天',
-      competitiveAnalysis: '35次/天',
-      interestedInMe: '无限查看',
-      priorityViewDelivery: true,
-      memberIdentification: true,
-      exclusiveDiscount: true
-    }
-  },
-  {
-    title: '季度卡',
-    price: 108,
-    dailyPrice: 1.2,
-    contrastList: commonList2,
-    ordinary: commonOrdinary2,
-    vip: {
-      resumeRefresh: '40次/天',
-      competitiveAnalysis: '无限',
-      interestedInMe: '无限查看',
-      priorityViewDelivery: true,
-      memberIdentification: true,
-      exclusiveDiscount: true,
-      resumeExample: '5条',
-      resumeTemplate: '3次',
-      proofreadingResume: '10次/天',
-      analyzeResume: '10次/天',
-      resumeDraftNumber: '5份',
-      resumeRecovery: false,
-      jobHuntGiftPacks: false
-    }
-  },
-  {
-    title: '年度卡',
-    price: 388,
-    dailyPrice: 1.1,
-    contrastList: commonList2,
-    ordinary: commonOrdinary2,
-    vip: {
-      resumeRefresh: '40次/天',
-      competitiveAnalysis: '无限',
-      interestedInMe: '无限查看',
-      priorityViewDelivery: true,
-      memberIdentification: true,
-      exclusiveDiscount: true,
-      resumeExample: true,
-      resumeTemplate: true,
-      proofreadingResume: '无限',
-      analyzeResume: '无限',
-      resumeDraftNumber: '20份',
-      resumeRecovery: true,
-      jobHuntGiftPacks: true
-    }
-  }
-]

src/views/mall/purchasePackage/components/packagesDetail.vue

@@ -1,72 +0,0 @@
-<!-- 套餐详情 -->
-<template>
-  <div v-if="info" class="packagesDetail mt-5">
-    <div v-if="info.headers" class="detailItem headers">
-      <template
-        v-for="item in info.headers"
-        :key="item.key"
-      >
-        <div>{{ item.label }}</div>
-      </template>
-    </div>
-    <template v-if="info.contrastList">
-      <div
-        v-for="item in info.contrastList"
-        :key="item.key"
-        class="detailItem"
-      >
-        <div style="font-size: 14px; font-weight: bold;">{{ item.label }}</div>
-        <div style="font-size: 14px; font-weight: normal;">
-          <span v-if="info?.returnData?.ordinary[item.value] === true"><v-icon size="24" icon="mdi-check"></v-icon></span>
-          <span v-else-if="info?.returnData?.ordinary[item.value] === false">x</span>
-          <span v-else>{{ info?.returnData?.ordinary[item.value] }}</span>
-        </div>
-        <div style="font-size: 14px; font-weight: bold; color: #d8a41a;">
-          <span v-if="info?.returnData?.vip[item.value] === true"><v-icon size="24" icon="mdi-check"></v-icon></span>
-          <span v-else-if="info?.returnData?.vip[item.value] === false">x</span>
-          <span v-else>{{ info?.returnData?.vip[item.value] }}</span>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup>
-defineOptions({name: 'personal-purchasePackage-packagesDetail'})
-defineProps({
-  info: {
-    type: Object,
-    default: () => {}
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.packagesDetail { // 套餐详情
-  width: 1090px;
-  margin: 0 auto;
-  border: 1px solid var(--color-f3);
-  // border-radius: 12px;
-  background-color: var(--default-bgc);
-  background-color: var(--color-f2f4f742);
-  .detailItem {
-    display: flex;
-    div {
-      height: 46px;
-      line-height: 46px;
-      width: 33%;
-      text-align: center;
-      font-size: 14px;
-    }
-  }
-  .headers {
-    background-color: var(--default-bgc);
-    div {
-      color: var(--color-666) !important;
-      font-size: 16px !important;
-      font-weight: bold !important;
-      text-align: center;
-    }
-  }
-}
-</style>

src/views/mall/purchasePackage/index.vue

@@ -1,52 +1,107 @@
 <!-- 购买套餐 -->
 <template>
-  <div class="default-width white-bgc py-8">
-    <!-- 套餐列表 -->
-    <div class="d-flex align-center justify-center">
-      <div
-        v-for="(item, index) in personal"
-        :key="index"
-        :elevation="tab === (index+1) ? 3 : 2"
-        class="packagesItem cursor-pointer mx-3"
-        :class="{'active': tab === (index+1)}"
-        style="width: 200px;"
-        @click="handleChange(item, index)"
-      >
-        <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">每天低至{{ item.dailyPrice }}元</div>  
-        </div> 
+  <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>
-    <!-- 套餐详情 -->
-    <packagesDetail v-if="detailItem" :info="detailItem"></packagesDetail>
   </div>
 </template>
 
 <script setup>
 defineOptions({name: 'personal-purchasePackage'})
 import { ref } from 'vue'
-import { personal } from '@/utils/purchasePackage'
-import packagesDetail from './components/packagesDetail.vue'
+const tab = ref(1)
 
-const tab = ref(1) 
+defineProps({
+  type: {
+    type: Number,
+    default: 0 // 0个人 1企业
+  }
+})
 
-const handleChange = (item, index) => {
-  detailItem.value = deal(item)
-  tab.value = index + 1
-}
-const headers = [{ key: '权益', label: '权益' }, { key: '普通用户', label: '普通用户' }, { key: 'VIP套餐', label: 'VIP套餐' }]
-const deal = (item) => {
-  return { headers, returnData: { ordinary: item.ordinary, vip: item.vip }, contrastList: item.contrastList }
-}
-const detailItem = ref(personal?.length ? deal(personal[0]) : null)
+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; }

src/views/recruit/enterprise/purchasePackage/components/packagesDetail.vue

@@ -1,72 +0,0 @@
-<!-- 套餐详情 -->
-<template>
-  <div v-if="info" class="packagesDetail mt-5">
-    <div v-if="info.headers" class="detailItem headers">
-      <template
-        v-for="item in info.headers"
-        :key="item.key"
-      >
-        <div>{{ item.label }}</div>
-      </template>
-    </div>
-    <template v-if="info.contrastList">
-      <div
-        v-for="item in info.contrastList"
-        :key="item.key"
-        class="detailItem"
-      >
-        <div style="font-size: 14px; font-weight: bold;">{{ item.label }}</div>
-        <div style="font-size: 14px; font-weight: normal;">
-          <span v-if="info?.returnData?.ordinary[item.key] === true"><v-icon size="24" icon="mdi-check"></v-icon></span>
-          <span v-else-if="info?.returnData?.ordinary[item.key] === false">x</span>
-          <span v-else>{{ info?.returnData?.ordinary[item.key] }}</span>
-        </div>
-        <div style="font-size: 14px; font-weight: bold; color: #d8a41a;">
-          <span v-if="info?.returnData?.vip[item.key] === true"><v-icon size="24" icon="mdi-check"></v-icon></span>
-          <span v-else-if="info?.returnData?.vip[item.key] === false">x</span>
-          <span v-else>{{ info?.returnData?.vip[item.key] }}</span>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup>
-defineOptions({name: 'personal-purchasePackage-packagesDetail'})
-defineProps({
-  info: {
-    type: Object,
-    default: () => {}
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.packagesDetail { // 套餐详情
-  width: 1080px;
-  margin: 0 auto;
-  border: 1px solid var(--color-f3);
-  // border-radius: 12px;
-  background-color: var(--default-bgc);
-  background-color: var(--color-f2f4f742);
-  .detailItem {
-    display: flex;
-    div {
-      height: 46px;
-      line-height: 46px;
-      width: 33%;
-      text-align: center;
-      font-size: 14px;
-    }
-  }
-  .headers {
-    background-color: var(--default-bgc);
-    div {
-      color: var(--color-666) !important;
-      font-size: 16px !important;
-      font-weight: bold !important;
-      text-align: center;
-    }
-  }
-}
-</style>

src/views/recruit/enterprise/purchasePackage/index.vue

@@ -1,102 +1,13 @@
 <!-- 购买套餐 -->
 <template>
-  <div class="default-width white-bgc pa-10 my-n3">
-    <!-- 套餐列表 -->
-    <div class="d-flex align-center justify-center">
-      <div
-        v-for="(item, index) in packages"
-        :key="index"
-        :elevation="tab === (index+1) ? 3 : 2"
-        class="packagesItem cursor-pointer mx-3"
-        :class="{'active': tab === (index+1)}"
-        style="width: 220px;"
-        @click="handleChange(item, index)"
-      >
-        <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">每天低至{{ item.dailyPrice }}元</div>  
-        </div> 
-      </div>
-    </div>
-    <!-- 套餐详情 -->
-    <packagesDetail v-if="detailItem" :info="detailItem"></packagesDetail>
-  </div>
+  <PurchasePackage :type="1"></PurchasePackage>
 </template>
 
 <script setup>
-import packagesDetail from './components/packagesDetail.vue'
-import { ref } from 'vue'
 defineOptions({name: 'enterprise-purchasePackage'})
+import PurchasePackage from '@/views/mall/purchasePackage'
 
-const tab = ref(1) 
-const packages = [
-  { id: '0', title: '14天双周卡', price: 38, dailyPrice: '2.8' },
-  { id: '1', title: '30天月卡', price: 58, dailyPrice: '2' },
-  { id: '2', title: '60天双月卡', price: 78, dailyPrice: '1.3', index: {} },
-  { id: '3', title: '季度卡', price: 108, dailyPrice: '1.2', index: {} },
-  { id: '4', title: '年度卡', price: 401, dailyPrice: '1.1', index: {} }
-]
-
-const handleChange = (item, index) => {
-  detailItem.value = deal()
-  tab.value = index + 1
-}
-const deal = () => {
-  const headers = [{ key: '权益', label: '权益' },{ key: '普通用户', label: '普通用户' },{ key: 'VIP套餐', label: 'VIP套餐' }]
-  const contrastList = [
-    { key: '职位发布数量', label: '职位发布数量' },
-    { key: '职位刷新次数', label: '职位刷新次数' },
-    { key: '人才在线开聊', label: '人才在线开聊' },
-    { key: 'OPS职位置顶', label: 'OPS职位置顶' },
-    { key: '优质人才搜索', label: '优质人才搜索' },
-    { key: '保入职服务', label: '保入职服务' },
-    { key: '背景调查', label: '背景调查' },
-    { key: '全域广告', label: '全域广告' },
-  ]
-  const returnData = {
-    ordinary: { 职位发布数量: '3', 职位刷新次数: '0', 人才在线开聊: '每日3次', OPS职位置顶: false, 背景调查: false, 职位极速推广: false, 全域广告: false, 优质人才搜索: false, 保入职服务: false },
-    vip: { 职位发布数量: '20个', 职位刷新次数: '20次', 人才在线开聊: '无限开聊', OPS职位置顶: true, 背景调查: true, 职位极速推广: true, 全域广告: true, 优质人才搜索: true, 保入职服务: true }
-  }
-
-  return { headers, contrastList, returnData }
-}
-const detailItem = ref(packages?.length ? deal(packages[0]) : null)
 </script>
 
 <style lang="scss" scoped>
-.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>

src/views/recruit/personal/purchasePackage/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <PurchasePackage></PurchasePackage>
+</template>
+
+<script setup>
+defineOptions({ name: 'personal-purchasePackage'})
+import PurchasePackage from '@/views/mall/purchasePackage'
+
+</script>
+
+<style scoped lang="scss">
+
+</style>