相似职位

src/api/position.js

@@ -22,4 +22,12 @@ export const getUrgentPosition = async (params) => {
     url: '/app-api/menduner/system/job/advertised/get/urgent',
     params
   })
+}
+
+// 获取职位详情
+export const getPositionDetails = async (params) => {
+  return await request.get({
+    url: '/app-api/menduner/system/job/advertised/get/detail',
+    params
+  })
 }

src/components/Position/item.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="position-box">
     <div class="sub-li" v-for="(item, index) in list" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
-      <div class="job-info">
+      <div class="job-info" @click="handlePosition(item)">
         <div class="sub-li-top">
           <div class="sub-li-info">
             <p :class="['name', {'default-active': item.active }]">{{ item.name }}</p>
@@ -17,7 +17,7 @@
           <v-chip size="x-small" label v-for="(j, i) in desc" :key="i" class="mr-1" color="#666" :prepend-icon="j.mdi">{{ item[j.value] }}</v-chip>
         </div>
       </div>
-      <div class="sub-li-bottom">
+      <div class="sub-li-bottom" @click="handleEnterprise(item)">
         <div class="user-info">
           <div class="d-flex align-center">
             <v-img src="../../assets/logo.png" width="40" style="height: 40px;" />
@@ -57,6 +57,14 @@ const desc = [
   { mdi: 'mdi-school-outline', value: 'eduName' },
   { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
 ]
+
+const emits = defineEmits(['position', 'enterprise'])
+const handlePosition = (item) => {
+  emits('position', item)
+}
+const handleEnterprise = (item) => {
+  emits('enterprise', item)
+}
 </script>
 
 <style lang="scss" scoped>

src/components/Position/similarPositions.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="position-box">
+    <h4 class="mb-3">相似职位</h4>
+    <div v-for="(item, index) in list" :key="index" class="mb-2 cursor-pointer">
+      <p class="recruit-name">{{ item.recruitName }}</p>
+      <span class="recruit-salary">{{ item.salary }}</span>
+      <div :class="['enterprise', {'borders': index !== list.length - 1}]">
+        <v-img class="float-left" src="https://img.bosszhipin.com/beijin/upload/com/logo/20230908/7b5b554d84f9729c6903b0c0cc1dcd8701d6c481534346fb7ef6001aff3ae087644bf666b1b70622.png" :width="30" style="height: 30px;"></v-img>
+        <span class="float-left enterprise-name">{{ item.enterpriseName }}</span>
+        <span class="float-right enterprise-address">{{ item.address }}</span>
+      </div>
+    </div>
+    <div class="text-center more-btn">
+      <v-btn color="primary" variant="outlined" class="buttons">查看全部职位</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup name="similarPositions">
+const list = [
+  {
+    recruitName: '产品经理',
+    salary: '12-4k',
+    enterpriseName: '辞图科技有限公司',
+    address: '广州'
+  },
+  {
+    recruitName: '产品经理',
+    salary: '12-4k',
+    enterpriseName: '辞图科技有限公司',
+    address: '广州'
+  },
+  {
+    recruitName: '产品经理',
+    salary: '12-4k',
+    enterpriseName: '辞图科技有限公司',
+    address: '广州'
+  },
+  {
+    recruitName: '产品经理',
+    salary: '12-4k',
+    enterpriseName: '辞图科技有限公司',
+    address: '广州'
+  }
+]
+</script>
+
+<style lang="scss" scoped>
+.position-box {
+  position: relative;
+  height: 430px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  padding: 20px 15px;
+}
+.recruit-name {
+  width: 120px;
+  font-weight: 500;
+  display: inline-block;
+  max-width: 120px;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+.recruit-salary {
+  float: right;
+  color: var(--v-error-base);
+  font-weight: 500;
+  height: auto;
+  vertical-align: sub;
+}
+.enterprise {
+  height: 40px;
+  line-height: 30px;
+  margin-top: 8px;
+}
+.enterprise-name {
+  width: 120px;
+  display: inline-block;
+  max-width: 120px;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: #666;
+  font-size: 13px;
+  margin-left: 5px;
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+.enterprise-address {
+  color: #555;
+  font-size: 13px;
+}
+.borders {
+  border-bottom: 1px dashed #ccc;
+}
+.more-btn {
+  position: absolute;
+  bottom: 18px;
+}
+</style>

src/router/modules/recruit.js

@@ -14,6 +14,14 @@ const recruit = [
         meta: {
           title: '职位'
         }
+      },
+      {
+        path: '/recruit/position/details/:id',
+        component: () => import('@/views/recruit/position/components/details'),
+        name: 'recruitPositionDetails',
+        meta: {
+          title: '职位详情'
+        }
       }
     ]
   }

src/styles/index.css

@@ -2,6 +2,7 @@
   --zIndex-dialog: 9999;
   --default-bgc: #f2f4f7;
   --v-primary-base: #00897B;
+  --v-error-base: #fe574a;
   --v-primary-lighten1: #26A69A;
   --v-primary-lighten2: #4DB6AC;
   --v-primary-lighten3: #80CBC4;

src/styles/index.min.css

@@ -1 +1 @@
-:root{--zIndex-dialog:9999;--default-bgc:#f2f4f7;--v-primary-base:#00897B;--v-primary-lighten1:#26A69A;--v-primary-lighten2:#4DB6AC;--v-primary-lighten3:#80CBC4;--v-primary-lighten4:#B2DFDB;--default-text:#666}.buttons{height:36px;width:224px}.half-button{height:36px;width:88px}.default-width{width:1184px;min-width:1184px;max-width:1184px;margin:0 auto}.default-active{color:var(--v-primary-base) !important}
+:root{--zIndex-dialog:9999;--default-bgc:#f2f4f7;--v-primary-base:#00897B;--v-error-base:#fe574a;--v-primary-lighten1:#26A69A;--v-primary-lighten2:#4DB6AC;--v-primary-lighten3:#80CBC4;--v-primary-lighten4:#B2DFDB;--default-text:#666}.buttons{height:36px;width:224px}.half-button{height:36px;width:88px}.default-width{width:1184px;min-width:1184px;max-width:1184px;margin:0 auto}.default-active{color:var(--v-primary-base) !important}

src/styles/index.scss

@@ -2,6 +2,7 @@
   --zIndex-dialog: 9999;
   --default-bgc: #f2f4f7;
   --v-primary-base: #00897B;
+  --v-error-base: #fe574a;
   --v-primary-lighten1: #26A69A;
   --v-primary-lighten2: #4DB6AC;
   --v-primary-lighten3: #80CBC4;

src/views/Home/personal/components/hotPromotedPositions.vue

@@ -7,7 +7,7 @@
     </v-tabs>
     <v-window v-model="tab" class="mt-3">
       <v-window-item :value="1">
-        <PositionCard :items="items"></PositionCard>
+        <PositionCard :items="items" @position="handlePosition" @enterprise="handleEnterprise"></PositionCard>
       </v-window-item>
       <v-window-item :value="2">
         <PositionCard :items="items"></PositionCard>
@@ -71,4 +71,12 @@ const getDictList = async () => {
 }
 getDictList()
 getPositionList()
+
+// 职位详情
+const handlePosition = (item) => {
+  window.open(`/recruit/position/details/${item.positionId}`)
+}
+const handleEnterprise = (item) => {
+  console.log(item, 'enterprise-item')
+}
 </script>

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

@@ -0,0 +1,198 @@
+<template>
+  <div>
+      <div class="default-width banner px-6">
+        <div class="banner-title">
+          <h1>{{ info.name }}</h1>
+          <span class="salary">{{ info.payFrom }}-{{ info.payTo }}/月</span>
+          <span class="refresh-time">2022-10-17 11:03:59 刷新 <v-icon color="warning" size="20">mdi-alert-outline</v-icon></span>
+        </div>
+        <div class="banner-tags mt-4">
+          <span v-for="k in desc" :key="k.mdi" class="mr-10">
+            <v-icon color="#666" size="20">{{ k.mdi }}</v-icon>
+            <span class="ml-1">{{ k.label }}</span>
+          </span>
+        </div>
+        <div class="banner-tools my-4" style="height: 47px;">
+          <div class="float-left" style="line-height: 40px;">
+            <v-chip size="small" label v-for="(k, i) in info.tagList" :key="i" class="mr-1" color="primary">{{ k }}</v-chip>
+          </div>
+          <div class="banner-tools-btns float-right">
+            <v-btn class="half-button radius" color="warning" variant="outlined" prepend-icon="mdi-star-outline">收藏</v-btn>
+            <v-btn class="half-button mx-2 radius" color="success" variant="outlined">立即沟通</v-btn>
+            <v-btn class="half-button radius" color="primary" variant="outlined">投递简历</v-btn>
+          </div>
+        </div>
+        <v-divider></v-divider>
+        <div class="d-flex">
+          <div class="content-left">
+            <div class="left-position-detail">
+              <h4>职位详情</h4>
+              <v-container class="pa-0 mt-3">
+                <v-row no-gutters align="start">
+                  <v-col v-for="k in positionDetail" :key="k.label" cols="4" class="mb-1">
+                    <span class="label-text">{{ k.label }}<span class="value-text">{{ k.value }}</span></span>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </div>
+            <div class="mt-3" v-if="Object.keys(info).length">
+              <div>岗位职责：</div>
+              <div class="requirement" v-html="info.content.replace(/\n/g, '</br>')"></div>
+              <div class="mt-3">岗位要求：</div>
+              <div class="requirement" v-html="info.requirement.replace(/\n/g, '</br>')"></div>
+            </div>
+            <v-divider class="my-3"></v-divider>
+            <div class="contact" v-if="Object.keys(info).length">
+              <div class="float-left d-flex align-center">
+                <v-img :src="info.contact.avatar" :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 class="float-right">
+                <v-chip color="primary" label>当前在线</v-chip>
+              </div>
+            </div>
+            <v-divider class="my-3"></v-divider>
+            <div class="address">
+              <h4>工作地址</h4>
+              <div class="mt-1">
+                <v-icon size="25" color="primary">mdi-map-marker</v-icon>
+                <span style="color: #666;font-size: 15px;">{{ info.address }}</span>
+              </div>
+            </div>
+            <div class="mt-3 text-center">
+              <v-btn class="half-button mr-2 radius" color="success" variant="outlined">立即沟通</v-btn>
+              <v-btn class="half-button radius" color="primary">投递简历</v-btn>
+            </div>
+          </div>
+          <div class="content-right">
+            <similarPositions></similarPositions>
+          </div>
+        </div>
+      </div>
+  </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
+</template>
+
+<script setup>
+defineOptions({ name: 'position-details' })
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { getPositionDetails } from '@/api/position'
+import similarPositions from '@/components/Position/similarPositions.vue'
+
+const router = useRouter()
+const { id } = router.currentRoute.value.params
+
+// 职位详情
+const info = ref({})
+const getPositionDetail = async () => {
+  const data = await getPositionDetails({ id })
+  info.value = data
+  console.log(data, 'info')
+}
+getPositionDetail()
+
+const desc = [
+  { mdi: 'mdi-map-marker-outline', value: 'areaName', label: '广州' },
+  { mdi: 'mdi-school-outline', value: 'eduName', label: '本科' },
+  { mdi: 'mdi-clock-time-ten-outline', value: 'expName', label: '1-3年' }
+]
+
+const positionDetail = [
+  { label: '招聘人数：', value: '1人' },
+  { label: '到岗时间：', value: '2周以内' },
+  { label: '年龄要求：', value: '20-35周岁' },
+  { label: '婚况要求：', value: '不限' },
+  { label: '应届生：', value: '接受应届生' },
+  { label: '语言要求：', value: '普通话' }
+]
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  background-color: #fff;
+  padding: 18px 0 20px;
+}
+.banner-title {
+  line-height: 40px;
+  font-size: 28px;
+  font-weight: 600;
+}
+.banner-title h1 {
+  display: inline-block;
+  color: #37576c;
+  font-size: 28px;
+  margin-right: 30px;
+  margin-top: 1px;
+  max-width: 360px;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.salary {
+  color: var(--v-error-base);
+  line-height: 41px;
+  font-weight: 600;
+  height: auto;
+  display: inline-block;
+  vertical-align: sub;
+}
+.refresh-time {
+  float: right;
+  color: #666;
+  font-size: 14px;
+  line-height: 66px;
+  vertical-align: sub;
+}
+.banner-tags span {
+  font-weight: 600;
+}
+.radius {
+  border-radius: 8px;
+}
+.content-left {
+  width: 864px;
+  padding: 20px 20px;
+}
+.content-right {
+  flex: 1;
+  // background-color: #d5e6e8;
+  padding: 20px 20px 20px 0;
+}
+.label-text {
+  color: #7f7a7a;
+  font-weight: 600;
+}
+.value-text {
+  color: #000;
+  font-weight: 400;
+}
+.requirement {
+  white-space: pre-wrap;
+  word-break: break-all;
+  line-height: 28px;
+  color: #333;
+  font-size: 15px;
+  text-align: justify;
+  letter-spacing: 0;
+}
+.contact {
+  height: 60px;
+  line-height: 60px;
+}
+.contact-name {
+  font-size: 20px;
+  font-weight: 500;
+  color: #222;
+  line-height: 28px;
+}
+.contact-info {
+  font-size: 15px;
+  color: #666;
+  line-height: 21px;
+  margin-top: 8px;
+}
+</style>