职位搜索页

src/api/common/index.js

@@ -81,14 +81,6 @@ export const getPositionTreeData = async (params) => {
   })
 }
 
-// 根据条件搜索招聘职位
-export const getJobAdvertisedSearch = async (params) => {
-  return await request.get({
-    url: '/app-api/menduner/system/job/advertised/get/search',
-    params
-  })
-}
-
 // 获取区域树形
 export const getAreaTreeData = async () => {
   return await request.get({

src/api/position.js

@@ -38,4 +38,12 @@ export const getSimilarPosition = async (params) => {
     url: '/app-api/menduner/system/job/advertised/get/acquainted',
     params
   })
-}
+}
+
+// 根据条件搜索招聘职位
+export const getJobAdvertisedSearch = async (params) => {
+  return await request.get({
+    url: '/app-api/menduner/system/job/advertised/get/search',
+    params
+  })
+}

src/components/PositionLongStrip/item.vue

@@ -0,0 +1,128 @@
+<!-- 搜索页面的职位详情-长条 -->
+<template>
+  <v-card class="positionItem" v-for="(item, index) in list" :key="index" @mouseenter="item.active = true" @mouseleave="item.active = false">
+    <!-- 职位、公司 -->
+    <div class="position-and-company" @click="handlePosition(item)">
+      <div class="position">
+        <p :class="['title1', {'default-active': item.active }]">{{ item.job.name }}{{ '[广州]' }}</p>
+        <div class="d-flex row2">
+          <div class="salary">
+            <span>16-18K</span>
+            <span>·13薪</span>
+          </div>
+          <template v-if="item.job?.tagList?.length">
+            <v-chip  class="tip" size="x-small" label v-for="(tip, i) in item.job.tagList" :key="i" color="#666">{{ tip }}</v-chip>
+          </template>
+        </div>
+      </div>
+      <div class="company">company</div>
+    </div>
+    <!-- 底部 -->
+    <div class="footer">
+      <div>footer</div>
+      <div>footer1</div>
+    </div>
+  </v-card>
+</template>
+
+<script setup>
+defineOptions({ name: 'long-strip-position-card-item' })
+import { ref, watch } from 'vue'
+const props = defineProps({
+  items: {
+    type: Object,
+    default: () => ({ data: [], total: 0 })
+  }
+})
+const list = ref([])
+watch(
+  () => props.items, 
+  (newVal) => {
+    list.value = newVal
+  },
+  { immediate: true },
+  { deep: true }
+)
+// const desc = [
+//   { mdi: 'mdi-map-marker-outline', value: 'areaName' },
+//   { mdi: 'mdi-school-outline', value: 'eduName' },
+//   { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
+// ]
+
+const emits = defineEmits(['position', 'enterprise'])
+const handlePosition = (item) => {
+  emits('position', item)
+}
+</script>
+
+<style lang="scss" scoped>
+.title1 { font-size: 16px; font-weight: 500; line-height: 28px;}
+.positionItem {
+  width: 884px;
+  margin-bottom: 20px;
+  border-radius: 12px;
+  border-radius: 12px;
+  padding: 0;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all .2s linear;
+  background-color: #fff;
+  &:hover {
+    box-shadow: 0 16px 40px 0 rgba(153, 153, 153, .3);
+  }
+  .position-and-company {
+    display: flex;
+    padding: 16px 20px;
+    width: 100%;
+    .position {
+      width: 440px;
+      padding-right: 12px;
+      .row2 {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap; /* 允许换行 */
+        width: 100%; /* 设置容器宽度 */
+        .salary {
+          display: inline;
+          font-size: 16px;
+          font-weight: 500;
+          color: #fe574a;
+          line-height: 32px;
+          float: left;
+          margin-right: 6px;
+        }
+        .tip {
+          margin-right: 4px;
+        }
+      }
+    }
+    .company {
+      flex: 1;
+    }
+  }
+  .footer {
+    height: 48px;
+    line-height: 48px;
+    padding: 0px 20px;
+    background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
+    display: flex;
+    :first-child {
+      width: 440px;
+      padding-right: 12px;
+    }
+    :nth-child(2) {
+      flex: 1;
+    }
+    div {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .ellipsisStyle {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>

src/views/recruit/position/index.vue

@@ -9,9 +9,9 @@
       <cityFilter class="mx-5 mb-3"></cityFilter>
       <conditionFilter class="mx-5 mb-5"></conditionFilter>
     </v-card>
-    <div>
-      <div>
-        左侧列表
+    <div class="d-flex mt-5">
+      <div class="mr-3">
+        <PositionLongStrip :items="items"></PositionLongStrip>
       </div>
       <div>右侧列表</div>
     </div>
@@ -21,8 +21,95 @@
 import cityFilter from './components/cityFilter'
 import conditionFilter from './components/conditionFilter'
 import headSearch from '@/components/headSearch'
+import PositionLongStrip from '@/components/PositionLongStrip/item.vue'
+import { getJobAdvertisedSearch } from '@/api/position'
+// import { dealDictData } from '@/views/recruit/position/components/dict'
+import { ref } from 'vue'
+
 import { useRoute } from 'vue-router'
 defineOptions({name: 'retrieval-position-page'})
 const route = useRoute()
-console.log(route.query)
+console.log('to:/recruit/position-> query', route.query)
+
+const pageInfo = { pageNo: 1, pageSize: 20}
+const items = ref([])
+const total = ref(0)
+
+// 测试数据
+const test = {
+  list: [
+    {
+      job: {
+        id: 1, 
+        name: "项目经理", 
+        positionId: 1, 
+        payFrom: 5000, 
+        payTo: 12000, 
+        payUnit: 1, 
+        areaId: 110000, 
+        expType: 0, 
+        eduType: 0, 
+        tagList: [
+          "无经验要求", 
+          "金融产品", 
+          "不限", 
+          "不接受居家办公", 
+          "教育培训", 
+          "互联网金融"
+        ]
+      }, 
+      enterprise: {
+        id: 1, 
+        name: "广州门墩儿科技有限公司", 
+        anotherName: "门墩儿科技", 
+        industryId: 1, 
+        scale: 0, 
+        financingStatus: 0, 
+        logoUrl: "https://www.menduner.com/static/img/loginlogo2.7924c12.png", 
+        welfareList: null
+      }, 
+      contact: {
+        enterpriseId: 1, 
+        userId: 1, 
+        avatar: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F5bbef4cc-6268-46d9-87b3-3aa7d2168aad%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1718339519&t=6ff0d47abd90d209ca81b671e898deb8", 
+        name: "肖女士", 
+        status: null, 
+        postNameCn: "人事经理", 
+        postNameEn: "uman resources", 
+        postCode: "HR"
+      }
+    }
+  ], 
+  total: 1
+}
+console.log('1', test.list[0])
+for (let index = 0; index < 30; index++) {
+  test.list.push(test.list[0])
+}
+items.value = test.list
+total.value = test.total
+// 测试数据
+
+// 职位搜索
+const getPositionList = async () => {
+  const pageReqVO = {
+    ...pageInfo,
+    content: '', // 搜索内容,示例值(xx科技/xx经理)
+    areaIds: [], //工作地区id集合,示例值([])
+    expType: 0, // 工作经验(menduner_exp_type),示例值(1)
+    eduType: 0, // 	学历要求(menduner_education_type),示例值(1)
+    payType: 0, // 薪酬待遇范围(menduner_pay_scope),示例值(12)
+    jobType: 0, // 求职类型(menduner_job_type),示例值(2)
+    positionId: 0, // 职位类型,示例值(2)
+    enterpriseType: 0, // 企业类型(menduner_enterprise_type)
+    industryIds: [], // 行业信息id集合,示例值([])
+    scale: 0, // 人员规模（0-20人，20-99人)示例值(1)
+    financingStatus: 0 // 融资阶段（未融资，天使轮，A轮，不需要融资）,示例值(1)
+  }
+  const res = await getJobAdvertisedSearch({ pageReqVO })
+  items.value = res.list
+  total.value = res.total
+}
+// getPositionList()
+
 </script>