v3-h5-web/pages_safetyCheck/views/inspectManage/conductInspections.vue

<!-- 开展检查 -->
<template>
	<view class="inspectAdd">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="list">
				<view class="list-li srearch">
					<view class="srearch-l">{{newData.subName?newData.subName:'实验室名称'}}</view>
				</view>
				<view class="list-li" style="margin-bottom: 20rpx;border:none;">
					<view>
						{{newData.roomNum?newData.roomNum:''}}房间＆{{newData.buildName?newData.buildName:'楼栋'}}＆{{newData.deptName?newData.deptName:'学院单位'}}
					</view>
				</view>
				<view class="list-li">
					<view>现场照片</view>
				</view>
				<view v-if="form.photoList[0]" class="check-for-img-max-box">
					<view class="left-title-p"></view>
					<view class="right-img-box">
						<view class="img-box" v-for="(imgUrl,imgIndex) in form.photoList" :key="imgIndex">
							<img class="img-data" :src="baseUrl+imgUrl.fileUrl">
							<img class="position-img" :src="imagesUrl('commonality/icon_ssp_closure.png')"
								@click="delImg(imgIndex)">
						</view>
						<!-- <img class="add-button" :src="imagesUrl('safetyCheck/img_ssp_pz@1x.png')"
							@click="selectImage()" v-if="form.photoList.length<6"> -->
					</view>
				</view>
				<view class="list-li" @click="checkItemModuleButton('open')" style="border-bottom: none;">
					<view> {{newData.hazardCheckCode?newData.hazardCheckCode:''}}
						{{newData.hazardCheckName?newData.hazardCheckName:'检查项'}}
					</view>
					<view style="color: #0183FA;">
						<img :src="imagesUrl('commonality/icon_wd_gd@1x.png')">
					</view>
				</view>
				<view class="hazardCheckNum" @click="hiddenDangerClick()">
					<img class="hazardCheckNum-l" :src="imagesUrl('safetyCheck/icon_aqjc_yinhuan.png')">
					<view class="hazardCheckNum-r">{{'已连续出现'+hazardCheckNum+'次隐患'}} </view>
				</view>
				<view class="list-li" v-if="!form.checkFlag">
					<view>隐患描述</view>
					<view></view>
				</view>
				<view class="describe">
					<textarea v-if="!form.checkFlag && !checkItemModuleType" cursor-spacing="40" class="describe-n" type="text"
						v-model="form.hazardDescribe" maxlength="200" placeholder="请填写隐患描述"
						placeholder-style="font-size:24rpx;color:#999;"></textarea>
				</view>

			</view>
			<view class="voice">
				<view class="voice_t">
					<view class="voice_t_t" v-if="!form.voiceList[0]"><text>语音备注：</text><text>按住话筒录音</text></view>
					<view class="voice_t_b" v-if="form.voiceList[0]">语音备注：({{form.voiceList.length}})</view>
				</view>
				<view class="voice_b" v-if="form.voiceList[0]" v-for="(voiceItem,voiceIndex) in form.voiceList"
					:key="voiceIndex">
					<view class="voice_b_l" @tap="voicePlay(voiceItem.fileUrl)">
						<img class="add-button" :src="imagesUrl('safetyCheck/icon_yybz_yy.png')" />
						{{voiceItem.fileLength}}″
					</view>
					<img class="voice_b_r" :src="imagesUrl('safetyCheck/icon_yybz_sc.png')"
						@tap="voiceDele('',voiceIndex)" />
				</view>
				<!-- <view class="voice-btn">
					<img class="voice_t_r" :src="imagesUrl('commonality/icon_sskz_azsh.png')"
						@longpress.stop="recordButton(item,$event)" @touchmove.stop="cancelButton"
						@touchend.stop="sendButton(item,$event)" />
					<text>按住说话</text>
				</view> -->
			</view>
		</scroll-view>
		<checkItemModule :propsData="propsData" v-if="checkItemModuleType"></checkItemModule>
		<!-- <view class="sub-btn">
			<view @click="submitForm(1)">保存草稿</view>
			<view @click="submitForm(2)">提交</view>
		</view> -->
		<view class="sub-btn" v-if="!checkItemModuleType">
			<!-- #ifdef MP-WEIXIN -->
			
			<view
				class="broadcast_m no-long-press"
				@longpress.stop="recordButton(item,$event)" 
				@touchmove.stop="cancelButton"
				@touchend.stop="sendButton(item,$event)" 
			></view>
			<!-- <img 
				@longpress.stop="recordButton(item,$event)" 
				@touchmove.stop="cancelButton"
				@touchend.stop="sendButton(item,$event)" 
				:src="imagesUrl('safetyCheck/icon_aqjc_luyin.png')" /> -->
			<!-- #endif -->
			<!-- #ifdef WEB -->
			<view
				class="broadcast_m no-long-press"
				@touchstart="handleTouchStart"
				@touchmove="handleTouchMove"
				@touchend="handleTouchEnd"
				@touchcancel="handleTouchEnd"
				@contextmenu.prevent="handleContextMenu"
			></view>
			<!-- <img 
				@touchstart="handleTouchStart"
				@touchmove="handleTouchMove"
				@touchend="handleTouchEnd"
				@touchcancel="handleTouchEnd"
				@contextmenu.prevent="handleContextMenu"
				:src="imagesUrl('safetyCheck/icon_aqjc_luyin.png')" /> -->
			<!-- #endif -->
			<img @click="selectImage()" :src="imagesUrl('safetyCheck/icon_aqjc_paizhao.png')" />
			<img @click="submitForm(2)" :src="imagesUrl('safetyCheck/icon_aqjc_tijiao.png')" />
		</view>
		<view v-if="!checkItemModuleType" class="inspectRecord"  @click="inspectRecordClick()">检查记录</view>
	</view>

