menduner-uniapp/pagesB/preferredGroup/index.vue

<template>
	<view class="ss-p-x-20">
		<!-- 轮播图 -->
		<swiper
      circular
      :indicator-dots="preferred?.carousel?.length > 1 ? true : false"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      indicator-active-color="#fff"
	  	style="height: 180px;"
    >
			<swiper-item v-for="(item, index) in preferred.carousel" :key="index">
        <image :src="item" style="width: 100%; height: 100%" :lazy-load="true" :fade-show="true"></image>
			</swiper-item>
		</swiper>
		<!-- 集团简介 -->
		<view class="ss-m-t-50">
			<!-- 标题 -->
			<uni-title class="ss-m-b-30" type="h1" :title="preferred?.introduce?.title" align="center"></uni-title>
			<!-- 简介 -->
			<rich-text v-for="(desc, index) in preferred.introduce.describe" :key="index" class="ss-m-b-30 color-666" :nodes="desc" style="display: block;"></rich-text>
			<!-- 小图 -->
			<swiper
				v-if="preferred?.introduce?.thumbnail?.length"
				circular
				:indicator-dots="true"
				:autoplay="true"
				:interval="3000"
				:duration="500"
				indicator-active-color="#fff"
				style="height: 240px;"
				class="ss-m-t-30"
			>
				<swiper-item v-for="(item, index) in preferred.introduce?.thumbnail" :key="index">
					<image :src="item" style="width: 100%; height: 100%" :lazy-load="true" :fade-show="true"></image>
				</swiper-item>
			</swiper>

			<!-- 大图 -->
			<image class="ss-m-y-30" :src="preferred.introduce?.bigPicture?.url" style="width: 100%;" :lazy-load="true" :fade-show="true" :style="{'height': preferred.introduce?.bigPicture?.height + 'px'}"></image>
		</view>

		<!-- 品牌介绍 -->
		<view v-if="preferred?.brandIntroduce?.length" class="ss-m-t-30">
			<uni-title class="ss-m-b-30 color-666" type="h1" title="品牌介绍" align="center"></uni-title>
			<uni-swiper-dot class="uni-swiper-dot-box" :info="preferred.brandIntroduce" :current="current" mode="nav" field="content">
				<swiper :autoplay="true" :interval="5000" class="swiper-box" @change="change" :current="swiperDotIndex" style="height: 172px;">
					<swiper-item v-for="(item, index) in preferred.brandIntroduce" :key="index">
						<image :src="item.url" style="width: 100%; height: 100%" :lazy-load="true" :fade-show="true"></image>
						<view class="swiper-item" :class="'swiper-item' + index">
							<text style="color: #fff; font-size: 20px;">{{ item.content }}</text>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="color-666 ss-m-t-20 font-size-14">{{ preferred.brandIntroduce[current].desc }}</view>
		</view>
		
		<!-- 招聘职位 -->
		<view class="ss-m-t-50">
			<uni-title class="ss-m-b-30 color-666" type="h1" title="招聘职位" align="center"></uni-title>
			<scroll-view class="scrollBox defaultBgc" scroll-y="true" @scrolltolower="loadingMore">
			  <view v-if="positionList.length > 0">
			    <PositionList class="pb-10" :list="positionList" :noMore="false"></PositionList>
			    <uni-load-more :status="status" />
			  </view>
			  <view v-else class="nodata-img-parents">
			    <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" class="nodata-img-child"></image>
			  </view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { getJobAdvertisedSearch } from '@/api/position'
import { dealDictObjData } from '@/utils/position'
import PositionList from '@/components/PositionList'

const title = ref('')
const enterpriseId = ref(null)
const preferred = ref({}) // 当前企业信息
const preferredGroup = ref({}) // 优选集团信息

onLoad(async (options) => {
	enterpriseId.value = options.id
	uni.request({
	  url: 'https://minio.menduner.com/dev/8f6f14c642e55254c28098bdbe22c42de33d4673dffd28069c03bf090cf479b9.json',
	  method: 'GET',
	  success: (res) => {
			preferredGroup.value = res.data
			if (!enterpriseId.value || !preferredGroup.value[enterpriseId.value]) return uni.navigateBack({ delta: 1 })
			preferred.value = preferredGroup.value[enterpriseId.value]
			title.value = preferred.value.title

			console.log(preferred.value, 'preferred.value')
	  },
	  fail: res => {
	    log(res, 'fail')
	  }
	})
	await getPositionList()
})

onShareAppMessage(() => {
  if(!title.value){
		setTimeout(() => {},1000)
	}
  return {
    title: title.value || '门墩儿 专注顶尖招聘',
    path: '/pagesB/preferredGroup/index?id=' + enterpriseId.value
  }
})

const current = ref(0)
const swiperDotIndex = ref(0)
const change = (e) => {
  current.value = e.detail.current
}

// 招聘职位
const status = ref('more')
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  enterpriseId: ''
})
const positionList = ref([])

// 招聘职位列表
const getPositionList = async () => {
  queryParams.value.enterpriseId = enterpriseId.value
  const { data } = await getJobAdvertisedSearch(queryParams.value)
  const list = data?.list || []
  if (list?.length) {
    list.forEach(e => {
      e.job = { ...e.job, ...dealDictObjData({}, e.job) }
      e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise)}
    })
    positionList.value = positionList.value.concat(list)
  }
  status.value = list?.length < queryParams.value.pageSize ? 'noMore' : 'more'
}

const loadingMore = () => {
  status.value = 'loading'
  queryParams.value.pageNo++
  getPositionList()
}
</script>

<style scoped lang="scss">
.scrollBox {
  height: 100vh;
}
</style>