menduner-uniapp/pagesB/jobFair/jobItem.vue

<template>
  <view class="ss-m-x-20">
    <view v-if="list?.length" class="ss-p-b-30 ss-p-t-20">
      <view v-for="(item, index) in list" :key="index" class="mList">
        <view class="list-shape" style="border-radius: 12px;">
          <view class="titleBox" @tap.stop="handleToDetail(item)">
            <view style="display: flex;align-items: center;">
							<image src="/static/svg/jobFair.svg" class=" ss-m-r-10" style="width: 20px; height: 20px;"></image>
              <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="d-flex align-center justify-space-between ss-m-t-20" @tap.stop="handleToDetail(item)">
            <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>
          </view>
          <view class="sub-li-bottom">
						<view class="sub-li-bottom-item color-primary" @tap.stop="handleToResume(item)">{{ item.count || 0 }} 已投递简历</view>
						<view class="sub-li-bottom-item color-error" @tap.stop="handleRemove(item)">移出招聘会</view>
          </view>
        </view>
      </view>
    </view>

		<uni-popup ref="removePopup" type="dialog">
			<uni-popup-dialog 
				type="warn" 
				cancelText="取消" 
				confirmText="确定" 
				title="系统提示" 
				content="是否确认将此职位移出招聘会？" 
				@confirm="handleRemoveConfirm"
				@close="handleRemoveClose"
			></uni-popup-dialog>
		</uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { formatName } from '@/utils/getText'
import { quitJobFairPosition } from '@/api/jobFair'

const emit = defineEmits(['refresh'])
const props = defineProps({
	list: Array,
	jobFairId: [String, Number]
})

// 查看职位详情
const handleToDetail = (val) => {
	console.log(val, '查看职位详情')
	uni.navigateTo({
		url: `pagesB/positionDetail/index?jobId=${val.id}&jobFairId=${props.jobFairId}`
	})
}


// 查看职位投递简历
const handleToResume = (val) => {
	console.log(val, '投递简历数')
}

// 移出招聘会
const removePopup = ref()
const removeParams = ref({})
const handleRemove = (val) => {
	removeParams.value = val
	removePopup.value.open()
}
const handleRemoveClose = () => {
	removeParams.value = {}
  removePopup.value.close()
}
const handleRemoveConfirm = async () => {
	if (!removeParams.value.id || !props.jobFairId) {
		uni.showToast({ title: '正在维护中，请稍后再试', icon: 'none', duration: 2000 })
		return
	}
	uni.showLoading({ title: '加载中' })
	try {
		await quitJobFairPosition({ jobFairId: props.jobFairId, jobId: removeParams.value.id })
		uni.hideLoading()
		uni.showToast({ title: '移出成功', icon: 'none' })
		removeParams.value = {}
		emit('refresh')
	} catch {
		removeParams.value = {}
		uni.hideLoading()
	}
}
</script>

<style scoped lang="scss">
.job-name {
  font-size: 16px;
  font-weight: 700;
  color: #0E100F;
  max-width: 80vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sub-li-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  font-size: 13px;
  color: #666;
	&-item {
		width: 50%;
		height: 35px;
		line-height: 35px;
		text-align: center;
		margin-right: 15px;
		background-color: #f7f8fa;
		border-radius: 4px;
		&:nth-child(2) {
			margin-right: 0;
		}
	}
}

.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;
}
.divider-mx{
	margin: 0 10rpx;
}
.divider {
	color:#e4d4d2;
}
.mList {
  margin-bottom: 20rpx;
}
</style>