NurseStationPersonAppletUl/pages/taskReturn/taskReturn.vue

<template>
	<view class="app">
		<view class="top">
			<view class="title">
				<image src="../../static/fuwu.png" mode=""></image>
				<view class="text">
					陪诊
				</view>
			</view>
			<view class="content">
				<view class="time">
					时间：2023-02-07 8:00-12:00
				</view>
				<view class="address">
					地点：山东省立医院东院区
				</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='请在此输入' />
		</view>
		<view class="btn" @tap='taskreturn'>
			立即提交
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		orderFallback
	} from '@/api/taskReturn/index.js'
	export default {
		data() {
			return {
				item: null, //传值item
				nursePersonId: null, //护理员id
				taskReturnReason: '',
				value: '', //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) {
				e.forEach(e => {
					this.taskReturnReason += e + ';'
				})
			},
			taskreturn() {
				var obj = {
					"appointmentOrderId": this.item.id,
					"stationPersonId": this.nursePersonId,
					"appointmentOrderNo": this.item.orderNo,
					"taskReturnReason": this.taskReturnReason,
				}
				orderFallback(obj).then(res => {
					this.$refs.uToast.show({
						title: '任务退回成功',
						type: 'success',
						duration: '1500'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500);
				})
			},
		},
		onLoad(options) {
			this.item = 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: 58rpx;
			background: #4271B9;
			border-radius: 5rpx;
			margin: 80rpx auto;
			text-align: center;
			line-height: 58rpx;
			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 {
				margin-left: 50rpx;
				font-size: 30rpx;

				.time {
					line-height: 90rpx;
				}

				.address {}
			}
		}

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

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

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