购买套餐

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

@@ -0,0 +1,85 @@
+<!-- 套餐详情 -->
+<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>
+          <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;
+    }
+    // :nth-child(1) {
+    //   font-size: 14px;
+    //   font-weight: bold;
+    // }
+    // :nth-child(2) {
+    //   font-size: 14px;
+    //   font-weight: normal;
+    // }
+    :nth-child(3) {
+      color: #d8a41a;
+      font-size: 15px;
+      font-weight: bold;
+    }
+  }
+  .headers {
+    background-color: var(--default-bgc);
+    div {
+      color: #666 !important;
+      font-size: 16px !important;
+      font-weight: bold !important;
+      text-align: center;
+    }
+  }
+}
+</style>

src/views/personal/purchasePackage/index.vue

@@ -1,33 +1,99 @@
 <!-- 购买套餐 -->
 <template>
-  <div class="default-width white-bgc mb-8">
-    <div class="d-flex align-center justify-center pt-8">
+  <div class="default-width white-bgc py-8">
+    <!-- 套餐列表 -->
+    <div class="d-flex align-center justify-center">
       <div
-        v-for="item in packages"
-        :key="item.id"
-        class="mx-3"
-        style="border: 1px solid var(--v-primary-base); border-radius: 5px; width: 220px;"
+        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">  
-          <div>{{ item.标题 }}</div>  
-          <div>￥{{ item.价格 }}</div>  
-          <div>每天低至{{ item.dailyPrice }}元</div>  
+        <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'
+import { ref } from 'vue'
 defineOptions({name: 'personal-purchasePackage'})
 
+const tab = ref(1) 
 const packages = [
-  { id: '60', 标题: '60天双月卡', 价格: '108', dailyPrice: '1.8' },
+  { 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>