snapshot-wx/pagesCare/SafeVolunteer/Index.vue

<template>
	<view style="position: relative;" v-show="isShow">
		<form @submit="onSubmit">
			<scroll-view scroll-y class="container">
				<view class="formBox">
					<view class="hiddenDangerBox">
						<view class="hiddenDangerItemBox workBox" style="margin-top: 0px;">
							<view class="hiddenDangerHeader">上报信息</view>
							<view class="hiddenDangerBody">
								<view class="fway-form-item">
									<view class="fway-form-lable"><text class="mustTips">*</text>作业类型</view>
									<view class="fway-form-input-select">
										<radio-group @change="bindWorkTypeChange">
											<label class="fway-form-checkbox" v-for="(item, index) in WorkTypeData" :key="index">
												<radio style="transform:scale(1);" color="#3e6ffd" :value="item.id"></radio>{{item.dicDataName}}
											</label>
										</radio-group>
									</view>
								</view>
								<view class="fway-form-item">
									<view class="fway-form-lable"><text class="mustTips">*</text>施工地点</view>
									<view class="fway-form-input-inline">
										<view class="fway-form-input-inline" @tap="onMapTo" style="width: 100%;">
											<input type="text" disabled class="fway-form-input" placeholder="请准确标记施工作业具体位置" v-model="data.address" />
										</view>
										<view class="fway-form-input-inline" v-if="data.address" style="width: 100%;">
											<input type="text" class="fway-form-input" placeholder="请填写详细地址" v-model="data.fullAddress" @tap="inputTap" data-focus="fullAddress" :focus="focusID == 'fullAddress' ? true : false" />
										</view>
									</view>
								</view>
								<view class="fway-form-item">
									<view class="fway-form-lable"><text class="mustTips">*</text>是否已申报</view>
									<view class="fway-form-input-select">
										<radio-group @change="bindIsDeclarationChange">
											<label class="fway-form-checkbox">
												<radio style="transform:scale(1);" color="#3e6ffd" value="是"></radio>是
											</label>
											<label class="fway-form-checkbox">
												<radio style="transform:scale(1);" color="#3e6ffd" value="否"></radio>否
											</label>
										</radio-group>
									</view>
								</view>
								<view class="fway-form-item" v-show="data.isDeclare == true">
									<view class="fway-form-lable"><text class="mustTips">*</text>申报人手机号</view>
									<view class="fway-form-input-inline">
										<input type="number" class="fway-form-input" placeholder="请录入申报人手机号" v-model="data.declarePhoneNumber" @tap="inputTap" data-focus="declarePhoneNumber" :focus="focusID == 'declarePhoneNumber' ? true : false" />
									</view>
								</view>
								<view class="hiddenDangerItem" style="padding: 0 10rpx;">
									<view style="padding: 10rpx 0;">
										<text class="mustTips" style="vertical-align: text-top;">*</text>
										<view style="display: inline-block;width: calc(100% - 30rpx);vertical-align: text-top;">
											<text class="itemHeaderText">现场图片/视频</text>
											<text class="itemHeaderTips" style="line-height: 40rpx;">（图片请采用近景、含参照物远景图，并保持清晰）</text>
										</view>
									</view>
									<view class="hiddenDangerItemBody">
										<view class="photoListBox">
											<view class="photoItemBox" v-for="(item, index) in photoList" :key="index" @tap="onPreviewImage" :data-url="item.tempFilePath">
												<image class="photoItemImg" :src="item.tempFilePath" mode="aspectFit"></image>
												<image class="closeBtn" src="/static/img/common/close.png" @tap.stop="onDelImg" :data-index="index"></image>
											</view>
											<view class="photoItemBoxsel" v-show="photoList.length < 4" @tap="onChooseImageVideo('image')">
												<image class="photoItemImgsel" src="/static/img/write/selPhoto.png"></image>
											</view>
										</view>
									</view>
								</view>
								<view class="hiddenDangerItem" style="padding: 0 10rpx;">
									<view class="hiddenDangerItemHeader">
										<text class="itemHeaderText">现场视频</text>
									</view>
									<view class="hiddenDangerItemBody">
										<view class="photoListBox">
											<view class="photoItemBox" v-for="(item, index) in videoList" :key="index">
												<video class="photoItemImg" :id="index" :src="item.tempFilePath"></video>
												<image class="closeBtn" src="/static/img/common/close.png" @tap.stop="onDelVideo" :data-index="index"></image>
											</view>
											<view class="photoItemBoxsel" v-show="videoList.length < 3" @tap="onChooseImageVideo('video')">
												<image class="photoItemImgsel" src="/static/img/write/selVideo.png"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="hiddenDangerItemBox reportPersonBox">
							<view class="hiddenDangerHeader">上报人信息</view>
							<view class="hiddenDangerBody">
								<view class="hiddenDangerItem" style="margin-bottom: 0;">
									<view class="hiddenDangerItemBody">
										<view class="fway-form-item">
											<view class="fway-form-lable"><text class="mustTips">*</text>姓名</view>
											<view class="fway-form-input-inline">
												<input type="text" class="fway-form-input" placeholder="请录入上报人姓名" v-model="data.name" @tap="inputTap" data-focus="name" :focus="focusID == 'name' ? true : false" />
											</view>
										</view>
										<view class="fway-form-item">
											<view class="fway-form-lable"><text class="mustTips">*</text>联系方式</view>
											<view class="fway-form-input-inline">
												<input type="number" class="fway-form-input" placeholder="请录入上报人的联系电话" v-model="data.phoneNumber" @tap="inputTap" data-focus="phoneNumber" :focus="focusID == 'phoneNumber' ? true : false" />
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="hiddenDangerItemBox">
							<view class="hiddenDangerHeader"><text class="mustTips">*</text>检查事项</view>
							<view class="hiddenDangerBody">
								<view class="inspectBox">
									<view class="inspectItem">
										<view class="inspectItemText" style="font-weight: bold;">检查事项</view>
										<view class="inspectItemResult" style="font-weight: bold;">检查结果</view>
									</view>
									<view class="inspectItem">
										<view class="inspectItemText">生产经营单位内部是否按规定办理审批手续</view>
										<view class="inspectItemResult">
											<radio-group @change="(e) => bindInspectChange(e, 'isApprovalProcess')">
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="是"></radio>是
												</label>
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="否"></radio>否
												</label>
											</radio-group>
										</view>
									</view>
									<view class="inspectItem">
										<view class="inspectItemText">电气焊作业人员是否取得职业资格证书</view>
										<view class="inspectItemResult">
											<radio-group @change="(e) => bindInspectChange(e, 'isProfessionalCertificate')">
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="是"></radio>是
												</label>
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="否"></radio>否
												</label>
											</radio-group>
										</view>
									</view>
									<view class="inspectItem">
										<view class="inspectItemText">是否落实作业现场监护人员</view>
										<view class="inspectItemResult">
											<radio-group @change="(e) => bindInspectChange(e, 'isSiteMonitoring')">
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="是"></radio>是
												</label>
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="否"></radio>否
												</label>
											</radio-group>
										</view>
									</view>
									<view class="inspectItem">
										<view class="inspectItemText">是否在人员密集场所营业期间动火作业</view>
										<view class="inspectItemResult">
											<radio-group @change="(e) => bindInspectChange(e, 'isFireWork')">
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="是"></radio>是
												</label>
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="否"></radio>否
												</label>
											</radio-group>
										</view>
									</view>
									<view class="inspectItem">
										<view class="inspectItemText">是否清除作业现场及周围易燃物品或落实有效安全防范措施</view>
										<view class="inspectItemResult">
											<radio-group @change="(e) => bindInspectChange(e, 'isClearSafety')">
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="是"></radio>是
												</label>
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="否"></radio>否
												</label>
											</radio-group>
										</view>
									</view>
									<view class="inspectItem">
										<view class="inspectItemText">作业现场是否配备能满足现场灭火应急需求消防器材</view>
										<view class="inspectItemResult">
											<radio-group @change="(e) => bindInspectChange(e, 'hasFireEquipment')">
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="是"></radio>是
												</label>
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="否"></radio>否
												</label>
											</radio-group>
										</view>
									</view>
									<view class="inspectItem">
										<view class="inspectItemText">作业现场使用的工器具是否进行安全检查</view>
										<view class="inspectItemResult">
											<radio-group @change="(e) => bindInspectChange(e, 'isToolSafety')">
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="是"></radio>是
												</label>
												<label class="fway-form-checkbox">
													<radio style="transform:scale(1);" color="#3e6ffd" value="否"></radio>否
												</label>
											</radio-group>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="fway-btnBox">
				<button class="fway-btn" formType="submit">立即上报</button>
			</view>
		</form>
	</view>
