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" class="list-shape">
        <!-- 职位+热度 -->
        <view class="mar">
          <span style="font-size: 16px;font-weight: 700;color: black;">{{item.enterpriseRecruit.enterpriseRecruitJobName + (index+1)}}</span>
          <span class="mar" v-if="item.enterpriseRecruit.hot">
            <uni-icons type="fire-filled" size="25" color="#ff770d"></uni-icons>
          </span>
          <span class="salary-text">{{item.enterpriseRecruit.enterpriseRecruitSalary + '/天'}}</span>
        </view>
        <!-- 工作地+频次+周期 -->
        <view style="font-size: 13px;">
          <span class="tag-gap">
            <span>{{item.enterpriseRecruit.workCityName }}</span>
            <span class="viewider">|</span>
            <span>5 / 每周</span>
          </span>
          <span class="date-time">
            <span>2024-07-14</span>
          </span>
        </view>
        <!-- 岗位tag  -->
        <view>
          <uni-tag 
            v-for="(tag,i) in item.enterpriseRecruitTags"
            :key="i"
            class="tag-gap"
            :text="tag.title"
            inverted="false"
            size="mini"
            custom-style="background-color: #eef1f7;color:#7f828b;border-color:#eef1f7;"
          />
        </view>
        <!-- 企业信息 -->
        <view v-if="!!item.enterprise.enterpriseName" class="mar">
          <view style="margin:10px 0px;font-size:13px;" class="f-horizon">
            <span style="display: flex;">
              <image  class="enterAvatar" :src="item.enterprise.headImg ? item.enterprise.headImg : (item.enterprise.employeeSex == '女' ? 'https://minio.citupro.com/dev/static/4.png' : 'https://minio.citupro.com/dev/static/14.png')"></image>
              <span class="ml" style="width:50vw;">
                <view style="width:50vw;font-weight: bold;">{{item.enterprise.enterpriseName}} </view>
                <view class="dis">
                  <view class="show-more" :style="{'width': item.enterprise.enterpriseIndustry == '' ? '14vw' : '26vw'}">{{!!item.enterprise.enterpriseIndustry ? item.enterprise.enterpriseIndustry : '行业未知'}}</view>
                  <span class="divider tag-gap"> | </span>
                  <span>{{ !!item.enterprise.scaleChinese ? item.enterprise.scaleChinese : '人数未知' }}</span>
                </view>
              </span>
            </span>
          </view>
        </view>
        <!-- <view class="divided-line"></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 },
  // idValue: { type: String, default: 'id' },
  // labelValue: { type: String, default: 'label' },
  // selectIdValue: { type: String, default: 'id' },
  // selectLabelValue: { type: String, default: 'label' },
  // useApiData: { type: Boolean, default: true },
})

//岗位详情
const toDetail = (item) =>{
  // uni.navigateTo({
  // 	url:`/pages/index/positionDetail?studenId=${studentId}&&enterpriseRecruitId=${enterpriseRecruitId}`
  // })
}

</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;
}
</style>