FE-lab-xcx/pages_student/views/accessApplication/newApplication.vue

<!-- 选择实验室 -->
<template>
	<view id="newApplication">
		<view class="newApplication-page" v-if="pageType == 1">
			<view class="picker-max-box">
				<view class="picker-title-box">
					<view>*</view>
					<view>申请实验室:</view>
				</view>
				<input @click="inputClick(2)" v-model="subject.subName" class="picker-input-box" disabled type="text"
					placeholder="请选择实验室">
			</view>
			<view class="picker-max-box" v-if="subject.subId">
				<view class="picker-title-box">
					<view>*</view>
					<view>申请期限:</view>
				</view>
				<view class="apply_data">
					<picker mode="date" v-model="validBeginTime" :start="currentDate" fields="day"
						@change="beginDateChange">
						<view class="for-top-title-time" v-if="validBeginTime.length>0">{{validBeginTime}}</view>
						<view class="for-top-title-time" v-if="validBeginTime.length<=0">开始时间</view>
					</picker>
					-
					<picker mode="date" v-model="validEndTime" :start="currentDate" fields="day"
						@change="endDateChange">
						<view class="for-top-title-time" v-if="validEndTime.length>0">{{validEndTime}}</view>
						<view class="for-top-title-time" v-if="validEndTime.length<=0">结束时间</view>
					</picker>
				</view>
			</view>
			<view class="picker-max-box" v-if="subject.subId">
				<view class="picker-title-box">
					<view> </view>
					<view>申请备注:</view>
				</view>
				<textarea class="remark" v-model="applyCause" placeholder="请输入申请备注"></textarea>
			</view>
			<view class="user-info-box" v-if="subject.subId">
				<view class="picker-title-box">
					<view>*</view>
					<view>身份信息：</view>
					<view>(关联学生信息材料)</view>
				</view>
				<view class="user-info-box-min">
					<view>*</view>
					<view>申请人：</view>
					<input v-model="sysUser.userName" type="text" placeholder="学生姓名">
				</view>
				<view class="user-info-box-min">
					<view>*</view>
					<view>联系电话：</view>
					<input v-model="sysUser.mobile" type="text" placeholder="联系电话">
				</view>
				<view class="user-info-box-min">
					<view>*</view>
					<view>学号：</view>
					<input v-model="sysUser.account" type="text" placeholder="学号">
				</view>
				<!-- <view class="user-info-box-min">
					<view>*</view>
					<view>物理卡号：</view>
					<input v-model="sysUser.cardNumSimple" type="text" placeholder="物理卡号">
				</view> -->
				<view class="user-info-box-min">
					<view>*</view>
					<view>班级：</view>
					<input v-model="sysUser.gradeName" type="text" placeholder="班级">
				</view>
				<view class="user-info-box-min">
					<view>*</view>
					<view>导师：</view>
					<input v-model="sysUser.tutorUserName" @change="tutorUserNameClick()" type="text"
						placeholder="请输入姓名,最少两个字">
					<uni-data-picker disabled=true @change="bindPickerChange" :localdata="tutorUserList" ref='picker'>
					</uni-data-picker>
				</view>

			</view>
			<!-- 学生 -->
			<view v-if="subjectData.sysUser.userType == '2'" v-for="(item,index) in subjectData.listStudent"
				:key="index">
				<!-- 院系考试证书 -->
				<view class="picker-max-box" v-if="item.materialType==2&&item.relationType==2">
					<view class="picker-title-box">
						<view>*</view>
						<view>安全考试证书:</view>
					</view>
					<img class="picker-up-img-box" v-if="subjectData.listcert[0]"
						: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="picker-max-box" v-if="item.materialType==1">
					<view class="picker-title-box">
						<view>*</view>
						<view>{{item.materialName}}:</view>
					</view>
					<view class="picker-text-info-box">{{item.materialDescribe}}</view>
					<view class="picker-for-item-box" v-for="(minItem,minIndex) in item.upList" :key="minIndex">
						<img class="left-img-box" src="@/pages_student/images/icon_pdf.png"
							v-if="minItem.type == 'pdf'">
						<img class="left-img-box" src="@/pages_student/images/icon_word.png"
							v-if="minItem.type == 'doc' || minItem.type == 'docx'">
						<img class="left-img-box" :src="baseUrl+minItem.url"
							v-if="minItem.type == 'png' || minItem.type == 'jpg' || minItem.type == 'jpeg' || minItem.type == 'gif'">
						<view class="center-text-box">{{minItem.name}}</view>
						<img class="right-img-box" src="@/pages_student/images/icon_sczl_sc.png"
							@click="delUpData(item,minIndex)">
					</view>
					<view class="up-data-button" @click="itemUpData(item)">上传材料</view>
				</view>
			</view>
		</view>
		<!-- 实验室选择页面 -->
		<view class="pageTwo" v-if="pageType == 2">
			<view class="pageTwo-input-box">
				<input type="text" placeholder="请输入实验室名称" v-model="subjectName">
				<view @click="subjectList">查找</view>
			</view>
			<view class="for-max-box">
				<view class="for-null-text" v-if="!searchList[0]">{{nullText}}</view>
				<view class="for-box" v-for="(item,index) in searchList" :key="index">
					<view>{{item.subName}}</view>
					<view @click="checkClick(item)">选择</view>
				</view>
			</view>
			<view class="out-button" @click="inputClick(1)">返回</view>
		</view>
		<view class="bottom-button" v-if="pageType == 1" @click="upDataButton()">
			{{infoType?'准入材料修改完毕，重新提交':'准入材料上传完毕，提交申请'}}
		</view>
		<view class="shade-max-box" v-if="shadeType">
			<view class="shade-big-box">
				<img src="@/pages_student/images/img_zrsq_bg.png">
				<view @click="pageBack">返回</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		subjectList,
		materialApply,
		materialUpdate,
		materialAdd,
		teacherApply
	} from '@/api/apiDemo/index.js'
	import {
		systemUserDropList
	} from '@/api/commonality/permission.js'
	import {
		systemMineGetListByPower,
		laboratoryAppletMaterialApply,
		laboratoryAppletMaterialAdd,
		laboratoryAppletMaterialUpdate,
	} from '@/pages_student/api/index.js'
	import {
		config
	} from '@/api/request/config.js'
	export default {
		data() {
			return {
				baseUrl: config.base_url,
				pageType: 2,
				shadeType: false,
				//有效期
				buttonArray2: [],
				buttonArrayIndex2: 11,
				//搜索回的实验室列表
				searchList: [],
				//选择的实验室数据
				subject: {},
				//暂无数据提示
				nullText: "请输入实验室名称进行搜索",
				//实验室名称
				subjectName: "",
				//有效期
				validLength: "12",
				//获取的实验室配置数据
				subjectData: {},
				//是否是编辑状态
				infoType: false,
				//编辑参数
				infoData: {},
				validBeginTime: '', //申请期限开始
				validEndTime: '', //申请期限结束
				applyCause: '', //申请备注
				sysUser: {},
				tutorUserList: [],
				strArr: [], //存储类型
				currentDate: '', //当前日期
				uploadFileName: '', //学生上传的文件名
			}
		},
		onLoad(option) {
			if (option.item) {
				let newItem = JSON.parse(decodeURIComponent(option.item));
				let newObj = {
					deptId: newItem.labSecurityApply.deptId,
					deptName: newItem.labSecurityApply.deptName,
					subId: newItem.labSecurityApply.subId,
					subName: newItem.labSecurityApply.subName,
				}
				this.$set(this, 'validBeginTime', newItem.labSecurityApply.validBeginTime.split(' ')[0])
				this.$set(this, 'validEndTime', newItem.labSecurityApply.validEndTime.split(' ')[0])
				this.$set(this, 'applyCause', newItem.labSecurityApply.applyCause)
				this.$set(this, 'subject', newObj)
				this.$set(this, 'infoData', newItem)
				this.$set(this, 'infoType', true)
				this.$set(this, 'pageType', 2)
				this.materialApply();
			}
		},
		onShow() {

			this.addTime();
			this.clearData();
			this.currentDate = this.getdate();
			// console.log('时间')
			// console.log(this.currentDate)

		},
		methods: {
			getdate() {
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
		
				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}
				var currentdate = year + "-" + month + "-" + strDate;
				return currentdate;
			},
			//清除
			clearData() {
				this.tutorUserList = [];
			},
			//导师查询
			async tutorUserNameClick() {
				let self = this
		
				self.tutorUserList = []
				let obj = {
					userName: this.sysUser.tutorUserName,
					userType: '1'
				}
				const {
					data
				} = await systemUserDropList(obj)
				if (data.code == 200) {
					console.log(data)
		
					data.data.forEach(function(item) {
						self.tutorUserList.push({
							text: item.userName,
							value: item.userId,
						})
					})
					console.log(self.tutorUserList)
					self.$refs.picker.show()
				}
		
			},
		
			bindPickerChange: function(e) {
				let self = this;
				console.log('picker发送选择改变，携带值为', e.detail.value)
				let data = e.detail.value;
				data.forEach(function(item) {
					self.sysUser.tutorUserName = item.text
					self.sysUser.tutorUserId = item.value
		
				})
			},
		
		
			//时间选择触发-开始
			beginDateChange(data) {
				this.validBeginTime = data.detail.value;
			},
			endDateChange(data) {
				this.validEndTime = data.detail.value;
			},
			pageBack() {
				
				if (this.infoType) {
					uni.navigateBack({
						delta: 2
					});
				}else{
					uni.navigateBack();
				}
			},
			//申请编辑
			async materialUpdate(obj) {
				const {
					data
				} = await laboratoryAppletMaterialUpdate(obj)
				if (data.code == 200) {
					this.shadeType = true;
				}
			},
			//申请提交
			async materialAdd(obj) {
				const {
					data
				} = await laboratoryAppletMaterialAdd(obj)
				if (data.code == 200) {
					this.shadeType = true;
				}
			},
			//提交按钮
			upDataButton() {
				let self = this;
				if (!this.subject.subId) {
					uni.showToast({
						title: '请选择实验室',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (!this.validBeginTime) {
					uni.showToast({
						title: '请选择开始时间',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (!this.validEndTime) {
					uni.showToast({
						title: '请选择结束时间',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (!this.sysUser.userName) {
					uni.showToast({
						title: '请输入申请人',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (!this.sysUser.mobile) {
					uni.showToast({
						title: '请输入联系电话',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (!this.sysUser.account) {
					uni.showToast({
						title: '请输入学号',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				// if (!this.sysUser.cardNumSimple) {
				// 	uni.showToast({
				// 		title: '请输入物理卡号',
				// 		icon: "none",
				// 		mask: true,
				// 		duration: 2000
				// 	});
				// 	return
				// }
				if (!this.sysUser.gradeName) {
					uni.showToast({
						title: '请输入班级',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (!this.sysUser.tutorUserId) {
					uni.showToast({
						title: '请选择导师',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				let sysUser = {
					userName: this.sysUser.userName,
					userId: this.sysUser.userId,
					mobile: this.sysUser.mobile,
					account: this.sysUser.account,
					cardNumSimple: this.sysUser.cardNumSimple,
					grade: this.sysUser.gradeName,
					tutorUserId: this.sysUser.tutorUserId,
					tutorUserName: this.sysUser.tutorUserName,
				};
				let obj = {
					subAdminId: this.subjectData.fzrSysUser.userId, //学号/工号
					userNumber: this.subjectData.sysUser.account, //学号/工号
					userMajor: this.subjectData.sysUser.majorName, //专业
					userMajorId: this.subjectData.sysUser.major, //专业
					deptId: this.subjectData.sysUser.deptId, //NULL部门id
					deptName: this.subjectData.sysUser.deptName, //NULL部门名称
					subId: this.subject.subId, //NULL实验室id
					subName: this.subject.subName, //NULL实验室名称
					auditStatus: "0", //NULL审核状态 0待审核 1驳回 2通过
					//validLength: this.validLength, //NULL有效期 月份时长
					relList: [], //上传资料
					sysUserModel: sysUser, //身份卡用户信息
					validBeginTime: this.validBeginTime+'T00:00:00', //申请期限开始时间
					validEndTime: this.validEndTime+'T23:59:59', //申请期限结束时间
					applyCause: this.applyCause, //申请备注
				};
				if (this.subjectData.sysUser.userType == '2') {
					for (let i = 0; i < self.subjectData.listStudent.length; i++) {
						if (self.subjectData.listStudent[i].materialType == 1) {
							if (!self.subjectData.listStudent[i].upList[0]) {
								uni.showToast({
									title: self.subjectData.listStudent[i].materialName + "未上传",
									icon: "none",
									mask: true,
									duration: 2000
								});
								return
							} else {
								let upData = {
									materialId: self.subjectData.listStudent[i].materialId,
									dataName: self.subjectData.listStudent[i].materialName,
									dataDescribe: self.subjectData.listStudent[i].materialDescribe,
									dataUrl: "",
								};
								for (let o = 0; o < self.subjectData.listStudent[i].upList.length; o++) {
									upData.dataUrl = upData.dataUrl + self.subjectData.listStudent[i].upList[o].name +
										';' + self.subjectData.listStudent[i].upList[o].url + ',';
								}
								obj.relList.push(upData);
							}
						}
					}
				}
				if (this.infoType) {
					obj.applyId = this.infoData.labSecurityApply.applyId;
					this.materialUpdate(obj);
				} else {
					this.materialAdd(obj);
				}
			},
			//删除对应材料
			delUpData(item, index) {
				item.upList.splice(index, 1);
				this.$forceUpdate()
			},
			itemUpData(item) {
				this.uploadFileName = '';
				this.uploadFileName = this.sysUser.userName + item.materialName; //学生上传的文件名
				let self = this;
				let fileTypeArr = item.fileType.split(',')
				self.strArr = [];
				fileTypeArr.forEach(function(item) {
		
					if (item == '1') {
						self.strArr.push('pdf')
					} else if (item == '2') {
						self.strArr.push('doc', 'docx')
					} else if (item == '3') {
						self.strArr.push('png', 'jpg', 'gif')
					}
				})
				uni.showActionSheet({
					itemList: ['上传文件', '上传图片'],
					success: function(res) {
						console.log(res)
						if (res.tapIndex == 0) {
							//上传文件
							self.upData(item);
						} else if (res.tapIndex == 1) {
							//上传图片
							self.upImg(item);
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			upImg(item) {
		
				let self = this;
				wx.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						console.log(res)
						let text = res.tempFilePaths[0].split('.')
						if (self.strArr.indexOf(text[1]) == -1) {
							uni.showToast({
								title: '请上传' + self.strArr.join(',') + '格式文件',
								icon: "none",
								mask: true,
								duration: 2000
							});
							return
						}
						if (text[1] != 'png' && text[1] != 'jpg' && text[1] != 'jpeg' && text[1] != 'gif' &&
							text[1] != 'pdf' && text[1] != 'doc' && text[1] != 'docx') {
							uni.showToast({
								title: '仅支持png/jpg/jpeg/gif/pdf/doc/docx类型的文件上传',
								icon: "none",
								mask: true,
								duration: 2000
							});
							return
						}
		
						let upObj = {
							name: self.uploadFileName + '.' + text[1],
							path: res.tempFilePaths[0],
							type: text[1],
						}
						self.upDataFunction(item, upObj);
					}
				});
			},
			//上传文件
			upData(item) {
				let self = this;
				wx.chooseMessageFile({
					count: 1,
					type: 'all',
					success(res) {
						let text = res.tempFiles[0].path.split('.')
						if (self.strArr.indexOf(text[1]) == -1) {
							uni.showToast({
								title: '请上传' + self.strArr.join(',') + '格式文件',
								icon: "none",
								mask: true,
								duration: 2000
							});
							return
						}
						if (text[1] != 'png' && text[1] != 'jpg' && text[1] != 'jpeg' && text[1] != 'gif' && text[
								1] != 'pdf' && text[1] != 'doc' && text[1] != 'docx') {
							uni.showToast({
								title: '仅支持png/jpg/jpeg/gif/pdf/doc/docx类型的文件上传',
								icon: "none",
								mask: true,
								duration: 2000
							});
							return
						}
						let upObj = {
							name: self.uploadFileName + '.' + text[1],
							path: res.tempFiles[0].path,
							type: text[1],
						}
						self.upDataFunction(item, upObj);
					}
				})
			},
			async upDataFunction(item, upObj) {
				var self = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
					url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					filePath: upObj.path,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							let obj = {
								name: upObj.name,
								url: res.data.url,
								type: upObj.type
							}
							item.upList.push(obj);
							this.$forceUpdate();
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			//选择搜索页面
			inputClick(type) {
				if (this.pageType != type) {
					this.pageType = type;
				}
			},
			//实验室选择
			checkClick(item) {
				this.$set(this, "subject", item);
				this.materialApply();
			},
			//获取实验室相关配置
			async materialApply() {
				let self = this;
				const {
					data
				} = await laboratoryAppletMaterialApply({
					subId: this.subject.subId
				})
				if (data.code == 200) {
					if (data.data.sysUser.userType != '2') {
						uni.showToast({
							title: '您不是学生,无法申请准入',
							icon: "none",
							mask: true,
							duration: 2000
						});
						return
					}
		
					if (data.data.sysUser.userType == '2') {
						if (!data.data.listStudent[0]) {
							uni.showToast({
								title: '该实验室未设置准入条件',
								icon: "none",
								mask: true,
								duration: 2000
							});
							return
						}
					}
					if (data.data.listStudent) {
						for (let i = 0; i < data.data.listStudent.length; i++) {
							if (data.data.listStudent[i].materialType == 1) {
								data.data.listStudent[i].upList = [];
							}
						}
					}
					if (data.data.listTeacher) {
						for (let i = 0; i < data.data.listTeacher.length; i++) {
							if (data.data.listTeacher[i].materialType == 1) {
								data.data.listTeacher[i].upList = [];
							}
						}
					}
					this.subjectData = data.data;
					this.sysUser = data.data.sysUser;
					this.sysUser.mobile == null ? '' : this.sysUser.mobile;
					this.sysUser.userName == null ? '' : this.sysUser.userName;
					this.sysUser.cardNum == null ? '' : this.sysUser.cardNum;
					this.sysUser.grade == null ? '' : this.sysUser.grade;
					this.sysUser.tutorUserName == null ? '' : this.sysUser.tutorUserName;
		
		
					if (this.infoType) {
						this.validLength = this.infoData.labSecurityApply.validLength;
						for (let i = 0; i < self.infoData.listTemp.length; i++) {
							if (self.infoData.listTemp[i].materialType == 1) {
								if (self.subjectData.sysUser.userType == '2') {
									for (let o = 0; o < self.subjectData.listStudent.length; o++) {
										if (self.subjectData.listStudent[o].materialType == 1 && self.subjectData
											.listStudent[o].id == self.infoData.listTemp[i].id) {
											self.subjectData.listStudent[o].upList = JSON.parse(JSON.stringify(self
												.infoData.listTemp[i].upList));
										}
									}
								}
							}
						}
					}
					this.pageType = 1;
				}
			},
			//有效期选中
			buttonChange2(e) {
				console.log("e", e.mp.detail.value);
				this.buttonArrayIndex2 = e.mp.detail.value;
				this.validLength = this.buttonArray2[e.mp.detail.value].value;
			},
			//查询实验室
			async subjectList() {
				const {
					data
				} = await systemMineGetListByPower({
					subName: this.subjectName
				})
				if (data.code == 200) {
					this.searchList = data.data;
					if (!data.data[0]) {
						this.nullText = "暂无数据"
					}
				}
			},
			//生成有效期
			addTime() {
				let list = [];
				for (let i = 1; i < 61; i++) {
					let obj = {
						name: i + "个月",
						value: i,
					}
					list.push(obj)
				}
				this.$set(this, 'buttonArray2', list);
			},
		
		},
	}
</script>

<style lang="stylus" scoped>
	#newApplication {
		height: auto;
		width: 100%;
		display flex;
		flex-direction column;

		.user-info-box {
			background #fff;
			border-radius: 20rpx;
			margin: 20rpx 20rpx;
			padding: 20rpx 0 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;
			}

			.user-info-box-min {
				margin: 0 26rpx;
				display flex;
				align-items center;

				view {
					line-height: 66rpx;
					font-size: 28rpx;
				}

				view:nth-child(1) {
					color: red;
					line-height: 28rpx;
					position: relative;
					top: 4rpx;
				}

				view:nth-child(2) {
					flex: 1;
					color: #999;
				}

				view:nth-child(3) {
					flex: 1;
					text-align right;
					color: #333;
				}

				>input {
					width 460rpx;
				}
			}

			.picker-title-box {
				padding: 0 20rpx;
				display flex;
				justify-content flex-start;
				align-items center;

				view {
					line-height: 80rpx;
					font-size: 28rpx;
				}

				view:nth-child(1) {
					color: red;
					line-height: 28rpx;
				}

				view:nth-child(2) {}

				view:nth-child(3) {
					color: #999;
				}

			}

		}

		.newApplication-page {
			background #fff;
			margin: 20rpx 20rpx 160rpx;
			padding-bottom: 20rpx;
			border-radius: 20rpx;

			.picker-max-box {

				/* 申请备注 */
				.remark {
					width: 627rpx;
					height: 200rpx;
					font-size: 28rpx;
					margin: 0 20rpx;
					border: 2rpx solid #a2a2a2;
					border-radius: 10rpx;
					padding: 20rpx;
				}

				/* 申请期限 */
				.apply_data {
					width: 667rpx;
					height: 82rpx;
					background: #FFFFFF;
					border: 2rpx solid #A2A2A2;
					border-radius: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items center;
					margin: 0 20rpx;
					padding: 0 30rpx;
					box-sizing border-box;

					>picker {
						>view {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 82rpx;
						}
					}
				}

				.picker-title-box {
					padding: 0 20rpx;
					display flex;
					justify-content flex-start;
					align-items center;

					view {
						line-height: 80rpx;
						font-size: 28rpx;
					}

					view:nth-child(1) {
						color: red;

					}

					view:nth-child(2) {}

					view:nth-child(3) {
						color: #999;
					}
				}

				.picker-input-box {
					padding: 0 20rpx;
					display flex;
					height: 80rpx;
					width: 627rpx;
					border: 1rpx solid #a2a2a2;
					border-radius: 10rpx;
					margin: 0 20rpx;
				}

				.picker-min-box {
					display flex;
					height: 80rpx;
					width: 667rpx;
					border: 1rpx solid #a2a2a2;
					border-radius: 10rpx;
					margin: 0 20rpx;

					view {
						flex: 1;
						line-height: 80rpx;
						padding: 0 20rpx;
						color: #999;
						font-size: 28rpx;
					}

					img {
						width: 24rpx;
						height: 12rpx;
						margin: 35rpx 23rpx;
					}
				}

				.picker-text-box {
					padding: 0 50rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #999;
				}

				.picker-text-info-box {
					color: #999;
					font-size: 28rpx;
					line-height: 40rpx;
					padding: 0 20rpx;

				}

				.picker-up-img-box {
					margin: 40rpx auto;
					width: 640rpx;
					height: 250rpx;
					border: 2px dashed #E0E0E0;
					border-radius: 20rpx;
					background: #F8F8F8;

					view:nth-child(1) {
						margin-top: 30rpx;
						font-size: 80rpx;
						color: #e0e0e0;
						text-align center;
					}

					view:nth-child(2) {
						font-weight: 700;
						font-size: 28rpx;
						color: #999;
						text-align center;
					}
				}

				.picker-for-item-box {
					display flex;
					margin: 20rpx 0;

					.left-img-box {
						margin: 0 20rpx;
						width: 60rpx;
						height: 60rpx;
					}

					.center-text-box {
						flex: 1;
						line-height: 60rpx;
						font-size: 28rpx;
						color: #333;
						display: block;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.right-img-box {
						width: 30rpx;
						height: 30rpx;
						margin: 15rpx 20rpx;
					}
				}

				.up-data-button {
					width: 500rpx;
					height: 80rpx;
					margin: 40rpx auto;
					line-height: 80rpx;
					text-align center;
					font-size: 28rpx;
					border-radius: 10rpx;
					color: #0183FA;
					border: 1rpx dashed #0183FA;
				}
			}
		}

		.bottom-button {
			position fixed;
			bottom: 20rpx;
			left: 25rpx;
			z-index: 500;
			width: 700rpx;
			line-height: 100rpx;
			border-radius: 20rpx;
			background #0183FA;
			color: #fff;
			text-align center;
		}

		.pageTwo {
			flex: 1;
			display flex;
			flex-direction column;
			overflow-y hidden;

			.pageTwo-input-box {
				display flex;
				padding: 20rpx 25rpx;
				background #fff;
				margin-bottom: 20rpx;

				input {
					padding: 0 20rpx;
					width: 460rpx;
					line-height: 80rpx;
					height: 80rpx;
					border-top: 1rpx solid #a2a2a2;
					border-left: 1rpx solid #a2a2a2;
					border-bottom: 1rpx solid #a2a2a2;
					border-bottom-left-radius: 10rpx;
					border-top-left-radius: 10rpx;
				}

				view {
					width: 200rpx;
					line-height: 80rpx;
					height: 80rpx;
					border: 1rpx solid #007AFF;
					color: #fff;
					background #007AFF;
					text-align center;
					border-top-right-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}
			}

			.for-max-box {
				background #fff;
				flex: 1;
				overflow-y scroll;

				.for-box:nth-child(1) {
					border: none;
				}

				.for-null-text {
					text-align center;
					line-height: 100rpx;
					color: #999;

				}

				.for-box {
					width: 710rpx;
					border-top: 1rpx solid #dedede;
					line-height: 60rpx;
					height: 60rpx;
					padding: 20rpx;
					display: flex;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					view:nth-child(1) {
						flex: 1;
					}

					view:nth-child(2) {
						width: 100rpx;
						text-align center;
						border-radius: 10rpx;
						background #007AFF;
						color: #fff;
					}
				}
			}

			.out-button {
				width: 650rpx;
				height: 100rpx;
				line-height: 100rpx;
				margin: 20rpx 50rpx;
				text-align center;
				font-size: 32rpx;
				color: #fff;
				background #999;
				border-radius: 20rpx;
			}
		}

		.shade-max-box {
			background: rgba(0, 0, 0, 0.2);
			width: 100%;
			height: 100%;
			position fixed;
			z-index 100;

			.shade-big-box {
				width: 626rpx;
				height: 567rpx;
				margin: 335rpx 63rpx;
				position relative;
				z-index 100;

				img {
					width: 626rpx;
					height: 567rpx;
				}

				view {
					position absolute;
					left: 88rpx;
					bottom: 100rpx;
					width: 450rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align center;
					color: #fff;
					background #0183FA;
					border-radius: 40rpx;
				}
			}
		}
	}

	/deep/.input-value-border {
		display: none !important;
	}
</style>