snapshot-wx/pagesBase/Write/ReportHiddenDanger.vue

<template>
	<view style="position: relative;">
		<form @submit="onSubmit">
			<scroll-view scroll-y class="container">
				<div class="helpBox">
					<semp-notice-bar scrollable showType="slider" icon="sound" setIconColor="#eb9064" round bgColor="#fff" :strText="helpTips" @tap="onOperateIllustrateTo"></semp-notice-bar>
				</div>
				<view class="formBox">
					<view class="hiddenDangerBox">
						<view class="hiddenDangerItemBox" style="margin-top: 0px;">
							<view class="hiddenDangerHeader">线索信息</view>
							<view class="hiddenDangerBody">
								<view class="hiddenDangerItem">
									<view class="hiddenDangerItemHeader">
										<text class="mustTips">*</text>
										<text class="itemHeaderText">地点</text>
									</view>
									<view class="hiddenDangerItemBody">
										<view class="fway-form-item" style="position: relative;">
											<view class="fway-form-input-inline" @tap="onMapTo">
												<input type="text" disabled class="fway-form-input" placeholder="请标记事发地点" v-model="data.address" />
											</view>
											<view class="fway-form-input-inline" v-if="data.address">
												<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>
								<view class="hiddenDangerItem">
									<view class="hiddenDangerItemHeader">
										<text class="mustTips">*</text>
										<text class="itemHeaderText" style="width: 248rpx;">事件描述</text>
										<view class="fway-form-lable-block hiddenDangerHeaderBtn">
											<view class="fway-form-lable-btn" style="width: 100%;">
												<view class="vioceBox">
													<nb-voice-record v-if="vioceList.length == 0" :btnStyle="vioceBtnStyle" popupFixBottom="400" isShowRecordTime popupTitle="正在录制音频,要求录音时长不低于10s" @startRecord="OnVioceStart" @endRecord="OnVioceEnd" @cancelRecord="OnVioceCancel" :btnIconShow="true" btnIconSrc="/static/img/write/record.png" btnDefaultText="长按开始录音"></nb-voice-record>
													<view v-if="vioceList.length > 0" class="vioceListBox">
														<view class="vioceItemBox" v-for="(item, index) in vioceList" :key="index">
															<view class="vioceItemImgBox" @tap="onPlayVioce(item.tempFilePath)">
																<view class="vioceItemBG" :style="'width: '+ vioceItemBGWidth + '%'"></view>
																<image class="vioceItemImg" src="/static/img/write/bofang.png" v-if="!item.isPlay"></image>
																<image class="vioceItemImg" src="/static/img/write/zanting.png" v-else></image>
																<text class="vioceItemDuration">{{Math.round(item.duration / 1000)}}s</text>
															</view>
															<view class="vioceItemDelete" @tap="onDeleteVioce(item.tempFilePath)">删除
															</view>
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class="hiddenDangerItemBody">
										<view class="fway-form-item" style="position: relative;">
											<view class="fway-form-input-inline">
												<textarea type="text" class="fway-form-textarea" placeholder="请告知具体情况,以便我们尽快处理" v-model="data.description" maxlength="2000" />
											</view>
										</view>
									</view>
								</view>
								<view class="hiddenDangerItem">
									<view style="padding: 10rpx 0;">
										<text class="mustTips" style="display: inline-block;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">
									<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 class="fway-form-item" style="border: none;padding: 10rpx 0 0;">
											<view class="fway-form-lable" style="color: #000;"><text class="mustTips">*</text>是否保密</view>
											<view class="fway-form-input-inline" style="padding: 10rpx 0 10rpx 20rpx;width: calc(100% - 170rpx);">
												<radio-group @change="onIsSecretChange">
													<label class="fway-form-radioBox">
														<radio class="fway-form-radio" style="transform:scale(0.8)" value="1" color="#3e6ffd" :checked="data.isSecret == true" />保密
													</label>
													<label class="fway-form-radioBox">
														<radio class="fway-form-radio" style="transform:scale(0.8)" value="0" color="#3e6ffd" :checked="data.isSecret == false" />不保密
													</label>
												</radio-group>
											</view>
										</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>
	const innerAudioContext = uni.createInnerAudioContext();
	var qqMap = require('@/static/js/qqmap-wx-jssdk.min.js');
	var qqMapsdk;
	var that;
	export default {
		data() {
			return {
				data: {
					longitude: '',
					latitude: '',
					areaCode: '',
					province: '',
					city: '',
					county: '',
					town: '',
					street: '',
					address: '',
					fullAddress: '',
					industryId: '',
					jobType: null,
					businessUnitType: '',
					workplace: '',
					workplaceName: '',
					workArea: '',
					workAreaId: '',
					startWorkTime: '',
					endWorkTime: '',
					name: '',
					phoneNumber: '',
					isSecret: null,
					description: '',
					companyName: '',
					files: []
				},
				photoList: [],
				videoList: [],
				vioceList: [],
				vioceBtnStyle: {
					width: '200rpx',
					height: '48rpx',
					borderRadius: '60rpx',
					backgroundColor: '#3e6ffd',
					color: '#fff',
					border: 'none',
					padding: '0 10rpx',
					permisionState: false
				},
				vioceItemBGWidth: 0,
				focusID: '',
				fileSize: 40, // 单位M
				helpID: '',
				helpTips: '',
			}
		},
		onLoad(option) {
			that = this;
			that.data.industryId = decodeURIComponent(option.id);
			qqMapsdk = new qqMap({
				key: 'TE4BZ-ZFEAT-45CX3-VPZ3R-GOLS6-EGF54'
			});
			that.onGetBaseData();
		},
		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: {
			// 获取作业类型数据
			onGetBaseData(fun){
				that.$admin.req({
					method: 'GET',
					url: '/api/v1/Snapshot/industry/base/' + that.data.industryId
				}).then(res => {
					if (res) {
						// that.data.IndustryName = res.industry.name;
						that.helpID = res.bulletinId;
						that.helpTips = res.industry.txtHelpRemarks || '填报有疑问？点击查看更详细的操作指引';
					} else {
						that.$util.msg('服务异常，请稍后重试！');
					}
					typeof fun === 'function' && fun();
				})
			},
			// 监听input框点击设置焦点
			inputTap(e) {
				if(that.focusID != e.currentTarget.dataset.focus){
					uni.hideKeyboard();
					setTimeout(function() {
						that.focusID = e.currentTarget.dataset.focus
					}, 200)
				}
			},
			onIsSecretChange(e) {
				that.data.isSecret = e.detail.value == '1' ? true : false
			},
			// 验证地理位置是否在自贡市
			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("事发地点定位失败，请重新选择");
					}
				});
			},
			OnVioceStart() {
				// 开始录音
			},
			OnVioceEnd(e) {
				if (e.duration / 1000 < 10) {
					that.$util.msg('您的录音不足10s，请重新点击开始录音');
					return;
				}
				if (e.fileSize * 1 > that.fileSize * 1024 * 1024) {
					that.$util.msg('您的录音超过了系统文件限制大小，请重新点击开始录音');
					return;
				}
				that.vioceList.push({
					tempFilePath: e.tempFilePath,
					duration: e.duration,
					fileSize: e.fileSize,
					fileType: 'vioce',
					isPlay: false
				});
				// 结束录音并处理得到的录音文件
				// event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
			},
			OnVioceCancel() {
				// 用户取消录音
				that.$util.msg('您已取消录音');
			},
			onPlayVioce(src) {
				if (src) {
					let indexVioce = '';
					that.vioceList.forEach((item, index) => {
						if (item.tempFilePath == src) {
							indexVioce = index;
							that.vioceList[index].isPlay = true;
							that.$set(that.vioceList, index, that.vioceList[index]);
						}
					})
					innerAudioContext.src = src;
					let vioceInterval = '';
					let vioceTime = 0;
					innerAudioContext.play();
					innerAudioContext.onPlay(function() {
						// 定时器设置背景色宽度
						vioceInterval = setInterval(() => {
							vioceTime += 100;
							let numTime = (vioceTime / that.vioceList[indexVioce].duration).toFixed(3) *
								100;
							that.vioceItemBGWidth = numTime > 100 ? 100 : numTime
						}, 100)
					})
					innerAudioContext.onEnded(function() {
						that.vioceList[indexVioce].isPlay = false;
						that.$set(that.vioceList, indexVioce, that.vioceList[indexVioce]);
						clearInterval(vioceInterval);
						that.vioceItemBGWidth = 0
					})
				}
			},
			onDeleteVioce(src) {
				let isPlay = false;
				that.vioceList.forEach((item, index) => {
					if (item.tempFilePath == src) {
						if (that.vioceList[index].isPlay == true){
							isPlay = true;
						}
					}
				});
				if (isPlay){
					that.$util.msg('录音正在播放，请稍后删除！');
					return;
				}
				uni.showModal({
					content: '确定要删除吗？',
					confirmText: '确定',
					confirmColor: '#3e6ffd',
					success: res => {
						if (res.confirm) {
							let deleteIndex = -1;
							that.vioceList.forEach((item, index) => {
								if (item.tempFilePath == src) {
									deleteIndex = index;
								}
							})
							that.vioceList.splice(deleteIndex, 1);
						}
					}
				});
			},
			// 选择图片和视频
			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 (remainPhotoNum > 0 && remainVideoNum > 0) {
				// 	mediaType = ['mix'];
				// } else {
				// 	if (remainPhotoNum > 0) {
				// 		mediaType = ['image'];
				// 	}
				// 	if (remainVideoNum > 0) {
				// 		mediaType = ['video'];
				// 	}
				// }
				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)
						}
					}
				})
			},
			// 操作指引
			onOperateIllustrateTo() {
				uni.navigateTo({
					url: '/pagesBase/Home/OperatingInstructions?helpID=' + encodeURIComponent(that.helpID)
				})
			},
			// 附件上传
			onUploadFiles(fun) {
				uni.showLoading({
					title: '上传中，请稍后',
					mask: true
				})
				let files = that.photoList;
				// 组装数据
				if (that.videoList.length > 0) {
					files = files.concat(that.videoList)
				}
				if (that.vioceList.length > 0) {
					files = files.concat(that.vioceList)
				}
				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) {
				let fileObj = {
					fileType: file.fileType,
					msg: ''
				};
				switch (fileObj.fileType) {
					case 'vioce':
						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.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.description) {
					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.isSecret == null) {
					that.$util.msg("请选择是否保密！");
					return false;
				}
				return true;
			},

			// 表单提交
			onSubmit(e) {
				if (!that.formValidation()) {
					return;
				}
				let params = that.data;
				that.onUploadFiles(function(arr) {
					params.files = arr || [];
					// console.log(params);
					that.$admin.req({
						method: 'POST',
						url: '/api/v1/Snapshot/order',
						data: params
					}).then(res => {
						if (res) {
							if (res.no && res.password) {
								uni.showModal({
									title: "您的诉求已上报成功！ ",
									content: '工单编号：' + res.no + '\r\n查询密码：' + res.password,
									showCancel: false,
									confirmText: '确定',
									confirmColor: '#3e6ffd',
									success: res => {
										let obj = uni.getStorageSync('userInfo');
										obj.userName = that.data.name;
										uni.setStorageSync('userInfo', obj);
										uni.switchTab({
											url: "/pages/Index/Mine"
										})
									}
								})
							} else {
								that.$util.msg(res.msg || "对不起，提交失败，请稍后重试！");
							}
						} 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: 99;
	}

	.hiddenDangerBox {
		padding: 0 20rpx;
	}

	.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: 30rpx;
		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;
		height: 32rpx;
	}

	.mustTips {
		width: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #fd0101;
	}

	.itemHeaderText {
		color: #000;
		font-size: 28rpx;
	}

	.itemHeaderTips {
		font-size: 24rpx;
		color: #777;
	}

	.hiddenDangerItemBody {
		padding: 0;
	}

	.hiddenDangerHeaderBtn {
		width: calc(100% - 288rpx);
		display: inline-block;
		vertical-align: middle;
		text-align: right;
	}

	.reportPersonBox .fway-form-item {
		border-bottom: 2rpx #eaeaea solid;
	}

	.reportPersonBox .fway-form-lable {
		padding: 10rpx 0;
		width: 150rpx;
		color: #777;
	}

	.reportPersonBox .fway-form-input-inline {
		width: calc(100% - 150rpx);
		padding: 10rpx 0 0;
	}

	.reportPersonBox .fway-form-input {
		background-color: #fff;
	}

	.photoListBox {
		width: calc(100% - 20rpx);
		padding: 10rpx 10rpx;
		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;
	}

	.vioceBox {
		display: inline-block;
		height: 100%;
	}

	.vioceListBox {
		height: 100%;
	}

	.vioceItemBox {
		height: 100%;
		width: 220rpx;
	}

	.vioceItemImgBox {
		display: inline-table;
		vertical-align: middle;
		width: 100rpx;
		padding: 6rpx 10rpx;
		background-color: #fff;
		color: #999999;
		border: 2rpx #ccc solid;
		border-radius: 10rpx;
		position: relative;
	}

	.vioceItemDelete {
		font-size: 28rpx;
		color: #3e6ffd;
		display: inline-table;
		vertical-align: middle;
		text-align: right;
		width: 80rpx;
	}

	.vioceItemBG {
		background-color: #bfbfbf;
		width: 0;
		position: absolute;
		left: 0;
		top: 0;
		height: 44rpx;
		border-radius: 10rpx;
		z-index: 0;
	}

	.isPlay {
		background-color: #F6F7F8;
		color: #000;
	}

	.vioceItemImg {
		width: 32rpx;
		height: 32rpx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 20rpx;
		position: relative;
		z-index: 99;
	}

	.vioceItemDuration {
		color: #515151;
		display: inline-block;
		vertical-align: middle;
		position: relative;
		z-index: 99;
	}
	
	.fway-form-item {
		padding: 0 10rpx;
	}
	
	.fway-form-input {
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
	}
	
	.fway-form-textarea {
		width: calc(100% - 40rpx);
		padding: 20rpx;
		height: 120rpx;
	}
	
	.fway-form-item .fway-form-input-select {
		width: auto;
	}
	
	.fway-form-tips {
		padding: 10rpx 0;
	}
</style>