menduner-uniapp/components/PositionList/index.vue

<template>
  <view v-if="list.length > 0">
    <view v-for="(item, index) in list" :key="index">
      <!-- 职位信息 -->
      <view class="list-shape" @click="toDetail(1, item)">
        <!-- 职位 -->
        <view class="titleBox my-5">
          <view style="display: flex;align-items: center;">
            <uni-icons v-if="item.job?.hire" class="icon-a-1_zhaopin ss-m-r-10" custom-prefix="iconfont" color="#e03506" size="25"/>
            <view class="job-name" style="">{{item.job?.name}}</view>
          </view>
          <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="divider-mx" v-if="item.job?.areaName && item.job?.jobName">|</span>
            <span>{{item.job?.eduName }}</span>
            <span class="divider-mx" v-if="item.job?.expName">|</span>
            <span>{{item.job?.expName }}</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 style="text-align: end;" v-if="item.job?.hire">
          <uni-tag
            class="ss-m-l-10"
            v-if="item?.job?.hirePrice && item?.job?.hirePrice > 0" 
            :text="`赏金：${commissionCalculation(item.job.hirePrice, 1)}元`"
            inverted="false"
            size="default"
            custom-style="background-color: #e2f0ef; color:#00897B; border-color:#e2f0ef;"
          />
        </view>
      </view>
      <!-- 企业信息 -->
      <view class="sub-li-bottom">
        <view class="avatarBox" @click="toDetail(0, item)">
          <image class="enterAvatar ml" :src="item.enterprise?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
        </view>
        <view class="ss-m-l-35">
          <!-- 企业简称 -->
          <span
            class="mr"
            style="font-weight: bold;"
            @click="toDetail(0, item)"
          >
            {{ item.enterprise?.anotherName || ' -- ' }}
          </span>
          <span>{{ item.enterprise?.industryName || '行业未知' }}</span>
          <span class="divider tag-gap1"> | </span>
          <span class="mr">{{ item.enterprise?.scaleName || '规模未知' }}</span>
        </view>
      </view>
    </view>
    <view v-if="props.noMore" class="noMore">暂无更多数据</view>
  </view>
</template>
<script setup>
import { commissionCalculation } from '@/utils/position'
// import { ref } from 'vue'
const props = defineProps({
  list: { type: Array, default: () => [] },
  noMore: { type: Boolean, default: false },
  showWelfareTag: { type: Boolean, default: true }
})

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

</script>

<style scoped lang="scss">
.noMore{
  margin: 20px 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;
}

.job-name {
  font-size: 16px;
  font-weight: 700;
  color: black;
  max-width: 50vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sub-li-bottom {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
  font-size: 13px;
  padding: 5px;
  .avatarBox {
    max-width: 40px;
    max-height: 40px;
  }
}

.salary-text {
	float: right;
	color: #fe574a;
}
.list-shape {
	padding: 10px 30rpx 10px;
  margin-top: 10px;
  background-color: #fff;
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.tag-gap{
	margin: 10rpx 10rpx 10rpx 0;
}
.tag-gap1{
  margin-bottom: 20px;
}
.divider-mx{
	margin: 0 10rpx;
}
.divider {
	color:#e4d4d2;
}

//公司名称
.cer-end{
  position: absolute;
  top: 85%;
  right: 16%;
}
.cer-text{
  text-decoration: underline;
  margin: 0 5rpx;
}
//一行展示不全...
.dis{
	display: flex;
	align-items: center;
}
.show-more{
	width: 26vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 列表触底暂无更多 */
.noMore{ text-align:center; color:grey; }
.mt { margin-top: 10rpx; }
.mb { margin-bottom: 10rpx; }
.ml { margin-left: 20rpx; }
.mr { margin-right: 20rpx; }
.mr-10{ margin-right: 10rpx; }
.my-5{ margin: 5px 0; }
</style>