职位搜索页

src/components/CtPagination/index.vue

@@ -3,7 +3,7 @@
     <v-pagination
       v-model="currentPage"
       :length="pageLength"
-      @input="handleCurrentChange"
+      @update:modelValue="handleCurrentChange"
       v-bind="$attrs"
       :total-visible="props.totalVisible"
     ></v-pagination>
@@ -84,7 +84,7 @@ const handleCurrentJump = () => {
   if (currentJump.value > pageLength.value) currentJump.value = pageLength.value
   if (currentJump.value < 1) currentJump.value = 1
   currentPage.value = +currentJump.value
-  emit('handleChange', currentPage)
+  emit('handleChange', currentPage.value)
 }
 </script>
 

src/components/PositionLongStrip/item.vue

@@ -3,24 +3,50 @@
   <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="position" @mouseenter="item.positionActive = true" @mouseleave="item.positionActive = false">
+        <p :class="['title1', {'default-active': item.positionActive }]">{{ item.job.name }}{{ item.job.pos ? ' [' + item.job.pos + '] ' : '' }}</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>
+            <v-chip class="tipClsss" size="x-small" label v-for="(tip, i) in item.job.tagList" :key="i" color="#666">{{ tip }}</v-chip>
+            <v-chip v-bind="props" class="tipClsss" prepend-icon="mdi-message-processing" size="x-small" label color="secondary" variant="outlined">
+              <span v-if="item.active">立即沟通</span>
+              <template v-else>
+                <span class="textColor666">{{ item.contact.name }}</span>
+                <span style="margin: 0 2px;">|</span>
+                <span class="textColor666">{{ item.contact.postNameCn }}</span>
+              </template>
+            </v-chip>
+            <v-chip v-if="item.contact.status === 1" size="x-small" label color="green" variant="outlined">在线</v-chip>
           </template>
         </div>
       </div>
-      <div class="company">company</div>
+      <div class="company">
+        <v-img  class="companyLogo" :src="item.enterprise.logoUrl" />
+        <div>
+          <v-hover>
+            <template v-slot:default="{ isHovering, props }">
+              <p v-bind="props" :class="['title1', {'default-active': isHovering }]">{{ item.enterprise.anotherName }}</p>
+            </template>
+          </v-hover>
+          <v-chip  class="tipClsss" size="x-small" label v-for="(tip, i) in item.enterprise.tags" :key="i" color="#666">{{ tip }}</v-chip>
+        </div>
+      </div>
     </div>
     <!-- 底部 -->
     <div class="footer">
-      <div>footer</div>
-      <div>footer1</div>
+      <div class="footer-left">
+        <template v-for="(jobTag, jobTagsIndex) in item.enterprise.tags1" :key="jobTagsIndex">
+          <span class="textColor666 mx-1" v-if="jobTagsIndex">|</span>
+          <span class="textColor666">{{ jobTag }}</span>
+        </template>
+      </div>
+      <div class="footer-right" v-if="item.enterprise.welfareList?.length">
+        {{ item.enterprise.welfareList.join('、') }}
+      </div>
     </div>
   </v-card>
 </template>
@@ -43,11 +69,6 @@ watch(
   { 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) => {
@@ -56,7 +77,10 @@ const handlePosition = (item) => {
 </script>
 
 <style lang="scss" scoped>
+
+.tipClsss { margin-right: 4px; }
 .title1 { font-size: 16px; font-weight: 500; line-height: 28px;}
+.textColor666 { color: #666; }
 .positionItem {
   width: 884px;
   margin-bottom: 20px;
@@ -89,28 +113,37 @@ const handlePosition = (item) => {
           color: #fe574a;
           line-height: 32px;
           float: left;
-          margin-right: 6px;
-        }
-        .tip {
-          margin-right: 4px;
+          margin-right: 16px;
         }
       }
     }
     .company {
       flex: 1;
+      display: flex;
+      .companyLogo {
+        height: 54px;
+        width: 54px;
+        min-width: 54px;
+        min-height: 54px;
+        max-width: 54px;
+        max-height: 54px;
+        margin-right: 20px;
+        border-radius: 8px;
+      }
     }
   }
   .footer {
     height: 48px;
     line-height: 48px;
     padding: 0px 20px;
+    font-size: 14px;
     background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
     display: flex;
-    :first-child {
+    .footer-left {
       width: 440px;
       padding-right: 12px;
     }
-    :nth-child(2) {
+    .footer-right {
       flex: 1;
     }
     div {

src/views/recruit/position/index.vue

@@ -15,6 +15,13 @@
       </div>
       <div>右侧列表</div>
     </div>
+    <CtPagination
+      v-if="total > 0"
+      :total="total"
+      :page="pageInfo.pageNo"
+      :limit="pageInfo.pageSize"
+      @handleChange="handleChangePage"
+    ></CtPagination>
   </div>
 </template>
 <script setup>
@@ -23,6 +30,7 @@ import conditionFilter from './components/conditionFilter'
 import headSearch from '@/components/headSearch'
 import PositionLongStrip from '@/components/PositionLongStrip/item.vue'
 import { getJobAdvertisedSearch } from '@/api/position'
+import CtPagination from '@/components/CtPagination'
 // import { dealDictData } from '@/views/recruit/position/components/dict'
 import { ref } from 'vue'
 
@@ -37,57 +45,45 @@ 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])
+  job: {
+    id: 1, 
+    pos: "广州", 
+    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://img.bosszhipin.com/beijin/mcs/chatphoto/20171009/8b09998594701c82c6d9932c6f5d3ea293cf1c0a52480018916865cbf3ed2c2f.jpg?x-oss-process=image/resize,w_120,limit_0", 
+    tags: [ "培训/辅导机构",  "天使轮",   "100-499人"],
+    tags1: [ '就近分配', '室内清洁', '系统接单', '无需坐班', '日常保洁', '简单易上手', '日常保洁', '简单易上手'],
+    welfareList: ['周末双休', '五险一金', '包餐', '节日福利', '员工旅游', '定期体检', '全勤奖', '带薪年假，年底双薪等福利多多']
+  }, 
+  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: "ces女士", 
+    status: 1, 
+    postNameCn: "人事经理", 
+    postNameEn: "uman resources", 
+    postCode: "HR"
+  }
 }
-items.value = test.list
-total.value = test.total
 // 测试数据
 
 // 职位搜索
@@ -107,9 +103,15 @@ const getPositionList = async () => {
     financingStatus: 0 // 融资阶段（未融资，天使轮，A轮，不需要融资）,示例值(1)
   }
   const res = await getJobAdvertisedSearch({ pageReqVO })
-  items.value = res.list
+  // items.value = res.list
+  items.value = [...res.list, test]
   total.value = res.total
 }
-// getPositionList()
+getPositionList()
+
+const handleChangePage = (index) => {
+  pageInfo.pageNo = index
+  getPositionList()
+}
 
 </script>