<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>