|
@@ -1,390 +0,0 @@
|
|
|
-<!-- 招聘会职位列表 / 招聘会内的企业下-职位列表 -->
|
|
|
-<!-- 没有企业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>
|
|
|
- <view class="stick ss-p-y-30" :style="`background-color: ${backgroundColor}`">
|
|
|
- <!-- 搜索条 -->
|
|
|
- <view style="position: relative;">
|
|
|
- <uni-search-bar
|
|
|
- v-model="query.keyword"
|
|
|
- placeholder="输入关键字"
|
|
|
- cancelButton="none"
|
|
|
- :focus="false"
|
|
|
- bgColor="#fff"
|
|
|
- @confirm="onSearch($event.value)"
|
|
|
- @clear="query.keyword = ''; 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-y-30" :style="`background-color: ${backgroundColor}`">
|
|
|
- <view style="position: relative;">
|
|
|
- <uni-search-bar
|
|
|
- v-model="query.keyword"
|
|
|
- placeholder="输入关键字"
|
|
|
- cancelButton="none"
|
|
|
- :focus="false"
|
|
|
- bgColor="#fff"
|
|
|
- @confirm="onSearch($event.value)"
|
|
|
- @clear="query.keyword = ''; 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"
|
|
|
- @entClick="entClick"
|
|
|
- ></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="30" color="#00B760" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { onLoad, onShareAppMessage, onShareTimeline } 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,
|
|
|
- keyword: '',
|
|
|
- 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
|
|
|
-
|
|
|
- // 转发朋友
|
|
|
- onShareAppMessage(() => {
|
|
|
- if (!options?.enterpriseId && !jobFairTitle.value) setTimeout(() => {}, 1000)
|
|
|
- let path = `/pagesB/jobFair/positionClassification?jobFairId=${options.jobFairId}`
|
|
|
- if (options?.enterpriseId) path += `&enterpriseId=${options.enterpriseId}&entName=${options.entName}`
|
|
|
- return {
|
|
|
- title: options?.enterpriseId ? options?.entName || '门墩儿 专注顶尖招聘' : jobFairTitle.value,
|
|
|
- path
|
|
|
- }
|
|
|
- })
|
|
|
- // 转发朋圈
|
|
|
- onShareTimeline(() => {
|
|
|
- if (!query.enterpriseId && !jobFairTitle.value) setTimeout(() => {}, 1000)
|
|
|
- let path = `/pagesB/jobFair/positionClassification?jobFairId=${options.jobFairId}`
|
|
|
- if (options?.enterpriseId) path += `&enterpriseId=${options.enterpriseId}&entName=${options.entName}`
|
|
|
- return {
|
|
|
- title: query.enterpriseId ? entName.value || '门墩儿 专注顶尖招聘' : jobFairTitle.value,
|
|
|
- path
|
|
|
- }
|
|
|
- })
|
|
|
-})
|
|
|
-
|
|
|
-// 招聘会详情
|
|
|
-const tabIndex = ref(-1)
|
|
|
-const tabList = ref([])
|
|
|
-const swiperAdList = ref([])
|
|
|
-const backgroundColor = ref('#fff')
|
|
|
-const jobFairTitle = ref('')
|
|
|
-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)
|
|
|
- // 类型 -1为不传tag参数
|
|
|
- tabList.value = data?.tag || []
|
|
|
- handClickTab(tabList.value?.length ? 0 : -1)
|
|
|
-
|
|
|
- // 轮播图
|
|
|
- if (data?.headImg?.length) {
|
|
|
- swiperAdList.value = data.headImg
|
|
|
- }
|
|
|
- // 背景色
|
|
|
- if (data?.backgroundColour) {
|
|
|
- backgroundColor.value = data.backgroundColour || '#fff'
|
|
|
- }
|
|
|
- if (data?.title) {
|
|
|
- jobFairTitle.value = data.title
|
|
|
- }
|
|
|
- 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]?.content : []
|
|
|
- idList?.length && idList.forEach((value, index) => { params[`positionId[${index}]`] = value.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 entClick = (info) => {
|
|
|
- // 点击企业信息跳转企业职位列表(招聘会内)。如果已经在了则不跳转
|
|
|
- if (info?.enterpriseId && !query.enterpriseId) {
|
|
|
- const url = `/pagesB/jobFair/positionClassification?jobFairId=${query.jobFairId }&enterpriseId=${info.enterpriseId}&entName=${info.anotherName}`
|
|
|
- uni.navigateTo({ url })
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-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: 8px;
|
|
|
- padding: 7px 9px;
|
|
|
- background-color: #fff;
|
|
|
-}
|
|
|
-.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: 20px 80px 20px 30px;
|
|
|
- position: relative;
|
|
|
- &::before {
|
|
|
- display: block;
|
|
|
- content: '';
|
|
|
- width: 6px;
|
|
|
- height: 30px;
|
|
|
- background-color: #fff;
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- left: 12px;
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-: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>
|