menduner-uniapp/components/PositionList/index.vue

<template>
  <view class="ss-m-x-20">
    <!-- 岗位列表 -->
    <view v-if="list.length > 0" class="ss-p-b-30 ss-p-t-20">
      <view v-for="(item, index) in list" :key="index" class="mList default-border list-item-bgc"  @click="toDetail(item)">
        <view :class="{ 'disable': !jobFairId && item.job?.status === '1'}">
          <!-- 职位信息 -->
          <view class="list-shape" :style="`border-radius: ${props.showEntInfo ? '12px 12px 0 0' : '12px'};`">
            <!-- 职位 -->
            <view class="titleBox ss-m-y-10">
              <view style="display: flex;align-items: center;">
                <view v-if="item.job?.hire" class="iconfont icon-a-1_zhaopin ss-m-r-10" style="color: #e03506; font-size: 25px;"></view>
                <!-- 招聘会标识 -->
                <image
                  v-if="props.jobFairId || (props.showJobFairSign && item.job?.bizId)"
                  src="/static/svg/jobFair.svg"
                  class=" ss-m-r-10"
                  style="width: 20px; height: 20px;"
                ></image>
                <rich-text v-if="item.job?.name?.indexOf('style') !== -1" class="job-name MiSans-Semibold default-text-color" :nodes="item.job.name"></rich-text>
                <view v-else class="job-name MiSans-Semibold default-text-color">{{ formatName(item.job?.name) }}</view>
              </view>
            </view>
            <!-- 薪酬、工作地、学历、工作经验 -->
            <view class="ellipsis" style="max-width: 100%; align-items: baseline;">
              <span class="ss-m-r-20">
                <span v-if="!item.job?.payFrom && !item.job?.payTo" class="salary-text MiSans-Bold">面议</span>
                <span v-else class="salary-text MiSans-Bold">{{ item.job?.payFrom }}-{{ item.job?.payTo }}{{ item.job?.payName ? '/' + item.job?.payName : '' }}</span>
              </span>
                <span class="desc-tag font-size-13">
                  <span class="MiSans-Normal">{{item.job?.area?.str ?? '全国' }}</span>
                  <span class="divider-mx" v-if="item.job?.eduName">|</span>
                  <span class="MiSans-Normal">{{item.job?.eduName }}</span>
                  <span class="divider-mx" v-if="item.job?.expName">|</span>
                  <span class="MiSans-Normal">{{item.job?.expName }}</span>
                </span>
            </view>
            <!-- 岗位tag  -->
            <view class="ss-m-t-15" v-if="showWelfareTag">
              <uni-tag 
                v-for="(tag,i) in item.job?.tagList || []"
                :key="i"
                class="tag-gap MiSans-Normal"
                :text="tag"
                inverted="false"
                size="mini"
                custom-style="background-color: #ececec;color:#666;border-color:#ececec;display: inline-block;"
              />
            </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 / 100, 1)}元`"
                inverted="false"
                size="default"
                custom-style="background-color: #e2f0ef; color:#666; border-color:#e2f0ef;"
              />
            </view>
            <view
              v-if="props.showUpdateTime"
              class="font-size-13 color-666 ss-m-t-20 MiSans-Normal d-flex align-center"
            >
              <image src="https://minio.menduner.com/dev/2b50f8ccb13045a58c69e96ae1f986234452825b8ae01aba8fa08cabbcf86cd8.png" class="ss-m-r-20" style="width: 15px; height: 15px;"></image>
              更新时间：{{ timesTampChange(item?.job?.refreshTime || item.job?.updateTime, 'Y-M-D h:m') }}
            </view>
          </view>
          <!-- 企业信息 -->
          <view v-if="props.showEntInfo" class="sub-li-bottom" @tap="handleClickEnt(item)">
            <view class="avatarBox">
              <image class="enterAvatar ss-m-l-20 default-border default-radius" :src="item.enterprise?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
            </view>
            <view class="ss-m-l-35 MiSans-Normal" style="flex: 1; max-width: calc(100% - 40px);">
              <view class="default-text-color ellipsis" style="width: 98%;">{{ formatName(item.enterprise?.anotherName || item.enterprise.name) }}</view>
              <span class="color-666 ss-m-r-10 font-size-12">{{ item.enterprise?.industryName || '' }}</span>
              <span class="color-666 font-size-12">{{ item.enterprise?.scaleName || '' }}</span>
            </view>
          </view>
        </view>
        <view v-if="showReportBtn && isStudent && !item.internshipEnterprise" class="ss-m-y-30">
					<view class="ss-m-y-30" style="border-top: 1rpx solid #E1E4E9;"></view>
					<view style="text-align: right;" class="ss-m-x-30">
            <button
              @tap.stop="handleReport(item)"
              class="ss-m-l-10"
              type="warning"
              size="mini"
              style="color:#fff; backgroundColor:#00B760;borderColor:#00B760"
            >上报为实习企业</button>
					</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>
    <!-- 确认框 -->
    <uni-popup ref="confirmRef" type="dialog">
      <uni-popup-dialog
        type="warn"
        cancelText="取消"
        confirmText="确认" 
        title="系统提示"
        content="是否确定上报为实习企业？"
        @confirm="handleConfirm"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { commissionCalculation } from '@/utils/position'
import { timesTampChange } from '@/utils/date'
import { formatName } from '@/utils/getText'
import { ref, computed } from 'vue'
import { userStore } from '@/store/user'
import { reportStudentPracticeEnterprise } from '@/api/student'
const emit = defineEmits(['entClick', 'refresh'])

const props = defineProps({
  list: { type: Array, default: () => [] },
  jobFairId: { type: [String, Number], default: '' }, // 招聘会id
  showEntInfo: { type: Boolean, default: true },
  showReportBtn: { type: Boolean, default: false },
  showUpdateTime: { type: Boolean, default: true },
  noMore: { type: Boolean, default: false },
  showWelfareTag: { type: Boolean, default: true },
  showJobFairSign: { type: Boolean, default: false } // 是否展示招聘会标识
})

const useUserStore = userStore()
const isStudent = computed(() => useUserStore?.baseInfo?.type && Boolean(Number(useUserStore.baseInfo.type) === 1))

//岗位详情
const toDetail = (item) =>{
  if (!item?.job?.id) return
  let url = `/pagesB/positionDetail/index?id=${item.job.id}&area=${item.job.areaName}`
  if (props.jobFairId) url += `&jobFairId=${props.jobFairId}`
  uni.navigateTo({ url })
}

const handleClickEnt = (item) => {
  const info = {
    enterpriseId: item?.enterprise?.id || null,
    anotherName: item?.enterprise?.anotherName || null
  }
  emit('entClick', info)
}

const handleConfirm = async() => {
	try {
    const enterpriseId = handleVal.value?.enterprise?.id
    const jobId = handleVal.value?.job?.id
    await reportStudentPracticeEnterprise(enterpriseId, jobId)
    uni.showToast({ title: '上报成功', icon: 'success' })
	} catch (error) {
    uni.showToast({ title: error?.msg || error, icon: 'none' })
	} finally {
    confirmRef.value.close()
    emit('refresh')
	}
}

const confirmRef = ref()
const handleVal = ref('')

// 上报为实习企业
const handleReport = (val) => {
  if (!val?.enterprise?.id || !val?.job?.id) uni.showToast({ title: '企业或职位信息错误', icon: 'none' })
  handleVal.value = val
  confirmRef.value.open()
}

</script>

<style scoped lang="scss">
.enterAvatar{
	width: 60rpx;
	height: 60rpx;
	margin: auto;
}

.job-name {
  max-width: 80vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
  font-weight: 600;
  font-size: 30rpx;
}

.sub-li-bottom {
  display: flex;
  align-items: center;
  font-size: 13px;
  padding: 10rpx 30rpx 0 30rpx;
  border-radius: 0 0 12px 12px;
  margin-bottom: 20rpx;
  .avatarBox {
    max-width: 40px;
    max-height: 40px;
  }
}

.salary-text {
	font-size: 24rpx;
	color: #00B760;
	font-style: normal;
	text-transform: none;
}
.list-shape {
	padding: 10px 30rpx 10px;
  border-radius: 12px 12px 0 0;
  .titleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.desc-tag {
	font-size: 24rpx;
	color: #666666;
	font-style: normal;
	text-transform: none;
}
.tag-gap{
	margin: 10rpx 10rpx 10rpx 0;
}
.divider-mx{
	margin: 0 10rpx;
}

.mList {
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.17);
}
/* 列表触底暂无更多 */
.noMore{ text-align:center; color:grey;margin: 20px 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: #ff5252;
    top: 0;
    border-radius: 12px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
  }
}
</style>