</template>

<script>
	// #ifdef WEB
	import Recorder from 'recorder-core';
	import 'recorder-core/src/engine/mp3';
	import 'recorder-core/src/engine/mp3-engine';
	// #endif
	import {
		config
	} from '@/api/request/config.js'
	import {
		securityAppCheckPlanCheckInfo,
		securityAppCheckSetOptionCheckCommit,
		securityAppCheckPhotoGetCheckNumBySub,
	} from '@/pages_safetyCheck/api/index.js'
	import checkItemModule from '@/pages_safetyCheck/component/checkItemModule.vue'
	export default {
		name: "inspectAdd",
		components: {
			checkItemModule
		},
		data() {
			return {
				baseUrl: config.base_url,
				form: {
					checkFlag: false,
					photoList: [],
					voiceList: [],
				},
				newData: {},
				radioList: [{
						id: 1,
						name: '符合',
						checked: false,
					},
					{
						id: 0,
						name: '不符合',
						checked: true,
					},
				],
				pageType: '',
				sendLock: true, //发送锁，当为true时上锁，false时解锁发送
				recorderManager: wx.getRecorderManager(),
				optionData: null,
				//检查项组件数据
				checkItemModuleType: false,
				propsData: {},
				hazardCheckNum:0,
				//广播相关
				liveType: false,
				sendLock: true, //发送锁，当为true时上锁，false时解锁发送
				//H5
				recording: false,
				recorder: null,
				audioBlob: null,
				audioPath: null,
			}
		},
		onLoad(option) {
			let optionData = JSON.parse(decodeURIComponent(option.infoData));
			uni.setNavigationBarTitle({
				title: optionData.subName + '(' + (optionData.pageType == 0 ? (optionData.roomNum ? optionData
					.roomNum : '-') : (optionData
					.subRoom ? optionData
					.subRoom : '-')) + ')'
			})
			this.$set(this, 'pageType', optionData.pageType);
			this.$set(this, 'optionData', optionData);

		},
		onShow() {
			// #ifdef MP-WEIXIN
			if (this.recorderManager) {
				this.recorderManager.stop();
			}
			// #endif
		},
		mounted() {
			if (this.pageType == 0) {
				this.securityAppCheckPlanCheckInfo();
				this.securityAppCheckPhotoGetCheckNumBySub();
			}
		},
		methods: {
			//折叠展开
			inspectDot() {
				
				this.newData.inspectDot = !this.newData.inspectDot
			},
			//检查记录
			inspectRecordClick(){
				let infoData = this.optionData;
				infoData.curTabTow=1;//已检查
				uni.navigateTo({
					url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItems?infoData=' +
						encodeURIComponent(JSON
							.stringify(infoData))
				});
			},
			//获取提交详情
			async securityAppCheckPlanCheckInfo() {
				let obj = {
					setOptionId: this.optionData.setOptionId,
					manageId: this.optionData.manageId,
				}
				const {
					data
				} = await securityAppCheckPlanCheckInfo(obj);
				if (data.code == 200) {
					data.data.inspectDot = true;
					this.$set(this, 'newData', data.data);
					//编辑的时候
					this.$set(this.form, 'checkFlag', data.data.checkFlag ? data.data.checkFlag : false);
					if(data.data.hazardDescribe){
						this.$set(this.form, 'hazardDescribe', data.data.hazardDescribe);
					}else{
						this.$set(this.newData,'hazardCheckPro',this.optionData.hazardCheckPro);
						this.$set(this.newData,'hazardCheckCode',this.optionData.hazardCheckCode);
						this.$set(this.newData,'hazardCheckName',this.optionData.hazardCheckName);
						this.$set(this.newData,'hazardCheckPro1',this.optionData.hazardCheckPro1);
						this.$set(this.newData,'hazardCheckCode1',this.optionData.hazardCheckCode1);
						this.$set(this.newData,'hazardCheckName1',this.optionData.hazardCheckName1);
						this.$set(this.newData,'hazardCheckPro2',this.optionData.hazardCheckPro2);
						this.$set(this.newData,'hazardCheckCode2',this.optionData.hazardCheckCode2);
						this.$set(this.newData,'hazardCheckName2',this.optionData.hazardCheckName2);
						this.$set(this.newData,'hazardCheckPoint',this.optionData.hazardCheckPoint);
						this.$set(this.form,'hazardDescribe',this.optionData.hazardCheckPoint);
						// let list=[];
						// list=data.data.hazardCheckPoint.split('#');
						// this.$set(this.form, 'hazardDescribe', list[0]);
					}
					this.$set(this.form, 'photoList', data.data.photoList ? data.data.photoList : []);
					this.$set(this.form, 'voiceList', data.data.voiceList ? data.data.voiceList : []);

				}
			},
			hiddenDangerClick(row) {
				if(!this.hiddenDangerRecordStatus){
					let infoData = this.optionData;
					infoData.subName=this.newData.subName;
					infoData.roomNum=this.newData.roomNum;
					infoData.hiddenDangerRecordStatus = true;//判断是否跳转隐患列表
					uni.navigateTo({
						url: '/pages_safetyCheck/views/inspectManage/hiddenDangerRecord?infoData=' +
							encodeURIComponent(JSON.stringify(infoData))
					});
				}
			},
			checkItemModuleButton(type, item,keyPoint) {
				if (type == 'open') {
					let obj = {
						infoType: this.pageType,
						checkType: 0,
						editStatus:this.optionData.editStatus,
						editItem:{
							hazardCheckName:this.newData.hazardCheckName,
							hazardCheckName1:this.newData.hazardCheckName1,
							hazardCheckName2:this.newData.hazardCheckName2,
							hazardCheckCode:this.newData.hazardCheckCode,
							hazardCheckCode1:this.newData.hazardCheckCode1,
							hazardCheckCode2:this.newData.hazardCheckCode2,
							hazardCheckPoint:this.newData.hazardCheckPoint,
							hazardCheckPro:this.newData.hazardCheckPro,
							hazardCheckPro1:this.newData.hazardCheckPro1,
							hazardCheckPro2:this.newData.hazardCheckPro2,
							setOptionId:this.newData.setOptionId,
						}
					}
					if (this.pageType == 0) {
						//检查
						obj.manageId = this.optionData.manageId
						obj.planSetId = this.optionData.planSetId
					}
					this.$set(this, 'propsData', obj);
					this.$set(this, 'checkItemModuleType', true);
				} else if (type == 'out') {
					this.$set(this, 'checkItemModuleType', false);
					this.$set(this, 'propsData', {});
				} else if (type == 'submit') {
					this.$set(this.newData, 'hazardCheckPro', item.hazardCheckPro);
					this.$set(this.newData, 'hazardCheckCode', item.hazardCheckCode);
					this.$set(this.newData, 'hazardCheckName', item.hazardCheckName);
					this.$set(this.newData, 'hazardCheckPro1', item.hazardCheckPro1);
					this.$set(this.newData, 'hazardCheckCode1', item.hazardCheckCode1);
					this.$set(this.newData, 'hazardCheckName1', item.hazardCheckName1);
					this.$set(this.newData, 'hazardCheckPro2', item.hazardCheckPro2);
					this.$set(this.newData, 'hazardCheckCode2', item.hazardCheckCode2);
					this.$set(this.newData, 'hazardCheckName2', item.hazardCheckName2);
					this.$set(this.newData, 'hazardCheckPoint', item.hazardCheckPoint);
					this.$set(this.form, 'hazardDescribe', keyPoint);
					// this.$set(this.optionData, 'setOptionId', item.setOptionId);
					this.$set(this.optionData, 'hazardCheckPro', item.hazardCheckPro);
					this.$set(this, 'checkItemModuleType', false);
					this.securityAppCheckPhotoGetCheckNumBySub();
					//编辑的时候
					if(this.optionData.editStatus){
						if(this.optionData.setOptionId!=this.newData.setOptionId){
							this.$set(this.form, 'photoList', []);
							this.$set(this.form, 'voiceList', []);
						}
						
					}
				}
			},
			//提交
			async submitForm(status) {
				if (!this.form.checkFlag) {
					if (!this.form.hazardDescribe) {
						uni.showToast({
							title: '请填写隐患描述!',
							icon: "none",
							mask: true,
							duration: 2000
						});
						return
					}
					if (!this.form.photoList[0]) {
						uni.showToast({
							title: '请选择现场照片!',
							icon: "none",
							mask: true,
							duration: 2000
						});
						return
					}
				}
				let obj = {
					checkFlag: this.form.checkFlag,
					checkStatus: 1,
					hazardDescribe: this.form.hazardDescribe,
					photoList: this.form.photoList,
					voiceList: this.form.voiceList,
          manageId: this.optionData.manageId,
          hazardCheckPro: this.newData.hazardCheckPro,
          hazardCheckCode: this.newData.hazardCheckCode,
          hazardCheckName: this.newData.hazardCheckName,
          hazardCheckPro2: this.newData.hazardCheckPro2,
          hazardCheckCode2: this.newData.hazardCheckCode2,
          hazardCheckName2: this.newData.hazardCheckName2,
          hazardCheckPro1: this.newData.hazardCheckPro1,
          hazardCheckCode1: this.newData.hazardCheckCode1,
          hazardCheckName1: this.newData.hazardCheckName1,
          hazardCheckPoint: this.form.hazardDescribe,
				}
				if(this.optionData.setOptionId){
					obj.setOptionId = this.optionData.setOptionId;
				}
				const {
					data
				} = await securityAppCheckSetOptionCheckCommit(obj);
				if (data.code == 200) {
					uni.$emit('infoPageSubmitButton', { type:1,subId:this.newData.subId });
					uni.showToast({
						title: '提交成功!',
						icon: "none",
						mask: true,
						duration: 2000
					});
					let infoData = this.optionData;
					infoData.setOptionId = data.data;
					uni.redirectTo({
						url: '/pages_safetyCheck/views/itemsManage/hiddenDangerItemsDetail?infoData=' +
							encodeURIComponent(JSON
								.stringify(infoData))
					});
				}
			},
			//获取检查项在当前实验室出现的次数
			async securityAppCheckPhotoGetCheckNumBySub() {
				let obj = {
					subId: this.optionData.subId,
					hazardCheckPro: this.optionData.hazardCheckPro,
				}
				const {
					data
				} = await securityAppCheckPhotoGetCheckNumBySub(obj);
				if (data.code == 200) {
					this.$set(this, 'hazardCheckNum', data.data);
			
				}
			},
			//滚动事件
			scrollGet() {},
			//单选按钮
			radioClick(d) {
				let self = this;
				d.checked = !d.checked
				if (d.checked) {
					//如果有选中的，循环把其他选中的取消
					this.radioList.forEach(function(item) {
						if (item.id == d.id) {
							self.$set(self.form, 'checkFlag', item.id);
						} else {
							item.checked = false;
						}
					})
				} else {

				}

			},
			/******图片上传******/
			selectImage() {
				let self = this;
				let photoMaxNun = 0;
				if (this.form.photoList.length > 5) {
					uni.showToast({
						title: '最多上传6张图片',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				photoMaxNun = 6 - this.form.photoList.length;
				uni.chooseImage({
					count: photoMaxNun,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						if (res.tempFilePaths[0]) {
							res.tempFilePaths.forEach(function(item, index) {
								self.uploadImg(item);
							})
						}
					}
				});
			},
			async uploadImg(tempFilePaths) {
				var self = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				});
				uni.uploadFile({
					url: config.base_url + '/system/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) {
							this.form.photoList.push({
								'fileUrl': res.data.url,
								'fileName': res.data.name
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			//删除图片
			delImg(minIndex) {
				this.form.photoList.splice(minIndex, 1);
				this.$forceUpdate();
			},
			/******语音备注  *******/
			//语音备忘播放
			async voicePlay(item) {
				const innerAudioContext = uni.createInnerAudioContext();
				// innerAudioContext.autoplay = true;
				innerAudioContext.src = uni.getStorageSync('fileBrowseEnvironmentS') + '/' + item;
				innerAudioContext.onPlay(() => {
				  // console.log('开始播放');
					uni.showToast({
						title: '开始播放',
						icon: "none",
						mask: true,
					});
				});
				innerAudioContext.onError((res) => {
				  // console.log('播放失败');
					uni.showToast({
						title: '播放失败',
						icon: "none",
						mask: true,
					});
				});
			},
			//语音备忘删除
			async voiceDele(item, voiceIndex) {
				let self = this;
				uni.showModal({
					title: '',
					cancelColor: '#999999',
					confirmColor: '#FF6E6E',
					content: '确定删除此语音吗?',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							self.form.voiceList.splice(voiceIndex, 1);
							self.$forceUpdate();
						} else if (res.cancel) {
							console.log('用户点击取消')

						}
					}
				})

			},
			//录制
			recordButton(item, e) {
				console.log("按下")
				let self = this;
				if (this.form.voiceList.length >= 5) {
					uni.showToast({
						title: '语音备忘最多只能上传5条',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				this.liveType = true;
				console.log('录制', e)
				this.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
				const options = {
					duration: 60000,
					sampleRate: 16000,
					numberOfChannels: 1,
					encodeBitRate: 48000,
					format: 'mp3',
					frameSize: 50
				}
				this.recorderManager.start(options); //开始录音
				this.recorderManager.onStart(() => {
					console.log('recorder start')
				})
				this.recorderManager.onError((res) => {
					console.log(res);
				})
				uni.showToast({
					title: "正在录音，上划取消发送",
					icon: "none",
					duration: 60000 //先定义个60秒，后面可以手动调用wx.hideToast()隐藏
				});
				this.sendLock = false; //长按时是不上锁的。
			},
			//取消
			cancelButton(e) {
				console.log("移动")
				let self = this;

				this.liveType = false;
				console.log('取消', e)
				let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
				if (Math.abs(moveLenght) > 50) {
					uni.showToast({
						title: "松开手指,取消发送",
						icon: "none",
						duration: 60000
					});
					this.sendLock = true; //触发了上滑取消发送，上锁
				} else {
					uni.showToast({
						title: "正在录音，上划取消发送",
						icon: "none",
						duration: 60000
					});
					this.sendLock = false; //上划距离不足，依然可以发送，不上锁
				}
			},
			//发送
			sendButton(item, e) {
				console.log("松开")
				let self = this;

				this.liveType = false;
				console.log('发送', e)
				uni.hideToast(); //结束录音、隐藏Toast提示框
				this.recorderManager.stop(); //结束录音
				this.recorderManager.onStop((res) => {

					if (!this.sendLock) {

						this.uploadVoice(item, res.duration, res.tempFilePath);
					}
					console.log('停止录音', res.tempFilePath)
					console.log("sendLock", this.sendLock);
				})
			},
			//上传MP3
			async uploadVoice(item, times, tempFilePaths) {

				var self = this;
				uni.uploadFile({
					url: config.base_url + '/system/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) {
							console.log("上传成功", res)
							console.log(item)
							let seconds = Math.round((parseInt(times) % (1000 * 60)) / 1000);
							this.form.voiceList.push({
								'fileLength': seconds,
								'fileUrl': res.data.url,
								'fileName': res.data.name
							})
							console.log(JSON.stringify(self.voice))
							//self.textParseUrlIps(res.data.url);
							// self.newData.imgList.push(res.data.url);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {
						uni.hideLoading()
					},
					complete: () => {}
				});
			},// #ifdef WEB
			/* H5 */
			async initRecorder() {
				try {
					// 获取麦克风权限
					await navigator.mediaDevices.getUserMedia({ audio: true });

					this.recorder = new Recorder({
						type: "mp3", // 输出格式
						bitRate: 64,  // 降低比特率提升兼容性
						// 不指定 sampleRate，让浏览器使用系统默认值（iOS 兼容性要求）
					});

					this.recorder.open(() => {
						// 初始化成功，继续 startRecord 流程
						this.startRecord();
					}, (error) => {
						console.error("录音器初始化失败:", error);
						uni.showToast({
							title: '麦克风权限获取失败,请允许麦克风权限',
							icon: "none",
							mask: true,
							duration: 2000
						});
					});
				} catch (err) {
					console.error("获取麦克风失败:", err);
					uni.showToast({
						title: '请允许麦克风权限',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			// 开始录音
			async startRecord() {
				let self = this;
				if (this.form.voiceList.length >= 5) {
					uni.showToast({
						title: '语音备忘最多只能上传5条',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (!this.recorder) {
					await this.initRecorder();
					// this.startRecord()
					return;
				}
				this.recorder.start();
				this.recording = true;
				this.liveType = true;
				// uni.showToast({ title: "录音开始", icon: "none" });
				uni.showToast({
					title: "正在录音，上划取消发送",
					icon: "none",
					duration: 60000 //先定义个60秒，后面可以手动调用wx.hideToast()隐藏
				});
			},
			// 停止录音
			stopRecord() {
				if (!this.recorder || !this.recording) return;
				this.recorder.stop((blob, duration) => {
					this.recording = false;
					this.liveType = false;
					this.audioBlob = blob;
					// 生成临时文件路径
					this.audioPath = URL.createObjectURL(blob);
					this.uploadAudio(duration);
				}, (error) => {
					console.error("录音失败:", error);
					uni.showToast({ title: "录音失败", icon: "none" });
				});
			},
			delRecord(){
				this.recorder.stop((blob, duration) => {
					this.recording = false;
					this.liveType = false;
					this.audioBlob = null;
					this.audioPath = null;
				})
			},
			// 上传录音文件
			uploadAudio(times) {
				let self = this;
				if (!this.audioBlob) return;
				// 1. 通过fetch获取Blob数据
				fetch(this.audioPath)
					.then(response => response.blob())
					.then(blob => {
						// 2. 将Blob转换为File对象
						const file = new File([blob], 'audio.mp3', { type: 'audio/mp3' });
						// console.log('file',file);
						// 3. 使用uni.uploadFile上传
						uni.uploadFile({
							url: config.base_url + '/system/file/upload',
							header: {
								'Authorization': uni.getStorageSync('token')
							},
							file: file,
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let res = JSON.parse(uploadFileRes.data);
								if (res.code == 200) {
									console.log("上传成功", res)
									let seconds = Math.round((parseInt(times) % (1000 * 60)) / 1000);
									this.form.voiceList.push({
										'fileLength': seconds,
										'fileUrl': res.data.url,
										'fileName': res.data.name
									})
									// console.log(JSON.stringify(self.voice))
									//self.textParseUrlIps(res.data.url);
									// self.newData.imgList.push(res.data.url);
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none",
										mask: true,
										duration: 2000
									});
								}
							},
							fail: (err) => {
								console.error('上传失败', err);
								uni.showToast({
									title: res.msg,
									icon: "none",
									mask: true,
									duration: 2000
								});
							}
						});
					})
					.catch(error => {
						console.error('获取Blob数据失败', error);
					});
			},
			//H5 拖拽
			// 触摸开始
			handleTouchStart(event) {
				// 彻底阻止所有默认行为
				event.preventDefault();
				event.stopPropagation();
				
				this.touchStartY = event.touches[0].clientY;
				this.hasMoved = false;
				this.moveDirection = null;
				this.hasTriggeredMethod3 = false;
				
				// 设置长按定时器
				this.longPressTimer = setTimeout(() => {
					this.isLongPress = true;
					this.startRecord(); // 执行方法1
				}, 300); // 300ms触发长按
			},
				
			// 触摸移动
			handleTouchMove(event) {
				console.log("按下")
				let self = this;
				// 彻底阻止所有默认行为
				event.preventDefault();
				event.stopPropagation();
				
				if (!this.isLongPress) return;
				
				const currentY = event.touches[0].clientY;
				const deltaY = currentY - this.touchStartY;
				
				// 检测滑动方向（向上滑动为负值）
				if (Math.abs(deltaY) > 75) { // 增加阈值避免误触
					uni.showToast({
						title: "松开手指,取消发送",
						icon: "none",
						duration: 60000
					});
					this.hasMoved = true;
					this.moveDirection = deltaY < 0 ? 'up' : 'down';
					
					// 向上滑动执行方法3（确保只触发一次）
					if (this.moveDirection === 'up' && !this.hasTriggeredMethod3) {
						this.hasTriggeredMethod3 = true;
						this.delRecord();
					}
				}
			},
				
			// 触摸结束
			handleTouchEnd() {
				// 清除长按定时器
				clearTimeout(this.longPressTimer);
				
				uni.hideToast(); //结束录音、隐藏Toast提示框
				if (this.isLongPress) {
					this.stopRecord(); // 执行方法2
				}
				
				// 重置状态
				this.isLongPress = false;
				this.hasMoved = false;
				this.moveDirection = null;
			},
			
			// 关键：禁用上下文菜单（长按菜单）
			handleContextMenu(e) {
				e.preventDefault();
				return false;
			},
			// #endif
		}
	}
</script>

<style lang="stylus" scoped>
	@import '@/api/request/imagesUrl.styl';
	.inspectAdd {
		height: 100%;
		display flex;
		box-sizing: border-box;
		padding-bottom: 230rpx;
		box-sizing: border-box;
		.tip {
			width: 750rpx;
			height: 80rpx;
			background: rgba(1, 131, 250, 0.2);
			font-weight: normal;
			font-size: 28rpx;
			color: #0183FA;
			line-height: 80rpx;
			text-align: center;
		}
		
		.list {
			width: 750rpx;
			margin: 20rpx 0rpx 0;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			overflow: hidden;

			.list-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E0E0E0;
				background: #fff;

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 100rpx;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				>view:nth-of-type(2) {
					font-size: 28rpx;
					color: #666666;
					line-height: 100rpx;
					text-align: left;
					display: flex;
					justify-content: space-between;
					align-items: center;

					>img {
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}
				}

			}

			.hidden-content {
				width: 630rpx;
				min-height: 200rpx;
				background: #F5F5F5;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: 20rpx 30rpx 0;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				color: #666666;
				line-height: 39rpx;
				text-align: left;
			}

			.photo {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-top: 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				>img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin: 0 10rpx 10rpx 0;
				}

				>img:nth-of-type(4) {
					margin-right: 0;
				}
			}

			.describe {
				width: 750rpx;
				background: #fff;
				overflow: hidden;
			
				.describe-n {
					width: 690rpx;
					min-height: 180rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 1rpx solid #E0E0E0;
					margin: 40rpx;
					padding: 22rpx;
					box-sizing: border-box;
					background: #F5F5F5;
				}
			}

			.check-for-img-max-box {
				padding: 20px 28rpx;
				box-sizing: border-box;
				background: #fff;
				border-bottom: 2rpx solid #E0E0E0;
				.left-title-p {
					width: 100%;
					text-align: left;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
				}

				.right-img-box {
					.img-box {
						display inline-block;
						height: 150rpx;
						width: 150rpx;
						position relative;
						margin: 0 10rpx 20rpx 0;
						border-radius 10rpx;
						overflow hidden;

						.img-data {
							height: 150rpx;
							width: 150rpx;
						}

						.position-img {
							position absolute;
							right: 0;
							top: 0;
							width: 36rpx;
							height: 36rpx;
						}
					}

					.img-box:nth-of-type(4n+4) {
						margin-right: 0rpx;
					}

					.add-button {
						margin: 0 0rpx 20rpx 0;
						border-radius 10rpx;
						overflow hidden;
						display inline-block;
						height: 150rpx;
						width: 150rpx;
					}
				}
			}

			.list-li:last-of-type {
				border: none;
			}
			.hazardCheckNum{
				border-bottom: 2rpx solid #E0E0E0;
				padding: 30rpx 40rpx 34rpx 40rpx;
				box-sizing: border-box;
				background: #fff;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.hazardCheckNum-l{
					width: 30rpx;
					height: 30rpx;
					margin-right: 18rpx;
				}
				.hazardCheckNum-r{
					font-size: 28rpx;
					color: #FF5900;
					line-height: 40rpx;
					text-align: left;
				}
				
			}
		}

		.srearch {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.srearch-l {
				font-size: 30rpx;
				color: #333333;
				line-height: 100rpx;
				text-align: left;
			}

			.srearch-r {
				width: 30rpx;
				height: 30rpx;
				margin-right: 0rpx;
			}
		}

		/* 语音备注 */
		.voice {
			width: 750rpx;
			min-height: 100rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			
			overflow: hidden;

			.voice_t {
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-top: 2rpx solid #E0E0E0;
				.voice_t_t {
					width: 100%;
					display: flex;
					justify-content: space-between;
					>text:nth-of-type(1) {
						font-size: 30rpx;
						color: #333333;
						line-height: 100rpx;
					}
					>text:nth-of-type(2) {
						font-size: 28rpx;
						color: #999999;
						line-height: 100rpx;
					}
				}

				.voice_t_b {
					width: 100%;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 100rpx;
					text-align: left;
				}
			}

			.voice_b {
				display flex;
				justify-content flex-start;
				align-items center;
				margin-bottom: 20rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				.voice_b_l {
					width: 400rpx;
					height: 40rpx;
					background: #0183FA;
					border-radius: 10rpx;
					display flex;
					justify-content flex-start;
					align-items center;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 30rpx;
					text-align: left;

					>img {
						width: 20rpx;
						height: 20rpx;
						margin-left: 16rpx;
						margin-right: 20rpx;
					}
				}

				.voice_b_r {
					width: 28rpx;
					height: 28rpx;
					margin-left: 20rpx;
				}
			}

			.voice-btn {
				width: 150rpx;
				height: 150rpx;
				position: fixed;
				right: 24rpx;
				bottom: 176rpx;

				>img {
					width: 150rpx;
					height: 150rpx;
					position: absolute;
				}

				>text {
					font-size: 24rpx;
					color: #999999;
					line-height: 30rpx;
					text-align: center;
					position: absolute;
					top: 84rpx;
					left: 26rpx;
				}
			}
		}

	}

	.sub-btn {
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 30rpx;
		width: 750rpx;
		padding: 0 46rpx;
		box-sizing: border-box;

		>img {
			width: 160rpx;
			height: 160rpx;
		}
		.broadcast_m{
			width: 160rpx;
			height: 160rpx;
			background-size:160rpx 160rpx !important;
			background: url($imagesUrl+'safetyCheck/icon_aqjc_luyin.png');
		}
	}
	.inspectRecord{
		position: fixed;
		top: 118rpx;
		right: 0;
		z-index: 200;
		width: 160rpx;
		height: 60rpx;
		background: #0183FA;
		border-radius: 50rpx 0rpx 0rpx 50rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
	}
</style>