xinelu-applet-ui/pagesB/createnewconsultation/createnewconsultation.vue

<template>
	<view class="app">
		<view class="title">
			<view class="left">
			</view>
			<view class="right">
				第一步：填写个人信息
			</view>
		</view>
		<view class="item">
			<view class="text">
				现住址所在区
			</view>
			<view class="input" @tap='showPicker'>
				<view class="inputtext"
					:style="address=='请选择所属地区'?'font-size:22rpx;font-weight: 400;color: #8E8E8E !important;':''">
					{{address}}
				</view>
				<image src="../../static/huijiantou.png" mode=""></image>
			</view>
			<view class="text">
				患者姓名
			</view>
			<view class="input">
				<input v-model="formdata.patientName" class="uinput noimageuinput" placeholder="请输入患者姓名" type="text"
					placeholder-class="phsy" />
			</view>
			<view class="text">
				患者身份证号
			</view>
			<view class="input">
				<input v-model="formdata.cardNo" class="uinput noimageuinput" placeholder="请输入患者身份证号" type="text"
					placeholder-class="phsy" />
			</view>
			<view class="text">
				患者联系电话
			</view>
			<view class="input">
				<input v-model="formdata.phone" class="uinput noimageuinput" placeholder="请输入患者联系电话" type="text"
					placeholder-class="phsy" />
			</view>
		</view>
		<view class="title">
			<view class="left">
			</view>
			<view class="right">
				第二步：填写问诊信息
			</view>
		</view>
		<view class="item">
			<view class="text">
				问题简述
			</view>
			<view class="input">
				<input v-model="formdata.problemDescription" class="uinput noimageuinput" placeholder="不多于五个字"
					type="text" placeholder-class="phsy" />
			</view>
			<view class="text">
				患者个体情况说明
			</view>
			<view class="input" style="height: 200rpx;overflow-Y: scroll;">
				<u-input v-model="formdata.situationDescription" class="uinput noimageuinput" placeholder=" "
					type="textarea" :maxlength="100" />
			</view>
			<view class="text">
				问题描述
			</view>
			<view class="input" style="height: 200rpx;overflow-Y: scroll;">
				<u-input v-model="formdata.problemStatement" class="uinput noimageuinput" placeholder=" "
					type="textarea" :maxlength="500" />
			</view>
			<view class="text">
				既往疾病史
			</view>
			<view class="input" style="height: 200rpx;overflow-Y: scroll;">
				<u-input v-model="formdata.medicalRecord" class="uinput noimageuinput" placeholder=" " type="textarea"
					:maxlength="100" />
			</view>
		</view>
		<view class="title">
			<view class="left">
			</view>
			<view class="right">
				第三步：上传附件文件
			</view>
		</view>
		<view class="item">
			<view class="text">
				附件材料上传
			</view>
			<u-upload ref="uUpload" :max-count='9' :action="uoloadaction" :auto-upload="false" upload-text=' '
				@on-choose-complete='onchoosecomplete' @on-success='onsuccess' @on-uploaded='onuploaded'></u-upload>
			<view class="textarea">
				<view class="">
					最多支持9个文件；
				</view>
				<view class="">
					单个文件大小不允许超过10MB；
				</view>
				<view class="">
					只支持上传照片图片、视频文件，后缀类型为：JPG.PNG.MP4
				</view>
			</view>
		</view>
		<view class="btns">
			<view class="btnleft">
				返回
			</view>
			<view class="btnright" @tap='updata'>
				保存
			</view>
		</view>
		<view class="">
			<m-city style='z-index: 10076;' :provinceData="list" headTitle="请选择所属地区" ref="cityPicker"
				@funcValue="getpickerParentValue" pickerSize="4">
			</m-city>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getSubordinateRegions,
	} from '@/api/pagesB/modifyAddress/modifyAddress.js';
	import gkcity from "../../components/m-city/m-city.vue";
	import baseurl from '@/api/baseurl.js'
	import {
		consultationInfo
	} from '@/api/pagesB/createnewconsultation/createnewconsultation.js'
	export default {
		components: {
			"m-city": gkcity
		},
		data() {
			return {
				// 非真实地址
				uoloadaction: '',
				list: [],
				addresslength: null,
				imglistlength: null,
				address: '请选择所属地区', //页面所属区域
				formdata: {
					address: '请选择所属地区', //页面所属区域
					patientId: 1,
					patientName: '李广君',
					cardNo: '370882199909092123',
					phone: '17615455437',
					address: '',
					doctorId: 1,
					doctorName: '李医生',
					consultationType: 'IMAGE_TEXT_CONSULTATION',
					problemDescription: '',
					situationDescription: '',
					problemStatement: '',
					medicalRecord: '',
					fileUrls: []
				}
			};
		},
		onLoad(options) {
			this.uoloadaction = baseurl + '/nurseApplet/consultationInfo/uploadConsultationFile'
		},
		onShow() {
			this.areaInfo();
		},
		methods: {
			updata() {
				if (this.imglistlength > 0) {
					this.$refs.uUpload.upload()
				} else {
					this.info();
				}
			},
			onchoosecomplete(lists, name) {
				this.imglistlength = lists.length
			},
			onsuccess(data, index, lists, name) {
				if (data.code == 200) {
					this.formdata.fileUrls.push(data.fileUrl)
				}
			},
			onuploaded() {
				this.info();
			},
			info() {
				consultationInfo(this.formdata).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '新建图文问诊成功',
							type: 'success',
							duration: '1500',
							back: 1
						})
					}
				})
			},
			// 显示三级地址联动
			showPicker() {
				this.$refs.cityPicker.show();
			},
			//区街道
			areaInfo() {
				getSubordinateRegions().then(res => {
					this.list = res.data;
				})
			},
			// 三级地址联动回调
			getpickerParentValue(e) {
				e = e.filter(ele => ele.localName != '暂不选择')
				e = e.filter(ele => ele.localName != '暂无需选择')
				this.addresslength = e
				this.formdata.address = ''
				this.address = ''
				if (e && e.length >= 1) {
					e.forEach(el => {
						this.formdata.address = this.formdata.address + el.localName
						this.address = this.address + el.localName
					})
				} else {
					this.formdata.address = ''
					this.address = '请选择所属地区'
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5F7;
	}

	.app {
		padding-top: 10rpx;
		width: 100%;

		.btns {
			width: 100%;
			display: flex;
			font-size: 31rpx;
			justify-content: space-around;
			text-align: center;
			font-weight: 500;
			margin-top: 80rpx;
			padding-bottom: 50rpx;

			.btnleft {
				width: 290rpx;
				height: 62rpx;
				background: #FFFFFF;
				border: 1px solid #26A888;
				border-radius: 5rpx;
				color: #26A888;
				line-height: 62rpx
			}

			.btnright {
				width: 289rpx;
				height: 62rpx;
				background: #26A888;
				border-radius: 5rpx;
				color: #FFFFFF;
				line-height: 62rpx;
			}
		}

		.item {
			width: 96%;
			margin: 20rpx auto;
			background-color: #fff;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			padding-bottom: 50rpx;

			.textarea {
				font-size: 18rpx;
				font-weight: 400;
				color: #8E8E8E;
				line-height: 42rpx;
				padding: 30rpx 0 0 40rpx;
			}

			.text {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				padding: 30rpx 0 0 40rpx;
			}

			::v-deep .u-upload {
				padding: 30rpx 30rpx 0 30rpx;
			}

			.input {
				width: 90%;
				height: 80rpx;
				border-radius: 5rpx;
				background: #f6f6f6;
				margin: 20rpx 0 0 40rpx;
				position: relative;
				padding-left: 10rpx;

				image {
					width: 10rpx;
					height: 20rpx;
					position: absolute;
					top: 50%;
					right: 5%;
					transform: translateY(-50%);
				}

				.uni-textarea-placeholder {
					padding-left: 12rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #8E8E8E !important;
				}

				.phsy {
					padding-left: 12rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #8E8E8E !important;
				}

				.inputtext {
					padding-left: 12rpx;
					color: black;
					font-size: 26rpx;
					width: 90%;
					height: 80rpx;
					line-height: 80rpx;
				}

				.uinput {
					color: black;
					font-size: 26rpx;
					width: 90%;
					height: 80rpx;
					line-height: 80rpx;
				}

				.noimageuinput {
					width: 98% !important;
				}
			}
		}

		.title {
			width: 100%;
			padding: 10rpx 0 10rpx 35rpx;

			.left {
				vertical-align: middle;
				display: inline-block;
				width: 10rpx;
				height: 30rpx;
				background: #26A888;
				border-radius: 1rpx;
			}

			.right {
				vertical-align: middle;
				display: inline-block;
				font-size: 30rpx;
				font-weight: 500;
				color: #26A888;
				line-height: 30rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>