职位详情-公司信息

src/components/Enterprise/info.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="info-box">
+    <h4 class="mb-3">公司信息</h4>
+    <div style="height: 50px;">
+      <v-img class="float-left" :src="props.info.enterprise.logo_url" :width="45" height="45"></v-img>
+      <div class="ml-3 float-left">
+        <p class="enterprise-name">{{ props.info.enterprise.anotherName }}</p>
+        <v-icon color="primary" size="20">mdi-shield-check</v-icon> <!-- mdi-shield-remove -->
+        <span style="color: var(--v-primary-base);font-size: 14px;">已认证</span>
+      </div>
+    </div>
+    <div class="mt-3 border-bottom-dashed" style="font-size: 14px;">
+      <div v-for="val in dictList" :key="val.icon" class="d-flex my-2">
+        <v-icon size="20" color="#666">{{ val.icon }}</v-icon>
+        <div class="info-address ml-4">{{ val.label }}</div>
+      </div>
+    </div>
+    <div style="font-size: 12px;height: 50px; line-height: 50px">
+      <span class="float-left">共<span style="color: var(--v-primary-base)">9</span>个在招职位</span>
+      <span class="float-right more-position">查看全部职位<v-icon>mdi-chevron-right</v-icon></span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'enterprise-info' })
+import { reactive } from 'vue'
+import { getDict } from '@/hooks/web/useDictionaries'
+const props = defineProps({
+  info: {
+    type: Object,
+    default: () => {}
+  }
+})
+console.log(props.info, 'props-info')
+
+const dictObj = reactive({
+  scale: [],
+  financing: [],
+  industry: []
+})
+const dictList = reactive([
+  { type: 'menduner_financing_status', value: 'financing', key: 'scale', label: '', icon: 'mdi-domain' },
+  { type: 'menduner_scale', value: 'scale', key: 'financingStatus', label: '', icon: 'mdi-account-multiple' },
+  { type: 'menduner_industry_type', value: 'industry', key: 'industryId', label: '', params: {}, apiType: 'industryList', nameKey: 'nameCn', valueKey: 'id', icon: 'mdi-family-tree' }
+])
+const getDictList = async () => {
+  dictList.forEach(async (val) => {
+    const { data } = await getDict(val.type, val.params, val.apiType)
+    dictObj[val.value] = data
+  })
+}
+const dealData = () => {
+  const prise = props.info.enterprise
+  dictList.forEach(item => {
+    const valueKey = item.nameKey ? item.nameKey : 'label'
+    const idKey = item.valueKey ? item.valueKey : 'value'
+    item.label = dictObj[item.value].find(k => Number(k[idKey]) === Number(prise[item.key]))[valueKey] || ''
+  })
+}
+const getData = async () => {
+  await getDictList()
+  dealData()
+}
+getData()
+</script>
+
+<style lang="scss" scoped>
+.info-box {
+  height: 260px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  padding: 20px 15px;
+}
+.enterprise-name {
+  width: 165px;
+  font-weight: 500;
+  max-width: 165px;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+.info-address {
+  width: 185px;
+  font-weight: 500;
+  max-width: 185px;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  &:hover {
+    color: var(--v-primary-base);
+  }
+}
+.more-position {
+  color: var(--v-primary-base);
+  cursor: pointer;
+}
+</style>

src/components/Position/similarPositions.vue

@@ -4,8 +4,8 @@
     <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>
+      <div :class="['enterprise', {'border-bottom-dashed': index !== list.length - 1}]">
+        <v-img class="float-left" src="https://img.bosszhipin.com/beijin/upload/com/logo/20230908/7b5b554d84f9729c6903b0c0cc1dcd8701d6c481534346fb7ef6001aff3ae087644bf666b1b70622.png" :width="30" :height="30"></v-img>
         <span class="float-left enterprise-name">{{ item.enterpriseName }}</span>
         <span class="float-right enterprise-address">{{ item.address }}</span>
       </div>
@@ -97,9 +97,6 @@ const list = [
   color: #555;
   font-size: 13px;
 }
-.borders {
-  border-bottom: 1px dashed #ccc;
-}
 .more-btn {
   position: absolute;
   bottom: 18px;

src/styles/index.css

@@ -30,3 +30,7 @@
 .default-active {
   color: var(--v-primary-base) !important;
 }
+
+.border-bottom-dashed {
+  border-bottom: 1px dashed #ccc;
+}

src/styles/index.min.css

@@ -1 +1 @@
-: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}
+: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}.border-bottom-dashed{border-bottom:1px dashed #ccc}

src/styles/index.scss

@@ -30,4 +30,7 @@
 // 高亮
 .default-active {
   color: var(--v-primary-base) !important;
+}
+.border-bottom-dashed {
+  border-bottom: 1px dashed #ccc;
 }

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

@@ -25,6 +25,7 @@
 <script setup name="hotPromotedPositions">
 import PositionCard from '@/components/Position/item.vue'
 import { ref, reactive } from 'vue'
+import { useRouter } from 'vue-router'
 import { getPromotedPosition, getLatestPosition, getUrgentPosition } from '@/api/position'
 import { getDict } from '@/hooks/web/useDictionaries'
 
@@ -55,7 +56,7 @@ const getPositionList = async () => {
     items.value = list.map(e => {
       const valueKey = item.nameKey ? item.nameKey : 'label'
       const idKey = item.valueKey ? item.valueKey : 'value'
-      e[item.label] = dictObj[item.value].find(k => Number(k[idKey]) === e[item.key])[valueKey]
+      e[item.label] = dictObj[item.value].find(k => Number(k[idKey]) === Number(e[item.key]))[valueKey] || ''
       e.active = false
       return e
     })
@@ -73,8 +74,17 @@ getDictList()
 getPositionList()
 
 // 职位详情
+const info = ref({})
+const router = useRouter()
 const handlePosition = (item) => {
-  window.open(`/recruit/position/details/${item.positionId}`)
+  info.value = item
+  let routeData = router.resolve({
+    path: `/recruit/position/details/${item.positionId}`,
+    query: {
+      positionInfo: JSON.stringify(info)
+    }
+  })
+  window.open(routeData.href)
 }
 const handleEnterprise = (item) => {
   console.log(item, 'enterprise-item')

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

@@ -3,13 +3,13 @@
       <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="salary">{{ info.payFrom }}-{{ info.payTo }}/{{ positionInfo.payName }}</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 class="ml-1">{{ positionInfo[k.value] }}</span>
           </span>
         </div>
         <div class="banner-tools my-4" style="height: 47px;">
@@ -25,17 +25,7 @@
         <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 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>
@@ -67,8 +57,11 @@
               <v-btn class="half-button radius" color="primary">投递简历</v-btn>
             </div>
           </div>
-          <div class="content-right">
-            <similarPositions></similarPositions>
+          <div class="content-right" v-if="Object.keys(info).length">
+            <!-- 公司信息 -->
+            <EnterpriseInfo :info="{ ...info, position: { ...positionInfo } }"></EnterpriseInfo>
+            <!-- 相似职位 -->
+            <similarPositions class="mt-3"></similarPositions>
           </div>
         </div>
       </div>
@@ -81,16 +74,17 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { getPositionDetails } from '@/api/position'
 import similarPositions from '@/components/Position/similarPositions.vue'
+import EnterpriseInfo from '@/components/Enterprise/info.vue'
 
 const router = useRouter()
 const { id } = router.currentRoute.value.params
+const { _value: positionInfo } = JSON.parse(router.currentRoute.value.query.positionInfo)
 
 // 职位详情
 const info = ref({})
 const getPositionDetail = async () => {
   const data = await getPositionDetails({ id })
   info.value = data
-  console.log(data, 'info')
 }
 getPositionDetail()
 
@@ -100,14 +94,6 @@ const desc = [
   { 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>
@@ -159,7 +145,6 @@ const positionDetail = [
 }
 .content-right {
   flex: 1;
-  // background-color: #d5e6e8;
   padding: 20px 20px 20px 0;
 }
 .label-text {