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

<template>
	<view>
		<uni-card v-for="(val, index) in items" :key="index" :is-shadow="true" @tap.stop="handleDetail(val)" :border='false' shadow="0px 0px 3px 1px rgba(0,0,0,0.1)">
			<!-- 基本信息 -->
			<view class="d-flex align-center">
				<image class="avatar" :src="getUserAvatar(val.avatar, val.sex)" mode="scaleToFill"></image>
				<view style="flex: 1; margin-left: 10px;">
					<view class="font-size-18">{{ val.name }}</view>
					<view class="ss-m-t-10">
						<span 
							class="color-666"
							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" class="ss-m-t-15 color-666">
				感兴趣职位：{{ val.position?.positionNames || '暂无' }}
			</view>
			<!-- 最近一份工作经验 -->
			<view v-if="val?.lastWorkExp && showLastWorkExp" class="ss-m-t-15 color-666">
				<view>
					<uni-icons type="smallcircle" class="ss-m-r-10" color="#666"></uni-icons>
					{{ val.lastWorkExp.enterpriseName }}
				</view>
				<view class="ss-m-l-45">
					<span>{{ 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>
		</uni-card>
	</view>
</template>

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

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}`
	})
}
</script>

<style scoped lang="scss">
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: auto;
}
</style>