Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/styles/package/index.css

@@ -0,0 +1,104 @@
+.list {
+  width: 100%;
+}
+
+.list-item {
+  position: relative;
+  min-height: 400px;
+  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;
+}
+
+.list-item:nth-child(5n) {
+  margin-right: 0;
+}
+
+.list-item .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: #fffbf8;
+  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 {
+  height: 80px;
+  line-height: 80px;
+  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;
+}
+
+.scanCode .code-left {
+  border: 1px solid #f1b17a;
+  border-radius: 6px;
+  padding: 5px;
+}
+
+.scanCode .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;
+}

src/styles/package/index.min.css

@@ -0,0 +1 @@
+.list{width:100%}.list-item{position:relative;min-height:400px;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}.list-item:nth-child(5n){margin-right:0}.list-item .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:#fffbf8;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{height:80px;line-height:80px;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}.scanCode .code-left{border:1px solid #f1b17a;border-radius:6px;padding:5px}.scanCode .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}

src/styles/package/index.scss

@@ -0,0 +1,93 @@
+.list {
+  width: 100%;
+}
+.list-item {
+  position: relative;
+  // height: 400px;
+  min-height: 400px;;
+  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 {
+  height: 80px;
+  line-height: 80px;
+  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;
+}

src/utils/package.js

@@ -0,0 +1,107 @@
+export const packData = {
+  '企业套餐': {
+    desc: '若注册资本超500万或特殊、行政事业单位，请联系<span class="font-weight-bold">高级客户经理</span>定制套餐',
+    items: [
+      {
+        title: '普通版',
+        price: 388,
+        type: '大众会员套餐',
+        equity: ['职位发布：20个', '发布岗位指定：无限']
+      },
+      {
+        title: '基础版',
+        price: 33000,
+        type: '企业基础套餐',
+        equity: ['职位发布：20个', '优质人才搜索：2次', '候选人推荐：20次', '背景调查及报告']
+      },
+      {
+        title: '筹备酒店套餐',
+        price: 33000,
+        recommend: true,
+        equity: ['职位发布：20个', '优质人才搜索：2次', '候选人推荐：20次', '弹窗广告：1周']
+      },
+      {
+        title: '运营酒店套餐',
+        price: 7000,
+        cycle: '6个月',
+        equity: ['职位发布：20个', '优质人才搜索：2次', '候选人推荐：20次', '专属职位推文']
+      },
+      {
+        title: '定制版',
+        customized: true
+      }
+    ]
+  },
+  '大众会员套餐': {
+    title: '大众会员套餐',
+    active: 3, // 选中推荐的那一个
+    price: 108,
+    items: [
+      {
+        title: '14天双周卡',
+        price: 38,
+        equity: ['职位发布：1个', '发布岗位指定：1次/天']
+      },
+      {
+        title: '30天月卡',
+        price: 58,
+        equity: ['职位发布：3个', '发布岗位置顶：3次/天', '优质人才搜索：1次/天']
+      },
+      {
+        title: '60天月卡',
+        price: 78,
+        equity: ['职位发布：5个', '发布岗位置顶：3次/天', '优质人才搜索：2次/天']
+      },
+      {
+        title: '季度卡',
+        price: 108,
+        recommend: true,
+        equity: ['职位发布：8个', '优质人才搜索：5次/天', '候选人推荐：2次']
+      },
+      {
+        title: '年度卡',
+        price: 388,
+        equity: ['职位发布：10个', '优质人才搜索：5次/天', '候选人推荐：3次']
+      }
+    ]
+  },
+  '企业基础套餐': {
+    title: '企业基础套餐',
+    active: 2, // 选中推荐的那一个
+    price: 56000,
+    showUnit: true,
+    items: [
+      {
+        title: '达人会员',
+        price: 33000,
+        equity: ['职位发布：25个', '简历下载：200份', '职位刷新点数: 不限', '职位极速推广：2次（300份）', '广告：首页焦点广告2周（233*62）', '子账号：3个']
+      },
+      {
+        title: '专享会员',
+        price: 52000,
+        equity: ['职位发布：50个', '简历下载：600份', '职位刷新点数: 不限', '职位极速推广：2次（600份）', '广告：首页焦点广告1周（233*62）', '子账号：6个']
+      },
+      {
+        title: '精英会员',
+        price: 56000,
+        equity: ['职位发布：70个', '简历下载：800份', '职位刷新点数: 不限', '职位极速推广：2次（800份）', '广告：首页焦点广告2周（233*62）', '子账号：10个']
+      },
+      {
+        title: '白金会员',
+        price: 72000,
+        recommend: true,
+        equity: ['职位发布：80个', '简历下载：600份', '职位刷新点数: 不限', '职位极速推广：2次（1000份）', '广告：首页黄金广告3周（300*68）', '子账号：10个']
+      },
+      {
+        title: '黄金会员',
+        price: 86000,
+        equity: ['职位发布：100个', '简历下载：1000份', '职位刷新点数: 不限', '职位极速推广：2次（1000份）', '广告：首页黄金广告4周（300*68）', '子账号：20个', '直播招聘：1次（60分钟）']
+      }
+    ]
+  }
+}
+
+export const paymentList = [
+  { label: '微信扫码', icon: 'weChat', size: 21, color: 'success', value: 'wx_native' },
+  { label: '支付宝扫码', icon: 'alipay', size: 23, color: '#3383c6', value: 'alipay_qr' }
+]

src/views/recruit/enterprise/memberCenter/myMembers/components/open.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="package-title">{{ packData[type].title }}</div>
+  <div class="d-flex mt-5 list">
+    <div v-for="(val, i) in packData[type].items" :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>
+          ￥ <span class="font-weight-bold font-size-20">{{ val.price }}</span>
+          <span v-if="packData[type].showUnit"> /年</span>
+        </div>
+      </div>
+      <v-divider></v-divider>
+      <div>
+        <div class="font-weight-bold my-3">权益</div>
+        <ul>
+          <li v-for="k in val.equity" :key="k">{{ k }}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="scanCode my-7">
+    <div class="code resume-box">
+      <div class="resume-header">
+        <div class="resume-title">扫码支付</div>
+      </div>
+      <div class="d-flex align-end mt-3">
+        <div class="code-left">
+          <QrCode text="二维码内容二维码内容二维码内容二维码内容" :width="170" />
+        </div>
+        <div class="ml-5">
+          <div class="price">
+            <span class="font-size-13">￥</span>
+            {{ price }}
+          </div>
+          <div class="mt-3 d-flex align-center">
+            <span class="color-666 font-weight-bold mr-5">支付方式</span>
+            <v-chip-group v-model="payment" selected-class="text-primary" mandatory>
+              <v-chip filter v-for="k in paymentList" :key="k.value" :value="k.value" class="mr-3" label>
+                {{ k.label }}
+                <svg-icon class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
+              </v-chip>
+            </v-chip-group>
+          </div>
+          <div class="font-size-14 color-666 mt-3 cursor-pointer">服务协议</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'open-page'})
+import { ref } from 'vue'
+import { packData, paymentList } from '@/utils/package.js'
+
+const props = defineProps({
+  type: String
+})
+
+const active = ref(packData[props.type].active || 2)
+const price = ref(packData[props.type].price)
+const payment = ref('wx_native')
+
+const handleClickItem = (val, i) => {
+  active.value = i
+  price.value = val.price
+}
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/package/index.scss'
+</style>

