menduner-uniapp/components/PositionList/index.vue

<template>
  <view class="ss-m-x-20">
    <!-- 岗位列表 -->
    <view v-if="data?.length" class="ss-p-b-30 ss-p-t-20">
      <view v-for="(item, index) in data" :key="index" class="mList">
        <!-- 职位信息 -->
        <view class="list-shape" style="border-radius: 12px;">
          <!-- 职位 -->
          <view class="titleBox my-5">
            <view style="display: flex;align-items: center;">
              <rich-text v-if="item.name?.indexOf('style') !== -1" class="job-name" :nodes="item.name"></rich-text>
              <view v-else class="job-name">{{ formatName(item.name) }}</view>
            </view>
          </view>
          <!-- 薪酬、工作地、学历、工作经验 -->
          <view class="font-size-13 ellipsis ss-m-5" style="color: #808080;">
            <span>{{item.positionName }}</span>
          </view>
          <view class="d-flex align-center justify-space-between">
            <view class="font-size-13 ellipsis" style="flex: 1;">
              <span class="tag-gap" style="color: #808080;">
                <span>{{item.area?.str ?? '全国' }}</span>
                <span class="divider-mx" v-if="item.eduName">|</span>
                <span>{{item.eduName }}</span>
                <span class="divider-mx" v-if="item.expName">|</span>
                <span>{{item.expName }}</span>
                <span class="divider-mx">|</span>
                <span>{{!item.payFrom && !item.payTo ? '面议' : `${item.payFrom}-${item.payTo}${item.payName ? '/' + item.payName : ''}` }}</span>
              </span>
              <view class="font-size-13 ss-m-t-10" style="color: #808080;">
                <view>刷新时间：{{ item.refreshTime ? timesTampChange(item.refreshTime, 'Y-M-D h:m') : '暂无' }}</view>
              </view>
            </view>
            <view class="d-flex flex-column align-center justify-center resumeCount" @tap="handleToResume(item)">
              <view style="font-size: 14px;">{{ item.payFrom || 0 }}</view>
              <view>已投递简历</view>
            </view>
          </view>
          <view class="font-size-13 color-666 ss-m-t-10">
            <view class="ss-m-t-10">到期时间：{{ item.expireTime ? timesTampChange(item.expireTime, 'Y-M-D') : '长期有效' }}</view>
          </view>
          <view class="sub-li-bottom">
            <!-- <view v-if="tab === 1">
              <span class="cursor-pointer" @tap="handleAction(item.top ? 4 : 3, '', item)">{{ item.top ? '取消置顶' : $t('common.topping') }}</span>
              <span class="divider-mx">|</span>
              <span class="cursor-pointer" @tap="handleAction(0, '', item)">{{ $t('common.close') }}</span>
            </view> -->
            <!-- <span v-if="(item.status-0) === 99 && tab === 0" class="cursor-pointer color-primary" @tap="toPay(item)">发布</span> -->
            <!-- <span class="divider-mx" v-if="tab !== 2 && tab !== 3">|</span> -->
            <span v-if="tab === 2" class="cursor-pointer" @tap="handleAction(1, '', item, item)">激活</span>
            <span class="divider-mx" v-if="tab === 2"></span>
            <span class="cursor-pointer" @tap="handleDetail(item)">详情</span>  
            <!-- <view v-if="tab !== 3">
              <span class="divider-mx">|</span>
              <span class="cursor-pointer" :style="{'color': item.edit ? '#333' : '#999'}" @tap="handleEdit(item)">{{ $t('common.edit') }}</span>
            </view> -->
          </view>
        </view>
      </view>
      <view v-if="props.noMore" class="noMore">暂无更多数据</view>
    </view>
    <view v-else>
      <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
      <view style="color: gray; text-align: center;">暂无数据</view>
    </view>
  </view>
</template>

<script setup>
// import { commissionCalculation } from '@/utils/position'
import { timesTampChange } from '@/utils/date'
import { formatName } from '@/utils/getText'
import { ref, watch } from 'vue'
const emit = defineEmits(['entClick'])

const props = defineProps({
  tab: { type: Number, default: 0 },
  list: { type: Array, default: () => [] },
  noMore: { type: Boolean, default: false },
  showWelfareTag: { type: Boolean, default: true }
})

const data = ref()
watch(
  () => props.list, 
  (newVal) => {
    data.value = newVal?.length ? newVal : []
  },
  { immediate: true },
  { deep: true }
)

// 职位关闭、激活、刷新、置顶
const handleAction = async (index, type, { id }, item) => {
}

// 职位关闭、激活、刷新、置顶
const handleEdit = async (val) => {
  if (!val.id || !val.edit) {
    uni.showToast({
      title: '职位发布时间超过24小时的不支持编辑',
      icon: 'none',
      duration: 2000
    })
    return
  } 
}

// 支付
const toPay = async (val) => {
}

// 职位详情
const handleDetail = (item) => {
  if (!item.id) return
  let url = `/pagesB/positionDetail/index?id=${item.id}&area=${item.areaName}`
  uni.navigateTo({ url })
}

// 查看职位投递简历
const handleToResume = (val) => {
  let path = `/recruit/enterprise/invite/resume?id=${val.id}`
  if (val.bizId) path += `&jobFairId=${val.bizId}`
  router.push(path)
}

</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: #0E100F;
  max-width: 80vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sub-li-bottom {
  text-align: right;
  border-top: 1px dashed #eee;
  margin-top: 10px;
  padding-top: 10px;
  font-size: 13px;
  color: #666;
}

.salary-text {
	float: right;
	color: #00B760;
  font-weight: 700;
}
.list-shape {
	padding: 10px 30rpx 10px;
  background-color: #fff;
  border-radius: 12px 12px 0 0;
  .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;
}
.mList {
  margin-bottom: 20rpx;
}
/* 列表触底暂无更多 */
.noMore{ text-align:center; color:grey; }
.mt { margin-top: 15rpx; }
.mb { margin-bottom: 10rpx; }
.ml { margin-left: 20rpx; }
.mr { margin-right: 20rpx; }
.mr-10{ margin-right: 10rpx; }
.my-5{ margin: 5px 0; }
.disable {
  position: relative;
  overflow: hidden;
  &::after {
    content: '已失效';
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #fc796f;
    top: 0;
    border-radius: 12px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
  }
}
.resumeCount {
  color: #00B760;
  font-size: 12px;
  margin: 0 10px;
}
</style>