改为只有企业或者只有职位列表

src/router/modules/recruit.js

@@ -181,6 +181,16 @@ const recruit = [
     component: () => import('@/views/recruit/personal/jobFair/details/index.vue'),
     name: 'jobFairDetails'
   },
+  {
+    path: '/recruit/personal/jobFair/enterprises/:id',
+    component: () => import('@/views/recruit/personal/jobFair/details/enterprises.vue'),
+    name: 'jobFairEnterprises'
+  },
+  {
+    path: '/recruit/personal/jobFair/position/:id',
+    component: () => import('@/views/recruit/personal/jobFair/details/position.vue'),
+    name: 'jobFairPosition'
+  },
   {
     path: '/recruit/personal/company/details/:id',
     component: Layout,

src/views/recruit/personal/jobFair/details/components/entCard1.vue

@@ -0,0 +1,61 @@
+<template>
+	<v-hover v-slot="{ isHovering, props }" v-for="(val, index) in list" :key="val.id">
+		<v-card v-bind="props" :elevation="isHovering ? 10 : 5" class="cursor-pointer mb-3" :class="{'active': chosenIndex === index}" width="500" @click="handleClickEnterprise(val, index)">
+			<div class="d-flex pa-4 pb-2">
+				<img :src="val.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" style="width: 80px; height: 80px; border-radius: 4px;" />
+				<div style="max-width: 390px;">
+					<h3 v-ellipse-tooltip class="enterprise-name ml-3">{{ formatName(val.anotherName || val.name) }}</h3>
+					<p class="font-size-14 color-666 mt-1 mb-2 ml-3">
+						<span>{{ val.industryName }}</span>
+						<span class="septal-line" v-if="val.industryName && val.scaleName"></span>
+						<span>{{ val.scaleName }}</span>
+					</p>
+					<div class="flex-nowrap overflow-hidden pl-3" style="height: 35px;">
+						<v-chip v-for="(welfare, index) in val.welfareList" :key="index" class="mr-2 mb-4 display-inline-block" variant="flat" color="primary" size="small">
+							{{ welfare }}
+						</v-chip>
+					</div>
+				</div>
+			</div>
+			<div class="card-bottom">{{ val.jobCount }}个在线职位招聘中</div>
+		</v-card>
+	</v-hover>
+</template>
+
+<script setup>
+defineOptions({ name: 'EntCard' })
+import { formatName } from '@/utils/getText'
+import { ref } from 'vue'
+
+const emit = defineEmits(['selectChange'])
+defineProps({
+	list: Array
+})
+
+const chosenIndex = ref(-1)
+
+const handleClickEnterprise = (val, index) => {
+	// chosenIndex.value = index
+	// emit('selectChange', val)
+}
+</script>
+
+<style scoped lang="scss">
+.card-bottom {
+	height: 40px;
+	line-height: 40px;
+	color: #fff;
+	text-align: center;
+	font-size: 15px;
+	background: linear-gradient(to right, #12ebb0, #427daa);
+}
+
+.active {
+	border: 1px solid var(--v-primary-base);
+}
+.v-card:hover {
+	h3 {
+		color: var(--v-primary-base);
+	}
+}
+</style>

src/views/recruit/personal/jobFair/details/enterprises.vue

@@ -0,0 +1,144 @@
+<!-- 企业 -->
+<template>
+  <div>
+    <!-- 轮播 -->
+    <v-carousel :show-arrows="cursor.length > 1 ? 'hover' : false" cycle :hide-delimiters="true" style="height: 500px;">
+			<v-carousel-item v-for="(k, i) in cursor" :key="i">
+				<img :src="k" :lazy-src="k" style="width: 100%; height:100%;">
+			</v-carousel-item>
+		</v-carousel>
+    <!-- 企业列表 -->
+    <div style="background-color: #7ec04c">
+      <div class="default-width">
+        <Empty v-if="!items.length && !query.keyword" :message="loadingType === 1 ? loadingText[loadingType] : '该招聘会暂无企业参与，前往其他招聘会看看吧~'" class="mt-3 py-15"></Empty>
+        <template v-else>
+          <div class="d-flex justify-space-between mt-3">
+            <EntCard :list="leftData" @selectChange="selectChange" />
+            <EntCard :list="rightData" @selectChange="selectChange" />
+          </div>
+          <div :class="['loading', {'defaultLink-i': !loadingType}]" @click="handleChangePage">{{ loadingText[loadingType] }}</div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'jobFair-enterprises'})
+import { ref, reactive } from 'vue'
+import { getJobFairEnterprisePage, getJobFair } from '@/api/recruit/personal/jobFair'
+import EntCard from './components/entCard1.vue'
+import { useRoute, useRouter } from 'vue-router'; const route = useRoute(); const router = useRouter()
+import { dealDictArrayData } from '@/utils/position'
+
+const cursor = ref([
+  // "https://menduner.citupro.com:3443/dev/9de969f4723dd8819794fcd2d91b47a2f2b6f16993908712a53ee6a21f6735f1.jpg",
+  "https://menduner.citupro.com:3443/dev/b263663417d6f0d8a5822ca4c1f607503d661c7e17269e7f60cf32f9eed91d77.jpg"
+])
+
+// const handleClick = (item) => {
+//   if (!item.path || item.disabled) return
+//   router.push(item.path)
+// }
+
+// 招聘会详情-面包屑标题设置
+const getJobFairDetail = async () => {
+  const data = await getJobFair(route?.params?.id)
+  if (!data) return
+  // breadcrumbs.value[breadcrumbs.value.length - 1].text = data.title.replace(/<\/?p[^>]*>/gi, '')
+  document.title = data.title.replace(/<\/?p[^>]*>/gi, '')
+}
+getJobFairDetail()
+
+const selectChange = (val) => {
+	// enterpriseId.value = val.id
+	// enterpriseName.value = formatName(val.anotherName || val.name)
+}
+
+const query = reactive({
+  pageNo: 1,
+  pageSize: 10,
+	jobFairId: route.params.id,
+	keyword: ''
+})
+
+const items = ref([])
+const leftData = ref([])
+const rightData = ref([])
+const loadingText = ['加载更多', '加载中...', '没有更多数据了']
+const loadingType = ref(0)
+
+// 参与招聘会的企业
+const getList = async () => {
+	loadingType.value = 1
+	try {
+		const result = await getJobFairEnterprisePage(query)
+		const list = result?.list || []
+		if (list.length) {
+			items.value = items.value.concat(dealDictArrayData([], list))
+			loadingType.value = items.value.length === result.total ? 2 : 0
+      // 分为两列数据
+      leftData.value = []; rightData.value = []
+      items.value.forEach((e, index) => {
+        if (index % 2) rightData.value.push(e)
+        else leftData.value.push(e)
+      })
+		} else {
+			loadingType.value = 2
+		}
+	} catch {}
+}
+getList()
+
+const handleChangePage = () => {
+  if (loadingType.value) return // 没有更多数据了
+  // 加载更多
+  query.pageNo++
+  getList()
+}
+</script>
+
+<style scoped lang="scss">
+.position-details {
+  position: sticky;
+  top: 62px;
+  border-radius: 12px;
+  // background-color: #fff;
+  margin-top: 12px;
+  height: calc(100vh - 127px);
+  widows: 100%;
+  overflow: hidden;
+  .position-content {
+    height: 100%;
+    width: 100%;
+    padding-right: 4px;
+    overflow-y: auto;
+  }
+}
+.loading {
+  margin-top: 8px;
+  text-align: center;
+  font-size: 13px;
+  color: gray;
+}
+.breadcrumbsText {
+  color: var(--color-999);
+  font-size: 15px;
+  &.active {
+    color: var(--v-primary-base);
+    cursor: pointer;
+  }
+}
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
+  // 滚动条-颜色
+  background: #c3c3c379;
+}
+::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
+  // 滚动条-底色
+  background: #e5e5e58f;
+}
+</style>

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

@@ -0,0 +1,10 @@
+<!-- 职位 -->
+<template>
+  <div>vue3PageInit</div>
+</template>
+
+<script setup>
+defineOptions({name: 'jobFair-position'})
+</script>
+<style lang="scss" scoped>
+</style>

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

@@ -37,7 +37,9 @@ getList()
 
 const handleJoin = (val) => {
 	if (!val?.id) return
-	window.open('/recruit/personal/jobFair/' + val.id)
+	// window.open('/recruit/personal/jobFair/' + val.id)
+	const url = `/recruit/personal/jobFair/${Number(val?.category) ? 'position/': 'enterprises/'}` + val.id
+	window.open(url)
 
 	// 面包屑储存
 	// let text = val.title ? val.title.replace(/<[^>]+>/g, ' ') : '' // 去掉所有 HTML 标签