src/views/recruit/enterprise/memberCenter/myMembers/components/package.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="d-flex mt-5 list">
-    <div v-for="(val, i) in items" :key="i" class="list-item cursor-pointer" :class="{'active': active === i }" @click="handleClickItem(val, i)">
+    <div v-for="(val, i) in packData['企业套餐'].items" :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">
@@ -20,185 +20,45 @@
         <div class="font-size-15">扫描下方二维码联系高级客户经理为您定制</div>
       </div>
       <div class="text-center item-btn">
-        <v-btn v-if="!val.customized" color="error" variant="outlined" size="small" rounded @click="handleOpenMembership(val)">开通会员</v-btn>
+        <v-btn v-if="!val.customized" color="error" variant="outlined" rounded @click="handleOpenMembership(val)">立即加入</v-btn>
       </div>
     </div>
   </div>
+
   <div class="my-10 tips">若注册资本超500万或特殊、行政事业单位，请联系<span class="font-weight-bold">高级客户经理</span>定制套餐</div>
-  <div class="scan color-666 d-flex flex-column align-center" v-if="active === 4">
+  <div class="scan color-666 d-flex flex-column align-center">
     <div class="font-weight-bold">微信扫一扫</div>
     <div class="font-size-15 my-3">高级客户经理为您报价（扫码后可电话联系）</div>
     <v-img cover aspect-ratio="1/1" src="https://minio.citupro.com/dev/static/mendunerCode.jpg" width="170" height="170"></v-img>
   </div>
