menduner-uniapp/pagesB/recommendEnterprise/index.vue

<template>
  <view style="padding-bottom: 30px;">
    <scroll-view scroll-y="true" @scrolltolower="loadingMore" style="height: 100vh;">
      <view v-if="items.length">
        <view v-for="(val, index) in items" :key="index" class="list-item defaultBgc default-border">
          <view class="d-flex align-center" @click="jumpToEnterpriseDetail(val.enterprise.id)">
            <image class="enterAvatar default-border default-radius" :src="val.enterprise.logoUrl ? val.enterprise.logoUrl : 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
            <view class="ss-m-l-20" style="flex: 1;">
              <view class="enterpriseName default-text-color MiSans-Semibold">{{ formatName(val.enterprise.anotherName || val.enterprise.name) }}</view>
              <view class="ss-m-t-5" style="font-size: 24rpx;">
                <span class="color-666 MiSans-Normal ss-m-r-10">{{ val.enterprise?.industryName || '' }}</span>
                <span class="color-666 MiSans-Normal">{{ val.enterprise?.scaleName || '' }}</span>
              </view>
              <view class="ss-m-t-10">
                <uni-tag 
                  v-for="(tag,i) in val.enterprise?.welfareList || []"
                  :key="i"
                  class="tag-gap ss-m-r-5"
                  :text="tag"
                  inverted="false"
                  size="mini"
                  custom-style="background-color: #ececec; color: #666; border-color: #ececec; display: inline-block; font-family: MiSans-Normal;"
                />
              </view>
            </view>
          </view>
          <view class="default-border ss-m-y-20"></view>
          <view>
            <view class="list-shape" v-for="(k, i) in val.jobList" :key="k.id" @click="handleToPosition(k)" :style="{'padding-bottom': i !== val.jobList.length - 1 ? '10px' : ''}">
              <view class="titleBox my-5">
                <view class="job-name MiSans-Semibold default-text-color" :style="{'max-width': !k.payFrom && !k.payTo ? '65vw' : '50vw'}">{{ formatName(k.name) }}</view>
                <span v-if="!k.payFrom && !k.payTo" class="salary-text MiSans-Bold">面议</span>
                <span v-else class="salary-text MiSans-Bold">{{ k.payFrom }}-{{ k.payTo }}{{ k.payName ? '/' + k.payName : '' }}</span>
              </view>
              <view class="ss-m-t-5" style="font-size: 24rpx;">
                <span class="color-666">
                  <span class="MiSans-Normal ss-m-r-10">{{ k.area?.str ?? '全国' }}</span>
                  <span class="MiSans-Normal ss-m-r-10">{{ k.eduName }}</span>
                  <span class="MiSans-Normal">{{ k.expName }}</span>
                </span>
              </view>
            </view>
          </view>
        </view>
        <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>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref }  from 'vue'
import { getHotEnterprise } from '@/api/enterprise'
import { dealDictObjData, dealDictArrayData, jumpToEnterpriseDetail } from '@/utils/position'
import { formatName } from '@/utils/getText'

const more = ref('more')
const items = ref([])
const query = ref({
  pageNo: 1,
  pageSize: 10
})

// 精选企业列表
const getPopularEnterprise = async () => {
  const { data } = await getHotEnterprise(query.value)
  const list = data?.list || []
  if (!list.length && query.value.pageNo === 1) {
    items.value = []
    return
  }
  if (list?.length) {
    list.forEach(e => {
      e.enterprise = dealDictObjData({}, e.enterprise)
      if (e.jobList && e.jobList.length) e.jobList = dealDictArrayData([], e.jobList).slice(0, 2)
    })
    items.value = items.value.concat(list)
  }
  more.value = items.value.length === +data.total ? 'noMore' : 'more'
}
getPopularEnterprise()

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

// 职位详情
const handleToPosition = (k) => {
  const url = `/pagesB/positionDetail/index?id=${k.id}&area=${k.area?.str ?? '全国'}`
  uni.navigateTo({ url })
}

</script>

<style scoped lang="scss">
.list-item {
  margin: 30rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.17);
  &:last-child {
    margin-bottom: 0;
  }
  &:first-child {
    margin-top: 0;
  }
}
.enterpriseName {
  font-size: 30rpx;
  font-weight: 600;
  font-size: 30rpx;
  font-style: normal;
  text-transform: none;
}
.enterAvatar {
  width: 60px;
  height: 60px;
  margin: auto;
}
.list-shape {
  border-radius: 12px 12px 0 0;
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.salary-text {
	float: right;
  font-size: 15px;
	color: #00B760;
  font-weight: 500;
}
.job-name {
  font-size: 30rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>