menduner-uniapp/pagesB/recommendEnterprise/index.vue

<template>
  <view style="padding-bottom: 30px;">
    <uni-card v-for="(val, index) in list" :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>
  </view>
</template>

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

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

// 精选企业列表
const getPopularEnterprise = async () => {
  try {
    const { data } = await getHotEnterprise(query.value)
    list.value = data.list.map(e => {
      e.enterprise = dealDictObjData({}, e.enterprise)
      if (e.jobList && e.jobList.length) e.jobList = dealDictArrayData([], e.jobList).slice(0, 2)
      return e
    })
  } catch (err) {
    uni.showToast({ icon: 'none', title: err.msg })
  }
}
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}`
  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>