浏览代码

需要发布更多职位请联系门墩儿购买企业套餐

lifanagju_citu 7 月之前
父节点
当前提交
241c0cbb04
共有 2 个文件被更改,包括 49 次插入9 次删除
  1. 8 0
      src/styles/index.scss
  2. 41 9
      src/views/recruit/enterprise/membershipPackage/dynamic/package.vue

+ 8 - 0
src/styles/index.scss

@@ -119,6 +119,14 @@
   margin: 0 10px;
 }
 
+// 居中
+.absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 // 个人简历
 .resume-box {
   border-radius: 5px;

+ 41 - 9
src/views/recruit/enterprise/membershipPackage/dynamic/package.vue

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