kly_uniapp/pages/order/indexItem.vue

<!-- 首页每一条招聘信息组件 -->

<template>
	<view :key="data.id" @click="to_detail(data.urgent_level=='1'&&data.statusName!='已通过',data.statusName)"
		class="tab_main">
		<view style="display: flex;justify-content: space-between;">
			<!-- 招聘标题 -->
			<view style="width: 65%;font-size: 32upx;" class="nowrap">
				{{data.title}}
			</view>
			<!-- 【完工即结】显示报名日期 -->
			<view v-if="data.urgent_level=='0'" style="display: flex;align-items: center;align-items: center;">
				<image style="margin-right: 7upx;" class="img" src="../../static/clock_green.png"></image>
				<!-- 非批量 -->
				<view style="color: #4A4A4A;" v-if="data.settle_catalog==0">
					<text v-if="data.begin_datetime">{{data.begin_datetime.slice(5,10)}}</text>
					<text
						v-if="data.finish_datetime&&data.begin_datetime!=data.finish_datetime">~{{data.finish_datetime.slice(5,10)}}</text>
				</view>
				<!-- 批量 -->
				<view style="color: #4A4A4A;" v-else>
					{{data.begin_datetime22.slice(5,10)+'开始报名'}}
				</view>
			</view>
			<!-- 【今日零工】显示招聘状态或开工完工时刻 -->
			<view v-else style="display: flex;align-items: center;align-items: center;">
				<image style="margin-right: 7upx;" class="img"
					:src="data.statusName=='已通过'? '../../static/clock_green.png':'../../static/clock_grey.png'"></image>
				<view style="color: #4A4A4A;">
					{{data.statusName=='已通过'?(data.begin_hour+'-'+data.finish_hour):data.statusName}}
				</view>
			</view>
		</view>

		<view>
			<!-- 性别年龄要求，佣金 -->
			<view style="margin-top: 20upx;" class="box">
				<view class="tag_box">
					<text>{{data.gender_mode==0?'性别不限':data.gender_mode==1?'限男':'限女'}}</text>
					<text>{{data.age_mode==0?'年龄不限':(data.age_min+'岁-'+data.age_max+'岁')}}</text>
				</view>
				<view class="nowrap sara">
					<text style="font-size: 36upx;line-height: 36upx;margin-right: 7upx;">{{data.salary}}</text>
					<text
						style="font-size: 26upx;line-height: 26upx;padding-top: 7upx;">{{data.settle_catalog==0?'元':'元/天'}}</text>
				</view>
			</view>
			<view style="margin-top: 20upx;" class="box box3">
				<!-- 位置 -->
				<view style="display: flex;color: #4A4A4A;">
					<image style="height: 32upx;width: 26upx;" class="img" src="../../static/pos_green.png"></image>
					<view style="max-width: 250upx;" class="nowrap">{{data.work_addr1}}</view>
					<text
						style="margin-left: 6upx;">{{!isNaN(Number(data.distance))?((Number(data.distance)/1000).toFixed(2)+'km'):''}}</text>
				</view>
				<!-- 已报名人数，头像-->
				<view style="display: flex;align-items: center;">
					<view style="color: #9B9B9B;padding-right: 20upx;">
						{{data.now_worker_total000>0?(data.now_worker_total000+'人已报名'):''}}
					</view>
					<view class="has_signed">
						<image :key="index"
							v-for="(item,index) in formate_enrolled_heads(data.enrolled_heads, (Number(data.now_worker_total000)))"
							:src="serverUrl+'touxiang/'+item+'.png'"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commonData from '../../commonData.js'
	import commonFun from '../../commonFun.js'

	export default {
		name: "indexItem",
		data() {
			return {
				data: {},
				indexItem: 1,
				serverUrl: this.serverUrl,
				formate_enrolled_heads: commonFun.formate_enrolled_heads,
			};
		},

		props: {
			dataSource: {},
			type: {},
			index: {}
		},
		methods: {
			to_detail(no_jump, statusName) {
				if (no_jump) {
					uni.showModal({
						title: '无法报名',
						content: '本条招聘状态：' + statusName,
						showCancel: false
					})
					return
				}
				uni.navigateTo({
					url: '/pages/order/detail?detailType=0&id=' + this.data.id
				})
			}
		},

		created() {
			this.data = this.dataSource || {};
			this.indexItem = this.index
		}
	}
</script>

<style>
	.tag_box text {
		background-color: #f6f6f6;
		color: #4A4A4A;
		padding: 6upx 12upx;
		margin-right: 7upx;
		border-radius: 12upx;
		font-size: 24upx;
	}

	.sara {
		height: 36upx;
		display: flex;
		align-items: flex-end;
	}

	.sara text {
		color: #F7942D;
	}



	.mem_item {
		height: 45upx;
		margin-top: 20upx;
		padding-bottom: 10upx;
		margin-left: 15upx;
	}

	.tab_main {
		margin-top: 20upx;
		background-color: #ffffff;
		box-shadow: 0px 8upx 8upx 0px #e3e3e3;
		border-radius: 10px;
		width: 92%;
		padding: 2%;
		margin-left: 2%;
	}

	.tab_main2 {
		margin-top: 20upx;
		background-color: #f9f9f9;
		border-radius: 10upx 10upx 0 0;
		width: 92%;
		padding: 3% 2%;
		margin-left: 2%;
		border-bottom: 1rpx solid #cfd6e3;
	}

	.box {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box view {
		display: flex;
		align-items: center;
		color: #999999;
	}

	.box3 view {
		color: #666666;
	}

	.box view image {
		margin-right: 10upx;
	}

	.img {
		width: 28upx;
		height: 28upx;
	}

	.members {
		width: 45upx;
		height: 45upx;
		border: 4upx solid #ffffff;
		border-radius: 100%;
		overflow: hidden;
		float: left;
		margin-left: -20upx;
	}
</style>