waterElectricityMinApp/pagesRepairs/helpPeople/helpPeople.vue

<template>
	<view class="container">
		<!-- 输入框区域 -->
		<view class="search">
			<img src="../../static/images/repairsImg/search.png" />

			<input type="text" placeholder="请输入搜索内容" />
		</view>

		<!-- 协作人区域 -->
		<view class="body">
			<!-- 每一个协作人区域 -->
			<view class="body_item" v-for="item in list" :key="item.id" @click="change(item)">
				<radio color="#6FB6B8" :checked="item.checked" />
				<img src="../../static/images/repairsImg/photo.png" />
				<view class="item_info">
					<view class="info_msg">
						{{ item.name }}
						<view class="msg_work">{{ item.work }}</view>
					</view>
					<view class="info_phone">{{ item.phone }}</view>
				</view>
				<view class="item_type color_type" v-if="item.type === 1">接单中</view>
				<view class="item_type color_type2" v-if="item.type === 2">订单饱和</view>
				<view class="item_type color_type3" v-if="item.type === 3">停止接单</view>
			</view>
		</view>

		<view class="btn" v-if="checkList.length">确认派单</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					id: 1,
					name: '张三',
					phone: '13659856958',
					work: '电工',
					type: 1,
					checked: false
				},
				{
					id: 2,
					name: '李四',
					phone: '13659856958',
					work: '电工',
					type: 2,
					checked: false
				},
				{
					id: 3,
					name: '张三',
					phone: '13659856958',
					work: '电工',
					type: 3,
					checked: false
				},
				{
					id: 4,
					name: '张三',
					phone: '13659856958',
					work: '电工',
					type: 1,
					checked: false
				},
				{
					id: 5,
					name: '李四',
					phone: '13659856958',
					work: '电工',
					type: 2,
					checked: false
				},
				{
					id: 6,
					name: '张三',
					phone: '13659856958',
					work: '电工',
					type: 3,
					checked: false
				}
			],
			checkList: []
		}
	},
	methods: {
		change(item) {
			item.checked = !item.checked
			let temList = []
			this.list.forEach((item) => {
				if (item.checked) {
					temList.push(item.id)
				}
			})
			// console.log(temList)
			this.checkList = temList
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	.search {
		display: flex;
		align-items: center;
		margin: 30rpx auto 30rpx;
		width: 690rpx;
		height: 80rpx;
		border-radius: 4rpx;
		background-color: #f2f2f2;

		img {
			margin: 0 20rpx;
			width: 40rpx;
			height: 40rpx;
		}

		input {
			flex: 1;
			padding: 10rpx;
		}
	}

	.body {
		height: 810rpx;
		border-top: 1rpx solid #e5e5e5;
		overflow-y: auto;

		.body_item {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			height: 162rpx;
			border-bottom: 1rpx solid #e5e5e5;

			img {
				margin: 0 24rpx 0 27rpx;
				width: 82rpx;
				height: 82rpx;
				border-radius: 50%;
			}

			.item_info {
				display: flex;
				flex-direction: column;

				.info_msg {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					font-weight: bold;

					.msg_work {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 13rpx;
						padding: 0 10rpx;
						height: 32rpx;
						color: #6fb6b8;
						font-size: 24rpx;
						font-weight: 400;
						border-radius: 7rpx;
						border: 1rpx solid #6fb6b8;
					}
				}

				.info_phone {
					margin-top: 10rpx;
					color: #808080;
					font-size: 28rpx;
				}
			}

			.item_type {
				margin-left: auto;
				font-size: 24rpx;
			}

			.color_type {
				color: #6fb6b8;
			}
			.color_type2 {
				color: #1e7dfb;
			}
			.color_type3 {
				color: #ff5733;
			}
		}
	}

	.btn {
		position: absolute;
		bottom: 66rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 30rpx;
		width: 690rpx;
		height: 100rpx;
		color: #fff;
		font-size: 32rpx;
		border-radius: 12rpx;
		background-color: #6fb6b8;
	}
}
</style>