menduner-uniapp/pagesA/interview/components/item.vue

<template>
	<view>
		<uni-card v-for="(val, index) in items" :key="index" :is-shadow="true" :border='false' shadow="0px 0px 3px 1px rgba(0,0,0,0.1)">
			<!-- 基本信息 -->
			<view class="d-flex align-center">
				<view class="user-avatar">
					<image class="user-avatar-img" :src="getUserAvatar(val.person?.avatar, val.person?.sex)" mode="scaleToFill"></image>
					<image class="user-avatar-sex" :src="val?.person?.sex ? val?.person?.sex === '1' ? '/static/img/man.png' : '/static/img/female.png' : ''" alt="" mode="scaleToFill" />
				</view>
				<view style="flex: 1; margin-left: 10px;">
					<view class="d-flex justify-space-between align-center">
						<view class="font-size-18">{{ val.person?.name }}</view>
            <view :style="{'color': colorData[val.status]}">
              {{ val.status ? statusList.find(i => i.value === val.status)?.label : '' }}
            </view>
					</view>
				</view>
			</view>

			<view class="ss-m-t-15 color-999">
				<view>
					投递职位：
					<image v-if="val.jobFairId" src="/static/svg/jobFair.svg" style="width: 15px; height: 15px;"></image>
					{{ formatName(val.job?.name) }}
				</view>
        <view>联系电话：{{ val.person?.phone ?? '未填写' }}</view>
				<view>面试时间：{{ timesTampChange(val.time, 'Y-M-D h:m') }}</view>
			</view>

			<view class="sub-li-bottom ss-m-t-20">
        <template v-if="val.job?.status !== '1'" >
          <view v-if="editStatus.indexOf(val.status) !== -1" class="sub-li-bottom-item color-primary" @tap.stop="handleActionClick('edit', val)">修改面试</view>
          <view v-if="againStatus.indexOf(val.status) !== -1" class="sub-li-bottom-item color-primary" @tap.stop="handleActionClick('edit', val)">重新邀约</view>
        </template>
        <view v-if="val.status === '1'" class="sub-li-bottom-item color-primary" @click="handleActionClick('completed', val)">完成面试</view>
        <view v-if="val.status === '3'" class="sub-li-bottom-item color-primary" @click="handleActionClick('feedback', val)">填写反馈</view>
				<view 
					class="sub-li-bottom-item d-flex align-center justify-center" 
					@tap.stop="handleLoadMore(val)" 
					:style="{'color': val?.job?.status === '1' || !actionItems(val)?.length ? '#ccc' : '#00B760'}"
				>
					<view>更多操作</view>
					<uni-icons type="list" class="ss-m-l-10" size="20" :color="!actionItems(val)?.length ? '#ccc' : '#00B760'"></uni-icons>
				</view>
			</view>
		</uni-card>


		<!-- 更多操作 -->
		<uni-popup ref="popup" type="bottom" :mask-click="true">
      <view class="actions" v-if="itemData && Object.keys(itemData).length">
				<view
					class="action-item"
					v-for="(val, index) in actionItems(itemData)" 
					:key="index"
					@tap.stop="handleActionClick(val.value, itemData)"
				>{{ val.title }}</view>
			</view>
      <button class="big-cancel-button" @tap.stop="handleClosePopup">取消</button>
    </uni-popup>

    <!-- 完成面试 -->
    <uni-popup ref="finishPopup" type="dialog">
			<uni-popup-dialog 
        type="warn" 
        cancelText="取消"
        confirmText="确定" 
        title="系统提示" 
        content="是否确认已完成面试？"
        @confirm="handleFinishConfirm"
        @close="handleFinishClose"
      ></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { timesTampChange } from '@/utils/date'
import { getUserAvatar } from '@/utils/avatar'
import { formatName } from '@/utils/getText'
import { completedInterviewInvite } from '@/api/interview'

const emit = defineEmits(['refresh'])
const props = defineProps({ items: Array, current: [Number, String], statusList: Array })

