menduner-uniapp/pagesB/jobFair/positionClassification.vue

<!-- 招聘会职位列表 / 招聘会内的企业下-职位列表 -->
<!-- 没有企业ID的就是招聘会下的职位列表。存在企业ID的就是招聘会企业下的职位列表。 -->
<template>
  <view class="box" :style="`background-color: ${backgroundColor}`">
    <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
      <view style="position: relative;">

        <!-- 招聘会企业下的职位列表 -->
        <template v-if="query?.enterpriseId">
          <view class="enterpriseName" :style="`color: ${entNameColor}`">{{ entName }}</view>
          <!-- 超长企业名称超长企业名称名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称超长企业名称123 -->
          <view class="stick ss-p-y-30" :style="`background-color: ${backgroundColor}`">
            <!-- 搜索条 -->
            <view style="position: relative;">
              <uni-search-bar
                v-model="query.content"
                placeholder="输入关键字"
                cancelButton="none"
                :focus="false"
                bgColor="#fff"
                @confirm="onSearch($event.value)"
                @clear="query.content = ''; onSearch()"
              >
              </uni-search-bar>
              <button class="search-btn" @tap.stop="onSearch">搜索</button>
            </view>
          </view>
        </template>

        <!-- 招聘会职位列表 -->
        <template v-else>
          <SwiperAd v-if="swiperAdList.length && !query.enterpriseId" :list="swiperAdList" margin="0" borderRadius="0"></SwiperAd>
          <view class="stick ss-p-t-30" :style="`background-color: ${backgroundColor}`">
            <view style="position: relative;">
              <uni-search-bar
                v-model="query.content"
                placeholder="输入关键字"
                cancelButton="none"
                :focus="false"
                bgColor="#fff"
                @confirm="onSearch($event.value)"
                @clear="query.content = ''; onSearch()"
              >
              </uni-search-bar>
              <button class="search-btn" @tap.stop="onSearch">搜索</button>
            </view>
            
            <!-- 横向分类页签 -->
            <scroll-view v-if="tabList?.length && !query.enterpriseId" scroll-x="true" class="scroll-container">
              <view
                class="scroll-item"
                :style="`margin-left: ${index ? '24px' : ''};`"
                v-for="(val, index) in tabList" :key="index+val"
                @tap="handClickTab(index)"
              >
                <view>
                  <view class="text">{{ val.title }}</view>
                  <view v-if="index === tabIndex" class="choose" style="background-color: #fff;"></view>
                  <view v-else class="choose" style="background-color: #ffffff00;"></view>
                </view>
              </view>
            </scroll-view>
          </view>
        </template>
        <view v-if="listData?.length" class="listDataBox">
          <PositionList
            :list="listData"
            :noMore="false"
            :jobFairId="query.jobFairId"
            :showUpdateTime="false"
            :noDataTextColor="textColor"
          ></PositionList>
          <uni-load-more :status="more" :color="textColor" />
        </view>
        <view v-else class="nodata-img-parent">
          <uni-load-more class="ss-m-t-50" :color="textColor" status="noMore" :content-text="{'contentnomore': loading ? '加载中. . .' : tabList?.length ? '暂无数据，请切换类型查看~': '暂无数据'}" />
        </view>
        <!-- 招聘会分享按钮 -->
        <view v-if="showShareBtn" class="shareButtonBox" @tap="handleShare">
          <uni-icons type="redo-filled" size="23" color="#fff" />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive, computed } from 'vue'
import { dealDictObjData } from '@/utils/position'
import { getJobFairEntJobPage, getJobFair } from '@/api/jobFair'
import PositionList from '@/components/PositionList'
import SwiperAd from '@/components/SwiperAd'
import { getShareQueryById } from '@/api/jobFair.js'

const loading = ref(true)
const more = ref('more')
const listData = ref([])
const query = reactive({
  pageSize: 20, 
  pageNo: 1,
  content: '',
  jobFairId: undefined,
})

const entName = ref('')
const showShareBtn = ref(false)

onLoad(async (options) => {
  // 海报二维码分享
	if (options.scene) {
    const scene = decodeURIComponent(options.scene)
    console.log(scene, 'scene')
    const key = scene.split('=')[1]
    if (!key) return
    const res = await getShareQueryById({key})
    console.log(res, 'result')
    options.jobFairId = res?.data?.jobFairId
    options.enterpriseId = res?.data?.enterpriseId
    options.backgroundColor = res?.data?.backgroundColor
    options.entName = res?.data?.entName
  }
  if (options?.jobFairId) {
    query.jobFairId = options.jobFairId
    if (options.enterpriseId) {
      query.enterpriseId = options.enterpriseId
      entName.value = options.entName
      getEntShareImg()
      getEntPositionList()
    } else {
      getJobFairDetail()
    }
  }
  if (options.backgroundColor) backgroundColor.value = options.backgroundColor
})

