menduner-uniapp/pages/index/position.vue

<template>
  <view>
    <Navbar :showLogo="true" />
    <view class="box defaultBgc" :style="{'padding-top': navbarHeight + 'px'}">
      <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
        <view>
          <view class="commonBackground">
            <SwiperAd v-if="swiperAdList.length" margin="0 10px 10px 10px" :list="swiperAdList" imgUrlKey="img" :strType="false" @click="handleToDetails"></SwiperAd>
          </view>
          <!-- 五宫格菜单 -->
          <view>
            <uni-grid :column="5" @change="handleGrid" :showBorder="false">
              <uni-grid-item v-for="(val, index) in gridList" :index="index" :key="index">
                <view class="d-flex align-center flex-column justify-center" style="width: 100%; height: 100%; border: none;">
                  <image :src="val.icon" style="width: 45px; height: 45px;"></image>
                  <text class="grid-item-text MiSans-Normal">{{ val.label }}</text>
                </view>
              </uni-grid-item>
            </uni-grid>
          </view>
          <!-- 搜索条 -->
          <view class="whiteBgc stick">
            <view style="position: relative;">
              <uni-search-bar
                v-model="query.content"
                placeholder="输入职位/公司关键字"
                cancelButton="none"
                :focus="false"
                bgColor="#fbfffe"
                @confirm="onSearch($event.value)"
                @clear="query.content = ''; onSearch()"
              >
              <template v-slot:searchIcon>
                <uni-icons  color="#0E100F" size="18" type="search" />
              </template>
              </uni-search-bar>
              <button class="search-btn MiSans-Medium" @tap.stop="onSearch">搜索</button>
            </view>
          </view>
          <view class="px-10 stickFilter ss-p-b-10">
            <FilterList :list="filterList" idValue="label" @change="handleSearch"></FilterList>
          </view>
          <view style="background-color: #fff;">
            <PositionList v-if="positionListData?.length || more !== 'loading'" :list="positionListData" :noMore="false"></PositionList>
            <uni-load-more :status="more" />
          </view>
        </view>
      </scroll-view>

      <AdvertisePop v-if="showAdvertisePop" />
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue'
import SwiperAd from '@/components/SwiperAd'
import FilterList from '@/components/FilterList'
import PositionList from '@/components/PositionList'
import AdvertisePop from '@/components/Advertisement'
import { dealDictObjData } from '@/utils/position'
import { getJobAdvertisedSearch, getPromotedPosition } from '@/api/position'
import { onShow, onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import Navbar from '@/components/Navbar'
import { getRewardEventList } from '@/utils/eventList'
import { getMorningNewsArticle } from '@/api/content'
import { getWebContent } from '@/api/common'

const navbarHeight = ref(0)

onMounted(async () => {
  try {
    const res = await new Promise((resolve, reject) => {
      uni.getStorage({
        key: 'navbarHeight',
        success: (result) => resolve(result),
        fail: (err) => reject(err)
      })
    })
    navbarHeight.value = res.data
	  console.log(navbarHeight.value, '职位列表-导航栏高度')
  } catch (error) {
    console.error('读取本地缓存出错:', error)
  }
})

onLoad(() => {
  wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  })
  onShareAppMessage(() => {
    return {
      title: '门墩儿 专注顶尖招聘',
      path: '/pages/index/position',
      imageUrl: 'https://minio.menduner.com/dev/89f171b91e3056a700d80b26a9dbb4cd6e9677b3f3b4f036a2127f5d5023e9d3.jpg'
    }
  })
  onShareTimeline(() => {
    return {
      title: '门墩儿 专注顶尖招聘',
      path: '/pages/index/position',
      imageUrl: 'https://minio.menduner.com/dev/89f171b91e3056a700d80b26a9dbb4cd6e9677b3f3b4f036a2127f5d5023e9d3.jpg'
    }
  })
  if (!uni.getStorageSync('token')) getRewardEventList()
})

const more = ref('more')
const total = ref(0)
// 轮播图-优选集团信息
const preferredGroup = ref({})

