xinelu-doctor-app/pages/taskReturn/taskReturn.vue

<template>
	<view class="app">
		<view class="top">
			<view class="title">
				<view class="text">
					1111
					<!-- {{tasklist.nurseItemName}} -->
				</view>
				<view class="righttext">
					<!-- 	<span v-if="tasklist.orderCommissionAmount&&tasklist.orderCommissionAmount>=0">
						￥{{tasklist.orderCommissionAmount}}
					</span>
					<span v-else>
						￥ 0
					</span> -->
					<span>￥200</span>
				</view>
			</view>
			<view class="content">
				<view class="time" style="line-height: 60rpx;padding-top: 15rpx;">
					时间：111
			<!-- 	时间：{{tasklist.serviceDate}}
				<span style='padding-left: 10rpx;'>{{tasklist.serviceStartTime}}</span> -->
				</view>
				<view class="time">
					
					地点：2032
					<!-- 地点：{{tasklist.serviceAddress}} -->
				</view>

			</view>
		</view>
		<view class="bottom">
			<view class="title">
				<view class="text">
					拒绝原因（多选）
				</view>
			</view>
			<view class="checkboxs">
				<u-checkbox-group @change="checkboxGroupChange" :wrap='true'>
					<u-checkbox active-color="#18CBB3" @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/index.js'
	import {
		orderFallback
	} from '@/api/taskReturn/taskReturn.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;
		background: #F2F2F4;
	}

	::v-deep .u-checkbox {
		height: 80rpx !important;
	}
	::v-deep .u-checkbox__label{
		font-size: 24rpx !important;
		font-family: SourceHanSansSC-Medium, SourceHanSansSC;
		font-weight: 500 !important;
		color: #333333 !important;
		
	}

	.app {
		padding: 0;

		.btn {
			width: 496rpx;
			height: 70rpx;
			background: #18CBB3;
			border-radius: 50rpx;
	
			text-align: center;
			line-height: 70rpx;
			color: #fff;
			position: fixed;
			    bottom: 60rpx;
				left: 50%;
				transform: translateX(-50%);
		}

		.checkboxs {
			padding-left: 50rpx;
		}

		.bottom {
			padding-bottom: 40rpx;
		}

		.bottom,
		.top {
			background-color: #fff;
			width: 96%;
			margin: 30rpx auto 0;
			color: #333333;
			border-radius: 14rpx;
	
			
		}

		.top {
			// padding-bottom: 40rpx;

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

				.time {
					line-height: 90rpx;
				
					font-size: 24rpx;
					font-family: SourceHanSansSC-Medium, SourceHanSansSC;
					font-weight: 500;
					color: #333333;
				}

				.address {}
			}
		}

		.title {
			border-bottom: 1rpx solid #E6E6E6;
			display: flex;
			height: 100rpx;
			line-height: 100rpx;
			width: 96%;
			position: relative;
			left: 50%;
			transform: translateX(-50%);

			.righttext {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);

				font-size: 38rpx;
				font-family: Adobe Heiti Std;
				color: #EE2B2B;
			}

			.text {
				line-height: 100rpx;
				padding-left: 34rpx;
				
				font-size: 32rpx;
				font-family: SourceHanSansSC-Medium, SourceHanSansSC;
				font-weight: 500;
				color: #333333;
			}

		}
	}
</style>