个人-套餐列表

src/views/mall/purchasePackage/components/packageList.js

@@ -0,0 +1,31 @@
+export const packData =  [
+  {
+    title: '14天双周卡',
+    price: 88,
+    type: '大众会员套餐',
+    equity: ['VIP会员标识', '简历刷新次数', '简历屏蔽']
+  },
+  {
+    title: '30天月卡',
+    price: 158,
+    type: '企业基础套餐',
+    equity: ['VIP会员标识', '简历刷新次数', '简历屏蔽', '优先推荐']
+  },
+  {
+    title: '60天月卡',
+    price: 298,
+    recommend: true,
+    equity: ['VIP会员标识', '简历刷新次数', '简历屏蔽', '优先推荐', '简历模板']
+  },
+  {
+    title: '季度卡',
+    price: 588,
+    equity: ['VIP会员标识', '简历刷新次数', '简历屏蔽', '优先推荐', '简历模板', '谁看过我']
+  },
+  {
+    title: '年度卡',
+    price: 1988,
+    // cycle: '6个月',
+    equity: ['VIP会员标识', '简历刷新次数', '简历屏蔽', '优先推荐', '简历模板', '谁看过我', '薪酬报告']
+  }
+]

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

@@ -0,0 +1,154 @@
+<!--  -->
+<template>
+  <div class="d-flex mt-5 list">
+    <div v-for="(val, i) in packData" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(val, i)">
+      <div v-if="val.recommend" class="recommend">推荐</div>
+      <div class="text-center font-weight-bold">{{ val.title }}</div>
+      <div class="text-center my-5">
+        <div v-if="val.price && !val.cycle">
+          ￥
+          <span class="font-weight-bold font-size-20">{{ val.price }}</span>
+          <!-- /年 -->
+        </div>
+        <div v-if="val.cycle">￥<span class="font-weight-bold font-size-18 font-size-20">{{ val.price }}</span><span class="font-size-14 mr-3">起</span>  {{ val.cycle }}</div>
+        <div v-if="val.customized" class="font-size-20 font-weight-bold">按需定制</div>
+      </div>
+      <v-divider></v-divider>
+      <div v-if="val.equity">
+        <div class="font-weight-bold my-3">权益</div>
+        <ul>
+          <li v-for="k in val.equity" :key="k">{{ k }}</li>
+        </ul>
+      </div>
+      <div v-else>
+        <h3 class="my-3">授权范围：</h3>
+        <div class="font-size-15">扫描下方二维码联系高级客户经理为您定制</div>
+      </div>
+      <div class="text-center item-btn">
+        <v-btn v-if="!val.customized" color="error" variant="outlined" rounded @click="handleOpenMembership(val)">开通会员</v-btn>
+      </div>
+    </div>
+  </div>
+  
+  <!-- <CtDialog :visible="open" :widthType="1" :footer="false" titleClass="text-h6" title="开通会员" @close="open = false">
+    <initPay
+      v-if="itemInfo"
+      :info="itemInfo"
+      @stopInterval="null"
+      @paySuccess="null"
+    ></initPay>
+  </CtDialog> -->
+</template>
+
+<script setup>
+import { packData } from './packageList.js'
+import { ref } from 'vue'
+import Snackbar from '@/plugins/snackbar'
+// import initPay from './initPay.vue'
+defineOptions({name: 'purchasePackage-packageList'})
+
+const active = ref(2)
+const handleClickItem = (val, i) => {
+  active.value = i
+}
+
+// const open = ref(false)
+// 开通会员
+const handleOpenMembership = (val) => {
+  console.log(1, val)
+  Snackbar.success('还未开放此功能，敬请期待！')
+}
+</script>
+<style lang="scss" scoped>
+.list {
+  width: 100%;
+}
+.list-item {
+  position: relative;
+  // height: 400px;
+  min-height: 480px;;
+  width: calc((100% - 120px) / 5);
+  min-width: calc((100% - 120px) / 5);
+  max-width: calc((100% - 120px) / 5);
+  padding: 30px 20px;
+  border-radius: 14px;
+  margin-right: 30px;
+  color: #774e20;
+  background-color: #fafafa;
+  &:nth-child(5n) {
+    margin-right: 0;
+  }
+  .item-btn {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+ul li {
+  list-style: none;
+  font-size: 15px;
+  margin: 10px 0;
+  font-weight: 500;
+}
+.active {
+  background-color: rgba(255, 251, 248, 1);
+  border: 1px solid #f1b17a;
+  box-shadow: 0px 6px 12px 0px rgba(216, 160, 82, 0.36);
+}
+:deep(.v-btn) {
+  border: 1px solid #bc8b55;
+  color: #c30f0f !important;
+  font-weight: 700;
+}
+.tips {
+  background-color: #fffbf8;
+  border: 1px solid #f1b17a;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 15px;
+}
+.recommend {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 55px;
+  height: 26px;
+  line-height: 26px;
+  background-color: #ff8a04;
+  border-radius: 12px 0 18px 0;
+  font-weight: 600;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+}
+.scanCode {
+  border: 1px dashed #ccc;
+  border-radius: 10px;
+  padding: 30px;
+  .code-left {
+    border: 1px solid #f1b17a;
+    border-radius: 6px;
+    padding: 5px;
+  }
+  .price {
+    font-size: 30px;
+    font-weight: 700;
+    color: #ff9012;
+  }
+}
+:deep(.v-slide-group__content) {
+  background: none !important;
+}
+
+.package-title {
+  height: 60px;
+  line-height: 60px;
+  color: #fff;
+  background: linear-gradient(45deg, #ff8a04, transparent);
+  font-weight: 700;
+  font-size: 20px;
+  text-align: center;
+  border-radius: 4px;
+}
+</style>

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

@@ -0,0 +1,145 @@
+<!-- 购买套餐 -->
+<template>
+  <div class="py-3" :class="customClass">
+    <div class="white-bgc resume-box">
+      <div class="resume-header" v-if="showTitle">
+        <div class="resume-title">购买会员</div>
+      </div>
+      <div :class="['d-flex', 'align-center', 'justify-center', {'my-5': showTitle}]">
+        <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"
+        no-data-text="暂无数据"
+      > 
+        <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>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'purchasePackage'})
+import { ref } from 'vue'
+const tab = ref(1)
+
+defineProps({
+  type: {
+    type: Number,
+    default: 0 // 0个人 1企业
+  },
+  showTitle: {
+    type: Boolean,
+    default: true
+  },
+  customClass: {
+    type: String,
+    default: 'default-width'
+  }
+})
+
+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; }
+.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/mall/purchasePackage/index.vue

