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" @focus="inputBindFocus" @blur="inputBindBlur"/>
			<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:{},
				type:'',//专家是否通过 0未审理 1没通过 2通过了
				id:'',
				KeyboardHeight:''
			}
		},
		onLoad(option) {
			console.log(this.format())
			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) {
			    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>