测试

pages/index/position1.vue

@@ -0,0 +1,343 @@
+<template>
+  <view>
+    <Navbar></Navbar>
+    <view class="box defaultBgc">
+      <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
+        <view>
+          <SwiperAd v-if="swiperAdList.length" :list="swiperAdList" imgUrlKey="img" :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 ss-p-t-10">
+            <FilterList :list="filterList" idValue="label" @change="handleSearch"></FilterList>
+          </view>
+          <PositionList :list="positionListData" :noMore="false" :showJobFairEntrance="false"></PositionList>
+          <uni-load-more :status="loading ? 'noMore' : more" :content-text="loading ? {'contentnomore': '加载中. . .'} : {}" />
+        </view>
+      </scroll-view>
+
+      <AdvertisePop v-if="showAdvertisePop" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick } 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'
+
+onLoad(() => {
+  wx.showShareMenu({
+    withShareTicket: true,
+    menus: ['shareAppMessage', 'shareTimeline']
+  })
+  onShareAppMessage(() => {
+    return {
+      title: '门墩儿 专注顶尖招聘',
+      path: '/pages/index/position',
+      imageUrl: '../../static/img/share-poster.jpg'
+    }
+  })
+  onShareTimeline(() => {
+    return {
+      title: '门墩儿 专注顶尖招聘',
+      path: '/pages/index/position',
+      imageUrl: '../../static/img/share-poster.jpg'
+    }
+  })
+  if (!uni.getStorageSync('token')) getRewardEventList()
+})
+
+const more = ref('more')
+const loading = ref(false)
+
+// 轮播图-优选集团信息
+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: '/static/img/headhunting.png', path: '/pagesB/headhunting/index' },
+  { label: '精选企业', icon: '/static/img/enterprise.png', path: '/pagesB/recommendEnterprise/index' },
+  { label: '酒店英语', icon: '/static/img/group.png', weiXinPublicUrl: 'https://mp.weixin.qq.com/s/zta8NvNaJOFhPxq9NAE9pw' },
+  // { label: '早报资讯', icon: '/static/img/information.png', id: 'morningNews' },
+  { label: '招聘会', icon: '/static/img/information.png', path: '/pagesB/jobFair/index' },
+  { label: '了解门墩儿', icon: '/static/img/contact.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) {
+    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 = []
+  type.value = hasValue ? 'position' : 'recommend'
+  try {
+    loading.value = true
+    const res = await api(params)
+    const arr = res?.data?.list || []
+    // 推荐接口返回数据需要拼接
+    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
+    }))
+    if (positionListData.value.length === +res.data.total) {
+      more.value = 'noMore'
+      return
+    }
+  } catch (error) {
+    query.pageNo--
+    more.value = 'more'
+  } finally {
+    loading.value = false
+  }
+}
+
+// 设置自定义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
+  // 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: 110rpx;
+}
+.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 #00B760;
+  padding-right: 20px;
+  flex: none;
+}
+.search-btn {
+  position: absolute;
+  right: 11px;
+  top: 10px;
+  width: 110px;
+  height: 40px;
+  font-size: 16px;
+  background-color: #00B760;
+  color: #fff;
+  border-radius: 0 5px 5px 0;
+  z-index: 9;
+}
+:deep(.picker-view) {
+  padding-bottom: 80px !important;
+}
+</style>