加载更多

src/styles/index.scss

@@ -72,6 +72,10 @@
   cursor:pointer;
   // text-decoration: underline;
 }
+.defaultLink-i {
+  color:#008978 !important;
+  cursor:pointer !important;
+}
 
 // 高亮
 .default-active {

src/views/recruit/personal/recommend/components/positionList.vue

@@ -83,9 +83,6 @@ const handleClick = (item, index) => {
   list.value.forEach((e, i) => e.active = i === index )
   emit('selectChange', item)
 }
-// const handleEnterprise = (item) => {
-//   window.open(`/recruit/personal/company/details/${item.id}?key=briefIntroduction`)
-// }
 </script>
 
 <style lang="scss" scoped>

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

@@ -3,11 +3,12 @@
     <div style="background-color: #fff; position: sticky;">
       <buttons :current="0"></buttons>
     </div>
-    <Empty v-if="!items.length" message="暂无职位推荐，请前往职位查看其他职位~" class="mt-3 py-15"></Empty>
+    <Empty v-if="!items.length" :message="loadingType === 1 ? loadingText[loadingType] : '暂无职位推荐，请前往职位查看其他职位~'" class="mt-3 py-15"></Empty>
     <template v-else>
       <div class="d-flex">
         <div class="mt-3">
-          <positionList v-if="items.length" :items="items" @selectChange="selectChange"></positionList>
+          <positionList :items="items" @selectChange="selectChange"></positionList>
+          <div :class="['loading', {'defaultLink-i': !loadingType}]" @click="handleChangePage">{{ loadingText[loadingType] }}</div>
         </div>
         <div class="position-details ml-1" style="flex: 1; overflow: hidden;">
           <div class="position-content">
@@ -46,43 +47,32 @@ const query = reactive({
   pageNum: 1,
   pageSize: 10
 })
+
 const items = ref([])
+const loadingText = ['加载更多', '加载中...', '没有更多数据了']
+const loadingType = ref(0)
 
 const getList = async () => {
+  loadingType.value = 1
   const { list } = await getPromotedPosition(query)
-  if (!list.length) return items.value = []
-  items.value = list.map(e=> {
-    const id = e?.id || ''
-    if (!id) return ''
-    jobId.value = id
-  })
-  // 处理数据
-  items.value = dealDictArrayData([], list)
-  if (items.value?.length) showRecommendDetails.value = true
-  else {
-    // if (query.pageNum> 3) return
-    // query.pageNum++
-    // getList()
+  if (list.length) {
+    let data = dealDictArrayData([], list) // 处理数据
+    items.value = items.value.concat(data)
+    if (query.pageNum === 1) jobId.value = items.value[0].id
+    if (jobId.value) showRecommendDetails.value = true
+    loadingType.value = list.length  === query.pageSize ? 0 : 2
+  } else {
+    loadingType.value = 2
   }
 }
 getList()
 
-// const getData = async () => {
-//   const { list } = await getJobAdvertisedSearch(query)
-//   if (!list.length) return
-//   items.value = list.map((e, index) => {
-//     const id = e?.job?.id || ''
-//     if (!id) return ''
-//     jobId.value = id
-//     showRecommendDetails.value = true
-//     e.job = { ...e.job, ...dealDictObjData({}, e.job) }
-//     e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise) }
-//     e.active = index ? false : true
-//     return e
-//   }).filter(Boolean)
-//   console.log('personalPositionRecommend-data', items.value)
-// }
-// getData()
+const handleChangePage = () => {
+  if (loadingType.value) return
+  // 加载更多
+  query.pageNum++
+  getList()
+}
 
 </script>
 
@@ -103,6 +93,12 @@ getList()
     overflow-y: auto;
   }
 }
+.loading {
+  margin-top: 8px;
+  text-align: center;
+  font-size: 13px;
+  color: gray;
+}
 ::-webkit-scrollbar {
   width: 4px;
   height: 10px;