menduner-uniapp/components/PositionList/index.vue

<template>
  <view v-if="list.length > 0">
    <view v-for="(item, index) in list" @click="toDetail(item)" :key="index">
      <view class="list-shape">
        <!-- 职位+热度 -->
        <view class="mar">
          <span style="font-size: 16px;font-weight: 700;color: black;">{{item.job?.name}}</span>
          <span class="mar" v-if="item.job?.hire">
            <uni-icons type="fire-filled" size="25" color="#ff770d"></uni-icons>
          </span>
          <span class="salary-text">{{ item.job?.payFrom }}-{{ item.job?.payTo }}/{{ item.job?.payName }}</span>
        </view>
        <!-- 工作地+频次+周期 -->
        <view style="font-size: 13px;" class="mt">
          <span class="tag-gap">
            <span>{{item.job?.areaName }}</span>
            <span class="viewider">|</span>
            <span>{{item.job?.eduName }}</span>
            <span class="viewider">|</span>
            <span>{{item.job?.expName }}</span>
          </span>
          <!-- <span class="date-time">
            <span>2024-07-14</span>
          </span> -->
        </view>
        <!-- 岗位tag  -->
        <view class="mt" v-if="showWelfareTag">
          <uni-tag 
            v-for="(tag,i) in item.enterprise?.welfareList || []"
            :key="i"
            class="tag-gap"
            :text="tag"
            inverted="false"
            size="mini"
            custom-style="background-color: #eef1f7;color:#7f828b;border-color:#eef1f7;"
          />
        </view>
      </view>
      <!-- 企业信息 -->
      <view class=sub-li-bottom>
        <view>
          <span style="font-weight: bold;" class="mr">{{ item.enterprise?.anotherName || ' -- ' }}</span>
          <span>{{ item.enterprise?.industryName || '行业未知' }}</span>
          <span class="divider tag-gap1"> | </span>
          <span class="mr">{{ item.enterprise?.scaleName || '规模未知' }}</span>
        </view>
        <view class="avatarBox">
          <image class="enterAvatar ml" :src="item.enterprise?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
        </view>
      </view>
    </view>
    <view v-if="props.noMore" class="noMore">暂无更多数据</view>
  </view>
</template>
<script setup>
// import { ref } from 'vue'
const props = defineProps({
  list: { type: Array, default: () => [] },
  noMore: { type: Boolean, default: false },
  showWelfareTag: { type: Boolean, default: true }
})

//岗位详情
const toDetail = (item) =>{
  uni.navigateTo({
  	url:`/pagesB/companyDetail/index?jobId=${item.job?.id}`
  })
}

</script>

<style scoped lang="scss">
.noMore{
  margin: 20px 0;
}

.mar{
  margin: 5px 0;
}

.date-time{
  color:#d9d0d2;
  float: right;
}

.divided-line {
  width: 100%;
  height: 1px;
  background-color: #f0f2f7;
  margin: 20px 0;

}
.enterAvatar{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin: auto;
}

.sub-li-bottom {
  display: flex;
  justify-content:space-between;
  align-items: center;
  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
  font-size: 13px;
  padding: 5px 30rpx;
  .avatarBox {
    max-width: 40px;
    max-height: 40px;
  }
}
</style>