</template>

<script>
	var qqMap = require('@/static/js/qqmap-wx-jssdk.min.js');
	var qqMapsdk;
	var that;
	export default {
		data() {
			return {
				isShow: false,
				data: {
					longitude: '',
					latitude: '',
					areaCode: '',
					province: '',
					city: '',
					county: '',
					town: '',
					street: '',
					address: '',
					fullAddress: '',
					jobType: '',
					phoneNumber: '',
					name: '',
					declarePhoneNumber: '',
					isDeclare: null,
					isApprovalProcess: null,
					isProfessionalCertificate: null,
					isSiteMonitoring: null,
					isFireWork: null,
					isClearSafety: null,
					hasFireEquipment: null,
					isToolSafety: null,
					files: []
				},
				photoList: [],
				videoList: [],
				WorkTypeData: [],
				focusID: '',
				fileSize: 10, // 单位M
			}
		},
		onLoad(option) {
			that = this;
			qqMapsdk = new qqMap({
				key: 'TE4BZ-ZFEAT-45CX3-VPZ3R-GOLS6-EGF54'
			});
			that.onGetWorkType(function(){
				that.isShow = true;
			});
		},
		onShow() {
			that.data.phoneNumber = that.data.phoneNumber ? that.data.phoneNumber : uni.getStorageSync('userInfo').userTel || '';
			that.data.name = that.data.name ? that.data.name : uni.getStorageSync('userInfo').userName || '';
		},
		methods: {
			// 获取作业类型数据
			onGetWorkType(fun){
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/report/base'
				}).then(res => {
					if (res.jobType && res.jobType.length > 0) {
						that.WorkTypeData = res.jobType;
					} else {
						that.$util.msg('服务异常，请稍后重试！');
					}
					typeof fun === 'function' && fun();
				})
			},
			// 作业类型下拉选择
			bindWorkTypeChange(e){
				if (e.detail.value){
					that.data.jobType = e.detail.value;
				}
			},
			bindIsDeclarationChange(e){
				if (e.detail.value){
					that.data.isDeclare = e.detail.value == '是' ? true : false;
					if(that.data.isDeclare == false){
						that.$util.msg('请提醒作业人员及时进行电气焊作业申报！');
					}
				}
			},
			bindInspectChange(e, key){
				if (e.detail.value){
					that.data[key] = e.detail.value == '是' ? true : false;
				}
			},
			// 监听input框点击设置焦点
			inputTap(e) {
				if(that.focusID != e.currentTarget.dataset.focus){
					uni.hideKeyboard();
					setTimeout(function() {
						that.focusID = e.currentTarget.dataset.focus
					}, 200)
				}
			},
			// 验证地理位置是否在自贡市
			onGetAddress(latitude, longitude, fun) {
				qqMapsdk.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude
					},
					success(res) {
						// 地址信息
						if (res.result.address_component.city != '自贡市') {
							typeof fun === 'function' && fun(false);
						} else {
							typeof fun === 'function' && fun(res.result);
						}
					},
					fail: function(error) {
						console.error(error);
						typeof fun === 'function' && fun(false);
					}
				});
			},
			onMapTo() {
				// 判断微信位置是否开启
				let appAuthorizeSetting = uni.getAppAuthorizeSetting();
				if (appAuthorizeSetting.locationAuthorized != 'authorized') {
					that.$util.msg("定位失败，请在手机设置中打开微信位置权限");
					return;
				}
				uni.chooseLocation({
					success: function(res) {
						if (res.name) {
							that.onGetAddress(res.latitude, res.longitude, function(data) {
								if (data) {
									console.log(data);
									that.data.longitude = res.longitude;
									that.data.latitude = res.latitude;
									that.data.areaCode = data.ad_info.adcode;
									that.data.province = data.address_component.province;
									that.data.city = data.address_component.city;
									that.data.county = data.address_component.district;
									that.data.town = data.address_reference.town.title;
									that.data.street = data.address_component.street;
									// that.data.address = data.address;
									if (res.address) {
										let address = res.address;
										try {
											address = address.replace('四川省自贡市', '');
											that.data.address = res.name + '(' + address + ')';
										} catch (d) {
											that.data.address = res.name + '(' + address + ')';
										}
									} else {
										that.data.address = res.name;
									}
								} else {
									that.$util.msg("选择的地点不属于自贡市行政管辖范围，请重新确认作业地点");
								}
							})
						} else {
							that.$util.msg("作业地点定位失败，请重新选择");
						}
					},
					fail() {
						that.$util.msg("作业地点定位失败，请重新选择");
					}
				});
			},
			// 选择图片和视频
			onChooseImageVideo(type) {
				// 附件类型
				let mediaType = type;
				// 图片、视频数量限制剩余数量
				let remainPhotoNum = 4 - that.photoList.length;
				let remainVideoNum = 3 - that.videoList.length;
				// 选择限制数量
				// let count = remainPhotoNum + remainVideoNum;
				let count = 0;
				if (type == 'image'){
					count = remainPhotoNum;
				}else if (type == 'video'){
					count = remainVideoNum;
				}
				if (count > 0) {
					uni.chooseMedia({
						count: count, //默认9
						mediaType: mediaType,
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: (res) => {
							let arrPhotoData = [];
							let arrVideoData = [];
							let strPhotoErrorIndex = '';
							let strVideoErrorIndex = '';
							let strVideoErrorSizeIndex = '';
							res.tempFiles.forEach((item, index) => {
								if (item.fileType == 'image') {
									arrPhotoData.push(item)
								} else if (item.fileType == 'video') {
									arrVideoData.push(item)
								}
							});
							let strErrorTips = '';
							// 判断图片是否满足条件
							let rightPhotoData = [];
							arrPhotoData.forEach((item, index) => {
								if (item.size > 0 && item.size <= that.fileSize * 1024 * 1024) {
									rightPhotoData.push(item)
								} else {
									if (strPhotoErrorIndex == '') {
										strPhotoErrorIndex = (index + 1)
									} else {
										strPhotoErrorIndex += '，' + (index + 1)
									}
								}
							});
							if (strPhotoErrorIndex != '') {
								if (strErrorTips != "") {
									strErrorTips += '\n';
								}
								strErrorTips += '您上传的第' + strPhotoErrorIndex + '张图片超过系统文件限制大小，请重新选择上传。'
							}
							if (rightPhotoData.length > remainPhotoNum) {
								if (strErrorTips != "") {
									strErrorTips += '\n';
								}
								strErrorTips += '您选择的图片超出数量限制，仅按顺序保留。'
								rightPhotoData.splice(remainPhotoNum, (rightPhotoData.length - remainPhotoNum))
							}
							// 判断视频是否满足条件
							let rightVideoData = [];
							arrVideoData.forEach((item, index) => {
								if (item.duration > 0 && item.duration <= 60) {
									if (item.size > 0 && item.size <= that.fileSize * 1024 * 1024) {
										rightVideoData.push(item)
									} else {
										if (strVideoErrorSizeIndex == '') {
											strVideoErrorSizeIndex = (index + 1)
										} else {
											strVideoErrorSizeIndex += '，' + (index + 1)
										}
									}
								} else {
									if (strVideoErrorIndex == '') {
										strVideoErrorIndex = (index + 1)
									} else {
										strVideoErrorIndex += '，' + (index + 1)
									}
								}
							});
							if (strVideoErrorIndex != '') {
								if (strErrorTips != "") {
									strErrorTips += '\n';
								}
								strErrorTips += '您上传的第' + strVideoErrorIndex + '个视频超过支持的最大时长60s，请重新上传。'
							}
							if (strVideoErrorSizeIndex != '') {
								if (strErrorTips != "") {
									strErrorTips += '\n';
								}
								strErrorTips += '您上传的第' + strVideoErrorSizeIndex + '个视频超过系统文件限制大小，请重新选择上传。'
							}
							if (rightVideoData.length > remainVideoNum) {
								if (strErrorTips != "") {
									strErrorTips += '\n';
								}
								strErrorTips += '您选择的满足条件的视频超出数量限制，仅按顺序保留。'
								rightVideoData.splice(remainVideoNum, rightVideoData.length - remainVideoNum);
							}
							// 保存
							if (rightPhotoData.length > 0) {
								if (that.photoList.length != 0) {
									that.photoList = that.photoList.concat(rightPhotoData)
								} else {
									that.photoList = rightPhotoData
								}
							}
							if (rightVideoData.length > 0) {
								if (that.videoList.length != 0) {
									that.videoList = that.videoList.concat(rightVideoData)
								} else {
									that.videoList = rightVideoData
								}
							}
							if (strErrorTips != "") {
								uni.showModal({
									title: '提示',
									content: strErrorTips,
									showCancel: false,
									confirmText: '确定',
									confirmColor: '#3e6ffd'
								})
							}
						}
					});
				} else {
					that.$util.msg('最多上传4张图片和3段视频！');
				}
			},
			onPreviewImage(e) {
				let arrStrPhoto = [];
				that.photoList.forEach((item, index) => {
					arrStrPhoto.push(item.tempFilePath)
				})
				uni.previewImage({
					urls: arrStrPhoto,
					current: e.currentTarget.dataset.url
				});
			},
			onDelImg(e) {
				uni.showModal({
					content: '确定要删除吗？',
					confirmText: '确定',
					confirmColor: '#3e6ffd',
					success: res => {
						if (res.confirm) {
							that.photoList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			onDelVideo(e) {
				uni.showModal({
					content: '确定要删除吗？',
					confirmText: '确定',
					confirmColor: '#3e6ffd',
					success: res => {
						if (res.confirm) {
							that.videoList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			// 附件上传
			onUploadFiles(fun) {
				uni.showLoading({
					title: '上传中，请稍后',
					mask: true
				})
				let files = that.photoList;
				// 组装数据
				if (that.videoList.length > 0) {
					files = files.concat(that.videoList)
				}
				let pArr = [];
				if (files && files.length > 0) {
					files.forEach((file, i, array) => {
						pArr.push(new Promise(function(resolve, reject) {
							that.onUpLoadSingleFile(file, "uploadkey" + i, resolve, reject);
						}))
					});
					Promise.all(pArr).then(res => {
						uni.hideLoading();
						typeof fun === 'function' && fun(res);
					}, err => {
						uni.hideLoading();
						that.$util.msg(err.msg);
					})
				} else {
					uni.hideLoading();
					typeof fun === 'function' && fun();
				}
			},
			// 单个附件上传
			onUpLoadSingleFile(file, key, resolve, reject) {
				console.log(file);
				let fileObj = {
					fileType: file.fileType,
					msg: ''
				};
				switch (fileObj.fileType) {
					case 'file':
						fileObj.msg = '文件上传失败';
						break;
					case 'image':
						fileObj.msg = '图片上传失败';
						break;
					case 'video':
						fileObj.msg = '视频上传失败';
						break;
					default:
						break;
				}
				uni.uploadFile({
					url: that.$admin.config.upfileurl + '?source=hotline',
					filePath: file.tempFilePath,
					name: 'fileData',
					timeout: 10000,
					success: res => {
						if (res.statusCode == 200) {
							try {
								let data = JSON.parse(res.data);
								let obj = {
									additionId: data.result.id,
									duration: file.duration || 0,
									fileName: data.result.fileName,
									path: data.result.path
								};
								return resolve(obj);
							} catch (d) {
								return reject(fileObj)
							}
						} else {
							return reject(fileObj)
						}
					},
					fail: res => {
						return reject(fileObj)
					},
				})
			},
			// 表单验证
			formValidation() {
				if(!that.data.jobType){
					that.$util.msg("请选择作业类型！");
					return false;
				}
				if (!that.data.address) {
					that.$util.msg("请选择施工地点！");
					return false;
				}
				if (that.data.fullAddress) {
					if (escape(that.data.fullAddress).indexOf("%u") == -1) {
						that.$util.msg("请输入正确的地址信息！");
						return false;
					}
				}
				if(that.data.isDeclare == null){
					that.$util.msg("请选择是否已申报！");
					return false;
				}
				if (that.data.isDeclare){
					if (!that.data.declarePhoneNumber) {
						that.$util.msg("请输入申报人手机号码！");
						return false;
					}else {
						if (that.$util.e_checkPhone(that.data.declarePhoneNumber) === false) {
							that.$util.msg('申报人手机号码格式不正确！');
							return false;
						}
					}
				}
				if (that.photoList.length == 0 && that.videoList.length == 0) {
					that.$util.msg("请上传现场图片或者视频！");
					return false;
				}
				if (!that.data.name) {
					that.$util.msg("请输入上报人姓名！");
					return false;
				}
				if (!that.data.phoneNumber) {
					that.$util.msg("请输入上报人手机号码！");
					return false;
				}
				if (that.$util.e_checkPhone(that.data.phoneNumber) === false) {
					that.$util.msg('上报人手机号码格式不正确！');
					return false;
				}
				if (that.data.isApprovalProcess == null) {
					that.$util.msg("请选择检查事项1！");
					return false;
				}
				if (that.data.isProfessionalCertificate == null) {
					that.$util.msg("请选择检查事项2！");
					return false;
				}
				if (that.data.isSiteMonitoring == null) {
					that.$util.msg("请选择检查事项3！");
					return false;
				}
				if (that.data.isFireWork == null) {
					that.$util.msg("请选择检查事项4！");
					return false;
				}
				if (that.data.isClearSafety == null) {
					that.$util.msg("请选择检查事项5！");
					return false;
				}
				if (that.data.hasFireEquipment == null) {
					that.$util.msg("请选择检查事项6！");
					return false;
				}
				if (that.data.isToolSafety == null) {
					that.$util.msg("请选择检查事项7！");
					return false;
				}
				
				return true;
			},
			// 表单提交
			onSubmit(e) {
				if (!that.formValidation()) {
					return;
				}
				if (!that.data.isDeclare){
					that.data.declarePhoneNumber = '';
				}
				let params = that.data;
				that.onUploadFiles(function(arr) {
					params.files = arr || [];
					that.$admin.req({
						method: 'POST',
						url: '/api/v1/Snapshot/report',
						data: params
					}).then(res => {
						if (res) {
							that.$util.msg('上报成功！', function(){
								let obj = uni.getStorageSync('userInfo');
								obj.userName = that.data.name;
								uni.setStorageSync('userInfo', obj);
								uni.switchTab({
									url: "/pages/Index/IntServ"
								})
							});
						} else {
							that.$util.msg("对不起，提交失败，请稍后重试！");
						}
					});
				});
			},
		}
	}
</script>

<style lang="less">
	.container {
		background-color: #f7f7f7;
		font-size: 0;
	}
	
	.helpBox {
		padding: 20rpx;
	}
	
	.formBox {
		margin: 0;
		padding-bottom: 140rpx;
	}
	
	.fway-btnBox{
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 20rpx 0 30rpx;
		background-color: #f7f7f7;
		z-index: 9;
	}
	
	.fway-btn{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 40rpx;
	}
	
	.hiddenDangerBox {
		padding: 30rpx 20rpx 0;
	}
	
	.hiddenDangerItemBox {
		padding: 0;
		background-color: #fff;
		margin-top: 20rpx;
		box-shadow: 0rpx 5rpx 12rpx 0rpx #c7c7c7;
		border-radius: 10rpx;
	}
	
	.hiddenDangerHeader {
		padding: 30rpx 20rpx 20rpx;
		font-size: 44rpx;
		font-weight: bold;
		color: #000;
	}
	
	.hiddenDangerBody {
		padding: 0 20rpx 10rpx;
	}
	
	.hiddenDangerItem {
		margin-bottom: 20rpx;
	}
	
	.hiddenDangerItemHeader {
		padding: 10rpx 0;
		display: flex;
		justify-content: left;
		align-items: center;
	}
	
	.mustTips {
		width: 30rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #fd0101;
	}
	
	.itemHeaderText {
		color: #000;
		font-size: 36rpx;
	}
	
	.itemHeaderTips {
		font-size: 28rpx;
		color: #777;
	}
	
	.hiddenDangerItemBody {
		padding: 0;
	}
	
	.hiddenDangerHeaderBtn {
		width: calc(100% - 288rpx);
		display: inline-block;
		vertical-align: middle;
		text-align: right;
	}
	
	.fway-form-item {
		padding: 0 10rpx;
	}
	
	.fway-form-textarea {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		height: 180rpx;
	}
	
	.fway-form-tips {
		padding: 10rpx 0;
	}
	
	.workBox .fway-form-lable {
		width: 230rpx;
		font-size: 36rpx;
	}
	
	.workBox .lableTips{
		font-size: 28rpx;
		color: #777;
	}
	
	.workBox .fway-form-input-select {
		width: calc(100% - 260rpx);
		position: relative;
	}
	
	.workBox .fway-form-input-inline {
		width: calc(100% - 260rpx);
		position: relative;
	}
	
	.workBox .fway-form-input-select .fway-form-input {
		width: calc(100% - 60rpx);
		padding-right: 40rpx;
	}
	
	.workBox .fway-form-input-select .fway-form-selectImg{
		position: absolute;
		right: 10rpx;
		top: 34rpx;
	}
	
	.reportPersonBox .fway-form-item {
		border-bottom: 2rpx #eaeaea solid;
	}
	
	.reportPersonBox .fway-form-lable {
		padding: 10rpx 0;
		width: 200rpx;
		color: #777;
		font-size: 36rpx;
	}
	
	.reportPersonBox .fway-form-input-inline {
		width: calc(100% - 200rpx);
		padding: 10rpx 0 0;
	}
	
	.reportPersonBox .fway-form-input {
		background-color: #fff;
	}
	
	.fway-form-input {
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 36rpx;
	}
	
	.fway-form-textarea {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		height: 180rpx;
		font-size: 36rpx;
		line-height: 46rpx;
	}
	
	.fway-form-checkbox, .fway-form-radioBox{
		font-size: 36rpx;
	}
	
	.workBoxHeader{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.workBoxHeaderAdd{
		color: #3e6ffd;
		font-weight: normal;
		font-size: 32rpx;
	}
	
	.workPersonItem{
		border: 2rpx #c7c7c7 dotted;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.workPersonItemTitle{
		padding: 20rpx 30rpx 10rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #000;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.workPersonItemTitleDelete{
		color: #fd0101;
		font-weight: normal;
		font-size: 32rpx;
	}
	
	.workPersonItemBody{
		padding-bottom: 10rpx;
	}
	
	.chooseFileItem{
		padding: 0 0 0 10rpx;
	}
	
	.chooseFileItemHeader{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}
	
	.chooseFileItemBtn{
		height: 50rpx;
		line-height: 50rpx;
		color: #FFFFFF;
		background-color: #3e6ffd;
		text-align: center;
		border-radius: 20rpx;
		padding: 0 40rpx;
	}
	
	.photoListBox {
		width: calc(100% - 20rpx);
		padding: 10rpx 0 20rpx;
		display: flex;
		justify-content: left;
		align-items: start;
		flex-wrap: wrap;
		align-content: start;
	}
	
	.photoItemBox {
		width: calc(25% - 20rpx);
		height: 130rpx;
		position: relative;
		border: 2rpx #E5E5E5 solid;
		border-radius: 10rpx;
	}
	
	.photoItemBox + .photoItemBox{
		margin-left: 20rpx;
	}
	
	.photoItemBox + .photoItemBoxsel{
		margin-left: 20rpx;
	}
	
	.photoItemBoxsel {
		width: calc(25% - 20rpx);
		height: 130rpx;
		position: relative;
		background-color: #f7f7f7;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.photoItemImg {
		width: 100%;
		height: 100%;
	}
	
	.photoItemImgsel{
		width: 60rpx;
		height: 60rpx;
	}
	
	.closeBtn {
		background-color: #00000060;
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		padding: 10rpx;
		top: 0;
		right: 0;
	}
	
	.fileListBox{
		padding: 20rpx 10rpx;
	}
	 
	.fileItemBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	.fileItemBox + .fileItemBox{
		margin-top: 20rpx;
	}
	 
	.fileName{
		width: calc(100% - 70rpx);
		margin-right: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #53d4fc;
		font-size: 32rpx;
	} 
	
	.fileDeleteBtn{
		width: 50rpx;
		height: 50rpx;
	}
	
	.inspectBox{
		margin: 10rpx 0;
		border-radius: 30rpx;
		box-shadow: 0rpx 5rpx 12rpx 0rpx #c7c7c7;
		background-color: #fafafa;
	} 
	
	.inspectItem{
		padding: 20rpx 10rpx;
		margin: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	} 
	
	.inspectItem + .inspectItem{
		border-Top: 2rpx #bebebe dashed;
	}
	
	.inspectItemText{
		width: calc(100% - 260rpx);
		line-height: 50rpx;
		font-size: 36rpx;
	} 
	
	.inspectItemResult{
		width: 260rpx;
		text-align: right;
		font-size: 36rpx;
	}
	
	.inspectBox .fway-form-checkbox {
		margin-right: 0;
	}
	
	.inspectBox .fway-form-checkbox + .fway-form-checkbox {
		margin-left: 30rpx;
	}
	
	.inspectBox radio-group label{
		padding-right: 0;
	}
</style>