@@ -1,145 +1,20 @@
 <!-- 购买套餐 -->
 <template>
-  <div class="py-3" :class="customClass">
-    <div class="white-bgc resume-box">
-      <div class="resume-header" v-if="showTitle">
-        <div class="resume-title">购买会员</div>
-      </div>
-      <div :class="['d-flex', 'align-center', 'justify-center', {'my-5': showTitle}]">
-        <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"
-        no-data-text="暂无数据"
-      > 
-        <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>
+  <div class="card-box pa-3">
+    <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
+      <v-tab :value="0">套餐列表</v-tab>
+    </v-tabs>
+    <packageList v-if="tab === 0"></packageList>
   </div>
 </template>
 
 <script setup>
-defineOptions({name: 'purchasePackage'})
+defineOptions({name: 'purchasePackage-index'})
 import { ref } from 'vue'
-const tab = ref(1)
+import packageList from './components/packageList.vue'
 
-defineProps({
-  type: {
-    type: Number,
-    default: 0 // 0个人 1企业
-  },
-  showTitle: {
-    type: Boolean,
-    default: true
-  },
-  customClass: {
-    type: String,
-    default: 'default-width'
-  }
-})
-
-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: '✓' }
-]
+const tab = ref(0)
 </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; }
-.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>
+</style>