企业详情

components.d.ts

@@ -18,12 +18,15 @@ declare module 'vue' {
     CtPagination: typeof import('./src/components/CtPagination/index.vue')['default']
     CtSearch: typeof import('./src/components/CtSearch/index.vue')['default']
     CtTextField: typeof import('./src/components/CtVuetify/CtTextField/index.vue')['default']
+    Details: typeof import('./src/components/Enterprise/details.vue')['default']
     HeadSearch: typeof import('./src/components/headSearch/index.vue')['default']
     HotPromoted: typeof import('./src/components/Enterprise/hotPromoted.vue')['default']
     'Index copy': typeof import('./src/components/CtForm/index copy.vue')['default']
     Info: typeof import('./src/components/Enterprise/info.vue')['default']
+    Introduction: typeof import('./src/components/Enterprise/components/introduction.vue')['default']
     Item: typeof import('./src/components/Position/item.vue')['default']
     JobTypeCard: typeof import('./src/components/jobTypeCard/index.vue')['default']
+    Positions: typeof import('./src/components/Enterprise/components/positions.vue')['default']
     Recursive: typeof import('./src/components/areaTree/recursive.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/api/enterprise.js

@@ -6,4 +6,12 @@ export const getHotEnterprise = async (params) => {
     url: '/app-api/menduner/system/job/advertised/get/hot/enterprise',
     params
   })
+}
+
+// 企业详情
+export const getEnterpriseDetails = async (params) => {
+  return await request.get({
+    url: '/app-api/menduner/system/enterprise/detail',
+    params
+  })
 }