-  <div v-if="active !== 0 && active !== 4" class="scanCode mb-7">
-    <div class="code pa-5 resume-box">
-      <div class="resume-header">
-        <div class="resume-title">扫码支付</div>
-      </div>
-      <div class="d-flex align-end mt-3">
-        <div class="code-left">
-          <QrCode text="二维码内容二维码内容二维码内容二维码内容" :width="170" />
-        </div>
-        <div class="ml-5">
-          <div class="price">
-            <span class="font-size-13">￥</span>
-            {{ price }}
-          </div>
-          <div class="mt-3 d-flex align-center">
-            <span class="color-666 font-weight-bold mr-5">支付方式</span>
-            <v-chip-group v-model="payment" selected-class="text-primary" mandatory>
-              <v-chip filter v-for="k in paymentList" :key="k.value" :value="k.value" class="mr-3" label>
-                {{ k.label }}
-                <svg-icon class="ml-1" :name="k.icon" :size="k.size"></svg-icon>
-              </v-chip>
-            </v-chip-group>
-          </div>
-          <div class="font-size-14 color-666 mt-3 cursor-pointer">服务协议</div>
-        </div>
-      </div>
-    </div>
-  </div>
+
+  <CtDialog :visible="open" :widthType="1" :footer="false" titleClass="text-h6" title="套餐购买" @close="open = false">
+    <OpenPage v-if="open" :type="type"></OpenPage>
+  </CtDialog>
 </template>
 
 <script setup>
 defineOptions({ name: 'myAccount-package'})
 import { ref } from 'vue'
-
+import OpenPage from './open.vue'
+import { packData } from '@/utils/package.js'
 
 const active = ref(2)
-const price = ref(33000)
-const payment = ref('wx_native')
-const paymentList = [
-  { label: '微信扫码', icon: 'weChat', size: 21, color: 'success', value: 'wx_native' },
-  { label: '支付宝扫码', icon: 'alipay', size: 23, color: '#3383c6', value: 'alipay_qr' }
-]
-const items = ref([
-  {
-    title: '普通版',
-    price: 388,
-    equity: ['职位发布：20个', '发布岗位指定：无限']
-  },
-  {
-    title: '基础版',
-    price: 33000,
-    equity: ['职位发布：20个', '优质人才搜索：2次', '候选人推荐：20次', '背景调查及报告']
-  },
-  {
-    title: '筹备酒店套餐',
-    price: 33000,
-    recommend: true,
-    equity: ['职位发布：20个', '优质人才搜索：2次', '候选人推荐：20次', '弹窗广告：1周']
-  },
-  {
-    title: '运营酒店套餐',
-    price: 7000,
-    cycle: '6个月',
-    equity: ['职位发布：20个', '优质人才搜索：2次', '候选人推荐：20次', '专属职位推文']
-  },
-  {
-    title: '定制版',
-    customized: true
-  }
-])
 
 const handleClickItem = (val, i) => {
-  price.value = val.price
   active.value = i
 }
 
 // 开通会员
+const type = ref()
+const open = ref(false)
 const handleOpenMembership = (val) => {
-  console.log(val, 'open-members')
+  if (!val?.type) return
+  type.value = val.type
+  open.value = true
 }
 </script>
 
 <style scoped lang="scss">
-.list {
-  width: 100%;
-}
-.list-item {
-  position: relative;
-  height: 400px;
-  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: rgb(195 15 15) !important;
-}
-.tips {
-  height: 80px;
-  line-height: 80px;
-  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;
-  .weChat {
-    border: 1px solid #4cb517;
-    border-radius: 8px;
-  }
-  .alipay {
-    border: 1px solid #00a2f0;
-    border-radius: 8px;
-  }
-  .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;
-}
+@import '@/styles/package/index.scss'
 </style>