热门企业接入

src/api/enterprise.js

@@ -0,0 +1,9 @@
+import request from '@/config/axios'
+
+// 获取热门企业
+export const getHotEnterprise = async (params) => {
+  return await request.get({
+    url: '/app-api/menduner/system/job/advertised/get/hot/enterprise',
+    params
+  })
+}

src/components/Enterprise/hotPromoted.vue

@@ -4,131 +4,56 @@
       <!-- 公司信息 -->
       <div class="company-info-top">
         <div class="float-left">
-          <v-img :src="item.enterpriseImg" :alt="item.enterpriseName" :width="40" style="height: 40px;border-radius: 4px;"/>
+          <v-img src="../../assets/logo.png" :alt="item.anotherName" :width="40" style="height: 40px;border-radius: 4px;"/>
         </div>
         <div class="company-info">
-          <h3>{{ item.enterpriseName }}</h3>
-          <p>{{ item.enterpriseNature }}<span class="vline"></span>{{ item.scale }}<span class="vline"></span>{{ item.industry }}</p>
+          <h3>{{ item.anotherName }}</h3>
+          <p>{{ item.financingName }}<span class="vline"></span>{{ item.scaleName }}<span class="vline"></span>{{ item.industryName }}</p>
         </div>
       </div>
       <!-- 职位列表 -->
       <ul class="company-job-list">
-        <li class="company-job-item" v-for="(k, i) in item.positions" :key="i">
-          <div class="job-info">
+        <li class="company-job-item" v-for="(k, i) in item.jobList" :key="i">
+          <div class="job-info" @mouseenter="k.active = true" @mouseleave="k.active = false">
             <div class="mb-2 d-flex">
-              <p class="name">{{ k.recruitName }}</p>
+              <p :class="['name', {'default-active': k.active }]">{{ k.name }}</p>
               <v-icon size="20" class="message">mdi-message-processing</v-icon>
-              <span class="salary">{{ k.salary }}</span>
+              <span class="salary">{{ k.payFrom }}-{{ k.payTo }}/{{ k.payName }}</span>
+            </div>
+            <div style="height: 24px; overflow: hidden;">
+              <v-chip size="x-small" label class="mr-1" color="#666" v-for="j in desc" :key="j">{{ k[j.value] }}</v-chip>
             </div>
-            <v-chip size="x-small" label class="mr-1" color="#666" v-for="j in k.tags" :key="j">{{ j }}</v-chip>
           </div>
         </li>
       </ul>
-      <div class="text-center">
-        <v-btn class="buttons" color="primary" variant="outlined">查看更多职位</v-btn>
+      <div class="moreBtn">
+        <v-btn class="buttons" color="primary" variant="outlined">{{ $t('position.moreBtn') }}</v-btn>
       </div>
     </div>
   </div>
 </template>
 
 <script setup name="hotPromoted">
