企业购买套餐

src/layout/company/navBar.vue

@@ -13,6 +13,7 @@
         </div>
         
         <div class="d-flex user-nav">
+          <a href="/enterprisePurchasePackage" class="cursor-pointer mr-15" style="font-size: 15px;color: #FB8C00;line-height: 40px;">{{ $t('sys.purchasePackage') }}</a>
           <div class="d-flex align-center cursor-pointer" @click="handleEnterpriseClick">
             <v-img @click="enterpriseClick(2)" rounded width="40" height="40" :src="baseInfo?.logoUrl || 'https://minio.citupro.com/dev/menduner/7.png'" ></v-img>
             <span @click="enterpriseClick(1)" class="ml-3">{{ baseInfo?.enterpriseName || $t('sys.tourist') }}</span>

src/router/modules/enterprise.js

@@ -220,6 +220,25 @@ const enterprise = [
         }
       }
     ]
-  }
+  },
+  {
+    path: '/enterprisePurchasePackage',
+    component: Layout,
+    name: 'enterprisePurchasePackage',
+    show: true,
+    meta: {
+      title: '购买套餐',
+    },
+    children: [
+      {
+        path: '/enterprisePurchasePackage',
+        component: () => import('@/views/enterprise/purchasePackage/index'),
+        meta: {
+          title: '购买套餐',
+          hideSide: true
+        },
+      }
+    ]
+  },
 ]
 export default enterprise

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

@@ -0,0 +1,72 @@
+<!-- 套餐详情 -->
+<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 v-if="item.key == 'VIP套餐'">{{ item.label }}</div>
+        <div v-else>{{ 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: 710px;
+  margin: 0 auto;
+  border: 1px solid #f3f3f3;
+  // border-radius: 12px;
+  background-color: var(--default-bgc);
+  background-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: #666 !important;
+      font-size: 16px !important;
+      font-weight: bold !important;
+      text-align: center;
+    }
+  }
+}
+</style>

src/views/enterprise/purchasePackage/index.vue

@@ -0,0 +1,99 @@
+<!-- 购买套餐 -->
+<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.标题 }}</div>  
+          <div class="mt-2 fontBold priceBox">
+            <span>￥</span>
+            <span class="font28">{{ item.价格 }}</span>
+          </div>  
+          <div class="dailyPrice font13 mt-2">每天低至{{ item.dailyPrice }}元</div>  
+        </div> 
+      </div>
+    </div>
+    <!-- 套餐详情 -->
+    <packagesDetail v-if="detailItem" :info="detailItem"></packagesDetail>
+  </div>
+</template>
+
+<script setup>
+import packagesDetail from './components/packagesDetail.vue'
+import { ref } from 'vue'
+defineOptions({name: 'enterprise-purchasePackage'})
+
+const tab = ref(1) 
+const packages = [
+  { id: '60', 标题: '60天双月卡', 价格: '108', dailyPrice: '1.8', index: {} },
+  { id: '30', 标题: '30天月卡', 价格: '58', dailyPrice: '2' },
+  { id: '14', 标题: '14天双周卡', 价格: '38', dailyPrice: '2.8' },
+]
+
+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: 'SDMS短信直投', label: 'SDMS短信直投' },
+  ]
+  const returnData = {
+    ordinary: { 职位发布数量: '0', 职位刷新次数: '0', 人才在线开聊: '每日3次', OPS职位置顶: false, 背景调查: false, 职位极速推广: false, 全域广告: false, SDMS短信直投: false },
+    vip: { 职位发布数量: '10个', 职位刷新次数: '20次', 人才在线开聊: '无限开聊', OPS职位置顶: true, 背景调查: true, 职位极速推广: true, 全域广告: true, SDMS短信直投: 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 #f3f3f3;
+  border-radius: 8px;
+  background-color: #f2f4f742;
+}
+.dailyPrice {
+  border-radius: 14px;
+  background-color: #dde3e94f;
+  padding: 2px 18px;
+  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>