FE-lab-xcx/pages_safetyCheck/views/inspectManage/inspectAdd.vue

<!-- 开始检查 -->
<template>
	<view class="inspectAdd">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="tip">第一次检查</view>
			<view class="title">
				<view class="title-l">
					<view class="title-l-t">{{newData.data10}}</view>
					<view class="title-l-b">
						<view v-for="(item,index) in newData.data11" :key="index">{{item}}</view>
					</view>
				</view>
				<img class="title-r" src="@/pages_safetyCheck/images/icon_wd_gd@1x.png">
			</view>
			<view class="items">
				<view class="items-t">
					<view class="items-t-r">{{newData.data3}}</view>
				</view>
				<view class="items-b">＜ {{newData.data4}} ＜</view>
			</view>
			<view class="items-number">此检查项在当前实验室累计出现<text>{{newData.data5}}</text>次隐患</view>
			<view class="list">
				<view class="list-li">
					<view>检查要点</view>
					<view>
						<img src="@/pages_safetyCheck/images/icon_06.png">
					</view>
				</view>
				<view class="hidden-content">{{newData.data6}}
				</view>
				<view class="list-li">
					<view>检查隐患</view>
					<view>
						<img src="@/pages_safetyCheck/images/icon_06.png">
					</view>
				</view>
				<textarea class="describe" type="text" v-model="form.rectifyDescribe" maxlength="200"
					placeholder="请填写隐患描述" placeholder-style="font-size:24rpx;color:#999;"></textarea>
				<view 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.imgDtoList" :key="imgIndex">
							<img class="img-data" :src="baseUrl+imgUrl.fileUrl">
							<img class="position-img" src="@/pages_safetyCheck/images/icon_ssp_closure.png"
								@click="delImg(imgIndex)">
						</view>
						<img class="add-button" src="@/pages_safetyCheck/images/img_ssp_pz@1x.png"
							@click="selectImage()" v-if="form.imgDtoList.length<5">
					</view>
				</view>
			</view>
			<view class="voice">
				<view class="voice_t">
					<view class="voice_t_l">语音备注：(选填)</view>
					<!-- <img class="voice_t_r" src="@/pages_safetyExamine/images/icon_ksjc_yysr.png"
						@longpress.stop="recordButton(item,$event)" @touchmove.stop="cancelButton"
						@touchend.stop="sendButton(item,$event)"> -->
				</view>
				<view class="voice_b" v-for="(voiceItem,voiceIndex) in voiceList" :key="voiceIndex">
					<view class="voice_b_l" @tap="voicePlay(voiceItem.url)">
						<img class="add-button" src="@/pages_safetyCheck/images//icon_yybz_yy.png" />
						{{voiceItem.times}}″
					</view>
					<img class="voice_b_r" src="@/pages_safetyCheck/images/icon_yybz_sc.png"
						@tap="voiceDele('',voiceIndex)" />
				</view>
				<view class="voice-btn">
					<img class="voice_t_r" src="@/pages_safetyCheck/images/icon_sskz_azsh.png"
						@longpress.stop="recordButton(item,$event)" @touchmove.stop="cancelButton"
						@touchend.stop="sendButton(item,$event)"/>
					<text>按住说话</text>
				</view>
			</view>
		</scroll-view>
		<view class="sub-btn">
			<view>保存草稿</view>
			<view>符合</view>
			<view>不符合</view>
		</view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	export default {
		name: "inspectAdd",
		components: {

		},
		data() {
			return {
				baseUrl: config.base_url,
				form: {
					imgDtoList: [],
				},
				newData: {
					data1: '实验室名称（房间号）',
					data2: '学院单位名称',
					data3: '1.1.1 检查项检查项检查项检查',
					data4: '1.1 检查项检查项检查项检查项检查项检查项',
					data5: '19',
					data6: '（1）有学校相关会议（校务会议、党委常委会会议等）纪要，内容包含实验室安全工作。',
					data7: '内容内容内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
					data8: '李瑶瑶',
					data9: '2024-01-01',
					data10: '计划标题计划标题计划标题计划标题计划标题计标题计划标题计划标题',
					data11: ['校级检查', '全面检查', '交叉检查'],
					rectificationStatus: 0, //整改状态 0待整改 1暂无法整改 2已整改
				},
				voiceList: [
					{
					'times': '10',
					'url': '2312312'
					},
				],
			}
		},
		onLoad(option) {},
		onShow() {

		},
		mounted() {

		},
		methods: {
			//滚动事件
			scrollGet() {},
			/******图片上传******/
			selectImage() {
				let self = this;
				if (this.form.imgDtoList.length > 4) {
					uni.showToast({
						title: '最多上传5张图片',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				wx.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album", "camera"],
					success: function(res) {
						let tempFilePaths = res.tempFilePaths[0];
						self.uploadImg(tempFilePaths);
					}
				});
			},
			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.imgDtoList.push({
								'fileUrl': res.data.url,
								'fileName': res.data.name
							});
							console.log(res.data.url)
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			//删除图片
			delImg(minIndex) {
				this.form.imgDtoList.splice(minIndex, 1);
				this.$forceUpdate();
			},
			/******语音备注  *******/
			//语音备忘播放
			async voicePlay(item) {
				myaudio.src = config.base_url + item;
				myaudio.play();
			},
			//语音备忘删除
			async voiceDele(item, voiceIndex) {
				let self = this;
				uni.showModal({
					title: '',
					cancelColor: '#999999',
					confirmColor: '#FF6E6E',
					content: '确定删除此语音吗?',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							this.voiceList.splice(voiceIndex, 1);
							self.$forceUpdate();
						} else if (res.cancel) {
							console.log('用户点击取消')

						}
					}
				})

			},
			//录制
			recordButton(item, e) {
				console.log("按下")
				let self = this;
				if (this.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);
				})
				wx.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) {
					wx.showToast({
						title: "松开手指,取消发送",
						icon: "none",
						duration: 60000
					});
					this.sendLock = true; //触发了上滑取消发送，上锁
				} else {
					wx.showToast({
						title: "正在录音，上划取消发送",
						icon: "none",
						duration: 60000
					});
					this.sendLock = false; //上划距离不足，依然可以发送，不上锁
				}
			},
			//发送
			sendButton(item, e) {
				console.log("松开")
				let self = this;

				this.liveType = false;
				console.log('发送', e)
				wx.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) {
				console.log(item)
				console.log(times)
				console.log(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.voiceList.push({
								'times': seconds,
								'url': res.data.url
							})
							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: () => {}
				});
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.inspectAdd {
		height: 100%;
		display flex;
		box-sizing: border-box;
		padding-bottom: 160rpx;
		box-sizing: border-box;

		#bgColor-A {
			color: #FFD400;
		}

		#bgColor-B {
			color: #FF8C00;
		}

		#bgColor-C {
			color: #E11608;
		}

		.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;
		}

		.title {
			width: 690rpx;
			height: 150rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx 30rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title-l {
				width: 594rpx;

				.title-l-t {
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.title-l-b {
					display: flex;
					justify-content: flex-start;
					margin-top: 16rpx;

					>view {
						width: 130rpx;
						height: 50rpx;
						background: rgba(1, 131, 250, 0.2);
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						font-size: 24rpx;
						color: #0183FA;
						line-height: 50rpx;
						text-align: center;
						margin-right: 14rpx;
					}
				}
			}

			.title-r {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.items {
			width: 690rpx;
			min-height: 165rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx 0 0 30rpx;

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

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

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

			.items-t {
				border-bottom: 1rpx solid #E0E0E0;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				.items-t-l {
					width: 175rpx;
					height: 50rpx;
					background: #E11608;
					border-radius: 50rpx 50rpx 50rpx 50rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 50rpx;
					text-align: center;
					margin-right: 14rpx;
				}

				.items-t-r {
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
				}
			}

			.items-b {
				padding: 0 30rpx;
				box-sizing: border-box;
				height: 80rpx;
				font-size: 28rpx;
				color: #666666;
				line-height: 80rpx;
				text-align: left;
			}
		}

		.items-number {
			font-size: 24rpx;
			color: #3D3D3D;
			line-height: 34rpx;
			text-align: right;
			margin: 20rpx 60rpx 0 0;

			>text {
				font-size: 24rpx;
				color: #FF0000;
				line-height: 34rpx;
				text-align: right;
			}
		}

		.list {
			width: 690rpx;
			margin: 20rpx 30rpx 0;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

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

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #333333;
					line-height: 80rpx;
					text-align: left;
				}

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

					>img {
						width: 24rpx;
						height: 12rpx;
						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;
				}
			}

			.describe {
				width: 636rpx;
				height: 120rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 1rpx solid #E0E0E0;
				margin: 20rpx 0 0 28rpx;
				padding: 12rpx 16rpx;
				box-sizing: border-box;
			}

			.check-for-img-max-box {
				margin: 20px 28rpx;

				.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 14rpx 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(3n+3) {
						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;
			}
		}

		/* 语音备注 */
		.voice {
			width: 690rpx;
			min-height: 440rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx 30rpx;
			padding: 30rpx;
			box-sizing: border-box;

			.voice_t {
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.voice_t_l {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 80rpx;
				}

				.voice_t_r {
					width: 170rpx;
					height: 50rpx;
				}
			}

			.voice_b {
				display flex;
				justify-content flex-start;
				align-items center;
				margin-bottom: 30rpx;

				.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: relative;
				margin:62rpx 0 0 238rpx;
				>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: center;
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;

		>view:nth-of-type(1) {
			width: 230rpx;
			height: 100rpx;
			background: #009519;
			border-radius: 50rpx 0rpx 0rpx 50rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}

		>view:nth-of-type(2) {
			width: 230rpx;
			height: 100rpx;
			background: #0183FA;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}

		>view:nth-of-type(3) {
			width: 230rpx;
			height: 100rpx;
			background: #FF8C00;
			border-radius: 0rpx 50rpx 50rpx 0rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>