menduner-uniapp/pages/index/jobFair.vue

<!-- 招聘会 -->
<template>
  <view>
    <Navbar title="招聘会" />
    <view class="box defaultBgc" :style="{'padding-top': navbarHeight + 'px', 'min-height': `calc(100vh - ${(navbarHeight + 100)}px)`}" style="padding-bottom: 100px;">
      <view v-if="items.length">
        <view class="commonBackground"></view>
        <scroll-view class="scrollBox" :scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
          <view v-for="val in items" :key="val.id" @tap="handleToJobFairEnterprises(val)" class="list-item defaultBgc default-border">
            <image v-if="val?.previewImg" class="ss-m-t-10" :src="val.previewImg" mode="widthFix" style="width: 100%; height: auto; border-radius: 6px;"></image>
            <view class="ss-m-t-20 MiSans-Normal">活动主题：{{ val.title }}</view>
            <view class="ss-m-t-20 MiSans-Normal">
              活动状态：
              <text class="font-weight-bold" :class="[`color-${checkActivityTime(val.startTime, val.endTime)?.color}`]">
                {{ checkActivityTime(val.startTime, val.endTime)?.desc }}
              </text>
            </view>
            <view class="ss-m-t-20 MiSans-Normal">活动时间：{{ timesTampChange(val.startTime, 'Y-M-D') }}至{{ timesTampChange(val.endTime, 'Y-M-D') }}</view>
            <button class="ss-m-t-20 ss-m-b-10 MiSans-Medium" style="background-color: #00B760; color: #fff;" type="primary">查看详情</button>
          </view>
          <uni-load-more :status="more" />
        </scroll-view>
      </view>
      <view v-else>
        <view class="commonBackground"></view>
        <view class="nodata-img-parent" :style="{'height': `calc(100vh - ${(navbarHeight + 100)}px)`}">
          <image src="https://minio.menduner.com/dev/bb43df1dc91945e05ee93da76e49b34f87b0d10203eb76c20e2d4999a13b9a0a.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { ref }  from 'vue'
import { getJobFairList } from '@/api/jobFair'
import { timesTampChange } from '@/utils/date'
import Navbar from '@/components/Navbar'

const navbarHeight = ref(uni.getStorageSync('navbarHeight'))

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

// 获得招聘会列表
const getList = async () => {
	if (query.value.pageNo < 1) return
	if (query.value.pageNo === 1) items.value = []
  try {
    more.value = 'loading'
	  uni.showLoading({ title: '加载中...' })
    const res = await getJobFairList(query.value)
    const list = res?.data?.list || []
    if (!list?.length) {
      more.value = 'noMore'
      return
    }
    items.value = items.value.concat(...list)
    total.value = res.data.total
    more.value = 'more'
    if (items.value.length === +total.value) {
      more.value = 'noMore'
      return
    }
  } catch (error) {
	  query.value.pageNo--
	  more.value = 'more'
  } finally {
    uni.hideLoading()
  }
}

// 加载更多
const loadingMore = () => {
  if (more.value === 'noMore') return

  more.value = 'loading'
  query.value.pageNo++
  getList()
}

function checkActivityTime(startTimeStamp, endTimeStamp) {
  // 获取当前时间
  const now = new Date()
  const currentTime = now.getTime()
 
  // 处理开始时间：设置为当天的 00:00:00
  const startDate = new Date(startTimeStamp)
  const startOfDay = new Date(
    startDate.getFullYear(),
    startDate.getMonth(),
    startDate.getDate(),
    0, 0, 0, 0
  )
  const adjustedStartTime = startOfDay.getTime()
 
  // 处理结束时间：设置为当天的 23:59:59
  const endDate = new Date(endTimeStamp)
  const endOfDay = new Date(
    endDate.getFullYear(),
    endDate.getMonth(),
    endDate.getDate(),
    23, 59, 59, 999
  )
  const adjustedEndTime = endOfDay.getTime()
 
  // 判断时间关系
  if (currentTime < adjustedStartTime) {
    return {
      canJoin: false,
			desc: '待开始',
			message: '该招聘会尚未开始，无法查看详情',
			color: 'warning'
    }
  } else if (currentTime > adjustedEndTime) {
    return {
      canJoin: false,
			desc: '已结束',
			message: '该招聘会已结束，无法查看详情',
			color: 'error'
    }
  } else {
    return {
		canJoin: true,
			color: 'primary',
			desc: '进行中'
    }
  }
}

//招聘会
const handleToJobFairEnterprises = (val) => {
  if (!val?.id) {
    uni.showToast({ title: '暂无详情！', icon: 'none' })
  }
  const obj = checkActivityTime(val.startTime, val.endTime)
  // 不可参加的，弹出提示语
  if (!obj.canJoin) return uni.showToast({ title: obj.message, icon: 'none', duration: 2000 })

  let url = `/pagesB/jobFair/${Number(val?.category) ? 'positionClassification': 'enterprisesClassification'}?jobFairId=${val.id}`
	uni.navigateTo({url})
}

const getShareParams = () => {
  return {
    title: '门墩儿-招聘会',
    path: '/pages/index/jobFair',
  }
}

// 设置自定义tabbar选中值
onShow(() => {
  const currentPage = getCurrentPages()[0];  // 获取当前页面实例
  const currentTabBar = currentPage?.getTabBar?.();
  // 设置当前tab页的下标index
  currentTabBar?.setData({ selected: 3 });

  getList()
})

// 转发朋友
onShareAppMessage(() => {
  return getShareParams()
})
// 转发朋圈
onShareTimeline(() => {
  return getShareParams()
})

</script>

<style lang="scss" scoped>
.scrollBox {
	height: 100vh;
	box-sizing: border-box;
}
.list-item {
  margin: 0 30rpx 30rpx 30rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  position: relative;
  box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.17);
  view {
    font-size: 28rpx;
    color: #666;
  }
}
</style>