menduner-uniapp/pagesA/interview/index.vue

<template>
  <view class="box defaultBgc">
    <view style="background-color: #fff;">
      <uni-segmented-control 
        :current="current"
        :values="tabList.map(e => e.label)"
        @clickItem="changeControl"
        styleType="text"
        activeColor="#00B760"
      ></uni-segmented-control>

      <!-- 条件搜索 -->
      <view style="margin: 20rpx;">
        <uni-data-select 
          v-model="query.jobId" 
          :clear="true" 
          :localdata="jobList" 
          @change="handleChangeJob" 
          placeholder="招聘职位"
			></uni-data-select>
      </view>
    </view>

    <scroll-view class="scrollBox" :scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
			<CardItem v-if="items?.length" :items="items" :statusList="tabList" @refresh="handleRefresh" />
			<uni-load-more :status="more" />
		</scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import CardItem from './components/item.vue'
import { getInterviewInvitePage } from '@/api/interview'
import { getJobAdvertised } from '@/api/search'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getDict } from '@/hooks/useDictionaries'
import { formatName } from '@/utils/getText'

const current = ref(0)
const tabList = ref([])
const more = ref('more')
const total = ref(0)
const items = ref([])
const query = ref({
  pageNo: 1,
  pageSize: 10,
  status: null,
  jobId: null
})

// 职位列表
const jobList = ref([])
const getJobList = async () => {
  const { data } = await getJobAdvertised({ exTime: 0 })
  if (data.length) {
    jobList.value = data.map(e => {
      return { text: `${formatName(e.name)}_${e.status === '1' ? '已关闭' : '招聘中'}`, value: e.id }
    })
  }
}

onLoad(() => {
  getDict('menduner_interview_invite_status').then(({ data }) => {
    tabList.value = data.data ?? []

    if (!tabList.value.length) return
    query.value.pageNo = 1
    getList()
  })
  getJobList()
})

// 获取面试列表
const getList = async () => {
  more.value = 'loading'

  query.value.status = tabList.value[current.value].value
  try {
    const { data } = await getInterviewInvitePage(query.value)
    const { list, total: number } = data

    if (!list.length) {
      more.value = 'noMore'
      return
    }

    total.value = number
    items.value = items.value.concat(list)

    if (items.value.length === +number) {
      more.value = 'noMore'
      return
    }
  } catch {
    query.value.pageNo--
    more.value = 'more'
  }
}

onShow(() => {
  if (!tabList.value.length) return
  items.value = []
  query.value.pageNo = 1
  getList()
})

// 选择招聘中职位
const handleChangeJob = () => {
	query.value.pageNo = 1
	items.value = []
	total.value = 0
	getList()
}

const handleRefresh = () => {
  items.value = []
  total.value = 0
  query.value.pageNo = 1
  getList()
}

const changeControl = (e) => {
  current.value = e.currentIndex
  handleRefresh()
}

// 加载更多
const loadingMore = () => {
	if (more.value === 'noMore') return
  more.value = 'loading'
  query.value.pageNo++
	getList()
}
</script>

<style scoped lang="scss">
.box {
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.scrollBox{
	flex: 1;
  padding-bottom: 24rpx;
  box-sizing: border-box;
	height: 0 !important;
}
:deep(.segmented-control) {
	overflow: auto;
}
:deep(.segmented-control__item) {
	white-space: nowrap !important;
	padding: 0 20rpx;
}
:deep(.uni-select__selector-item) {
	display: block !important;
	text-align: left !important;
	max-width: 100% !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
}
</style>