v3-lab-xcx/pages_student/accessApplication/applicationDetails.vue

<!-- 申请详情 -->
<template>
    <view id="applicationDetails" v-if="pageType">
		<view class="user-info-box">
			<view class="user-info-box-min">
				<view>实验室：</view>
				<view>{{subjectData.labSecurityApply.subjectName}}</view>
			</view>
			<view class="user-info-box-min">
				<view>申请时限：</view>
				<view>{{subjectData.labSecurityApply.validBeginTime}}至{{subjectData.labSecurityApply.validEndTime}}</view>
			</view>
			<view class="user-info-box-min">
				<view>申请备注：</view>
				<view>{{subjectData.labSecurityApply.applyCause}}</view>
			</view>
		</view>
		<view class="user-info-box">
			<view class="user-info-box_title"><view style="color: red;">*</view>身份信息：(关联学生信息材料)</view>
			<view class="user-info-box-min">
				<view>申请人：</view>
				<view>{{subjectData.sysUser.nickName}}</view>
			</view>
			<view class="user-info-box-min">
				<view>联系电话：</view>
				<view>{{subjectData.sysUser.phonenumber}}</view>
			</view>
			<view class="user-info-box-min" >
				<view>学号：</view>
				<view>{{subjectData.sysUser.userName}}</view>
			</view>
			<view class="user-info-box-min">
				<view>物理卡号：</view>
				<view>{{subjectData.sysUser.cardNum}}</view>
			</view>
			<view class="user-info-box-min" >
				<view>班级：</view>
				<view>{{subjectData.sysUser.grade}}</view>
			</view>
			<view class="user-info-box-min" >
				<view>导师：</view>
				<view>{{subjectData.sysUser.tutorUserName}}</view>
			</view>

		</view>
		<view v-for="(item,index) in subjectData.listTemp" :key="index" style="overflow: hidden;">
			<view class="img-box" v-if="item.materialType==2&&item.relationType==2">
				<view class="img-title">安全考试证书</view>
				<img v-if="subjectData.listcert[0]" class="item-img-box" :src="subjectData.listcert[0].cert_url">
				<view v-if="!subjectData.listcert[0]" style="margin-left:40px;color:#999;font-size:14px;">暂无证书</view>
			</view>
			<view class="word-box" v-if="item.materialType==1">
				<view class="word-box-title">{{item.materialName}}</view>
				<view class="word-box-min" v-for="(minItem,minIndex) in item.upList" :key="minIndex" @click="lookItem(minItem)">
					<img src="@/images/basicsModules/icon_pdf.png" v-if="minItem.type == 'pdf'">
					<img src="@/images/basicsModules/icon_word.png" v-if="minItem.type == 'doc' || minItem.type == 'docx'">
					<img :src="configUrl+minItem.url" v-if="minItem.type == 'png' || minItem.type == 'jpg' || minItem.type == 'jpeg' || minItem.type == 'gif'">
					<view>{{minItem.name}}</view>
				</view>
			</view>
		</view>
		<view class="bottom-button-p" v-if="subjectData.labSecurityApply.auditStatus == 1" @click="bottomButtonClick">重新提交</view>
    </view>
</template>

