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

<!-- 购买套餐 -->
<template>
  <div class="default-width white-bgc py-8">
    <!-- 套餐列表 -->
    <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: 'personal-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: '投递优先查看', label: '投递优先查看' },
    { key: '聊天优先沟通', label: '聊天优先沟通' },
    { key: 'VIP会员标识', label: 'VIP会员标识' },
    { key: 'VIP尊享皮肤', label: 'VIP尊享皮肤' },
    { key: 'VIP专属折扣', label: 'VIP专属折扣' },
  ]
  const returnData = {
    ordinary: { 简历刷新: '10元5次', 竞争力分析: '15元5次', 谁对我有兴趣: '5元/当日3次', 投递优先查看: false, 聊天优先沟通: false, VIP会员标识: false, VIP尊享皮肤: false, VIP专属折扣: false },
    vip: { 简历刷新: '3次/天', 竞争力分析: '20次/天', 谁对我有兴趣: '无限查看', 投递优先查看: true, 聊天优先沟通: true, VIP会员标识: true, VIP尊享皮肤: true, VIP专属折扣: 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>