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

<!-- 准入申请 -->
<template>
	<view id="accessApplication">
		<view class="button-max-box" @click="goFaceImage">
			<img src="@/images/basicsModules/icon_001.png">
			<view>身份验证</view>
			<view :class="!identifyType?'colorA':'marginType'">{{!identifyType?'去认证':'已认证'}}</view>
			<img v-if="!identifyType" src="@/images/basicsModules/icon_04.png">
		</view>
		<view class="for-box" v-for="(item,index) in dataList" :key="index">
			<view class="button-view" @click="selectImage(index)" v-if="!item.url">+ 添加</view>
			<img :src="item.url" @click="selectImage(index)" v-else>
			<view class="for-title">{{item.materialName}}</view>
		</view>
		<view class="null-p"></view>
		<view class="bottom-button-view" @click="accessReview">提交</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		studentinfoFacemy,
		subjectMaterialList,
		accessReview
	} from '@/api/apiDemo/index.js'
	export default {
		data() {
			return {
				identifyType: 1,
				itemData: {},
				dataList: []
			}
		},
		onLoad(option) {
			this.itemData = JSON.parse(decodeURIComponent(option.item));
			this.dataList = JSON.parse(decodeURIComponent(option.list));
			console.log("this.itemData", this.itemData)
			console.log("this.dataList", this.dataList)
			this.studentinfoFacemy();
			// this.subjectMaterialList();
		},
		methods: {
			//提交接口
			async accessReview() {
				let self = this;
				if (!this.identifyType) {
					uni.showToast({
						title: '请先认证身份验证',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (!this.dataList[0]) {
					uni.showToast({
						title: '该实验室未配置准入资格,无法申请~',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				let obj = {
					subjectId: self.itemData.id,
					securityGroupId: self.dataList[0].configureId,
					buildId: self.itemData.buildId,
					deptId: self.itemData.deptId,
					approvalDetails: [],
				};
				for (let i = 0; i < self.dataList.length; i++) {
					if (!self.dataList[i].url) {
						uni.showToast({
							title: '请上传' + self.dataList[i].materialName,
							icon: "none",
							mask: true,
							duration: 2000
						});
						return
					}
					let newObj = {
						materialName: self.dataList[i].materialName,
						materialUrl: self.dataList[i].url,

					}
					obj.approvalDetails.push(newObj);
				}
				const {
					data
				} = await accessReview(obj);
				if (data.code == 200) {
					uni.showToast({
						title: '提交成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack();
					}, 2000);
				}
			},
			//查询实验室下的安全准入资格材料表
			async subjectMaterialList() {
				let obj = {
					subjectId: this.itemData.id
				}
				const {
					data
				} = await subjectMaterialList(obj)
				if (data.code == 200) {
					this.dataList = data.data;
				}
			},
			//获取当前身份人脸验证状态
			async studentinfoFacemy() {
				let obj = {
					studentsId: uni.getStorageSync('userId')
				}
				const {
					data
				} = await studentinfoFacemy(obj)
				if (data.code == 200) {
					this.ifFaceFeature = data.data.ifFaceFeature;
				}
			},
			// 图片上传
			selectImage(index) {
				let self = this;
				wx.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						let tempFilePaths = res.tempFilePaths[0];
						self.uploadImg(tempFilePaths, index);
					}
				});
			},
			async uploadImg(tempFilePaths, index) {
				var self = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
					url: config.base_url + '/base/file/upload', //仅为示例，非真实的接口地址
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							self.$set(self.dataList[index], 'url', config.base_url + res.data.url);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			goFaceImage() {
				if (!this.identifyType) {
					uni.navigateTo({
						url: '/pages_basics/faceImage',
					});
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	#accessApplication {
		height: 100%;
		width: 100%;

		display flex;
		flex-direction column;

		.button-max-box {
			height: 100rpx;
			display flex;
			background #fff;
			margin-bottom: 20rpx;

			img:nth-child(1) {
				height: 30rpx;
				width: 30rpx;
				margin: 37rpx 28rpx 33rpx 20rpx;
			}

			view {
				line-height: 100rpx;
			}

			view:nth-child(2) {
				flex: 1;
				color: #333333;
				font-size: 28rpx;
			}

			view:nth-child(3) {
				width: 120rpx;
				text-align center;
				color: #CCCCCC;
				font-size: 28rpx;
			}

			img:nth-child(4) {
				height: 24rpx;
				width: 12rpx;
				margin: 39rpx 20rpx 0 0;
			}

			.colorA {
				color: #E45656 !important;
			}

			.marginType {
				margin-right: 12rpx;
			}
		}

		.for-box {
			height: 430rpx;
			width: 710rpx;
			margin: 20rpx 20rpx 0;

			background: url("@/pages_student/images/icon_08.png");
			background-size 100%;

			.button-view {
				text-align center;
				line-height: 348rpx;
				color: #999999;
				font-size: 30rpx;
			}

			img {
				width: 706rpx;
				height: 344rpx;
				margin: 2rpx;
				border-top-right-radius 20rpx;
				border-top-left-radius 20rpx;
			}

			.for-title {
				line-height: 80rpx;
				margin-left: 28rpx;
				color: #999999;
				font-size: 30rpx;
			}
		}

		.bottom-button-view {
			font-size: 30rpx;
			text-align center;
			color: #FFFFFF;
			width: 750rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #0183FA;
			margin-top: 40rpx;
		}

		.null-p {
			flex: 1;
		}
	}
</style>