const editStatus = ['0'] // 修改面试状态
const againStatus = ['98', '99'] // 重新邀约状态
const colorData = {
  '0': 'orange',
  '1': 'green',
  '2': 'green',
  '3': '#00B760',
  '4': '#999',
  '5': '#FE574A',
  '98': '#FE574A',
  '99': '#999'
}

const popup = ref()
const finishPopup = ref()
const itemData = ref({})

// 更多操作
const handleLoadMore = (val) => {
	if (val?.job?.status === '1') {
		itemData.value = {}
		uni.showToast({ title: '职位已关闭，暂无更多操作', icon: 'none' })
		return
	}
	if (!actionItems(val).length) {
		itemData.value = {}
		uni.showToast({ title: '暂无更多操作', icon: 'none' })
		return
	}
	itemData.value = val
	popup.value.open()
}

// 关闭操作弹窗
const handleClosePopup = () => {
	popup.value.close()
	itemData.value = {}
}

// 完成面试
const handleFinishClose = () => {
  if (actionItems(itemData.value).length && actionItems(itemData.value).find(e => e.value === 'completed')) handleClosePopup()
  else itemData.value = {}
  finishPopup.value.close()
}
const handleFinishConfirm = async () => {
  if (!itemData.value || !itemData.value.id) return
  try {
    await completedInterviewInvite(itemData.value.id)
    uni.showToast({ title: '操作成功', icon: 'none' })
    emit('refresh')
    handleFinishClose()
  } catch {
    handleFinishClose()
  }
}

const handleActionClick = (type, val) => {
  if (val.job?.status === '1' && (type !== 'completed')) {
    uni.showToast({ title: '职位已关闭', icon: 'none' })
    return
  }
  itemData.value = val
  // 完成面试
  if (type === 'completed') {
    finishPopup.value.open()
  }
	// 修改面试、重新邀约
	if (type === 'edit') {
		uni.navigateTo({
			url: '/pagesB/InviteInterview/index?editData=' + encodeURIComponent(JSON.stringify(val))
		})
	}
	// 取消面试、爽约、面试反馈
	if (['cancel', 'attended', 'feedback'].includes(type)) {
		uni.navigateTo({
			url: `/pagesA/interview/${type}?id=${val.id}`
		})
	}
	popup.value.close()
}

const obj = {
  '0': [1],
  '1': [4, 1, 3],
  '2': [3]
}
const actions = ref([
  { title: '完成面试', value: 'completed' },
  { title: '取消面试', value: 'cancel' },
  { title: '填写反馈', value: 'feedback' },
  { title: '爽约', value: 'attended' },
  { title: '修改面试', value: 'edit' }
])
const actionItems = (item) => {
  const status = item?.status
  const jobClosed = item.job?.status === '1'
  const type = jobClosed && obj[status] ? [0] : obj[status] // 职位已关闭只能操作完成面试
  if (!type || !type.length) return []
  let data = type.map(e => actions.value[e])
  return data
}
</script>

<style scoped lang="scss">
.user-avatar {
	position: relative;
	&-img {
		width: 45px;
		height: 45px;
		border-radius: 50%;
	}
	&-sex {
		position: absolute;
		right: 0;
		bottom: 2px;
		width: 20px;
		height: 20px;
		background-color: #fff;
		border-radius: 50%;
	}
}
.action {
  font-size: 28rpx;
	&-item {
		text-align: center;
		width: 90vw;
		border-bottom: 1px solid #eee;
		height:44px;
		line-height: 44px;
		margin: 0 auto;
		color: #00B760;
		background-color: #fff !important;
		&:first-child {
			border-radius: 5px 5px 0 0;
		}
		&:last-child {
			border-radius: 0 0 5px 5px;
			border-bottom: none;
		}
	}
}
.big-cancel-button {
  width: 90vw;
  height:44px;
  line-height: 44px;
  margin: 10px auto;
	color: #fe574a;
  background-color: #fff !important;
  font-size: 28rpx;
}
.sub-li-bottom {
  display: flex;
	justify-content: space-between;
	// align-items: flex-end;
  margin-top: 10px;
  font-size: 13px;
	&-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;
		}
	}
}
</style>