src/components/Enterprise/components/introduction.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h4>公司简介</h4>
+    <div class="requirement" v-html="props.info.enterprise.introduce.replace(/\n/g, '</br>')"></div>
+    <v-divider class="my-3"></v-divider>
+    <div>
+      <h4>公司地址</h4>
+      <div class="mt-1">
+        <v-icon size="25" color="primary">mdi-map-marker</v-icon>
+        <span style="color: #666;font-size: 15px;">{{ props.info.business.address }}</span>
+      </div>
+    </div>
+    <v-divider class="my-3"></v-divider>
+    <div>
+      <h4>公司相册</h4>
+      <v-slide-group :show-arrows="true" class="mt-3">
+        <v-slide-group-item v-for="val in props.info.enterprise.albumList" :key="val">
+          <v-img class="mr-3" width="250" height="150" :src="val" cover rounded></v-img>
+        </v-slide-group-item>
+      </v-slide-group>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'enterprise-introduction'})
+const props = defineProps({
+  info: {
+    type: Object,
+    default: () => {}
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.requirement {
+  white-space: pre-wrap;
+  word-break: break-all;
+  line-height: 28px;
+  color: #333;
+  font-size: 15px;
+  text-align: justify;
+  letter-spacing: 0;
+}
+</style>

src/components/Enterprise/components/positions.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>在招职位
+    <!-- <div class="banner-tools my-4" style="height: 98px;"> -->
+      <!-- <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> -->
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'recruitment-positions'})
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/Enterprise/details.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="default-width banner px-6">
+    <div class="banner-title" v-if="Object.keys(info).length">
+      <div class="float-left d-flex align-center">
+        <v-img width="60" height="60" src="https://img.bosszhipin.com/beijin/upload/com/workfeel/20230717/7bf6f160950405e9fc11e7a96d11653d52ec81818272dd47f295e2d75f5f151de5ea2c19108052a3.png"></v-img>
+        <div class="ml-4">
+          <div class="contact-name">
+            {{ info.enterprise.name }}
+            <v-icon color="primary" size="24">mdi-shield-check</v-icon>
+          </div>
+          <div class="contact-info">{{ info.business.type }} · 100-499人 · 科技推广与应用服务业</div>
+        </div>
+      </div>
+      <div class="float-right d-flex">
+        <div class="tools-box text-center">
+          <div class="tools-box-number">{{ info.jobAdvertisedCount }}</div>
+          <div class="tools-box-text">职位在招</div>
+        </div>
+        <v-icon class="ml-5 mr-2" size="25" :color="info.attention ? 'primary' : ''">{{ info.attention ? 'mdi-heart' : 'mdi-heart-outline' }}</v-icon>
+        <v-icon size="25">mdi-alert-outline</v-icon> 
+      </div>
+    </div>
+    <v-divider></v-divider>
+    <div class="mt-3">
+      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f3f3f3">
+        <v-tab :value="1">公司简介</v-tab>
+        <v-tab :value="2">在招职位({{ info.jobAdvertisedCount }})</v-tab>
+      </v-tabs>
+      <div class="d-flex" v-if="Object.keys(info).length">
+        <div class="content-left">
+          <EnterpriseIntroduction v-if="tab === 1" :info="info" />
+          <recruitmentPositions v-else />
+        </div>
+        <div class="content-right">
+          <div class="welfare">
+            <h4>公司福利</h4>
+            <div class="mt-3 welfare-tags">
+              <v-chip size="small" label v-for="(k, i) in info.enterprise.welfareList" :key="i" class="mr-1 mb-2" color="primary">{{ k }}</v-chip>
+            </div>
+          </div>
+          <div class="welfare my-3">
+            <h4>工商信息</h4>
+            <div :class="['mt-2', 'business-item']" v-for="(val, index) in businessList" :key="val.value">
+              <div>{{ val.label }}</div>
+              <div class="business-value ellipsis">{{ info.business[val.value] }}</div>
+              <div :class="['my-3', {'border-bottom-dashed': index === businessList.length - 1 }]"></div>
+            </div>
+            <div class="business-source">
+              数据来源：企查查
+            </div>
+          </div>
+          <div class="welfare">
+            <h4>4位经理正在招聘</h4>
+            <div class="d-flex mt-2" v-for="(val, i) in recruitmentSpecialist" :key="i">
+              <v-avatar>
+                <v-img :src="val.avatar"></v-img>
+              </v-avatar>
+              <div class="ml-2">
+                <div class="position-name ellipsis">{{ val.name }} · {{ val.position }}</div>
+                <div class="desc ellipsis">{{ val.desc }}</div>
+              </div>
+            </div>
+            <div class="text-center mt-3">
+              <v-btn class="buttons" color="primary" variant="outlined">{{ $t('position.allBtn') }}</v-btn>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'enterprise-details'})
+import { ref } from 'vue'
+import EnterpriseIntroduction from './components/introduction.vue'
+import recruitmentPositions from './components/positions.vue'
+import { getEnterpriseDetails } from '@/api/enterprise'
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: ''
+  }
+})
+const tab = ref(1)
+
+// 企业详情
+const info = ref({})
+const getDetails = async () => {
+  const id = Number(props.id)
+  if (!id) return
+  const data = await getEnterpriseDetails({ id })
+  info.value = data
+  console.log(info.value, 'value')
+}
+getDetails()
+
+// 工商信息
+const businessList = [
+  { label: '企业类型：', value: 'type' },
+  { label: '统一社会信用代码：', value: 'code' },
+  { label: '成立日期：', value: 'establishmentTime' },
+  { label: '注册资本：', value: 'registeredCapital' }
+]
+
+// 企业招聘人员
+const recruitmentSpecialist = [
+  { name: '陈北方', position: '人事经理', desc: '正在招聘“运营专员”等职位11111', avatar: 'https://cdn.vuetifyjs.com/images/john.jpg' },
+  { name: '蔡艳生', position: '人事经理', desc: '正在招聘“产品助理”等职位', avatar: 'https://avatars0.githubusercontent.com/u/9064066?v=4&s=460' },
+  { name: '徐有道', position: '招聘专员', desc: '正在招聘“运营专员”等职位', avatar: 'https://cdn.vuetifyjs.com/images/john.jpg' },
+  { name: '方晓', position: '人事经理', desc: '正在招聘“运营专员”等职位', avatar: 'https://avatars0.githubusercontent.com/u/9064066?v=4&s=460' }
+]
+</script>
+
+<style scoped lang="scss">
+.banner {
+  background-color: #fff;
+  padding: 0 0 20px;
+}
+.banner-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 125px;
+}
+.content-left {
+  width: 844px;
+  padding: 20px;
+}
+.content-right {
+  flex: 1;
+  padding: 20px 20px 0 0;
+}
+.contact {
+  height: 60px;
+  line-height: 60px;
+}
+.contact-name {
+  font-size: 20px;
+  font-weight: 700;
+  color: #444;
+  line-height: 28px;
+}
+.contact-info {
+  font-size: 15px;
+  font-weight: 500;
+  color: #222;
+  line-height: 21px;
+  margin-top: 8px;
+}
+.tools-box {
+  height: 80px;
+  width: 80px;
+  background-color: #d5e6e8;
+  border-radius: 5px;
+}
+.tools-box-number {
+  font-size: 30px;
+  font-weight: 700;
+  color: var(--v-primary-base);
+}
+.tools-box-text {
+  color: var(--v-primary-base);
+  font-size: 14px;
+}
+.welfare {
+  background-color: #f3f3f3;
+  border-radius: 8px;
+  padding: 12px;
+}
+.welfare-tags {
+  width: 100%;
+  height: 100px;
+  overflow: hidden;
+}
+.business-item {
+  font-size: 14px;
+  color: #777;
+  font-weight: 600;
+}
+.business-value {
+  width: 228px;
+  color: #000;
+  font-weight: 500;
+}
+.business-source {
+  font-size: 14px;
+  color: #777;
+}
+.desc {
+  width: 180px;
+  color: #666;
+  font-weight: 500;
+  font-size: 12px;
+}
+.position-name {
+  width: 180px;
+  font-size: 14px;
+  font-weight: 600;
+}
+</style>

src/components/Enterprise/hotPromoted.vue

