联系我们

pages.json

@@ -276,6 +276,12 @@
 					"style": {
 						"navigationBarTitleText": "我们的服务"
 					}
+				},
+				{
+					"path": "headhunting/pages/contact",
+					"style": {
+						"navigationBarTitleText": "联系我们"
+					}
 				}
 			]
 		}

pagesB/headhunting/components/contact.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="main">
+    <uni-title type="h1" title="联系我们" align="center"></uni-title>
+    <view class="main-footer">
+      <uni-title type="h3" title="欢迎关注，了解门墩儿的新动态。"></uni-title>
+      <view class="subTitle">门墩儿在所有主流社交媒体都有账号。欢迎关注我们，以便了解关于发展趋势和领导力问题的最新见解。</view>
+      <view class="main-footer-contact">
+        <view class="main-footer-contact-item"><text>猎头顾问</text>：姚嘉庆 Julia Yao</view>
+        <view class="main-footer-contact-item"><text>邮箱</text>：Julia.yao@menduner.com</view>
+        <view class="main-footer-contact-item"><text>手机</text>：18501626969</view>
+        <view class="qr">
+          <image
+            src="https://minio.citupro.com/dev/menduner/official-account-code4.jpg"
+            mode="scaleToFill"
+          />
+          <view class="subTitle">关注menduner公众号</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+.main {
+  &-footer {
+    width: 100%;
+    padding: 20rpx;
+    box-sizing: border-box;
+    background: #e8f0f7;
+    .subTitle {
+      font-size: 24rpx;
+      margin-bottom: 20rpx;
+      line-height: 40rpx;
+      color: #666;
+    }
+    &-contact {
+      &-item {
+        margin-bottom: 20rpx;
+        text {
+          display: inline-block;
+          width: 140rpx;
+          text-align-last: justify;
+        }
+      }
+      
+    }
+    .qr {
+      image {
+        width: 240rpx;
+        height: 240rpx;
+        margin-bottom: 10rpx;
+      }
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 20rpx;
+    }
+  }
+}
+</style>

pagesB/headhunting/components/nav.vue

@@ -17,7 +17,7 @@
       <uni-list>
         <uni-list-item class="panel-item" showArrow title="我们的服务" @tap="handleTo('/pagesB/headhunting/pages/service')" />
         <uni-list-item class="panel-item" showArrow title="候选人" @tap="handleClick('/pages/index/position')"/>
-        <uni-list-item class="panel-item" showArrow title="联系我们" />
+        <uni-list-item class="panel-item" showArrow title="联系我们" @tap="handleTo('/pagesB/headhunting/pages/contact')"/>
       </uni-list>
     </view>
   </view>

pagesB/headhunting/index.vue

@@ -26,7 +26,7 @@
           :interval="2000"
           :duration="500"
         >
-          <swiper-item v-for="item in consultant" :key="item.id">
+          <swiper-item v-for="item in consultant" :key="item.id" @tap="handleToDetails('consultant', item.id)">
             <view class="swiper-item">
               <image
                 :src="item.avatar"
@@ -50,28 +50,13 @@
         </view>
       </view>
     </view>
-    <uni-title type="h1" title="联系我们" align="center"></uni-title>
-    <view class="main-footer">
-      <uni-title type="h3" title="欢迎关注，了解门墩儿的新动态。"></uni-title>
-      <view class="subTitle">门墩儿在所有主流社交媒体都有账号。欢迎关注我们，以便了解关于发展趋势和领导力问题的最新见解。</view>
-      <view class="main-footer-contact">
-        <view class="main-footer-contact-item"><text>猎头顾问</text>：姚嘉庆 Julia Yao</view>
-        <view class="main-footer-contact-item"><text>邮箱</text>：Julia.yao@menduner.com</view>
-        <view class="main-footer-contact-item"><text>手机</text>：18501626969</view>
-        <view class="qr">
-          <image
-            src="https://minio.citupro.com/dev/menduner/official-account-code4.jpg"
-            mode="scaleToFill"
-          />
-          <view class="subTitle">关注menduner公众号</view>
-        </view>
-      </view>
-    </view>
+    <Footer></Footer>
   </view>
 </template>
 <!-- 猎头 -->
 <script setup>
 import Nav from './components/nav'
+import Footer from './components/contact.vue'
 // import { ref }  from 'vue'
 const consultant = [
   { country: '苏州', enName: '田森博士（Simon Tian）', id: 'simon', avatar: 'https://minio.citupro.com/dev/menduner/consultant/simon.png' },
@@ -217,41 +202,5 @@ $rootColor: #00695c;
       }
     }
   }
-  &-footer {
-    width: 100%;
-    padding: 20rpx;
-    box-sizing: border-box;
-    background: #e8f0f7;
-    .subTitle {
-      font-size: 24rpx;
-      margin-bottom: 20rpx;
-      line-height: 40rpx;
-      color: #666;
-    }
-    &-contact {
-      &-item {
-        margin-bottom: 20rpx;
-        text {
-          display: inline-block;
-          width: 140rpx;
-          text-align-last: justify;
-        }
-      }
-      
-    }
-    .qr {
-      image {
-        width: 240rpx;
-        height: 240rpx;
-        margin-bottom: 10rpx;
-      }
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      flex-direction: column;
-      align-items: center;
-      margin-top: 20rpx;
-    }
-  }
 }
 </style>

