EmploymentSite/h5app/src/views/pages/jobhunt/recommend/list.vue

<template>
  <ion-page class="list-page recommend-list-page">
    <ion-header class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="onBack"></ion-icon>
        </ion-buttons>
        <ion-title>求职意向</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-item class="search-item">
        <ion-input placeholder="姓名" class="custom"
                   v-model="searchParams.jobUserName" style="border: 1px solid #f2f2f5;border-radius: 14px;--padding-start: 10px;height: 35px;"></ion-input>
        <ion-button slot="end" style="height: 33px;width: 70px;margin-left: 10px;--box-shadow: none;--border-radius: 14px;" @click="reload" >搜索
        </ion-button>
      </ion-item>
      <ion-list class="list-content">
        <ion-item v-for="(record,key) in dataList" :key="key">
          <ion-label>
            <ion-label style="display: flex;justify-content: space-between;">
            <h2>{{ record.jobUserName}}</h2>
            <h2>{{ record.professionName }}</h2>
            </ion-label>
            <p>人才类型：{{record.jobUserTypeStr}}</p>
            <ion-label style="display: flex;justify-content: space-between;">
              <p>
                工作年限：{{ record.workYear }}
              </p>
              <p>
                求职类型：{{ record.jobHuntTypeStr }}
              </p>
            </ion-label>
            <p>月薪要求：{{ record.minSalary }}至{{ record.maxSalary }}元</p>
          </ion-label>
          <ion-avatar @click="onRecommendJob(record);$event.preventDefault();$event.stopPropagation();" aria-hidden="true" class="container" slot="end">
            <p style="font-size: 14px !important;">推荐</p>
          </ion-avatar>
        </ion-item>
      </ion-list>
      <b-empty v-if="dataList.length<=0" :loading="loading"/>
      <ion-infinite-scroll threshold="100px" @ionInfinite="onScroll($event)">
        <ion-infinite-scroll-content
            :loadingText="pagination.total>pagination.current*pagination.pageSize?'正在加载...':'暂无更多'"
            loadingSpinner="bubbles">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">

import {computed, defineComponent, reactive, ref} from 'vue';
import dayjs from "dayjs";
import {useRoute, useRouter} from "vue-router";
import {arrowBackOutline} from 'ionicons/icons';
import {IonIcon, onIonViewDidEnter} from '@ionic/vue';
import BEmpty from "@/components/empty.vue";
import {getJobHuntList} from '@/api/jobHuntInfo/index'

export default defineComponent({
  name: 'RecommendCompanyPostList',
  components: {IonIcon, BEmpty},
  setup() {
    const router = useRouter();
    const route = useRoute();
    const total = ref(10);
    const loading = ref(true);
    const pagination = computed(() => ({
      total: total,
      current: searchParams.pageIndex,
      pageSize: searchParams.pageSize
    }));
    const searchParams = reactive({
      pageIndex: 1,
      pageSize: 5,
      jobUserName: '',
    });
    const dataList = ref<any>([]);

    const loadData = async function () {
      loading.value = true;
      getJobHuntList(searchParams).then(data => {
        dataList.value = dataList.value.concat(data.list);
        total.value = data.total;
      })
      loading.value = false;
    }

    const reload = () => {
      dataList.value = [];
      searchParams.pageIndex = 1;
      loadData();
    }

    const onScroll = (e: any) => {
      setTimeout(() => {
        e.target.complete();
        if (pagination.value.total.value > pagination.value.current * pagination.value.pageSize) {
          searchParams.pageIndex += 1;
          loadData();
        }
      }, 500);
    }

    const onRecommendJob = (item: any) =>{
      router.push({path: './recommend', query: {reload: 1,professionID:item.professionID,professionName:item.professionName,jobHuntID:item.jobHuntID,jobUserName:item.jobUserName,type:0}});
    }

    const onBack = () => {
      router.push('../../');
    }

    onIonViewDidEnter(() => {
      if(route.query.reload)reload();
    });

    return {
      arrowBackOutline,
      router,
      total,
      loading,
      dataList,
      pagination,
      searchParams,
      onBack,
      onRecommendJob,
      onScroll,
      loadData,
      reload,
      dayjs,
    }
  },created() {
    this.loadData();
  }
});
</script>

<style lang="less">
.custom{
  --placeholder-color: gray;
  --placeholder-opacity: 0.5;
}

.recommend-list-page {
  .list-content {
    margin: 0px 15px !important;
    background-color: white !important;
    border-radius: 0 !important;

    ion-item {
      margin-top: 10px;
      font-size: 14px;
      border: 1px solid rgb(242, 242, 245);

      p {
        font-size: 12px;
      }
    }
  }
}

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>