labor_map_miniapp/components/recruitment/recruitment.vue

<template>
	<view class="recruitment-card">
		<!-- 卡片头部信息 -->
		<view class="card-head">
			<div class="factory-info">
				<!-- view.header -->
				<h3 class="factory-name">{{dataSource.factoryName || '默认工厂'}}</h3>
				<view v-if="isFavorite" class="add-collect" @click="handleCancelCollect(dataSource.jobId)">
					<image src='/static/collect-active.png' mode="widthFix"></image>
				</view>
				<view v-else class="add-collect" @click="handleCollect(dataSource.jobId)">
					<image src="/static/collect-gray.png" mode="widthFix"></image>
				</view>
				<!-- <span class="factory-type">{{dataSource.factoryType || '电子厂'}}</span> -->
			</div>
			<div class="card-actions">
				<!-- <view class="favorite-btn" @click="toggleFavorite">
					<text class="heart-icon">{{isFavorite ? '♥' : '♡'}}</text>
				</view> -->
				<button class="call-btn" @click="makeCall">拨打电话</button>
				<button class="review-btn" @click.stop="handleGoToDetail">查看详情</button>
				<view class="more-btn" @click.stop>
					<text>···</text>
				</view>
			</div>
		</view>
		
		<!-- 工作时间和内容 -->
		<view class="work-info">
			<text class="work-time">{{dataSource.workTime || '8:00-20:00'}}</text>
			<text class="work-type">{{dataSource.gender}}</text>
			<text class="work-content">{{dataSource.jobName || '主营汽车线束'}}</text>
			<span v-if="!!dataSource.distanceMeters" class="distance">{{`距你${Math.round(dataSource.distanceMeters)}米`}}</span>
			<text v-for="item in dataSource.tags" class="work-type">{{item.tagName}}</text>
		</view>

		<view class="card-bm">
			<template v-for="(item, index) in processedCompanyData" :key="item.label">
				<view class="item-info-swiper">
					<view class="label">{{item.label}}</view>
					<view class="value">
						{{item.value}}<text class="label-two">{{item.unit}}</text>
					</view>
					<view class="label-two">
						{{item.exLabel}}
					</view>
				</view>
				<view v-if="index < processedCompanyData.length - 1" class="divider"></view>
			</template>

		</view>
	</view>
</template>

<script>
import { collectAdd, collectCancel } from '../../api';

	export default {
		name: "recruitment",
		props: {
			dataSource: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				isFavorite: !!this.dataSource.isCollect
			};
		},
		computed: {
			companyData() {
				return [
					{
						label: '薪资',
						value: this.dataSource.hourlyWage || '无', // 使用默认值25
						unit: '',
						exLabel: '元/小时'
					},
					{
						label: '年龄',
						value: this.dataSource.ageRange || '无',
						unit: '',
						exLabel: '元/小时'
					},
					{
						label: '吃饭',
						value: this.dataSource.mealPlan || '无',
						unit: '餐',
						exLabel: '白-夜'
					},
					{
						label: '住宿',
						value: this.dataSource.dorm || '无',
						unit: '',
						exLabel: '人间'
					},
				];
			},
			processedCompanyData() {
				return this.dataSource.companyData || this.companyData;
			}
		},
		methods: {
			 async handleCollect(jobId) {
				console.log(jobId)
				try {
					await collectAdd({ jobId })
					this.isFavorite = !this.isFavorite;
				} catch(err) {
					console.log(err)
				}
			},
			async handleCancelCollect (jobId) {
				try {
					await collectCancel({ jobId })
					this.isFavorite = !this.isFavorite;
				} catch(err) {
					console.log(err)
				}
			},
			// 拨打电话
			makeCall(e) {
				e.stopPropagation();
				uni.makePhoneCall({
					phoneNumber: this.dataSource.phoneNumber
				});
			},
			handleGoToDetail(e) {
				// 序列化dataSource对象为JSON字符串，并进行URL编码
				const encodedData = encodeURIComponent(JSON.stringify(this.dataSource));
				uni.navigateTo({
					url: `/pages/positionDetail/positionDetail?dataSource=${encodedData}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recruitment-card {
		background-color: #fff;
		padding: 8px 16px;
		z-index: 10;
		
		.card-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 8px;
			flex-wrap: wrap;
			.factory-info {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 8px;
				margin-bottom: 8px;
				.add-collect {
					width: 48rpx;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.factory-name {
					font-size: 18px;
					font-weight: 700;
					color: #333;
					margin: 0;
				}
				
				.factory-type {
					background-color: #f0f0f0;
					color: #666;
					padding: 2px 8px;
					border-radius: 4px;
					font-size: 12px;
				}
				
				.distance {
					color: #999;
					font-size: 12px;
				}
			}
			
			.card-actions {
				display: flex;
				align-items: center;
				gap: 8px;
				
				.favorite-btn {
					font-size: 20px;
					color: #ff4757;
					padding: 4px;
					cursor: pointer;
				}
				
				.call-btn {
					background-color: #ff4757;
					color: white;
					border: none;
					padding: 6px 12px;
					border-radius: 4px;
					font-size: 14px;
					line-height: 1.4;
				}
				
				.review-btn {
					background-color: transparent;
					color: #666;
					border: 1px solid #ddd;
					padding: 6px 12px;
					border-radius: 4px;
					font-size: 14px;
					line-height: 1.4;
				}
				
				.more-btn {
					color: #999;
					font-size: 18px;
					cursor: pointer;
					padding: 4px;
				}
			}
		}
		
		.work-info {
			display: flex;
			gap: 12px;
			font-size: 12px;
			color: #666;
			margin-bottom: 12px;
			flex-wrap: wrap;
		}
		
		.card-bm {
			display: flex;
			padding: 0;
			justify-content: space-around;
			
			.item-wrapper {
				display: flex;
				align-items: center;
				flex: 1;
			}
			
			.item-info-swiper {
				padding: 0;
				display: inline-block;
				text-align: center;
				flex: 1;
				
				.label {
					font-weight: 700;
					font-size: 14px;
					color: #333;
				}
				
				.value {
					font-size: 24px;
					margin-top: 4px;
					margin-bottom: 4px;
					color: $uni-color-primary;
				}
				
				.label-two {
					font-size: 12px;
					color: #666;
				}
			}
			
			.divider {
				width: 1px;
				height: 60px;
				background-color: #e5e5e5;
				margin: 0;
			}
		}
	}
</style>