@@ -2,7 +2,7 @@
   <div class="hot-box">
     <div class="sub-li" v-for="(item, index) in list" :key="index">
       <!-- 公司信息 -->
-      <div class="company-info-top">
+      <div class="company-info-top" @click="handleClickEnterprise(item)">
         <div class="float-left">
           <v-img src="../../assets/logo.png" :alt="item.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
         </div>
@@ -56,9 +56,14 @@ const desc = [
   { value: 'expName' }
 ]
 
+// 职位详情
 const handleClickPosition = (k) => {
   window.open(`/recruit/position/details/${k.positionId}`)
 }
+// 企业详情
+const handleClickEnterprise = (item) => {
+  window.open(`/enterprise/details/${item.id}`)
+}
 </script>
 
 <style lang="scss" scoped>

src/components/Enterprise/info.vue

@@ -49,7 +49,7 @@ getData()
 <style lang="scss" scoped>
 .info-box {
   height: 260px;
-  background-color: #f9f9f9;
+  background-color: #f3f3f3;
   border-radius: 8px;
   padding: 20px 15px;
 }

src/components/Position/similarPositions.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 .position-box {
   position: relative;
   height: 430px;
-  background-color: #f9f9f9;
+  background-color: #f3f3f3;
   border-radius: 8px;
   padding: 20px 15px;
 }

src/locales/en.js

@@ -42,7 +42,8 @@ export default {
     moreBtn: 'View More Positions',
     recommend: 'Recommended Positions',
     latest: 'Latest Position',
-    urgent: 'Urgent Position'
+    urgent: 'Urgent Position',
+    allBtn: 'View All Positions'
   },
   enterprise: {
     moreBtn: 'View More Enterprises'

src/locales/zh-CN.js

@@ -42,7 +42,8 @@ export default {
     moreBtn: '查看更多职位',
     recommend: '推荐职位',
     latest: '最新职位',
-    urgent: '急聘职位'
+    urgent: '急聘职位',
+    allBtn: '查看全部职位'
   },
   enterprise: {
     moreBtn: '查看更多企业'

src/router/modules/enterprise.js

@@ -1,4 +1,20 @@
 // 企业路由信息
+import Layout from '@/layout'
 
-const enterprise = []
+const enterprise = [
+  {
+    path: '/enterprise/details/:id',
+    component: Layout,
+    name: 'enterpriseDetails',
+    meta: {
+      title: '企业详情'
+    },
+    children: [
+      {
+        path: '/enterprise/details/:id',
+        component: () => import('@/views/enterprise/components/enterpsieDetails.vue')
+      }
+    ]
+  }
+]
 export default enterprise

src/styles/index.css

@@ -34,3 +34,13 @@
 .border-bottom-dashed {
   border-bottom: 1px dashed #ccc;
 }
+
+.white-bgc {
+  background-color: #fff;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}

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}.border-bottom-dashed{border-bottom:1px dashed #ccc}
+: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}.white-bgc{background-color:#fff}.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

src/styles/index.scss

@@ -33,4 +33,12 @@
 }
 .border-bottom-dashed {
   border-bottom: 1px dashed #ccc;
+}
+.white-bgc {
+  background-color: #fff;
+}
+.ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }

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

@@ -44,6 +44,6 @@ const handlePosition = (item) => {
   window.open(`/recruit/position/details/${item.positionId}`)
 }
 const handleEnterprise = (item) => {
-  console.log(item, 'enterprise-item')
+  window.open(`/enterprise/details/${item.enterpriseId}`)
 }
 </script>

src/views/enterprise/components/enterpsieDetails.vue

@@ -0,0 +1,16 @@
+<template>
+  <EnterpriseDetails :id="id"></EnterpriseDetails>
+</template>
+
+<script setup>
+defineOptions({ name: "enterprise-details" })
+import { useRouter } from 'vue-router'
+import EnterpriseDetails from '@/components/Enterprise/details.vue'
+
+const router = useRouter()
+const { id } = router.currentRoute.value.params
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -2,7 +2,7 @@
   <div>
       <div class="default-width banner px-6">
         <div class="banner-title">
-          <h1>{{ info.name }}</h1>
+          <h1 class="ellipsis">{{ info.name }}</h1>
           <span class="salary">{{ info.payFrom }}-{{ info.payTo }}/{{ positionInfo.payName }}</span>
           <span class="refresh-time">{{ timesTampChange(info.updateTime) }} 刷新 <v-icon color="warning" size="20">mdi-alert-outline</v-icon></span>
         </div>
@@ -45,7 +45,7 @@
               </div>
             </div>
             <v-divider class="my-3"></v-divider>
-            <div class="address">
+            <div>
               <h4>工作地址</h4>
               <div class="mt-1">
                 <v-icon size="25" color="primary">mdi-map-marker</v-icon>
@@ -127,9 +127,6 @@ getSimilarPositionList()
   margin-top: 1px;
   max-width: 360px;
   vertical-align: middle;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
 }
 .salary {
   color: var(--v-error-base);