menduner-uniapp/pagesB/jobFair/enterprises.vue

<!-- 招聘会/企业 -->
<template>
  <view class="box defaultBgc">
    <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
      <view>
        <!-- 顶部 -->
        <view class="white-bgc stick ss-p-t-10 ss-p-b-10">
          <view class="titleBox">
            <view class="jobFairName">{{ jobFairName }}</view>
          </view>
          <!-- 搜索条 -->
          <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>
        <view v-if="listData?.length" class="listDataBox">
          <uni-card v-for="val in listData" :key="val.id" @click="toDetail(val)" :is-shadow="true" :border='false' shadow="0px 0px 3px 1px rgba(0,0,0,0.1)">
            <view class="d-flex align-center ss-m-30" @click="null">
              <image class="enterAvatar" :src="val.logoUrl ? val.logoUrl : 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
              <view class="ss-m-l-20" style="flex: 1;">
                <view class="font-size-16 enterpriseName">{{ formatName(val.anotherName || val.name) }}</view>
                <view class="ss-m-t-5">
                  <span class="color-999">{{ val?.industryName || '' }}</span>
                  <span class="divider tag-gap1" v-if="val?.industryName && val?.scaleName"> | </span>
                  <span class="color-999">{{ val?.scaleName || '' }}</span>
                </view>
                <view class="ss-m-t-10" style="overflow: hidden;height: 48px;">
                  <uni-tag 
                    v-for="(tag,i) in val?.welfareList || []"
                    :key="i"
                    class="ss-m-r-5"
                    :text="tag"
                    inverted="false"
                    size="mini"
                    custom-style="background-color: #ececec; color: #666; border-color: #ececec; display: inline-block;"
                  />
                </view>
              </view>
            </view>
            <view class="jobCount">{{ val.jobCount }}个在线职位招聘中</view>
          </uni-card>
          <uni-load-more :status="more" />
        </view>
        <view v-else class="nodata-img-parent">
          <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { dealDictArrayData } from '@/utils/position'
import { getJobFairEnterprisePage } from '@/api/jobFair'
import { formatName } from '@/utils/getText'
import { onLoad } from '@dcloudio/uni-app'

const more = ref('more')
const listData = ref([])
const query = reactive({
  pageSize: 20, 
  pageNo: 1,
  keyword: '',
  jobFairId: undefined,
})

const jobFairName = ref('')

onLoad(async (options) => {
  jobFairName.value = options.jobFairName
  if (options?.jobFairId) {
    query.jobFairId = options.jobFairId
    getData()
	}
})

const getData = async () => {
  if (!query.jobFairId) {
    uni.showToast({ title: '进去招聘会失败！', icon: 'none', duration: 2000 })
    return
  }
  try {
    const res = await getJobFairEnterprisePage(query)
    const list = res?.data?.list || []
    // const list = [...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list, ...res?.data?.list] || []
    listData.value = listData.value.concat(dealDictArrayData([], list))
    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 onSearch = () => {
  query.pageNo = 1
  listData.value = []
  getData()
}

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

// const goBack = () => {
// 	uni.navigateTo({
// 		url: '/pagesB/jobFair/index'
// 	})
// }

const toDetail = (item) =>{
  if (!item?.id || !(item?.jobFairId ?? query.jobFairId)) return
  const url = `/pagesB/jobFair/positions?jobFairId=${query.jobFairId || item.jobFairId}&enterpriseId=${item.id}&entName=${item.anotherName}`
  uni.navigateTo({ url })
}

</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;
}
.listDataBox {
  padding-bottom: 120rpx;
}
.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;
}
.goBack {
  width: 110px;
  height: 32px;
  font-size: 13px;
  background-color: #00897B;
  color: #fff;
  // border-radius: 0 5px 5px 0;
  z-index: 9;
}
:deep(.picker-view) {
  padding-bottom: 80px !important;
}

.jobCount {
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  font-size: 15px;
  background: linear-gradient(to right, #12ebb0, #427daa);
}

:deep(.uni-card) {
  padding: 0 !important;
  .uni-card__content {
    padding: 0 !important;
  }
}

.enterpriseName {
  color: #404040;
  font-weight: 700;
}
.enterAvatar {
  width: 60px;
  height: 60px;
  // border-radius: 50%;
  margin: auto;
}
.titleBox {
  text-align: left;
  padding: 15px 20rpx;
  .title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
  }
  .jobFairName {
    color: #00897b;
  }
}
</style>