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">{{newData.checkName}}</view>
			<view class="items">
				<view class="items-t">
					<view class="items-t-r">{{newData.hazardCheckCode}} {{newData.hazardCheckName}}</view>
				</view>
				<view class="items-b">＜ {{newData.hazardCheckCode2}} {{newData.hazardCheckName2}} ＜</view>
			</view>
			<view class="items-number">此检查项在当前实验室累计出现<text>{{hazardCheckNum}}</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.hazardCheckPoint}}
				</view>
				<view class="radio_group">
					<view class="radio" v-for="(item,index) in radioList" :key="index" @click="radioClick(item)">
						<img v-if="!item.checked" src="@/pages_safetyCheck/images/icon_aqjc_5.png">
						<img v-if="item.checked" src="@/pages_safetyCheck/images/icon_aqjc_6.png">
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="list-li" v-if="!form.checkFlag">
					<view>检查隐患</view>
					<view>
						<img src="@/pages_safetyCheck/images/icon_06.png">
					</view>
				</view>
				<textarea v-if="!form.checkFlag" class="describe" type="text" v-model="form.hazardDescribe" maxlength="200"
					placeholder="请填写隐患描述" placeholder-style="font-size:24rpx;color:#999;"></textarea>
				<view v-if="!form.checkFlag" 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="@/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.photoList.length<5">
					</view>
				</view>
			</view>
			<view class="voice">
				<view class="voice_t">
					<view class="voice_t_t" v-if="!voiceList[0]">语音备注：(选填)</view>
					<view class="voice_t_b" v-if="voiceList[0]">语音备注：({{voiceList.length}})</view>
				</view>
				<view class="voice_b" v-if="voiceList[0]" v-for="(voiceItem,voiceIndex) in voiceList" :key="voiceIndex">
					<view class="voice_b_l" @tap="voicePlay(voiceItem.fileUrl)">
						<img class="add-button" src="@/pages_safetyCheck/images//icon_yybz_yy.png" />
						{{voiceItem.fileLength}}″
					</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 @click="submitForm(1)">保存草稿</view>
			<view @click="submitForm(2)">提交</view>
		</view>
	</view>

</template>

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

		},
		data() {
			return {
				baseUrl: config.base_url,
				form: {
					checkFlag: false,
					photoList: [],
				},
				newData: {},
				radioList: [{
						id: 1,
						name: '符合',
						checked: false,
					},
					{
						id: 0,
						name: '不符合',
						checked: true,
					},
				],
				voiceList: [],
				setOptionId: '', //检查项id
				manageId: '', //检查管理id
				subId: '',
				hazardCheckPro: '',
				hazardCheckNum:0,
				sendLock: true, //发送锁，当为true时上锁，false时解锁发送
				recorderManager: wx.getRecorderManager(),
			}
		},
		onLoad(option) {
			let optionData = JSON.parse(decodeURIComponent(option.infoData));
			this.$set(this, 'setOptionId', optionData.setOptionId);
			this.$set(this, 'manageId', optionData.manageId);
			this.$set(this, 'subId', optionData.subId);
			this.$set(this, 'hazardCheckPro', optionData.hazardCheckPro);

		},
		onShow() {

		},
		mounted() {
			this.securityAppCheckPlanCheckInfo();
			this.securityAppCheckPhotoGetCheckNumBySub();
		},
		methods: {
			//获取详情
			async securityAppCheckPlanCheckInfo() {
				let obj = {
					setOptionId: this.setOptionId,
					manageId: this.manageId,
				}
				const {
					data
				} = await securityAppCheckPlanCheckInfo(obj);
				if (data.code == 200) {
					this.$set(this, 'newData', data.data);
				}
			},
			//获取检查项在当前实验室出现的次数
			async securityAppCheckPhotoGetCheckNumBySub() {
				let obj = {
					subId: this.subId,
					hazardCheckPro: this.hazardCheckPro,
				}
				const {
					data
				} = await securityAppCheckPhotoGetCheckNumBySub(obj);
				if (data.code == 200) {
					this.$set(this, 'hazardCheckNum', data.data);

				}
			},
			//提交
			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: status == 1 ? 2 : 1,
					hazardDescribe: this.form.hazardDescribe,
					setOptionId: this.setOptionId,
					photoList: this.form.photoList,
					voiceList: this.voiceList,
				}
				const {
					data
				} = await securityAppCheckSetOptionCheckCommit(obj);
				if (data.code == 200) {
					if(status==1){
						uni.showToast({
							title: '保存成功!',
							icon: "none",
							mask: true,
							duration: 2000
						});
					}else if(status==2){
						uni.showToast({
							title: '提交成功!',
							icon: "none",
							mask: true,
							duration: 2000
						});
					}
				}
			},
			//滚动事件
			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;
				if (this.form.photoList.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.photoList.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.photoList.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({
								'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: () => {}
				});
			},
		}
	}
</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;
		}


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

			.radio_group {
				display: flex;
				justify-content: flex-end;
				padding: 32rpx 30rpx 22rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #E0E0E0;

				.radio {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					>img {
						width: 30rpx;
						height: 30rpx;
						margin-right: 34rpx;
					}

					>text {
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						text-align: left;
					}
				}

				.radio:nth-of-type(1) {
					margin-right: 54rpx;
				}
			}
		}

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

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

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

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

				.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: center;
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;

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

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