// 获取轮播图
const showAdvertisePop = ref(false)
const swiperAdList = ref([])
const getSystemWebContent = async () => {
  const { data } = await getWebContent()
  swiperAdList.value = data?.appHomeCarousel || []
  // 是否展示弹窗广告
  showAdvertisePop.value = data && data.appAdvertisement && data.appAdvertisement.length ? true : false

  // 优选集团 
  preferredGroup.value = data?.appPreferredGroup || {}
}

const filterList = ref([
  { label: '城市', multiple: true, dictType: 'areaTreeData', key: 'areaIds', map: { text: 'name', value: 'id' } },
  { label: '职位', dictType: 'positionTreeData',key: 'positionId', map: { text: 'nameCn', value: 'id' } },
  { label: '求职类型', dictType: 'menduner_job_type', key: 'jobType' },
  { label: '薪资待遇', dictType: 'menduner_pay_scope', key: 'payScope' },
])

const gridList = [
  { label: '门墩儿猎头', icon: 'https://minio.menduner.com/dev/05655df27929e1420a78d6c97fa3747e17f0cdbd57ae9f816550d498ccf74a7d.png', path: '/pagesB/headhunting/index' },
  { label: '精选企业', icon: 'https://minio.menduner.com/dev/0b107bc7b6f48d689a2fff9807c43bfe5e09e4de0858ca6fe69bbc8219681901.png', path: '/pagesB/recommendEnterprise/index' },
  { label: '酒店英语', icon: 'https://minio.menduner.com/dev/b9c388263ada5ab63f901a2bf27adabc2660664660cb5898cf0bbc3f7416c510.png', weiXinPublicUrl: 'https://mp.weixin.qq.com/s/zta8NvNaJOFhPxq9NAE9pw' },
  // { label: '早报资讯', icon: 'https://minio.menduner.com/dev/b598bf9c973161e090d784ca2df6f7784593d972ce015c475d1c6dcb108c9610.png', id: 'morningNews' },
  { label: '招聘会', icon: 'https://minio.menduner.com/dev/b598bf9c973161e090d784ca2df6f7784593d972ce015c475d1c6dcb108c9610.png', path: '/pages/index/jobFair' },
  { label: '了解门墩儿', icon: 'https://minio.menduner.com/dev/028e33e10569238d6f78bd89668f6387f8af60503b71639491e1640e53614411.png', path: '/pagesB/about/index' }
]

// 轮播图链接跳转
const handleToDetails = ({ link, title }) => {
  if (!link) return

  // 公众号链接跳转
  if (link.includes('http')) uni.navigateTo({ url: `/pages/addWebView/index?url=${link}&title=${title || '门墩儿 专注顶尖招聘'}` })
  else {
	  // 优选集团
	  if (preferredGroup.value && Object.keys(preferredGroup.value).length > 0 && preferredGroup.value[link]) uni.navigateTo({ url: `/pagesB/preferredGroup/index?id=${link}` })
	  // 企业详情
	  else uni.navigateTo({ url: `/pagesB/companyDetail/index?id=${link}` })
  }
}

const handleGrid = async (e) => {
  const index = e.detail.index
  const obj = gridList[index]
  // 早报资讯
  if (obj?.id === 'morningNews') {
    try {
      const { data } = await getMorningNewsArticle()
      if (data && Object.keys(data).length && data.url) {
        uni.navigateTo({
          url: `/pages/addWebView/index?url=${data.url}&title=门墩儿早报`
        })
      } else uni.showToast({ icon: 'none', title: '暂无早报资讯内容' })
    } catch (err) {
      uni.showToast({ icon: 'none', title: err.msg })
    }
  }
  if (obj?.path) {
    if (obj?.path === '/pages/index/jobFair') {
      uni.switchTab({
        url: obj?.path
      })
      return
    }
    uni.navigateTo({
      url: obj.path
    })
  }
  if (obj?.weiXinPublicUrl) {
		uni.navigateTo({ url: `/pages/addWebView/index?url=${obj?.weiXinPublicUrl}&title=${obj?.title || obj.label}` })
	}
}

const checkValue = (obj) => {
  return Object.values(obj).some(value => {  
    return value !== null && value !== undefined && value !== '' && (Array.isArray(value) ? value.length > 0 : true)
  })
}

