|
@@ -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>
|