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>
      <div class="bw-vue-list">
        <div class="list-content">
          <ion-list>
            <div v-for="(record,key) in dataList" :key="key" detail>
              <ion-item-sliding>
                <ion-item>
                  <ion-label>
                    <div class="multi-title">
                      <h2>{{ record.jobUserName }}</h2>
                      <h2>{{ record.professionName }}</h2>
                    </div>
                    <p>人才类型：{{ record.jobUserTypeStr }}</p>
                    <div class="multi-title">
                      <p>
                        工作年限：{{ record.workYear }}
                      </p>
                      <p>
                        求职类型：{{ record.jobHuntTypeStr }}
                      </p>
                    </div>
                    <p>月薪要求：{{ record.minSalary }}至{{ record.maxSalary }}元</p>
                  </ion-label>
                  <ion-avatar @click="onRecommendJob(record);$event.preventDefault();$event.stopPropagation();"
                              aria-hidden="true" class="container" slot="end">
                    <ion-button size="small" fill="outline">推荐</ion-button>
                  </ion-avatar>
                </ion-item>
                <ion-item-options>
                  <ion-item-option color="danger" @click="onDel(record.jobHuntID)">
                    <ion-icon :icon="trashOutline"></ion-icon>
                  </ion-item-option>
                </ion-item-options>
              </ion-item-sliding>
            </div>
          </ion-list>
        </div>
      </div>
      <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,trashOutline} from 'ionicons/icons';
import {alertController, IonIcon, onIonViewDidEnter} from '@ionic/vue';
import BEmpty from "@/components/empty.vue";
import {getJobHuntList, deleteJobHuntAndRecommendMgt} 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,
          parentProfessionID: item.parentProfessionID,
          cultureRank: item.cultureRank,
          workYear: item.workYear,
          minSalary: item.minSalary,
          maxSalary: item.maxSalary
        }
      });
    }

    const onDel = async (id: any) => {
      const alert = await alertController.create({
        header: '提示！',
        message: '是否确认删除？',
        buttons: [
          {
            text: '取消',
            role: 'cancel'
          },
          {
            text: '确认删除',
            handler: () => {
              deleteJobHuntAndRecommendMgt(id).then(result => {
                if (result)
                  reload();
              });
            }
          }
        ],
      });

      await alert.present();
    }

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

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

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