menduner-uniapp/pagesB/jobFair/jobItem.vue

<template>
  <view>
    <view v-if="list?.length" class="ss-p-b-30 ss-p-t-20 ss-p-x-30">
			<view v-for="(item, index) in list" :key="index" class="mList">
				<view v-if="item?.hrName" class="d-flex align-center item-top">
          <view class="avatarBox">
            <image class="enterAvatar" :src="getUserAvatar(item.hrHeadImg)"></image>
          </view>
          <view class="ss-m-l-20 label-text">{{ item?.hrName }}</view>
        </view>
        <view class="list-shape" :style="{'border-radius': item?.hrName ? '0 0 12px 12px' : '12px'}">
          <view @tap.stop="handleToDetail(item)">
						<view class="titleBox">
							<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">
							<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>
          <view class="sub-li-bottom ss-m-t-20">
						<view class="sub-li-bottom-item color-primary" @tap.stop="handleToResume(item)">{{ item.count || 0 }} 已投递简历</view>
						<view v-if="tab === 0" class="sub-li-bottom-item color-error" @tap.stop="handleAction(0, item.id)">关闭</view>
						<view v-else class="sub-li-bottom-item color-primary" @tap.stop="handleAction(1, item.id)">激活</view>
          </view>
        </view>
			</view>
		</view>

		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog 
				type="warn" 
				cancelText="取消" 
				confirmText="确定" 
				title="系统提示" 
				:content="`是否确认${actionType === 0 ? '关闭' : '激活'}此职位？`" 
				@confirm="handleActionConfirm"
				@close="handleActionClose"
			></uni-popup-dialog>
		</uni-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { formatName } from '@/utils/getText'
import { getUserAvatar } from '@/utils/avatar'
import { closeJobAdvertised, enableJobAdvertised } from '@/api/new/position'

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

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


// 查看职位投递简历
const handleToResume = (val) => {
	uni.navigateTo({
		url: `/pagesA/resume/index?jobId=${val.id}&jobName=${formatName(val.name)}&jobFairId=${props.jobFairId}&jobFairName=${props.jobFairName}`
	})
}

// 职位激活、关闭
const popup = ref()
const actionId = ref('')
const actionType = ref('')
const handleAction = (type, id) => {
	actionId.value = id
	actionType.value = type
	popup.value.open()
}
const handleActionClose = () => {
	actionId.value = ''
	actionType.value = ''
	popup.value.close()
}
const handleActionConfirm = async () => {
	if (!actionId.value || !props.jobFairId) {
		uni.showToast({ title: '正在维护中，请稍后再试', icon: 'none', duration: 2000 })
		return
	}
	uni.showLoading({ title: '加载中' })
	const api = actionType.value === 0 ? closeJobAdvertised : enableJobAdvertised
	try {
		await api(actionId.value)
		uni.showToast({ title: '操作成功', icon: 'none' })
		emit('refresh')
	} finally {
		uni.hideLoading()
		actionId.value = ''
		actionType.value = ''
	}
}
</script>

<style scoped lang="scss">
.enterAvatar{
	width: 60rpx;
	height: 60rpx;
	margin: auto;
	border-radius: 50%;
}
.avatarBox {
  max-width: 60rpx;
  max-height: 60rpx;
}
.item-top {
  padding: 20rpx 30rpx;
  background: linear-gradient(90deg,#f5fcfc,#fcfbfa);
  border-radius: 12px 12px 0 0;
  font-size: 28rpx;
  color: #0E100F;
  .label-text {
	  max-width: 100%;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  overflow: hidden;
  }
}
.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;
  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 {
  background-color: #fff;
	padding: 30rpx;
  .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;
	position: relative;
  box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.17);
	background-color: #fbfbfb;
	border-radius: 12px;
}
</style>