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

<template>
	<view class="app">
		<view class="top">
			<view class="title">
				<view class="text">
					专家咨询（{{tasklist.patientName}}）
				</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" style="line-height: 60rpx;padding-top: 15rpx;">
					时间：{{tasklist.appointmentDate}}{{' '+tasklist.appointmentStartTime}}{{'-'+tasklist.appointmentEndTime}}
				</view>
				<view class="time">
					地点：{{tasklist.address}}
				</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='请输入退回原因'
				:clearable='false' v-if="list[4].checked" />
		</view>
		<view class="btn" @tap='truetaskReturn'>
			立即提交
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		closeHealthConsultationOrder,
	} from '@/api/homepage/index.js'
	import {
		orderFallback
	} from '@/api/taskReturn/taskReturn.js'
	export default {
		data() {
			return {
				tasklist: null, //传值item
				taskReturnReason: '',
				value: null, //input绑定
				list: [{
					name: '与其他工单时间冲突',
					checked: false,
				}, {
					name: '服务要求较高，当前资质无法完成',
					checked: false,
				}, {
					name: '距离较远，无法到达',
					checked: false,
				}, {
					name: '价格不合理',
					checked: false,
				}, {
					name: '其它',
					checked: false,
				}]
			}
		},
		methods: {
			truetaskReturn() {
				if (this.list[4].checked && this.value) {
					this.taskReturnReason += this.value + ';'
				}
				var obj = {
					orderNo: this.tasklist.orderNo,
					remark: this.taskReturnReason,
				}
				closeHealthConsultationOrder(obj).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '工单退回成功',
							type: 'success',
							duration: '1500',
							back: 1
						})
					}
				})
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.taskReturnReason = ''
				e.forEach(el => {
					if (el != '其它') {
						this.taskReturnReason += el + ';'
					}
				})
			},
		},
		onLoad(options) {
			this.tasklist = JSON.parse(options.item)
		},
	}
</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>