<script>
    import { getDetails } from '@/api/apiDemo/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				pageType:false,
				//传参数据
				infoData:{},
				//获取数据
				subjectData:{},
				configUrl:config.base_url,
            }
        },
        onLoad(option) {
            this.infoData = JSON.parse(decodeURIComponent(option.item));
            //修改页面title
            uni.setNavigationBarTitle({
                title:this.infoData.auditStatus==0?'待审核':(this.infoData.auditStatus==1?'未通过':(this.infoData.auditStatus==2?'已通过':''))
            });
        },
        onShow(){
            this.getDetails();
        },
        methods: {
			lookItem(minItem){
				console.log("minItem",minItem)
				if(minItem.type == 'png' || minItem.type == 'jpg' || minItem.type == 'jpeg' || minItem.type == 'gif'){
					//查看图片
					wx.previewImage({
						urls: [config.base_url+minItem.url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: '', // 当前显示图片的http链接，默认是第一个
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				}else if(minItem.type == 'pdf' || minItem.type == 'doc' || minItem.type == 'docx'){
					uni.showLoading({
					    title: '下载中'
					});
					//下载文档
					wx.downloadFile({
						url: config.base_url+minItem.url,
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: function (res) {
							console.log("resresresresresres",res)
							const fileManager = wx.getFileSystemManager()
							const filePath = wx.env.USER_DATA_PATH + '/' + minItem.name + '.docx'
							fileManager.saveFile({
								tempFilePath: res.tempFilePath,
								filePath,
								success: () => {
									uni.hideLoading();
									wx.openDocument({
										filePath: filePath,
										showMenu: true,
										fileType: minItem.type
									})
								},
								fail: function (res){
									uni.hideLoading();
									uni.showToast({
										title: '下载失败',
										icon:"none",
										mask:true,
										duration: 2000
									});
								}
							})
						},
						fail: function (res){
							uni.hideLoading();
							uni.showToast({
								title: '下载失败',
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
					})
				}
			},
			//重新提交
			bottomButtonClick(){
				uni.navigateTo({
				    url:'/pages_student/accessApplication/newApplication?item='+encodeURIComponent(JSON.stringify(this.subjectData))
				});
			},
            //获取安全准入审批记录详细信息(用户端)
            async getDetails() {
                let self = this;
                const {data} = await getDetails({id:this.infoData.id})
                if(data.code==200){
				  for(let i=0;i<data.data.listTemp.length;i++){
					  console.log(data.data.listTemp.length)
					if(data.data.listTemp[i].materialType == 1){
					  let maxList = [];
					  for(let o=0;o<data.data.listTemp[i].listMr.length;o++){
						   console.log(data.data.listTemp[i].listMr.length)
						let bigList = data.data.listTemp[i].listMr[o].dataUrl.split(',');
						for(let x=0;x<bigList.length;x++){
							console.log(bigList.length)
						  if(bigList[x]){
							let minList = bigList[x].split(';');
							let minListTwo = minList[0].split('.')
							let obj = {
							  name:minList[0],
							  url:minList[1],
							  type:minListTwo[1]
							};
							maxList.push(obj);
						  }
						}
					  }
					  data.data.listTemp[i].upList = maxList;
					  console.log('maxList[0].url',maxList);
					  // self.iframeSrc = window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_FILE_API + '/onlinePreview?url='+encodeURIComponent(btoa(unescape(encodeURIComponent(maxList[0].url))));
					}
				  }
				  this.$set(this,"subjectData",data.data);
				  this.pageType = true;
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    #applicationDetails{
        height:100%;
        width:100%;
        overflow-y scroll
		.user-info-box{
			background #fff;
			border-radius:20rpx;
			margin:20rpx 20rpx;
			padding:20rpx 0;
			.user-info-box_title{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 30rpx;
				margin-left: 24rpx
				margin-bottom :10px;
				>view{
					display inline-block;
				}
			}
			.user-info-box-min{
				margin:0 26rpx;
				display flex;
				view{
					line-height:66rpx;
					font-size:28rpx;
				}
				view:nth-child(1){
					width:140rpx;
					color:#999;
				}
				view:nth-child(2){
					flex:1;
					text-align right;
					color:#333;
				}
			}
		}
		.user-card-box{
			background #fff;
			border-radius:20rpx;
			margin:0 20rpx 20rpx;
			padding:20rpx 0;
			.user-card-title{
				padding-left:24rpx;
				font-size:30rpx;
				font-weight:700;
				margin-bottom:20rpx;
			}
			.user-card-text{
				line-height:66rpx;
				font-size:28rpx;
				color:#999;
				padding:0 24rpx;
			}
		}
		.img-box{
			background #fff;
			border-radius:20rpx;
			margin:0 20rpx 20rpx;
			padding:20rpx 0;
			.img-title{
				padding-left:24rpx;
				font-size:30rpx;
				font-weight:700;
				margin-bottom:20rpx;
			}
			img{
				display block;
				width:640rpx;
				margin:0 auto 10rpx;
			}
		}
		.word-box{
			background #fff;
			border-radius:20rpx;
			margin:0 20rpx 20rpx;
			padding:20rpx 0;
			.word-box-title{
				padding-left:24rpx;
				font-size:30rpx;
				font-weight:700;
				margin-bottom:20rpx;
			}
			.word-box-min{
				display flex;
				margin:0 20rpx 20rpx;
				img{
					height:60rpx;
					width:60rpx;
				}
				view{
					margin-left:20rpx;
					line-height:60rpx;
				}
			}
		}
		.bottom-button-p{
			width:650rpx;
			height:100rpx;
			line-height:100rpx;
			text-align center;
			border-radius:20rpx;
			margin:20rpx 50rpx;
			background: #0183fa;
			color:#fff;
		}
    }
</style>