NurseStationPersonAppletUl/pages/taskReturn/taskReturn.vue

<template>
	<view class="app" v-if="tasklist">
		<view class="top">
			<view class="title">
				<image src="../../static/fuwu.png" mode=""></image>
				<view class="text">
					{{tasklist.nurseItemName}}
				</view>
				<view class="righttext">
					<span v-if="tasklist.orderCommissionAmount&&tasklist.orderCommissionAmount>=0">
						￥{{tasklist.orderCommissionAmount}}
					</span>
					<span v-else>
						￥ 0
					</span>
				</view>
			</view>
			<view class="content">
				<view class="time">
					时间：{{tasklist.serviceDate}}
					<span style='padding-left: 10rpx;'>{{tasklist.serviceStartTime}}</span>
				</view>
				<view class="address">
					地点：{{tasklist.serviceAddress}}
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="title">
				<image src="../../static/no.png" mode=""></image>
				<view class="text">
					拒绝原因（多选）
				</view>
			</view>
			<view class="checkboxs">
				<u-checkbox-group @change="checkboxGroupChange" :wrap='true'>
					<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list"
						:key="index" :name="item.name" shape='circle'>{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</view>
			<u-input v-model="value" type="text" :border="true" border-color='#E6E6E6' placeholder='请在此输入'
				v-if="list[4].checked" />
		</view>
		<view class="btn" @tap='taskreturn'>
			立即提交
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		taskDetails
	} from '@/api/taskDetails/taskDetails.js'
	import {
		orderFallback
	} from '@/api/taskReturn/index.js'
	export default {
		data() {
			return {
				baseurl: null,
				tasklist: null, //传值item
				nursePersonId: null, //护理员id
				taskReturnReason: '',
				value: null, //input绑定
				list: [{
					name: '与其他工单时间冲突',
					checked: false,
				}, {
					name: '服务要求较高，当前资质无法完成',
					checked: false,
				}, {
					name: '距离较远无法到达',
					checked: false,
				}, {
					name: '价格不合理',
					checked: false,
				}, {
					name: '其它',
					checked: false,
				}]
			}
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.taskReturnReason = ''
				e.forEach(el => {
					if (el != '其它') {
						this.taskReturnReason += el + ';'
					}
				})
			},
			taskreturn() {
				if (this.list[4].checked && this.value) {
					this.taskReturnReason += this.value + ';'
				}
				if (!this.tasklist.id) {
					this.tasklist.id = this.tasklist.orderDetailsId
				}
				var obj = {
					"appointmentOrderId": this.tasklist.id,
					"stationPersonId": this.nursePersonId,
					"appointmentOrderNo": this.tasklist.orderNo,
					"taskReturnReason": this.taskReturnReason,
				}
				orderFallback(obj).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '任务退回成功',
							type: 'success',
							duration: '1500'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500);
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error',
							duration: '1500'
						})
					}
				})
			},
		},
		onLoad(options) {
			this.tasklist = JSON.parse(options.item)
			var that = this
			const value = uni.getStorageSync('nursePersonId');
			if (value) {
				that.nursePersonId = value
			} else {}
		},
	}
</script>

<style lang="scss">
	::v-deep .u-input {
		border: 1rpx solid #E6E6E6;
		width: 85%;
		display: block;
		margin: 20rpx auto;
	}

	::v-deep .u-checkbox {
		height: 80rpx !important;
	}

	.app {
		padding: 0;

		.btn {
			width: 496rpx;
			height: 70rpx;
			background: #4271B9;
			border-radius: 5rpx;
			margin: 80rpx auto;
			text-align: center;
			line-height: 70rpx;
			color: #fff;
		}

		.checkboxs {
			padding-left: 50rpx;
		}

		.bottom {
			padding-bottom: 40rpx;
		}

		.bottom,
		.top {
			background-color: #fff;
			width: 96%;
			margin: 15rpx auto 0;
			color: #333333;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
		}

		.top {
			padding-bottom: 40rpx;

			.content {
				padding: 0 50rpx;
				font-size: 30rpx;

				.time {
					line-height: 90rpx;
				}

				.address {}
			}
		}

		.title {
			border-bottom: 1rpx solid #E6E6E6;
			display: flex;
			height: 100rpx;
			line-height: 100rpx;
			width: 100%;
			position: relative;

			.righttext {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 34rpx;
				color: #EA706A;
			}

			.text {
				font-size: 34rpx;
				line-height: 100rpx;
				padding-left: 18rpx;
			}

			image {
				margin: 50rpx 0 0 35rpx;
				transform: translateY(-50%);
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>