门墩儿猎寻服务

src/locales/en.js

@@ -116,6 +116,7 @@ export default {
   form: {},
   headhunting: {
     headhuntingName: 'Menduner Hunting Service',
+    submitSuccess: 'Your application form has been received, and the consultant will contact you later.',
   },
   interview: {
     waitingForAcceptance: 'Waiting for acceptance',

src/locales/zh-CN.js

@@ -116,6 +116,7 @@ export default {
   form: {},
   headhunting: {
     headhuntingName: '门墩儿猎寻服务',
+    submitSuccess: '您的申请单已收到，顾问稍后会与您联系。',
   },
   interview: {
     waitingForAcceptance: '待接受',

src/plugins/curtain/components/message.vue

@@ -0,0 +1,58 @@
+<!-- 通知 -->
+<template>
+  <v-app>
+    <v-dialog
+      v-model="dialog"
+      max-width="400"
+      :persistent="persistent || false"
+    >
+      <div class="white-bgc pa-5" style="border-radius: 2px; max-height: 600px; overflow-y: auto;">
+        <template v-if="list?.length">
+          <!-- 数组 -->
+          <div
+            v-for="(item, index) in list" :key="'curtainPoint' + index"
+            :style="{color:color}"
+          >
+            {{ item }}
+          </div>
+        </template>
+        <div v-else :style="{color:color}">{{message}}</div>
+      </div>
+      <div class="text-center mt-3">
+        <span style="color: white; font-size: 28px;" class="mdi mdi-close-circle-outline cursor-pointer" @click="dialog = false"></span>
+      </div>
+    </v-dialog>
+  </v-app>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+defineOptions({name: 'curtain-message'})
+defineProps({
+  message: String, // 单条数据，也可以用list['']
+  list: Array, // 多条数据一起展示传list['', '']
+  persistent: Boolean, // false: 点击遮罩层关闭dialog
+  color: { // 文本颜色
+    type: String,
+    default: 'darkorange'
+  },
+})
+
+const dialog = ref(true)
+
+</script>
+<style lang="scss" scoped>
+::-webkit-scrollbar {
+  width: 4px;
+  height: 10px;
+  // display: none;
+}
+::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
+  // 滚动条-颜色
+  background: #c3c3c379;
+}
+::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
+  // 滚动条-底色
+  background: #e5e5e58f;
+}
+</style>

src/plugins/curtain/index.js

@@ -1,10 +1,16 @@
 import { createApp } from 'vue'
 import point from './components/point.vue'
+import message from './components/message.vue'
 import vuetify from '@/plugins/vuetify'
-// Curtain('point', { message: '暂未开发，敬请期待！' })
+
+// Curtain('point', { message: '遮帘弹窗通知！' })
 
 const toastMessage  = (type, options)  => {
-  const componentName = type === 'point' ? point : null
+
+  const componentName = type === 'point' ?
+                    point : type === 'message' ?
+                    message : null
+
   const rootNode = document.createElement("div")
   document.querySelector('.v-application').appendChild(rootNode)
   const app = createApp(componentName, options)

src/views/headhunting/components/form.vue

@@ -31,28 +31,13 @@ const items = ref({
       rules: [v => !!v || '请填写联系手机号']
     },
     {
-      type: 'phoneNumber',
-      key: 'phone',
-      value: '',
-      clearable: true,
-      label: '联系手机号 *',
-      rules: [v => !!v || '请填写联系手机号']
-    },
-    {
-      type: 'phoneNumber',
-      key: 'phone',
-      value: '',
-      clearable: true,
-      label: '联系手机号 *',
-      rules: [v => !!v || '请填写联系手机号']
-    },
-    {
-      type: 'phoneNumber',
-      key: 'phone',
+      type: 'text',
+      key: 'en',
       value: '',
-      clearable: true,
-      label: '联系手机号 *',
-      rules: [v => !!v || '请填写联系手机号']
+      default: null,
+      label: '企业名称 *',
+      outlined: true,
+      rules: [v => !!v || '请输入企业名称']
     },
   ]
 })

src/views/headhunting/index.vue

@@ -1,34 +1,51 @@
 <!-- 门墩儿猎寻服务 -->
 <template>
   <div class="headhunting">
-    <v-card class="headhunting-content pa-8 py-12">
-      <div class="resume-header mb-5">
-        <div class="resume-title">{{ $t('headhunting.headhuntingName') }}</div>
-      </div>
+    <div class="headhunting-title">高端人才猎寻</div>
+    <div class="headhunting-guidance" @click="showDialog = true">免费咨询</div>
+    <div class="headhunting-title">高端人才猎寻</div>
+    <!-- <div class="headhunting-content pa-8 py-12">
       <formItem ref="formRef"></formItem>
       <div class="text-center">
-        <v-btn color="primary" rounded class="buttons mt-3" @click="submit">提交</v-btn>
+        <v-btn color="#474747" rounded class="buttons" @click="handleSubmit">提交</v-btn>
       </div>
-    </v-card>
+    </div> -->
+    <CtDialog
+      :visible="showDialog"
+      :widthType="2"
+      titleClass="text-h6"
+      title="门墩儿猎寻服务"
+      @submit="handleSubmit"
+    >
+      <formItem ref="formRef"></formItem>
+    </CtDialog>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import formItem from './components/form.vue'
+// import Snackbar from '@/plugins/snackbar'
+import Curtain from '@/plugins/curtain'
+import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
 defineOptions({ name: 'headhunting-index'})
 
+const showDialog = ref(false)
 
 // 提交
 const formRef = ref()
-const submit = async () => {
+const handleSubmit = async () => {
   try {
     const obj = await formRef.value.getQuery()
     console.log('1', obj)
     // if (!obj) return
     // await savePersonSimpleInfo(obj)
+    // Snackbar.success(t('headhunting.submitSuccess'))
+    Curtain('message', { message: t('headhunting.submitSuccess') })
   } catch (error) {
     console.error('error', error)
+  } finally {
+    showDialog.value = false
   }
 }
 
@@ -43,24 +60,35 @@ const submit = async () => {
   background-image: url('https://minio.citupro.com/dev/menduner/%E9%97%A8%E5%A2%A9%E7%8C%8E%E5%AF%BB%E6%9C%8D%E5%8A%A1%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87.jpg');
   background-size: cover;
 }
-.headhunting::before {
-  content: ""; /* 必须添加，因为伪元素是空的 */
-  position: absolute; /* 绝对定位，相对于最近的已定位（即非static）祖先元素 */
-  top: 0; /* 遮罩层顶部与元素顶部对齐 */
-  left: 0; /* 遮罩层左侧与元素左侧对齐 */
-  right: 0; /* 遮罩层右侧与元素右侧对齐 */
-  bottom: 0; /* 遮罩层底部与元素底部对齐 */
-  background-color: rgba(0, 0, 0, 0.3); /* 遮罩层颜色，半透明黑色 */
-  // z-index: -1; /* 确保遮罩层在背景图片之下（通常不需要，因为伪元素默认就在内容之下） */
+// .headhunting::before {
+//   content: ""; /* 必须添加，因为伪元素是空的 */
+//   position: absolute; /* 绝对定位，相对于最近的已定位（即非static）祖先元素 */
+//   top: 0; /* 遮罩层顶部与元素顶部对齐 */
+//   left: 0; /* 遮罩层左侧与元素左侧对齐 */
+//   right: 0; /* 遮罩层右侧与元素右侧对齐 */
+//   bottom: 0; /* 遮罩层底部与元素底部对齐 */
+//   background-color: rgba(0, 0, 0, 0.1); /* 遮罩层颜色，半透明黑色 */
+//   // z-index: -1; /* 确保遮罩层在背景图片之下（通常不需要，因为伪元素默认就在内容之下） */
+// }
+.headhunting-title {
+  position: absolute;
+  top: 45px;
+  left: 100px;
+  font-size: 24px;
+  font-weight: bold;
+}
+.headhunting-guidance {
+  position: absolute;
+  top: 45px;
+  right: 200px;
+  font-size: 18px;
+  color: #666;
+  cursor: pointer;
 }
 .headhunting-content {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
-  width: 600px;
-  // height: 430px;
-  background-color: #fff;
-  border-radius: 10px;
+  bottom: 30px;
+  left: 250px;
+  width: 350px;
 }
 </style>