招聘会-添加搜索框

src/views/recruit/personal/jobFair/components/searchBar.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="d-flex align-center" style="margin: 0 auto;" :class="{'px-3': isMobile}" :style="{'width': isMobile ? '100%' : '800px'}">
+    <div class="search d-flex align-center">
+      <v-text-field
+        v-model="value"
+        :placeholder="defineProps.placeholder"
+        color="primary"
+        variant="plain"
+        density="compact"
+        :hide-details="true"
+        clearable
+        class="ml-3 px-2"
+        style="height: 40px; line-height: 100%;"
+				prepend-icon="mdi-magnify"
+        @click:clear="handleSearch"
+        @keyup.enter="handleSearch"
+      ></v-text-field>
+      <v-hover v-slot="{ isHovering, props }">
+        <v-btn 
+					v-bind="props" 
+					v-ripple.center 
+					class="searchBtn mr-1"
+					@click="handleSearch"
+					:class="isHovering ? 'elevation-10' : 'elevation-5'"
+					:style="{'width': isMobile ? '100px' : '180px'}"
+				>搜索</v-btn>
+      </v-hover>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name:'jobFairSearchBar'})
+import { ref } from 'vue'
+
+const emits = defineEmits(['handleSearch'])
+const defineProps = defineProps({
+  modelValue: [String, Number],
+  placeholder: {
+    type: String,
+    default: '搜索职位/公司关键字'
+  },
+	isMobile: Boolean
+})
+
+const value = ref(defineProps.modelValue)
+
+const handleSearch = () => {
+  emits('handleSearch', value.value)
+}
+
+</script>
+
+<style lang="scss" scoped>
+.search {
+  height: 50px;
+  width: 800px;
+	line-height: 50px;
+  border-radius: 6px;
+	background: #fff;
+  .searchBtn {
+    height: 40px;
+    font-size: 18px;
+    color: #fff;
+    background-color: var(--v-primary-base);
+  }
+}
+</style>

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

@@ -8,6 +8,7 @@
     <div :style="{'background-color': jobFair.backgroundColour || '#fff', 'min-height': '100vh'}" class="pt-10">
       <div :class="{'default-width': !isMobile}">
         <h2 class="color-white pt-5 enterpriseName" :class="{'ml-3': isMobile}">{{ enterpriseName }}</h2>
+        <SearchBar v-model="query.keyword" class="py-5" :isMobile="isMobile" placeholder="搜索关键字" @handleSearch="handleSearch" />
         <div v-if="!items.length" class="emptyText">{{ loadingType === 1 ? loadingText[loadingType] : '暂无数据，去看看其他吧~' }}</div>
         <template v-else>
           <JobCard :jobFairId="jobFair?.id" :list="items" :isMobile="isMobile" class="pt-5" />
@@ -44,12 +45,14 @@ import { dealDictObjData } from '@/utils/position'
 import { getEnterpriseDetails } from '@/api/enterprise'
 import { formatName } from '@/utils/getText'
 import JobFairEntShare from '@/views/recruit/components/jobFairEntShare'
+import SearchBar from '../components/searchBar.vue'
 
 const query = reactive({
   pageNo: 1,
   pageSize: 20,
 	jobFairId: route.params.id,
-  enterpriseId: route.query.enterpriseId
+  enterpriseId: route.query.enterpriseId,
+  keyword: ''
 })
 
 const logoUrl = ref('')
@@ -89,6 +92,13 @@ const getList = async () => {
 	} catch {}
 }
 
+// 搜索
+const handleSearch = (val) => {
+  query.pageNo = 1
+  query.keyword = val
+  getList()
+}
+
 // 招聘会详情
 const jobFair = ref([])
 const enterpriseName = ref('')

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

@@ -20,6 +20,7 @@
 
     <div :style="{'background-color': jobFair.backgroundColour || '#fff', 'min-height': jobFair?.pcHeadImg && jobFair?.pcHeadImg.length > 0 ? `calc(100vh - ${isMobile ? '200px' : '500px'})` : '100vh'}">
       <div :class="{'default-width': !isMobile}">
+        <SearchBar class="pt-5" v-model="query.keyword" :isMobile="isMobile" placeholder="搜索关键字" @handleSearch="handleSearch" />
         <!-- 类别展示 -->
         <div class="d-flex align-center" v-if="jobFair?.tag && jobFair.tag.length" style="overflow-x: auto;">
           <div 
@@ -76,13 +77,15 @@ import JobCard from './components/jobCard1.vue'
 import { useRoute } from 'vue-router'; const route = useRoute();
 import { dealDictArrayData, dealDictObjData } from '@/utils/position'
 import { getJobAdvertisedShareQrcode } from '@/api/position'
+import SearchBar from '../components/searchBar.vue'
 
 const tab = ref(0)
 const loading = ref(false)
 const query = reactive({
   pageNo: 1,
   pageSize: 20,
-	jobFairId: route.params.id
+	jobFairId: route.params.id,
+  keyword: ''
 })
 
 const showPreview = ref(false)
@@ -132,6 +135,13 @@ const getList = async () => {
 	} catch {}
 }
 
+// 搜索
+const handleSearch = (val) => {
+  query.pageNo = 1
+  query.keyword = val
+  getList()
+}
+
 // 招聘会详情
 const jobFair = ref([])
 const getJobFairDetail = async () => {