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">
        <uni-card v-for="(val, index) in items" :key="index" :is-shadow="true" :border='false' shadow="0px 0px 3px 1px rgba(0,0,0,0.1)">
          <view class="d-flex align-center" @click="handleToEnterprise(val)">
            <image class="enterAvatar" :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="font-size-16 enterpriseName">{{ val.enterprise.anotherName || val.enterprise.name }}</view>
              <view class="ss-m-t-5">
                <span class="color-999">{{ val.enterprise?.industryName || '' }}</span>
                <span class="divider tag-gap1" v-if="val.enterprise?.industryName && val.enterprise?.scaleName"> | </span>
                <span class="color-999">{{ 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;"
                />
              </view>
            </view>
          </view>
          <view class="line 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">{{ k.name }}</view>
                <span v-if="!k.payFrom && !k.payTo" class="salary-text">面议</span>
                <span v-else class="salary-text">{{ k.payFrom }}-{{ k.payTo }}{{ k.payName ? '/' + k.payName : '' }}</span>
              </view>
              <view style="font-size: 13px;" class="ss-m-t-5">
                <span class="tag-gap" style="color: #808080;">
                  <span>{{ k.areaName }}</span>
                  <span class="ss-m-x-10" v-if="k.areaName && k.eduName">|</span>
                  <span>{{ k.eduName }}</span>
                  <span class="ss-m-x-10" v-if="k.expName">|</span>
                  <span>{{ k.expName }}</span>
                </span>
              </view>
            </view>
          </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>
    </scroll-view>
  </view>
</template>

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

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 handleToEnterprise = (val) => {
  uni.navigateTo({
    url: `/pagesB/companyDetail/index?id=${val.enterprise?.id}`
  })
}

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

</script>

<style scoped lang="scss">
.enterpriseName {
  color: #404040;
  font-weight: 700;
}
.enterAvatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: auto;
}
.line {
  border-top: 1px solid #ccc;
}
.list-shape {
  background-color: #fff;
  border-radius: 12px 12px 0 0;
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.salary-text {
	float: right;
  font-size: 15px;
	color: #CEC149;
  font-weight: 700;
}
.job-name {
  font-size: 16px;
  font-weight: 700;
  color: #345768;
  max-width: 50vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>