v3-h5-web/pages_manage/views/accessQualification/accessQualificationInfo.vue

<!-- 准入资格申请详情 -->
<template>
	<view id="accessQualificationInfo">
		<view class="user-info-box">
			<view class="user-info-box-min">
				<view>实验室：</view>
				<view>{{newData.labSecurityApply.subName}}{{newData.labSecurityApply.roomNum?'('+newData.labSecurityApply.roomNum+')':''}}</view>
			</view>
			<view class="user-info-box-min">
				<view>申请人：</view>
				<view>{{newData.labSecurityApply.userName}}</view>
			</view>
			<view class="user-info-box-min" style="flex-direction: column;">
				<view>申请时限：</view>
				<view>{{newData.labSecurityApply.validBeginTime}}至{{newData.labSecurityApply.validEndTime}}</view>
			</view>
			<view class="user-info-box-min">
				<view>申请备注：</view>
				<view>{{newData.labSecurityApply.applyCause==null?'':newData.labSecurityApply.applyCause}}</view>
			</view>
		</view>
		<view class="user-info-box" style="margin-bottom:20rpx;">
			<view class="user-info-box_title">
				<view style="color: red;">*</view>身份信息：(关联学生信息材料)
			</view>
			<view class="user-info-box-min">
				<view>申请人：</view>
				<view>{{newData.sysUser.userName}}</view>
			</view>
			<view class="user-info-box-min">
				<view>联系电话：</view>
				<view>{{newData.sysUser.mobile}}</view>
			</view>
			<view class="user-info-box-min">
				<view>学号：</view>
				<view>{{newData.sysUser.account}}</view>
			</view>
			<!-- <view class="user-info-box-min">
				<view>物理卡号：</view>
				<view>{{newData.sysUser.cardNum}}</view>
			</view> -->
			<view class="user-info-box-min" v-if="newData.sysUser.gradeName">
				<view>班级：</view>
				<view>{{newData.sysUser.gradeName}}</view>
			</view>
			<view class="user-info-box-min" v-if="newData.sysUser.tutorUserName">
				<view>导师：</view>
				<view>{{newData.sysUser.tutorUserName}}</view>
			</view>
		</view>
		<view v-for="(item,index) in newData.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="newData.listcert[0]" class="item-img-box" :src="newData.listcert[0].cert_url">
				<view v-if="!newData.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="imagesUrl('commonality/icon_pdf.png')" v-if="minItem.type == 'pdf'">
					<img :src="imagesUrl('commonality/icon_word.png')"
						v-if="minItem.type == 'doc' || minItem.type == 'docx'">
					<img :src="baseUrl+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-box" v-if="newData.labSecurityApply.auditStatus == 0">
			<view @click="goReviewFailed">驳回</view>
			<view @click="accessButtonClick">审核通过</view>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		laboratoryAppletGetApplyDetails,
		laboratoryAppletEditApp
	} from '@/pages_manage/api/index.js'
	export default {
		data() {
			return {
				baseUrl: config.base_url,
				pageType: false,
				//获取数据
				subjectData: {},
				newData: {
					labSecurityApply:{
						subName:'',
						userName:'',
						validBeginTime:'',
						applyCause:'',
					},
					sysUser:{
						userName:'',
						mobile:'',
						account:'',
						gradeName:'',
						tutorUserName:'',
					},
					listTemp:[],
				},
				itemData: {},
				type: 0,
				applyId: '',
			}
		},
		onLoad(option) {
			let self = this;
			if (!uni.getStorageSync('token')) {
				uni.setStorageSync('manageCation', option.item)
				uni.redirectTo({
					url: '/pages/views/login/login',
				});
			}else{
				if(uni.getStorageSync('manageCation')){
					uni.removeStorageSync('manageCation');
				}
				this.infoData = JSON.parse(decodeURIComponent(option.item));
				this.applyId = JSON.parse(decodeURIComponent(option.item)).applyId;
				this.laboratoryAppletGetApplyDetails();
				//修改页面title
				uni.setNavigationBarTitle({
					title: this.infoData.auditStatus == 0 ? '待审核' : (this.infoData.auditStatus == 1 ? '未通过' : (this
						.infoData.auditStatus == 2 ? '已通过' : ''))
				});
			}
		},
		onShow() {

		},
		methods: {
			//审核按钮
			accessButtonClick() {
				let self = this;
				uni.showModal({
					content: '确认审核吗?',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							self.laboratoryAppletEditApp();
						} else if (res.cancel) {}
					}
				});
			},
			//审核接口
			async laboratoryAppletEditApp() {
				let obj = {
					applyId: this.newData.labSecurityApply.applyId,
					auditStatus: 2,
				};
				const {
					data
				} = await laboratoryAppletEditApp(obj)
				if (data.code == 200) {
					uni.showToast({
						title: '审核成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack();
					}, 2000);
				}

			},
			lookItem(minItem) {
				let self = this;
				if (minItem.type == 'png' || minItem.type == 'jpg' || minItem.type == 'jpeg' || minItem.type == 'gif') {
					//查看图片
					wx.previewImage({
						urls: [self.baseUrl + 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: '下载中'
					});
					
					console.log(self.baseUrl + '/' + minItem.name)
					console.log(minItem.url)
					//下载文档
					wx.downloadFile({
						url: self.baseUrl+minItem.url,
						header: {
							Authorization: uni.getStorageSync('token')
						},
						success: function(res) {
							const fileManager = wx.getFileSystemManager()
							const filePath = wx.env.USER_DATA_PATH + '/' + minItem.name
							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
							});
						}
					})
				}
			},

			goReviewFailed() {
				let obj = {
					applyId: this.newData.labSecurityApply.applyId,
					rejectCause: this.newData.listTemp,
				}
				uni.navigateTo({
					url: '/pages_manage/views/accessQualification/approve?item=' + encodeURIComponent(JSON.stringify(
						obj))
				})
			},
			//查看图片
			lockImg(list) {
				if (!list[0]) {
					return
				}
				wx.previewImage({
					urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

			//审核信息详情
			async laboratoryAppletGetApplyDetails() {
				const {
					data
				} = await laboratoryAppletGetApplyDetails({
					applyId: this.applyId
				})
				if (data.code == 200) {
					let self = this;
					let dataList = [];
					for (let i = 0; i < data.data.listTemp.length; i++) {
						if (data.data.listTemp[i].materialType == 2 && data.data.listTemp[i].materialType == 2) {
							dataList.unshift(data.data.listTemp[i]);
						}
					}
					for (let i = 0; i < data.data.listTemp.length; i++) {
						if (data.data.listTemp[i].materialType == 1) {
							dataList.push(data.data.listTemp[i]);
						}
					}
					for (let i = 0; i < data.data.listTemp.length; i++) {
						if (data.data.listTemp[i].materialType == 2 && data.data.listTemp[i].materialType == 1) {
							dataList.unshift(data.data.listTemp[i]);
						}
					}
					this.$set(data.data, 'listTemp', dataList);
					let newList = [];
					for (let i = 0; i < data.data.listTemp.length; i++) {
						if (data.data.listTemp[i].materialType == 1) {
							let maxList = [];
							for (let o = 0; o < data.data.listTemp[i].listMr.length; o++) {
								let bigList = data.data.listTemp[i].listMr[o].dataUrl.split(',');
								for (let x = 0; x < bigList.length; x++) {
									if (bigList[x]) {
										let minList = bigList[x].split(';');
										let typeList = minList[0].split('.');
										let obj = {
											name: minList[0],
											url: minList[1],
											type: typeList[1],
										};
										maxList.push(obj);
									}
								}
							}
							data.data.listTemp[i].upList = maxList;
							let obj = {};
							if (maxList.length > 0) {
								obj = {
									forIndex: 0,
									url: self.baseUrl + maxList[0].url
								}
							}
							newList.push(obj);
						} else {
							let obj = {
								forIndex: "",
								url: ""
							}
							newList.push(obj);
						}
					}
					this.$set(this, 'newData', data.data)
					console.log(this.newData)
				}

			},
		}
	}
</script>

<style lang="stylus" scoped>
	#accessQualificationInfo {
		height: 100%;
		overflow-y scroll;

		.user-info-box {
			background #fff;
			border-radius: 20rpx;
			margin: 20rpx 20rpx 0;
			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-box {
			display flex;
			width: 650rpx;
			margin: 40rpx auto;

			view {
				height: 100rpx;
				text-align center;
				line-height: 100rpx;
				color: #fff;
				width: 325rpx;
			}

			view:nth-child(1) {
				background: linear-gradient(-45deg, #FA9901, #F28E26);
				border-radius: 50rpx 0 0 50rpx;
			}

			view:nth-child(2) {
				background: linear-gradient(-35deg, #309CFF, #0183FA);
				border-radius: 0 50rpx 50rpx 0;
			}
		}
	}
</style>