// 招聘会详情
const tabIndex = ref(-1)
const tabList = ref([])
const swiperAdList = ref([])
const backgroundColor = ref('#fff')
const textColor = computed(() => {
  return backgroundColor.value === '#fff' ? '#777' : '#fff'
})
const entNameColor = computed(() => {
  return backgroundColor.value === '#fff' ? '#00B760' : '#fff'
})
const getJobFairDetail = async () => {
  if (!query.jobFairId) return
  const { data } = await getJobFair(query.jobFairId)
  // tab
  if (data?.tag?.length) {
    tabList.value = data?.tag || []
    if (tabList.value?.length) handClickTab(0)
  }
  // 轮播图
  if (data?.headImg?.length) {
    swiperAdList.value = data.headImg
  }
  // 背景色
  if (data?.backgroundColour) {
    backgroundColor.value = data.backgroundColour || '#fff'
  }
  showShareBtn.value = Boolean(data?.shareImg)
}

const getEntShareImg = async () => {
  if (!query.jobFairId) return
  const { data } = await getJobFair(query.jobFairId)
  showShareBtn.value = Boolean(data?.contentImg)
  backgroundColor.value = data.backgroundColour || '#fff'
}

// 切换类型
const handClickTab = (index) => {
  tabIndex.value = index
  query.pageNo = 1
  listData.value = []
  getEntPositionList()
}

const onSearch = () => {
  query.pageNo = 1
  listData.value = []
  getEntPositionList()
}

const getEntPositionList = async () => {
  if (!query.jobFairId) {
    uni.showToast({ title: '获取企业岗位失败，请重试！', icon: 'none', duration: 2000 })
    return
  }
  try {
    const params = { ...query }
    // tab对应的职位类型id列表
    const idList = tabIndex.value !== -1 ? tabList.value[tabIndex.value]?.value : []
    idList?.length && idList.forEach((value, index) => { params[`positionId[${index}]`] = value })
    //
    const res = await getJobFairEntJobPage(params)
    const list = res?.data?.list || []
    list.forEach(e => {
      e.job = dealDictObjData({}, e)
      e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise)}
    })
    listData.value = listData.value.concat(list)
    loading.value = false
    if (listData.value?.length === +res?.data?.total) {
      more.value = 'noMore'
      return
    }
  } catch (error) {
    query.pageNo--
    more.value = 'more'
  }
}

const scrollTop = ref(0)
const old = ref({
  scrollTop: 0
})
const onScroll = (e) =>{
  old.value.scrollTop = e.detail.scrollTop
}

// 加载更多
const loadingMore = () => {
  more.value = 'loading'
  query.pageNo++
  getEntPositionList()
}

// const goBack = () => {
// 	uni.navigateTo({
// 		url: '/pagesB/jobFair/index'
// 	})
// }

const handleShare = () => {
  // 分享招聘会
  let url = `/pagesB/jobFair/${query.enterpriseId ? 'jobFairEntShare' : 'jobFairShare'}?jobFairId=${query.jobFairId}`
  // 分享招聘会企业
  if (query.enterpriseId) url = url + `&enterpriseId=${query.enterpriseId}`
	uni.navigateTo({ url })
}

</script>

<style scoped lang="scss">
.stick {
  z-index: 1;
  position: sticky;
  top: 0;
}
.shareButtonBox {
  z-index: 1;
  position: absolute;
  right: 20px;
  top: 16px;
  border-radius: 50%;
  padding: 7px 9px;
  background-color: #00B760;
}
.box {
  height: 100vh;
  overflow: hidden;
  // padding-bottom: 120rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.listDataBox {
  // padding: 1px 0 120rpx;
  padding-bottom: 120rpx;
  margin: 0 5rpx;
}
.scrollBox{
  flex: 1;
  height: 0 !important;
  padding-bottom: 24rpx;
  box-sizing: border-box;
}

// :deep(.uni-load-more__text) {
//   color: #fff !important;
// }

:deep(.uni-card) {
  padding: 0 !important;
  .uni-card__content {
    padding: 0 !important;
  }
}

.scroll-container {
  width: calc(100vw - 20px);
  padding: 0 20rpx;
  white-space: nowrap; /* 确保子元素在一行内排列 */
  .scroll-item {
    display: inline-block; /* 子元素内联块显示 */
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    .text {
      padding: 20px 2px 0;
    }
    .choose {
      width: 28px;
      height: 2px;
      border-radius: 8px;
      margin: 8px auto;
    }
  }
}

.enterpriseName {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 28px;
  padding: 15px 80px 15px 30px;
}

:deep(.uni-searchbar) {
  // background-color: #fff !important;
  padding: 0;
  margin: 0 10px;
  border-radius: 5px;
}

:deep(.uni-searchbar__box) {
  width: calc(100% - 100px);
  height: 40px !important;
  // border: 1px solid #00B760;
  padding-right: 20px;
  flex: none;
  background-color: #fff;
}

.search-btn {
  position: absolute;
  right: 13px;
  top: 3px;
  width: 106px;
  height: 34px;
  line-height: 34px;
  font-size: 16px;
  // margin: 4px 4px 4px 0;
  background-color: #00B760;
  color: #fff;
  border-radius: 5px;
  z-index: 9;
}
</style>