pagesB/headhunting/pages/contact.vue

@@ -0,0 +1,43 @@
+<template>
+  <view class="pa-3">
+    <uni-forms ref="baseForm" :modelValue="baseFormData">
+      <uni-forms-item label="姓名" required  label-width="100">
+        <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
+      </uni-forms-item>
+      <uni-forms-item label="手机号" required  label-width="100">
+        <uni-easyinput v-model="baseFormData.phone" placeholder="请输入联系手机号" />
+      </uni-forms-item>
+      <uni-forms-item label="企业名称" required  label-width="100">
+        <uni-easyinput v-model="baseFormData.enterpriseName" placeholder="请输入企业名称" />
+      </uni-forms-item>
+    </uni-forms>
+    <button type="primary" @click="submit">提交</button>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const baseForm = ref()
+const baseFormData = ref({
+  name: '',
+  phone: '',
+  enterpriseName: ''
+})
+const submit = async () => {
+  await baseForm.value.validate()
+
+  uni.showToast({ title: '保存成功', icon: 'none' })
+  // baseForm.value.validate().then((res) => {
+  //   console.log('表单数据：', res)
+  //   uni.showToast({ title: '保存成功', icon: 'none' })
+  // }).catch((err) => {
+  //   // uni.showToast({ title: err?.msg || '保存失败', icon: 'none' })
+  // })
+}
+</script>
+
+<style lang="scss" scoped>
+.pa-3 {
+  padding: 30rpx;
+}
+</style>

pagesB/headhunting/pages/details.vue

@@ -1,39 +1,99 @@
 <template>
   <view>
-    <uni-title type="h1" :title="data.title" align="center"></uni-title>
-    <view class="subTitle break">{{ data.startDesc }}</view>
-    <view v-if="data.children" class="pa-3">
-      <view v-for="item in data.children" :key="item" class="pa-2 subTitle">{{ item }}</view>
-    </view>
-    <view class="subTitle">{{ data.endDesc }}</view>
+    <template v-if="type === 'service' || type === 'industry'">
+      <uni-title type="h1" :title="data.title" align="center"></uni-title>
+      <view class="subTitle break">{{ data.startDesc }}</view>
+      <view v-if="data.children" class="pa-3">
+        <view v-for="item in data.children" :key="item" class="pa-2 subTitle">{{ item }}</view>
+      </view>
+      <view class="subTitle">{{ data.endDesc }}</view>
+    </template>
+    <template v-else-if="type === 'consultant'">
+      <view class="pa-3">
+        <view class="center mb-3">
+          <image
+            :src="data.avatar"
+            mode="heightFix"
+          />
+          <view class="title-job">{{ data.job }}</view>
+        </view>
+
+        <view class="name mb-3">{{ data.title }}</view>
+        <view class="tips mb-3">Consultant</view>
+        <view v-if="data?.edu" class="mb-3">
+          <view v-for="(edu, index) in data.edu" :key="index" class="mb-1 sub">{{ edu }}</view>
+        </view>
+        <view v-for="(k, i) in data.desc" :key="i" class="desc mb-3">{{ k }}</view>
+      </view>
+    </template>
+    <template v-else></template>
+    <Footer></Footer>
   </view>
 </template>
 
 <script setup>
+import Footer from '../components/contact.vue'
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
-import { serviceData } from '@/utils/headhuntingData'
+import { serviceData, consultantData } from '@/utils/headhuntingData'
 
 const data = ref({})
+const type = ref('service')
 
 onLoad((options) => {
-  // 传入需要跳转的链接 使用web-view标签进行跳转
-  // options.type
-  // options.key
-  data.value = serviceData.find(e => e.id === options.key)
+  type.value = options.type
+  const _data = {
+    service: serviceData,
+    consultant: consultantData,
+    industry: serviceData
+  }
+  data.value = _data[options.type].find(e => e.id === options.key)
 })
 </script>
 
 <style lang="scss" scoped>
+.title-job {
+  font-family: FFScalaWebItalic, Georgia, Utopia, Charter, sans-serif;
+  font-style: italic;
+  font-weight: 400;
+}
+.name {
+  font-family: FFScalaWebBold, Georgia, Utopia, Charter, sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 36rpx;
+  color: #00695C;
+}
+.tips {
+  font-family: FFScalaWebItalic, Georgia, Utopia, Charter, serif;
+  font-style: italic;
+  font-weight: 400;
+}
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
 .pa-3 {
   padding: 30rpx;
 }
 .pa-2 {
   padding: 20rpx;
 }
+.mb-3 {
+  margin-bottom: 30rpx;
+}
+.mb-1 {
+  margin-bottom: 10rpx;
+}
 .break {
   color: #333 !important;
 }
+.sub {
+  font-size: 28rpx;
+  color: #666;
+}
 .subTitle {
   padding: 0 20rpx;
   font-size: 24rpx;

pagesB/headhunting/pages/service.vue

@@ -23,7 +23,7 @@
         <view class="subTitle mb-3"> {{ item.desc }} </view>
         <view class="subTitle mb-3"> {{ item.subDesc }} </view>
         <view class="tapBox">
-          <text v-for="_item in item.items" :key="_item.id" class="tap">{{ _item.title }} </text>
+          <text v-for="_item in item.items" :key="_item.id" class="tap" @tap="handleToDetails('industry', _item.id)">{{ _item.title }} </text>
         </view>
       </view>