waterElectricityMinApp/pagesRepairs/helpPeople/helpPeople.vue

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

			<input type="text" placeholder="请输入搜索内容" v-model="searchValue" />
		</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.userName || item.name }}
						<view class="msg_work">{{ item.workType }}</view>
					</view>
					<view class="info_phone">{{ item.userPhone }}</view>
				</view>
				<view class="item_type color_type2" v-if="item.state === '正常接单'">正常接单</view>
				<view class="item_type color_type3" v-if="item.state === '停止接单'">停止接单</view>
			</view>
		</view>

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

<script>
export default {
	data() {
		return {
			// 搜索框绑定数据
			searchValue: '',
			// 协作人列表
			list: [],
			// 选中列表
			checkList: [],
			// 页面类型
			type: null,
			// 订单id
			recordId: '',
			info: {}
		}
	},
	onLoad(options) {
		// console.log(options)
		this.recordId = options.id
		if (options.type) {
			this.type = options.type
			uni.setNavigationBarTitle({
				title: '派单'
			})
			this.getData()
		} else {
			this.getHelpData()
		}
		if (options.info) {
			this.info = JSON.parse(options.info)
		}
	},
	methods: {
		// 获取协作人列表数组
		async getHelpData() {
			const res = await this.$myRequest_repairs({
				url: '/repairUser/queryPageCollaborator',
				data: {
					currentPage: 1,
					pageCount: 999,
					schoolId: uni.getStorageSync('repairsUserInfo').schoolId,
					userId: uni.getStorageSync('repairsUserInfo').userId,
					keyWord: this.searchValue
				}
			})
			// console.log(res)
			if (res.code === '200') {
				this.list = res.data.list
				this.list.forEach((ele) => {
					ele.checked = false
				})
			}
		},
		// 获取派单人列表数组
		async getData() {
			const res = await this.$myRequest_repairs({
				url: '/repairUser/queryPageRepairUsers',
				data: {
					currentPage: 1,
					pageCount: 999,
					recordId: this.recordId,
					keyWord: this.searchValue
				}
			})
			// console.log(res)
			if (res.code === '200') {
				this.list = res.data.list
				this.list.forEach((ele) => {
					ele.checked = false
				})
			}
		},
		// 确认派单按钮回调
		handleDispatch() {
			if (this.type) {
				if (this.checkList.length > 1) {
					uni.showToast({
						title: '只能派单给一位师傅',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: `确定把单派给${this.checkList[0].userName}吗？`,
					success: async (res) => {
						if (res.confirm) {
							// 直接派单
							if (this.type === '1') {
								const res = await this.$myRequest_repairs({
									url: '/repairRecord/receiveSendOrders',
									method: 'post',
									data: {
										id: this.checkList[0].id,
										acceptanceTime: this.checkList[0].acceptanceTime,
										shiftId: this.checkList[0].shiftId,
										articleId: this.checkList[0].articleId,
										recordId: this.recordId
									}
								})
								// console.log(res)
								if (res.code === '200') {
									uni.showToast({
										title: '派单成功',
										icon: 'success'
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '/pagesRepairs/box/box'
										})
									}, 1500)
								}
							} else if (this.type === '2') {
								// 转单审核同意时重新派单
								const res = await this.$myRequest_repairs({
									url: '/repairRecord/transfer',
									method: 'post',
									data: {
										id: this.info.id,
										userId: this.checkList[0].id,
										approverStatu: 1,
										remark: this.info.remark
									}
								})
								// console.log(res)
								if (res.code === '200') {
									uni.showToast({
										title: '派单成功',
										icon: 'success'
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '/pagesRepairs/box/box'
										})
									}, 1500)
								}
							}
						}
					}
				})
			} else {
				uni.$emit('addCheckList', {
					data: this.checkList
				})
				uni.navigateBack(1)
			}
		},
		// 点击每一个协作人的回调
		change(item) {
			item.checked = !item.checked
			let temList = []
			temList = this.list.filter((item) => {
				return item.checked
			})
			this.checkList = temList
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	font-size: 32rpx;
	.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_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>