-const list = [
-  {
-    enterpriseImg: 'https://img.bosszhipin.com/beijin/upload/com/workfeel/20231212/7bf6f160950405e90671d208831c3be24a7230ff916830a84f48ca3d2af0604795d2582973667498.png',
-    enterpriseName: '博彦科技',
-    enterpriseNature: '私营企业',
-    scale: '100000人以上',
-    industry: '计算机软件',
-    positions: [
-      {
-        recruitName: '跨境电商运营跨境电商运营跨境电商运营跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      },
-      {
-        recruitName: '跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      },
-      {
-        recruitName: '跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      }
-    ]
-  },
-  {
-    enterpriseImg: 'https://img.bosszhipin.com/beijin/upload/com/workfeel/20231212/7bf6f160950405e90671d208831c3be24a7230ff916830a84f48ca3d2af0604795d2582973667498.png',
-    enterpriseName: '博彦科技',
-    enterpriseNature: '私营企业',
-    scale: '100000人以上',
-    industry: '计算机软件',
-    positions: [
-      {
-        recruitName: '跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      },
-      {
-        recruitName: '跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      },
-      {
-        recruitName: '跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      }
-    ]
-  },
-  {
-    enterpriseImg: 'https://img.bosszhipin.com/beijin/upload/com/workfeel/20231212/7bf6f160950405e90671d208831c3be24a7230ff916830a84f48ca3d2af0604795d2582973667498.png',
-    enterpriseName: '博彦科技',
-    enterpriseNature: '私营企业',
-    scale: '100000人以上',
-    industry: '计算机软件',
-    positions: [
-      {
-        recruitName: '跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      },
-      {
-        recruitName: '跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      },
-      {
-        recruitName: '跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      }
-    ]
-  },
-  {
-    enterpriseImg: 'https://img.bosszhipin.com/beijin/upload/com/workfeel/20231212/7bf6f160950405e90671d208831c3be24a7230ff916830a84f48ca3d2af0604795d2582973667498.png',
-    enterpriseName: '博彦科技',
-    enterpriseNature: '私营企业',
-    scale: '100000人以上',
-    industry: '计算机软件',
-    positions: [
-      {
-        recruitName: '跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      },
-      {
-        recruitName: '跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      },
-      {
-        recruitName: '跨境电商运营',
-        salary: '7-9K',
-        tags: ['广州番禺南浦', '本科', '1-3年']
-      }
-    ]
+import { ref, watch } from 'vue'
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
   }
+})
+const list = ref([])
+watch(
+  () => props.items, 
+  (newVal) => {
+    list.value = newVal
+  },
+  { immediate: true },
+  { deep: true }
+)
+const desc = [
+  { value: 'areaName' },
+  { value: 'eduName' },
+  { value: 'expName' }
 ]
 </script>
 
@@ -138,6 +63,7 @@ const list = [
   flex-wrap: wrap;
 }
 .sub-li {
+  position: relative;
   width: calc((100% - 24px) / 3);
   min-width: calc((100% - 24px) / 3);
   max-width: calc((100% - 24px) / 3);
@@ -152,6 +78,9 @@ const list = [
   &:nth-child(3n) {
     margin-right: 0;
   }
+  &:hover {
+    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
+  }
 }
 .company-info {
   float: left;
@@ -230,9 +159,6 @@ ul li {
   text-overflow: ellipsis;
   white-space: nowrap;
   transition: all linear .2s;
-  &:hover {
-    color: var(--v-primary-base);
-  }
 }
 .message {
   color: #bfc1c9;
@@ -240,4 +166,10 @@ ul li {
     color: var(--v-primary-base);
   }
 }
+.moreBtn {
+  position: absolute;
+  bottom: 25px;
+  left: 50%;
+  translate: -50%;
+}
 </style>

src/components/Position/item.vue

@@ -4,7 +4,7 @@
       <div class="job-info">
         <div class="sub-li-top">
           <div class="sub-li-info">
-            <p :class="['name', {'name-active': item.active }]">{{ item.name }}</p>
+            <p :class="['name', {'default-active': item.active }]">{{ item.name }}</p>
             <v-chip size="x-small" color="error" label variant="outlined" class="mr-1">急聘</v-chip>
             <v-chip size="x-small" color="warning" label variant="outlined">NEW</v-chip>
           </div>
@@ -158,7 +158,4 @@ const desc = [
   background-color: #e0e0e0;
   margin: 0 10px;
 }
-.name-active {
-  color: var(--v-primary-base);
-}
 </style>

src/locales/en.js

@@ -37,5 +37,14 @@ export default {
     mobileNumberPlaceholder: 'Please Enter Mobile Number',
     getSmsCode: 'Get SMS Code',
   },
-  form: {}
+  form: {},
+  position: {
+    moreBtn: 'View More Positions',
+    recommend: 'Recommended Positions',
+    latest: 'Latest Position',
+    urgent: 'Urgent Position'
+  },
+  enterprise: {
+    moreBtn: 'View More Enterprises'
+  }
 }

src/locales/zh-CN.js

@@ -37,5 +37,14 @@ export default {
     mobileNumberPlaceholder: '请输入手机号码',
     getSmsCode: '获取验证码',
   },
-  form: {}
+  form: {},
+  position: {
+    moreBtn: '查看更多职位',
+    recommend: '推荐职位',
+    latest: '最新职位',
+    urgent: '急聘职位'
+  },
+  enterprise: {
+    moreBtn: '查看更多企业'
+  }
 }

src/styles/index.css

@@ -26,3 +26,7 @@
   margin: 0 auto;
   align-items: center;
 }
+
+.default-active {
+  color: var(--v-primary-base) !important;
+}

src/styles/index.min.css

@@ -1 +1 @@
-:root{--zIndex-dialog:9999;--default-bgc:#eaf4fe;--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;align-items:center}
+:root{--zIndex-dialog:9999;--default-bgc:#eaf4fe;--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;align-items:center}.default-active{color:var(--v-primary-base) !important}

src/styles/index.scss

@@ -25,4 +25,8 @@
   max-width: 1184px;
   margin: 0 auto;
   align-items: center;
+}
+// 高亮
+.default-active {
+  color: var(--v-primary-base) !important;
 }

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

@@ -1,9 +1,9 @@
 <template>
   <div>
     <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff" @click="getPositionList">
-      <v-tab :value="1">推荐职位</v-tab>
-      <v-tab :value="2">最新职位</v-tab>
-      <v-tab :value="3">急聘职位</v-tab>
+      <v-tab :value="1">{{ $t('position.recommend') }}</v-tab>
+      <v-tab :value="2">{{ $t('position.latest') }}</v-tab>
+      <v-tab :value="3">{{ $t('position.urgent') }}</v-tab>
     </v-tabs>
     <v-window v-model="tab" class="mt-3">
       <v-window-item :value="1">
@@ -17,7 +17,7 @@
       </v-window-item>
     </v-window>
     <div class="text-center">
-      <v-btn class="buttons" color="primary">查看更多职位</v-btn>
+      <v-btn class="buttons" color="primary">{{ $t('position.moreBtn') }}</v-btn>
     </div>
   </div>
 </template>

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

@@ -1,12 +1,73 @@
 <template>
   <div>
-    <HotPromoted></HotPromoted>
+    <HotPromoted :items="items"></HotPromoted>
     <div class="text-center">
-      <v-btn class="buttons" color="primary">查看更多企业</v-btn>
+      <v-btn class="buttons" color="primary">{{ $t('enterprise.moreBtn') }}</v-btn>
     </div>
   </div>
 </template>
 
 <script setup name="popularEnterprises">
 import HotPromoted from '@/components/Enterprise/hotPromoted.vue'
+import { ref, reactive } from 'vue'
+import { getHotEnterprise } from '@/api/enterprise'
+import { getDict } from '@/hooks/web/useDictionaries'
+
+const items = ref([])
+const dictObj = reactive({
+  payUnit: [], // 薪资单位
+  scale: [], // 规模
+  industry: [], // 行业
+  edu: [], // 学历
+  exp: [], // 工作经验
+  area: [], // 地区
+  financing: [] // 融资类型
+})
+const dictList = [
+  { type: 'menduner_pay_unit', value: 'payUnit', key: 'payUnit', label: 'payName' },
+  { type: 'menduner_education_type', value: 'edu', key: 'eduType', label: 'eduName' },
+  { type: 'menduner_exp_type', value: 'exp', key: 'expType', label: 'expName' },
+  { type: 'menduner_area_type', value: 'area', key: 'areaId', label: 'areaName', params: {}, apiType: 'areaList', nameKey: 'name', valueKey: 'id' },
+  { type: 'menduner_financing_status', value: 'financing', key: 'financingStatus', label: 'financingName', isEnter: true },
+  { type: 'menduner_scale', value: 'scale', key: 'scale', label: 'scaleName', isEnter: true },
+  { type: 'menduner_industry_type', value: 'industry', key: 'industryId', label: 'industryName', params: {}, apiType: 'industryList', nameKey: 'nameCn', valueKey: 'id', isEnter: true }
+]
+
+// 热门企业
+const getHotEnterpriseList = async () => {
+  const { list } = await getHotEnterprise({ pageNo: 1, pageSize: 9 })
+  dictList.forEach(item => {
+    items.value = list.map(e => {
+      if (item.isEnter) {
+        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]
+      }
+      const list = e.jobList
+      deal(item, list, e)
+      return e
+    })
+  })
+}
+const deal = (item, list, e) => {
+  if (item.isEnter) return
+  list.map(val => {
+    const valueKey = item.nameKey ? item.nameKey : 'label'
+    const idKey = item.valueKey ? item.valueKey : 'value'
+    val[item.label] = dictObj[item.value].find(k => Number(k[idKey]) === val[item.key])[valueKey]
+    val.active = false
+    return val
+  })
+  e.jobList = list
+}
+
+// 字典
+const getDictList = async () => {
+  dictList.forEach(async (val) => {
+    const { data } = await getDict(val.type, val.params, val.apiType)
+    dictObj[val.value] = data
+  })
+}
+getDictList()
+getHotEnterpriseList()
 </script>