const type = ref('recommend')
const positionListData = ref([])
const query = reactive({
  pageSize: 20, 
  pageNo: 1,
  hire: false,
  content: '',
  positionId: '',
  areaIds: [],
  industryIds: [],
  jobType: [],
  payScope: ''
})
const getData = async () => {
  // 效验是否有带搜索条件
  const { content, areaIds, industryIds, jobType, payScope, positionId } = query
  const hasValue = checkValue({ content, areaIds, industryIds, jobType, payScope, positionId })

  // 当前接口为推荐列表时，带查询条件需返回到列表顶部
  if (hasValue && type.value === 'recommend') {
    scrollTop.value = old.value.scrollTop
    nextTick(() => {
      type.value = 'position'
      scrollTop.value = 0
    })
  }
  // 当前接口为只为列表时，清除查询条件需返回到列表顶部
  if (!hasValue && type.value === 'position') {
    scrollTop.value = old.value.scrollTop
    nextTick(() => {
      type.value = 'recommend'
      scrollTop.value = 0
    })
  }

  // 带搜索条件（除分页外）用职位搜索接口，无条件则用推荐接口
  const api = hasValue ? getJobAdvertisedSearch : getPromotedPosition
  const _query = Object.keys(query).reduce((acc, cur) => {
    if (!query[cur]) {
      return acc
    }
    acc[cur] = query[cur]
    return acc
    
  }, {})
  const params = hasValue ? _query : { pageSize: query.pageSize, pageNo: query.pageNo, hire: 0 }
  if (params.pageNo === 1) positionListData.value = []
  if (params.pageNo <= 0) return
  type.value = hasValue ? 'position' : 'recommend'
  try {
    more.value = 'loading'
    const res = await api(params)
    const arr = res?.data?.list || []
    if (!arr?.length) {
      more.value = 'noMore'
      return
    }
    // 推荐接口返回数据需要拼接
    const list = !hasValue ? arr.map(e => {
      const { anotherName, logoUrl, scale, industryId, enterpriseId, enterpriseName, ...job } = e
      return { job, enterprise: { anotherName, logoUrl, scale, industryId, enterpriseId, name: enterpriseName } }
    }) : arr
    positionListData.value.push(...list.map(e => {
      if (!e) {
        return e
      }
      e.job = { ...e.job, ...dealDictObjData({}, e.job) }
      e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise)}
      return e
    }))
    total.value = res?.data?.total || 0
    if (positionListData.value.length === total.value) {
      more.value = 'noMore'
      return
    }
  } catch (error) {
    query.pageNo--
    more.value = 'more'
  }
}

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

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

const handleSearch = (key, value) => {
  query[key] = value
  onSearch()
}

const onSearch = () => {
  query.pageNo = 1
  positionListData.value = []
  getData()
}

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

</script>

<style scoped lang="scss">
.stick {
  z-index: 1;
  position: sticky;
  top: 0;
}
.stickFilter {
  z-index: 1;
  position: sticky;
  box-shadow: 0px 10rpx 12rpx 0px rgba(195, 195, 195, .25);
  top: 110rpx;
  background-color: #fff;
}
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pb-10 {
  padding-bottom: 10px;
}
.pb-20 { padding-bottom: 20px; }
.px-5 { padding-left: 5px; padding-right: 5px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.mx-10 { margin-left: 10px; margin-right: 10px }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mb-10 { margin-bottom: 10px; }
.box {
  height: 100vh;
  overflow: hidden;
  padding-bottom: 120rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.grid-item-text {
  font-family: MiSans, MiSans;
  font-weight: 400;
  font-size: 24rpx;
  color: #0E100F;
  font-style: normal;
  text-transform: none;
}
.scrollBox{
  flex: 1;
  height: 0 !important;
  padding-bottom: 24rpx;
  box-sizing: border-box;
}
:deep(.uni-searchbar__box) {
  width: 100%;
  height: 80rpx !important;
  border: 1px solid #00B760;
  border-radius: 20rpx;
  flex: none;
}
.search-btn {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 100rxp;
  height: 60rpx;
  font-size: 24rpx;
  background-color: #00B760;
  color: #fff;
  border-radius: 20rpx;
  z-index: 9;
}
:deep(.picker-view) {
  padding-bottom: 80px !important;
}
</style>