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

<!-- 购买套餐 -->
<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>