menduner-uniapp/pages/index/components/talentItem.vue

<template>
	<view>
		<view v-for="(val, index) in items" :key="index" class="list-item" @tap.stop="handleDetail(val)" >
			<!-- 基本信息 -->
			<view class="d-flex align-center">
				<view class="user-avatar">
					<image class="user-avatar-img" :src="getUserAvatar(val.avatar, val.sex)" mode="scaleToFill"></image>
					<image class="user-avatar-sex" :src="val?.sex ? val?.sex === '1' ? '/static/img/man.png' : '/static/img/female.png' : ''" alt="" mode="scaleToFill" />
				</view>
				<view style="flex: 1; margin-left: 10px;">
					<view class="font-size-18" style="color: #0E100F">{{ val.name }}</view>
					<view class="ss-m-t-10">
						<span 
							class="color-666 font-size-14"
							v-for="(key, index) in desc" 
							:key="index"
						>
							{{ val[key] }}
							<span v-if="index !== desc.length - 1 && val[key]" class="ss-m-x-10">|</span>
						</span>
					</view>
				</view>
			</view>
			
			<!-- 感兴趣职位 -->
			<view v-if="val.position?.positionNames && showLastWorkExp" class="ss-m-t-15 color-666 font-size-14">
				意向职位：{{ val.position?.positionNames || '暂无' }}
			</view>

			<!-- 最近一份工作经验 -->
			<view v-if="val?.lastWorkExp && showLastWorkExp" class="ss-m-t-15 color-666  font-size-14">
				<view>
					<uni-icons type="smallcircle" class="ss-m-r-10" color="#666"></uni-icons>
					{{ formatName(val.lastWorkExp.enterpriseName) || '未填写企业名称' }}
				</view>
				<view class="ss-m-l-45">
					<span>{{ formatName(val.lastWorkExp.positionName) || '未填写职位名称' }}</span>
					<span v-if="val.lastWorkExp.startTime" class="ss-m-l-20">
						{{ val.lastWorkExp.startTime ? timesTampChange(val.lastWorkExp.startTime, 'Y-M') : '暂无' }}
						- 
						{{ val.lastWorkExp.endTime ? timesTampChange(val.lastWorkExp.endTime, 'Y-M') : val.lastWorkExp.startTime ? '至今' : '' }}
					</span>
				</view>
			</view>

			<!-- 工作经历 -->
			<view v-if="val?.workList && val.workList.length > 0 && !showLastWorkExp" class="ss-m-t-15 color-666 font-size-14">
				<view v-for="(k, index) in val.workList" :key="k.id" class="ss-m-b-30">
					<template v-if="val.showAll || index < 2">
						<view>
							<uni-icons type="smallcircle" class="ss-m-r-10" color="#666"></uni-icons>
							{{ formatName(k.enterpriseName) || '未填写企业名称' }}
						</view>
						<view class="ss-m-l-45">
							<span>{{ formatName(k.positionName) || '未填写职位名称' }}</span>
							<span class="ss-m-l-20">
								<span>{{ k.startTimeStr }}</span>
								<span v-if="k.endTimeStr"> - {{ k.endTimeStr }}</span>
							</span>
						</view>
					</template>
				</view>
				<view v-if="val.workList.length > 2" class="showBtn color-primary" @tap.stop="val.showAll = Boolean(!val.showAll)">
					{{ val.showAll ? '收起' : '展开全部' }}
					<view class="icons">
						<uni-icons class="icon" :type="val.showAll ? 'up' : 'down'" color="#008BB7" size="12" />
						<uni-icons class="icon" :type="val.showAll ? 'up' : 'down'" color="#008BB7" size="12" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getUserAvatar } from '@/utils/avatar.js'
import { timesTampChange } from '@/utils/date'
import { formatName } from '@/utils/getText'

defineProps({
	items: Array,
	showLastWorkExp: {
		type: Boolean,
		default: true
	}
})

const desc = ['jobStatusName', 'eduName', 'expName']

const handleDetail = ({ userId }) => {
	if (!userId) {
		uni.showToast({
			title: '资源获取失败，请稍后重试',
			icon: 'none',
			duration: 2000
		})
		return
	}
	uni.navigateTo({
		url: `/pagesB/personnelDetails/index?id=${userId}&type=1`
	})
}
</script>

<style scoped lang="scss">
	.list-item {
	  margin: 30rpx;
	  border-radius: 20rpx;
	  padding: 30rpx;
	  background-color: #fbfbfb;
	  box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.17);
	  border: 1rpx solid #E1E4E9;
	}
.user-avatar {
	position: relative;
	&-img {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	&-sex {
		position: absolute;
		right: 0;
		bottom: 2px;
		width: 20px;
		height: 20px;
		background-color: #fff;
		border-radius: 50%;
	}
}
.showBtn {
	display: flex;
	justify-content: center;
	align-items: center;
	.icons {
		display: flex;
		flex-direction: column;
		margin-left: 5px;
		.icon {
			line-height: 4px;
		}
	}
}
</style>