分享职位

src/views/recruit/personal/position/components/details.vue

@@ -166,9 +166,13 @@ getCollectionStatus()
 
 // 分享有礼
 const handleShare = async () => {
+  // 分享链接携带参数: 1.用户id。2.手机号。3.附件简历。4.姓名。5.职位id
   const url = '/shareJob?' + new URLSearchParams({
-      param1: 'value1',
-      param2: 'value2'
+    jobId: id,
+    sharedById: 'userId',
+    sharedByName: 'name',
+    sharedByPhone: 'phone',
+    file: 'file',
   }).toString()
   window.open(url, '_blank')
 }

src/views/recruit/personal/shareJob/index.vue

@@ -1,14 +1,166 @@
 <!-- 分享职位 -->
 <template>
-  <div>vue3PageInit</div>
+  <div
+    style="background-color: #f0f0f0; width: 100vw;"
+  >
+    <v-card
+      class="py-3 px-5"
+      style="background-color: #fff; overflow: auto;"
+      :style="{'width': windowWidth > 750 ? '750px' : '100vw', 'margin': windowWidth > 750 ? '5px auto' : '0 auto'}"
+    >
+      <div v-if="!Object.keys(info).length">加载失败</div>
+      <div>
+        <div class="d-flex justify-space-between">
+          <h2 class="JobName ellipsis">{{ info.name }}</h2>
+          <span class="salary">{{ info.payFrom }}-{{ info.payTo }}/{{ positionInfo.payName }}</span>
+        </div>
+        <div class="d-flex justify-space-between mt-4">
+          <div>
+            <div class="banner-tags">
+              <div v-for="k in desc" :key="k.mdi" class="mr-10">
+                <v-icon color="var(--color-666)" size="20">{{ k.mdi }}</v-icon>
+                <span class="f-w-600 ml-1">{{ positionInfo[k.value] }}</span>
+              </div>
+            </div>
+            <div class="my-4 mb-3" v-if="info?.tagList">
+              <v-chip size="small" class="mr-1 mb-1" color="primary" label v-for="(k, i) in info.tagList" :key="i">{{ k }}</v-chip>
+            </div>
+          </div>
+          <v-btn
+            class="button-item radius"
+            color="warning" 
+            variant="outlined" 
+            prepend-icon="mdi-heart-outline"
+            @click="null"
+          >{{ $t('position.collection') }}</v-btn>
+        </div>
+        <v-divider></v-divider>
+        <div class="mt-3 mb-1 f-w-600">{{ $t('position.jobResponsibilities') }}</div>
+        <div class="requirement" v-html="info.content?.replace(/\n/g, '</br>')"></div>
+        <div class="mt-3 mb-1 f-w-600">{{ $t('position.jobRequirements') }}</div>
+        <div class="requirement" v-html="info.requirement?.replace(/\n/g, '</br>')"></div>
+        <v-divider class="my-3"></v-divider>
+        <div class="contact">
+          <div class="float-left d-flex align-center">
+            <v-img :src="info.contact?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'" :width="45" style="height: 45px;"></v-img>
+            <div class="ml-2">
+              <div class="contact-name">{{ info.contact?.name }}</div>
+              <div class="contact-info">{{ info.enterprise?.name }} · {{ info.contact?.postNameCn }}</div>
+            </div>
+          </div>
+        </div>
+        <v-divider class="my-3"></v-divider>
+        <div>
+          <h4>{{ $t('position.address') }}</h4>
+          <div class="mt-1">
+            <v-icon size="25" color="primary">mdi-map-marker</v-icon>
+            <span style="color: var(--color-666);font-size: 15px;">{{ info.address }}</span>
+          </div>
+        </div>
+        <div class="mt-3 text-center">
+          <v-btn class="mr-2 radius button-item" color="success" variant="outlined">{{ $t('position.communicate') }}</v-btn>
+          <v-btn class="radius button-item" :disabled="delivery" color="primary" @click="handleDelivery">{{ delivery ? $t('position.delivered') : $t('position.submitResume') }}</v-btn>
+        </div>
+      </div>
+    </v-card>
+  </div>
 </template>
 
 <script setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { getPositionDetails } from '@/api/position'
+import { dealDictObjData } from '@/views/recruit/personal/position/components/dict'
 defineOptions({name: 'recruit-personal-shareJob-index'})
+// 组件挂载后添加事件监听器  
+onMounted(() => {
+  window.addEventListener('resize', updateWindowSize)
+})
+// 组件卸载前移除事件监听器  
+onUnmounted(() => {
+  window.removeEventListener('resize', updateWindowSize)
+})
+// 获取路由参数
 const queryParams = new URLSearchParams(window.location.search)
-const param1 = queryParams.get('param1') || ''
-const param2 = queryParams.get('param2') || ''
-console.log('1', param1, '2', param2)
+const jobId = queryParams.get('jobId') || ''
+const sharedById = queryParams.get('sharedById') || ''
+const sharedByName = queryParams.get('sharedByName') || ''
+const sharedByPhone = queryParams.get('sharedByPhone') || ''
+const file = queryParams.get('file') || ''
+console.log(jobId, sharedById, sharedByName, sharedByPhone, file)
+
+// 职位详情
+const info = ref({})
+const positionInfo = ref({})
+const getPositionDetail = async () => {
+  const data = await getPositionDetails({ id: jobId })
+  info.value = data
+  positionInfo.value = { ...dealDictObjData({}, info.value), ...info.value }
+}
+getPositionDetail()
+
+const desc = [
+  { mdi: 'mdi-map-marker-outline', value: 'areaName' },
+  { mdi: 'mdi-school-outline', value: 'eduName' },
+  { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
+]
+
+// 监听窗口大小变化事件
+const windowWidth = ref(window.innerWidth)
+const updateWindowSize = async () => {
+  windowWidth.value = window.innerWidth
+  // windowHeight.value = window.innerHeight
+  // console.log('windowWidth', windowWidth.value)
+}
 </script>
 <style lang="scss" scoped>
+.f-w-600 { font-weight: 600; }
+.radius { border-radius: 8px; }
+.salary {
+  color: var(--v-error-base);
+  line-height: 41px;
+  font-weight: 600;
+  height: auto;
+  display: inline-block;
+  vertical-align: sub;
+}
+.JobName {
+  color: #37576c;
+  font-size: 28px;
+  margin-right: 30px;
+  margin-top: 1px;
+  // max-width: 45%;
+  vertical-align: middle;
+  flex: 1;
+}
+.banner-tags { display: flex; flex-wrap: wrap; }
+.requirement {
+  white-space: pre-wrap;
+  word-break: break-all;
+  line-height: 28px;
+  color: var(--color-333);
+  font-size: 15px;
+  text-align: justify;
+  letter-spacing: 0;
+}
+.contact {
+  height: 60px;
+  line-height: 60px;
+  padding: 0 10px;
+}
+.contact-name {
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--color-222);
+  line-height: 28px;
+}
+.contact-info {
+  font-size: 15px;
+  color: var(--color-666);
+  line-height: 21px;
+  margin-top: 8px;
+}
+.button-item {
+  min-width: 110px;
+  height: 36px
+}
 </style>