menduner-uniapp/pages/index/position.vue

<template>
  <view>
    <Navbar></Navbar>
    <view class="box defaultBgc">
      <scroll-view class="scrollBox" scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
        <view>
          <SwiperAd :list="swiperAdList" :strType="false" @click="handleToDetails"></SwiperAd>
          <!-- 五宫格菜单 -->
          <view class="white-bgc ss-p-t-10">
            <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: 35px; height: 35px;"></image>
                  <text class="text color-666 font-size-14 ss-m-t-15">{{ val.label }}</text>
                </view>
              </uni-grid-item>
            </uni-grid>
          </view>
          <!-- 搜索条 -->
            <view class="white-bgc stick ss-p-t-10">
              <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>
            <view class="white-bgc px-10 stickFilter">
            <FilterList :list="filterList" idValue="label" @change="handleSearch"></FilterList>
          </view>
          <PositionList :list="positionListData" :noMore="false"></PositionList>
          <uni-load-more :status="more" />
        </view>
      </scroll-view>
      <AdvertisePop></AdvertisePop>
      <uni-popup ref="inputDialog" type="dialog">
        <view class="shareQrCodePopupContent">
          <view class="ss-m-b-10">请前往网页版门墩儿查看</view>
          <uni-link href="https://www.menduner.com" text="点击复制网页地址" color="#00897B" fontSize="16" copyTips="已复制，请在电脑端打开"></uni-link>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } 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 } 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'

// 设置自定义tabbar选中值
onShow(() => {
  const currentPage = getCurrentPages()[0];  // 获取当前页面实例
  const currentTabBar = currentPage?.getTabBar?.();
  // 设置当前tab页的下标index
  currentTabBar?.setData({ selected: 0 });
})
onLoad(() => {
  
  wx.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  })
  onShareAppMessage(() => {
    return {
      title: '门墩儿 专注顶尖招聘',
      path: '/pages/index/position',
      imageUrl: 'https://minio.menduner.com/dev/menduner/miniProgram/share-poster.jpg'
    }
  })
  onShareTimeline(() => {
    return {
      title: '门墩儿 专注顶尖招聘',
      path: '/pages/index/position',
      imageUrl: 'https://minio.menduner.com/dev/menduner/miniProgram/share-poster.jpg'
    }
  })
  if (!uni.getStorageSync('token')) getRewardEventList()
})

const inputDialog = ref()
const more = ref('more')
const swiperAdList = [
  { src: 'https://minio.menduner.com/dev/menduner/banner/IHG.gif', id: '577540545828753408' },
  { src: 'https://minio.menduner.com/dev/menduner/banner/Marriott.jpg', id: '734173233779183616' },
  { src: 'https://minio.menduner.com/dev/menduner/banner/UrCove.jpg', id: '277182701256183808' },
  { src: 'https://minio.menduner.com/dev/menduner/miniProgram/Grand-Mercure.jpg', id: '120281807903133696' }
]
const filterList = ref([
  { label: '城市', dictType: 'areaTreeDataExtend', key: 'areaIds', map: { text: 'name', value: 'id' } },
  // { label: '行业', dictType: 'industryTreeData',key: 'industryIds', map: { text: 'nameCn', 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' },
  // { label: '工作经验', dictType: 'menduner_exp_type', key: 'expType' },
])

const gridList = [
  { label: '优选集团', icon: '/static/img/group.png', path: '' },
  { label: '精选企业', icon: '/static/img/enterprise.png', path: '' },
  { label: '门墩儿猎头', icon: '/static/img/headhunting.png', path: '' },
  { label: '早报资讯', icon: '/static/img/information.png', id: 'morningNews' },
  { label: '联系我们', icon: '/static/img/contact.png', path: '' }
]

// 跳转企业详情
const handleToDetails = ({ id }) => {
  if (!id) return
  uni.navigateTo({
    url: `/pagesB/companyDetail/index?id=${id}`
  })
}

const handleGrid = async (e) => {
  // uni.showToast({
  //   icon: 'none',
  //   title: '请前往网页版门墩儿查看'
  // })
  // inputDialog.value.open()

  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}`
        })
      } else uni.showToast({ icon: 'none', title: '暂无早报资讯内容' })
    } catch (err) {
      uni.showToast({ icon: 'none', title: err.msg })
    }
  }
}

// 
const positionListData = ref([])
const query = reactive({ 
  pageSize: 20, 
  pageNo: 1, 
  content: '',
  areaIds: [],
  industryIds: [],
  jobType: [],
  payScope: [],
  expType: []
})
//
const getData = async () => {
  try {
    const res = await getJobAdvertisedSearch(query)
    const list = res?.data?.list || []
    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
    }))
    if (positionListData.value.length === +res.data.total) {
      more.value = 'noMore'
      return
    }
  } catch (error) {
    query.pageNo--
    more.value = 'more'
  }
  
  
}
getData()

const handleSearch = (key, value) => {
  if (key === 'positionId' || key === 'payScope') {
    query[key] = value || null
  } else {
    query[key] = value ? [value] : []
  }
  onSearch()
}

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

const loadingMore = () => { // 加载更多
  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: 120rpx;
}
.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;
}
.scrollBox{
  flex: 1;
  height: 0 !important;
  padding-bottom: 24rpx;
  box-sizing: border-box;
}
:deep(.uni-searchbar__box) {
  width: calc(100% - 105px);
  height: 40px !important;
  border: 1px solid #00897B;
  padding-right: 20px;
  flex: none;
}
.search-btn {
  position: absolute;
  right: 11px;
  top: 10px;
  width: 110px;
  height: 40px;
  font-size: 16px;
  background-color: #00897B;
  color: #fff;
  border-radius: 0 5px 5px 0;
  z-index: 9;
}
:deep(.picker-view) {
  padding-bottom: 80px !important;
}
.shareQrCodePopupContent {
	width: 75vw;
	padding: 40rpx;
	margin-bottom: 20rpx;
	text-align: center;
	background-color: #fff;
}
</style>