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>