|
@@ -1,17 +1,32 @@
|
|
|
<template>
|
|
|
<div class="d-flex list mb-3">
|
|
|
<div v-for="(val, index) in list" :key="index" :id="'positioning'+index" class="list-item text-center cursor-pointer" :class="{'active': index === current}" @click="handleClick(index, val)">
|
|
|
- <h4 class="mt-5">{{ val.name }}</h4>
|
|
|
- <div class="color-primary">
|
|
|
- <span>¥</span>
|
|
|
- <span style="font-size: 35px;">{{ val.price / 100 }}</span>
|
|
|
- <span> 元</span>
|
|
|
- </div>
|
|
|
- <div class="text-decoration-line-through color-666">原价:{{ val.originalPrice / 100 }}元</div>
|
|
|
- <div class="font-size-14 color-999 mt-3 periodValidity py-2">有效期:{{ val.day }}天</div>
|
|
|
+ <template v-if="val.id === 'custom'">
|
|
|
+ <div class="d-flex flex-column algin-center justify-center" style="height: 100%">
|
|
|
+ <div>需要发布更多职位</div>
|
|
|
+ <div>请联系门墩儿购买企业套餐</div>
|
|
|
+ <div style="width: 100%; position: relative;">
|
|
|
+ <div style="width: 80px; height: 80px; margin: auto; opacity: 0.5;">
|
|
|
+ <v-img src="https://minio.menduner.com/dev/menduner/contact.png" width="80" height="80"></v-img>
|
|
|
+ </div>
|
|
|
+ <!-- <div style="opacity: 0.5;"><v-icon size="60">mdi-qrcode</v-icon></div> -->
|
|
|
+ <div class="absolute-center" style="color: #444; margin: 3px 0 0 2px;"><v-icon size="30">mdi-magnify-plus-outline</v-icon></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <h4 class="mt-5">{{ val.name }}</h4>
|
|
|
+ <div class="color-primary">
|
|
|
+ <span>¥</span>
|
|
|
+ <span style="font-size: 35px;">{{ val.price / 100 }}</span>
|
|
|
+ <span> 元</span>
|
|
|
+ </div>
|
|
|
+ <div class="text-decoration-line-through color-666">原价:{{ val.originalPrice / 100 }}元</div>
|
|
|
+ <div class="font-size-14 color-999 mt-3 periodValidity py-2">有效期:{{ val.day }}天</div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="!Object.keys(select).length" class="color-warning text-center mt-15 font-size-20">请选择要购买的套餐</div>
|
|
|
+ <div v-if="!Object.keys(select).length && !showCustom" class="color-warning text-center mt-15 font-size-20">请选择要购买的套餐</div>
|
|
|
<div v-if="payType && payQrCodeTxt" id="codeBox" class="code pa-5 resume-box">
|
|
|
<!-- <div class="resume-header">
|
|
|
<div class="resume-title">扫码支付</div>
|
|
@@ -43,6 +58,15 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div v-if="showCustom" id="codeBox" class="code pa-5 resume-box">
|
|
|
+ <div style="width: 100%;">
|
|
|
+ <div class="text-center">请扫码添加下方企业微信联系我们:</div>
|
|
|
+ <div class="my-3" style="width: 180px; height: 180px; margin: auto;">
|
|
|
+ <v-img src="https://minio.menduner.com/dev/menduner/contact.png" width="180" height="180"></v-img>
|
|
|
+ </div>
|
|
|
+ <div class="text-center mt-2">潘青海先生(Peter Pan)</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
@@ -68,6 +92,7 @@ const list = ref([])
|
|
|
const getPackageList = async () => {
|
|
|
const data = await getEnterprisePackageList()
|
|
|
list.value = data
|
|
|
+ list.value.push({id:'custom'})
|
|
|
}
|
|
|
|
|
|
const offsetCalc = ref(0)
|
|
@@ -100,7 +125,14 @@ const calcStyle = (index) => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+const showCustom = ref(false)
|
|
|
const handleClick = (index, val) => {
|
|
|
+ if (val.id == 'custom') {
|
|
|
+ payQrCodeTxt.value = ''
|
|
|
+ showCustom.value = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ showCustom.value = false
|
|
|
payQrCodeTxt.value = ''
|
|
|
current.value = index
|
|
|
select.value = val
|