BLi/pages/doctor/uploadExpert.vue

<template>
	<view class="uploadExpert">
		<u-toast ref="uToast" />
		<view class="title">{{patient.title}}</view>
		<view class="flex">
			<view class="upData flex">
				{{patient.caseName}}
			</view>
		</view>
		<view class="box" v-if="patient.type==1">
			<view class="tit_box" style="color: #FF5E59;">不通过原因</view>
			<text class="msg">{{patient.zjspNotpass}}</text>
		</view>
		<view class="box" v-else-if="patient.type==2">
			<view class="tit_box">通过原因</view>
			<text class="msg">{{patient.zjspPass}}</text>
		</view>
		<view class="box">
			<view class="tit">患者信息</view>
			<view class="input flex">
				<view class="icon">姓名</view>
				<text>{{EncryptName(patient.name)}}</text>
			</view>
			<view class="input flex">
				<view class="icon">城市</view>
				<text>{{patient.city}}</text>
			</view>
			<view class="input flex">
				<view class="icon">医院</view>
				<text>{{patient.hospital}}</text>
			</view>
		</view>
		<view class="box">
			<view class="tit">病例详情</view>
			<view class="input flex">
				<view class="icon">病例类型</view>
				<text style="color:#167FFF">{{patient.caseName}}</text>
			</view>
			<view class="input">
				<view class="label">备注</view>
				<text>{{patient.remark}}</text>
			</view>
			<view class="input">
				<view class="label flex numbers" style="margin-bottom: 24rpx;">相关照片</view>
				<view class="imgList" v-for="(item,index) in pic" :key="index">
					<image :src="item" mode="" @click="previewImage(item)"></image>
					<view class="text" v-if="patient.picWordRecognition" @click="words()">
						{{strArr[index].slice(0,70)}}...
						<text>更多</text>
					</view>
				</view>
			</view>
			<view class="input">
				<view class="label flex numbers">相关文件</view>
				<view v-for="(item,index) in mhFile" :key="index">
					<view class="list flex">
						<image v-if="format(item)" src="../../static/img/P.png" mode=""></image>
						<image v-else src="../../static/img/V.png" mode=""></image>
						<text>{{mhFileName[index]}}</text>
					</view>
					<view class="template" @click="downloadFile(item)">下载地址（<text class="herf">{{item}}</text>）</view>
				</view>
			</view>
		</view>
		<view class="uploadBtn" v-if="patient.type==0">
			<view class="no" @click="showType(1)">不通过</view>
			<view class="yes" @click="showType(2)">通过</view>
		</view>
		<u-mask :show="show" @click="show = false">
		</u-mask>
		<view class="popup" v-if="show" :style="'bottom:'+KeyboardHeight+'px;'">
			<view class="tit" v-if="type==2">通过原因</view>
			<view class="tit" v-else>不通过原因</view>
			<textarea v-model="value" type="textarea" :border="false" :show-confirm-bar="false" :clearable="false" :adjust-position="false" />
			<view class="btn" v-if="type==2" @click="patientQuideEdit()">确定通过</view>
			<view class="btn" v-else @click="patientQuideEdit()">确定不通过</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 演示地址，请勿直接使用
				action: 'http://www.example.com/upload',
				pic: [],
				mhFile: [],
				mhFileName: [],
				strArr: [],
				show: false,
				value: '', //审批理由
				patient: {
					name: ''
				},
				type: '', //专家是否通过 0未审理 1没通过 2通过了
				id: '',
				KeyboardHeight: ''
			}
		},
		onLoad(option) {
			console.log(this.format())
			uni.onKeyboardHeightChange(res => {
				this.KeyboardHeight = res.height
			})
			if (option.id) {
				this.id = option.id
				if (uni.getStorageSync('patient') && option.id == JSON.parse(uni.getStorageSync('patient')).id) {
					this.patient = JSON.parse(uni.getStorageSync('patient'))
					console.log(this.patient)
					if (this.patient.pic != '') {
						this.pic = this.patient.pic.split(',')
					}
					// 文件回显
					if (this.patient.mhFile && this.patient.secondaryUploadFile) {
						this.mhFile = this.patient.mhFile.split(',').concat(this.patient.secondaryUploadFile.split(','))
					} else {
						if (this.patient.mhFile) {
							this.mhFile = this.patient.mhFile.split(',')
						}
						if (this.patient.secondaryUploadFile) {
							this.mhFile = this.patient.secondaryUploadFile.split(',')
						}
					}
					console.log(this.mhFile)
					//文件名回显
					if (this.patient.mhFileName && this.patient.secondaryUploadFileName) {
						this.mhFileName = this.patient.mhFileName.split(',').concat(this.patient.secondaryUploadFileName.split(','))
					} else {
						if (this.patient.mhFileName) {
							this.mhFileName = this.patient.mhFileName.split(',')
						}
						if (this.patient.secondaryUploadFileName) {
							this.mhFileName = this.patient.secondaryUploadFileName.split(',')
						}
					}
					console.log(this.mhFileName)
					if (this.patient.picWordRecognition != '' && this.patient.picWordRecognition != null) {
						this.strArr = this.patient.picWordRecognition.split(',')
					}
				}
			}
		},
		methods: {
			format(str) {
				if (str.indexOf('ppt') != -1) {
					return true
				} else {
					return false
				}
			},
			EncryptName(name) {
				if(!name){
					return ''
				}
				let newStr;
				if (name.length === 2) {
					newStr = name.substr(0, 1) + '*';
				} else if (name.length > 2) {
					let char = '';
					for (let i = 0, len = name.length - 2; i < len; i++) {
						char += '*';
					}
					newStr = name.substr(0, 1) + char + name.substr(-1, 1);
				} else {
					newStr = name;
				}

				return newStr;
			},
			// 图片预览
			previewImage(url) {
				console.log(url)
				let arr = [];
				arr.push(url)
				console.log(arr, '图片的地址')
				uni.previewImage({
					current: 0,
					urls: arr //必须是网址路径，否则加载不出来，如：http：或https：
				});
			},
			inputBindFocus(e) {

				uni.onKeyboardHeightChange(res => {
					console.log('log', res);
					this.KeyboardHeight = res.height
				})
			},
			inputBindBlur() {
				this.KeyboardHeight = 0
			},
			DropdownMeh(item) {
				this.DropdownIndex = item;
				this.Dropdown = false;
			},
			showType(type) {
				this.type = type;
				this.show = true
			},
			// 时间格式化
			format() {
				var date = new Date();
				console.log(date.getFullYear()); // 返回当前日期的年  2019
				console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦
				console.log(date.getDate()); // 返回的是 几号
				console.log(date.getDay()); // 3  周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
				// 我们写一个 2019年 5月 1日 星期三
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var dates = date.getDate();
				var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				var day = date.getDay();

				console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
				var h = date.getHours();
				h = h < 10 ? '0' + h : h;
				var m = date.getMinutes();
				m = m < 10 ? '0' + m : m;
				var s = date.getSeconds();
				s = s < 10 ? '0' + s : s;
				return year + '-' + month + '-' + dates + ' ' + h + ':' + m + ':' + s;
			},
			patientQuideEdit(type) {
				let data = {};
				if (this.type == 1) {
					data = {
						id: this.id,
						type: this.type,
						zjspNotpass: this.value,
						// auditorTime:this.format()
					}
				} else {
					data = {
						id: this.id,
						type: this.type,
						zjspPass: this.value,
						// auditorTime:this.format()
					}
				}

				if (this.value == '') {
					this.$refs.uToast.show({ title: '请输入原因', type: 'error ', })
					return;
				}
				this.$http.patientQuideEdit(data)
					.then(res => {
						console.log(res)
						if (res.data.code == 200) {
							this.$refs.uToast.show({
								title: '提交成功',
							})
							uni.navigateTo({
								url: '/pages/index/calendarExpert',
							})
						} else {
							this.$refs.uToast.show({
								title: res.data.message,
								type: 'error ',
							})
						}
					})
			},
			words() {
				if (this.strArr == '') {
					return
				}
				uni.navigateTo({
					url: '/pages/doctor/words',
				})
			},
			// 下载文件
			downloadFile(url) {
				uni.showLoading({ title: '正在下载……' });
				uni.downloadFile({
					url: url,
					success: (data) => {
						console.log('打印data', data)
						if (data.statusCode === 200) {
							console.log('下载成功');
							//隐藏加载框
							uni.hideLoading();
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									// console.log('打印res',res)
									uni.showToast({
										icon: 'success',
										mask: true,
										// title: '文件已保存：' + res.savedFilePath, //保存路径
										title: '下载成功',
										duration: 2000,
									});

									//自动打开文档查看
									setTimeout(() => {
										var filePath = res.savedFilePath;
										uni.openDocument({ //新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
											filePath: filePath,
											showMenu: true,
											success: function(res) {
												console.log('打开文档成功');
											}
										});
									}, 1000)
								},
							});
						}
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	.uploadExpert {
		padding: 32rpx 32rpx 120rpx;

		.popup {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			padding: 32rpx;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			z-index: 99999;

			textarea {
				box-sizing: border-box;
				width: 100%;
				padding: 20rpx;
				border-radius: 24rpx;
				background-color: #F3F3F3;
				font-size: 28rpx;
				color: #000;
				margin-top: 24rpx;
				margin-bottom: 70rpx;
			}

			.tit {
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.8);
			}

			.u-input__input {}

			.btn {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
				background: #167FFF;
				border-radius: 48rpx;
			}
		}

		.title {
			font-size: 48rpx;
			color: #000;
			padding-bottom: 24rpx;
			font-weight: bold;
		}

		.flex {
			position: relative;

			.Dropdown {
				position: absolute;
				top: 0;
				z-index: 10;
				width: 100%;
				padding: 24rpx 36rpx 0;
				background-color: #fff;
				box-shadow: 0px 2rpx 20rpx 0px rgba(0, 0, 0, 0.1);
				border-radius: 16rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.8);

				.li {
					margin-bottom: 28rpx;
				}

				.active {
					color: $color;
				}
			}
		}

		.upData {
			display: inline-block;
			padding: 4rpx 24rpx;
			background: rgba(22, 127, 255, 0.1);
			border-radius: 24rpx;
			font-size: 28rpx;
			color: $color;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
		}

		.box {
			box-sizing: border-box;
			padding: 32rpx 20rpx 0;
			background-color: #fff;
			border-radius: 24rpx;
			margin-top: 24rpx;

			.tit_box {
				font-size: 32rpx;
				color: $color;
				font-weight: bold;
			}

			.msg {
				display: block;
				margin-top: 24rpx;
				font-size: 28rpx;
				color: #000000;
				padding-bottom: 32rpx;
			}

			.tit {
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.8);
				font-weight: bold;
			}

			.input {
				position: relative;

				.label {
					font-size: 28rpx;
					font-weight: bold;
				}

				.icon {
					font-weight: bold;
					width: 140rpx;
					color: rgba(0, 0, 0, 0.8);
				}

				.msg {
					color: rgba(0, 0, 0, 0.35);
					margin-left: 10rpx;
				}

				.list {
					padding: 20rpx;
					background: rgba(227, 66, 33, 0.1);
					border-radius: 24rpx;
					font-size: 28rpx;
					color: #000000;
					margin-top: 20rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					text {
						flex: 1;
						width: 100%;
						word-wrap: break-word;
					}
				}

				.list1 {
					background: rgba(22, 127, 255, 0.1);
				}

				u-input {
					flex: 1;
				}

				.imgList {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-bottom: 24rpx;

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 24rpx;
					}

					.text {
						flex: 1;
						padding-left: 24rpx;

						text {
							color: $color;
						}
					}
				}

				image {
					width: 32rpx;
					height: 32rpx;
				}

				text {
					color: rgba(0, 0, 0, 0.8);
				}
			}

			.input:last-child {
				border-bottom: 1px solid transparent;
			}
		}

		.template {
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #000;

			.herf {
				color: #167FFF !important;
				word-wrap: break-word;
			}
		}

		.suc {
			position: relative;
			text-align: center;
			width: 520rpx;
			height: 510rpx;
			margin: 0 auto;

			image {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 510rpx;
			}

			.con {
				position: relative;
				z-index: 11;
				text-align: center;
				box-sizing: border-box;
				padding: 0 40rpx;
				overflow: hidden;

				.tit {
					font-size: 36rpx;
					color: $color;
					padding-top: 190rpx;
				}

				.p {
					width: 230rpx;
					margin: 32rpx auto 50rpx;
					font-size: 28rpx;
					color: rgba(0, 0, 0, 0.6);
				}

				.btn {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					view {
						width: 208rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						border: 2rpx solid rgba(0, 0, 0, 0.35);
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.35);
						border-radius: 40rpx;
					}

					.next {
						background-color: $color;
						color: #fff;
						border: 2rpx solid $color;
					}
				}
			}
		}

		.u-mode-center-box {
			background-color: transparent !important;
		}

		.uploadBtn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 12rpx 32rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			color: #fff;
			background-color: #fff;

			.no {
				width: 320rpx;
				padding: 20rpx 0;
				text-align: center;
				box-sizing: border-box;
				border-radius: 48rpx;
				background: #FF8F2E;
			}

			.yes {
				width: 320rpx;
				box-sizing: border-box;
				border-radius: 48rpx;
				padding: 20rpx 0;
				text-align: center;
				background-color: $color;
			}
		}
	}
</style>