zheng_xie_ui/work/components/popup/popup.vue

<template>
	<view>
		<!-- 弹窗 -->
		<view class="bgbox" @click="getClose" v-if="type"></view>
		<!-- 弹窗 -->
		<!-- 推荐优秀 -->
		<view class="fixedbox" v-if="type=='tjyx'">
			<view class="ttit">推荐为优秀</view>
			<view  class="boxs">
				<view class="flexcj mb14">
					<view class="ttxt"><text class="cof0">*</text>推荐意见</view>
					<view class="flexcc speech" @click="getSeep">
						<image :src="speechimgs"></image>
						<view>语音输入</view>
					</view>
				</view>
				<textarea class="textar mb25" @blur="getBlur" v-model="yxly" placeholder="请输入推荐意见，也可点击右上角进行 语音输入…" maxlength="1000" ></textarea>
			</view>
			<view class="fixedbtn flexcj">
				<view class="btns btn1" @click="getClose">取消</view>
				<view class="btns btn2" @click="getyjSubmit">提交</view>
			</view>
		</view>
		<!-- 质量评议 -->
		<view class="fixedbox" v-if="type=='zlpy'">
			<view class="ttit">办理质量评议</view>
			<view  class="boxs">
				<view class="mb20">
					<view class="ttxt mb18"><text class="cof0">*</text> 推荐意见</view>
					<uni-section title="本地数据" type="line">
					     <uni-data-select
					       v-model="value"
					       :localdata="range"
					       @change="change"
					     ></uni-data-select>
					</uni-section>
				</view>
				<view class="flexcj mb14">
					<view class="ttxt"><text class="cof0">*</text>推荐意见</view>
					<view class="flexcc speech" @click="getSeep">
						<image :src="speechimgs"></image>
						<view>语音输入</view>
					</view>
				</view>
				<textarea class="textar mb25" @blur="getBlur" v-model="yxly" placeholder="请对办理情况进行评价，也可点击右上 角进行语音输入…" maxlength="1000" ></textarea>
			</view>
			<view class="fixedbtn flexcj">
				<view class="btns btn1" @click="getClose">取消</view>
				<view class="btns btn2" @click="getyjSubmit">提交</view>
			</view>
		</view>
		<!-- 提案并案 -->
		<view class="fixedbox" v-if="type=='taba'">
			<view class="ttit">提案并案</view>
			<view  class="boxs">
				<view class="mb16">
					<view class="ttxt mb18"><text class="cof0">*</text>是否并案</view>
					<uni-section title="本地数据" type="line">
					     <uni-data-select
					       v-model="value"
					       :localdata="sfrange"
					       @change="change"
					     ></uni-data-select>
					</uni-section>
				</view>
				<view class="mb16">
					<view class="ttxt mb18"><text class="cof0">*</text>并案后标题</view>
					<input class="input"  placeholder="请输入并案后的标题"/>
				</view>
				<view class="mb16">
					<view class="ttxt mb18"><text class="cof0">*</text>并案后理由</view>
					<textarea class="textar " style="height: 186rpx;" @blur="getBlur" v-model="yxly" placeholder="请输入并案理由" maxlength="1000" ></textarea>
				</view>
				<view class="mb16">
					<view class="flexcj mb10">
						<view class="ttxt"><text class="cof0">*</text>添加附件</view>
						<view class="fjadd"><lsj-upload
							    ref="lsjUpload"
							    childId="upload1"
							    :width="width"
							    :height="height"
							    :option="option"
							    :size="size"
							    :formats="formats"
							    :debug="debug"
							    :instantly="instantly"
							    @progress=""
								@uploadEnd="onuploadEnd" >
							        <view class="btn" :style="{width: width,height: height}">上传附件</view>
							</lsj-upload>
						</view>
					</view>
					<view class="ptb2" v-if="filelist&&filelist.length">
						<view class="fjlists"  v-for="(ite,idx) in filelist" :key='idx'>
							<view class="flext f15 c6" @click="getDown(ite.path)">
								<view class="imgl"><image :src="fjimg" ></image></view>
								<view class="tit">{{ite.fjName}}</view>
							</view>
							<!-- 删除 -->
							<view class="delimg flex0" @click.stop="getDelFj(idx)">
								<image :src="delimg"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fixedbtn flexcj">
				<view class="btns btn1" @click="getClose">取消</view>
				<view class="btns btn2" @click="getyjSubmit">提交</view>
			</view>
		</view>
		
		<!-- 语音识别 -->
		<view class="bgbox bgvoice"  v-if="voiceflag"  @click="getClosevoice"></view>
		<view class="voice" v-if="voiceflag">
			<!-- <image :src="closeimg" class="choseimg" @click="getClosevoice"></image> -->
			<view v-if="isShow">
				<view v-if="sendLock" class="tip">
					<view class="txt">试试这样说</view>
					<view class="txt-bt">科技项目</view>
				</view>
				<view v-else>
					<!-- @click="resultClick" -->
					
					<view class="res-txt" >
						<!-- 实时翻译 -->
						<text :style="{
							color: (resultText == '正在识别中2<strong>.</strong>..' || resultText == '未检测到语音，请重试') ? 
							'#919098' : 
							'#2979ff'}">
							{{resultText}}
						</text>
						<!-- <image v-if="resultText != '正在识别中.1..' && resultText != '未检测到语音，请重试'"
							src="/static/img/xiaoshou.png" mode="widthFix"></image> -->
					</view>
				</view>
			</view>
		 
			<view v-else class="tip">
				<view v-if="!sendLock" class="tipbox">{{voicetext}}</view>
				<view v-html="text" class="txt" style="color: #8e8d9a;"></view>
				
				<view v-if="!sendLock" class="prompt-loader">
					<view class="em" :style="randomRgb()" v-for="(item,index) in 30" :key="index"></view>
				</view>
				<view v-else class="prompt-loader"></view>
			</view>
		 
			<view class="btn" @longpress="handleRecordStart" @touchmove="handleTouchMove" @touchend="handleRecordStop">
				<view class="btn-cont">
					长按开始语音搜索
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	const recorderManager = uni.getRecorderManager();
	//播放录音
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	import config from '@/config'
	const baseUrl = config.baseUrl
	import { getToken } from '@/utils/auth'
	export default{
		props:{
			type: {
				type: String,
				default () {
					return ''
				}
			},
			status:{
				type: String,
				default () {
					return 'add'
				}
			},
			iteminfo:{},
			xmjzinfo:{},
		},
		data(){
			return{
				//附件
				option: {
				    // 上传服务器地址，需要替换为你的接口地址
				    // url: baseUrl+'/common/upload', // 该地址非真实路径，需替换为你项目自己的接口地址
				    // 上传附件的key
				    name: 'file',
				    // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
				    header: {
				        // 示例参数可删除
				        'Authorization':  'Bearer ' + getToken(),
				    },
				    // 根据你接口需求自定义body参数
				    formData: {}
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 必传宽高且宽高应与slot宽高保持一致
				width: '',
				height: '48rpx',
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: 'doc,docx,xls,ppt,txt,pdf,zip,rar,word',
				// 文件上传大小限制
				size: 100,
				// 文件数量限制 默认10
				count: 5,
				// 文件回显列表
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
				// 是否打印日志
				debug: false,
				filelist:[{fjName:'关于加强危化品安全监管的建议文档.word',path:"123"}], 
				fjimg:require("@/work/static/images/fjimg.png"),
				delimg:require("@/work/static/images/delimg.png"),
				
				speechimgs:require('@/work/static/images/voice.png'),
				range: [{ value: 0, text: "满意" },{ value: 1, text: "不满意" },],
				sfrange: [{ value: 0, text: "是" },{ value: 1, text: "否" },],
				value: 0,
				
				
				voiceflag:false,
				voiceToken: '',
				timer: null,
				text: '',
				resultText: '正在识别中...',
				startPoint: {},
				sendLock: true,
				isShow: true,
				
				voicetext:'',
				options: {}, // 语音转文字的设置
				partialResult:'',//临时语音
			}
		},
		watch:{
			// iteminfo(val){
			// 	var that=this;
			// 	that.psnr='';
			// 	// console.log(val,0)
			// 	if(val.zcpsnr){
			// 		that.psnr=val.zcpsnr;
			// 	}else if(val.psnr){
			// 		that.psnr=val.psnr;
			// 	}
			// },
			sendLock(newVal, oldVal) {
				var that=this;
				recorderManager.onStop(res => {
					if (newVal) return //上锁不发送
					//解锁发送网络请求
					setTimeout(function(res){
						if(!that.voicetext&&!that.partialResult){
							that.resultText='未检测到语音，请重试'
						}else{
							that.resultText=that.voicetext||that.partialResult;
							var cursor=that.cursor;
							if(cursor==0){
								if(that.seeptype=='sgll'){
									that.sgll=that.sgll+that.resultText;
								}else{
									that.psnr=that.psnr+that.resultText;
								}
								
							}else{
								if(that.seeptype=='sgll'){
									that.sgll=that.sgll.slice(0,cursor)+that.resultText+that.sgll.slice(cursor);
								}else{
									that.psnr=that.psnr.slice(0,cursor)+that.resultText+that.psnr.slice(cursor);
								}
								
							}
							
							
							that.voiceflag=false;
						}
						that.sendLock=true;
						
					},1000)
					// console.log(res.tempFilePath, '获取录音文件')
				});
			},
		},
		onShow() {
			
		},
		mounted() {
			var that=this;
					// #ifdef APP-PLUS
					// 监听语音识别事件
					plus.speech.addEventListener('recognizing', this.onRecognizing, false);
					// #endif	
							  
					recorderManager.onStop(function(res) {
						//录音后的回调函数
						if(!this.sendLock){
							console.log(that.voicetext,that.partialResult)
						}
						console.log('recorder stop' + JSON.stringify(res));
					});  
							  
		},
		methods:{
			checkPermi, checkRole,
			onuploadEnd(item) {
				var newobj={}
				var responseText=JSON.parse(item.responseText)
				newobj.fjName=responseText.originalFilename;
				newobj.path=responseText.fileName;
				this.filelist.push(newobj)
					this.datainfo.zsyzFjList=JSON.parse(JSON.stringify(this.filelist))
			},
			getDelFj(idx){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.filelist.splice(idx,1)
							that.datainfo.zsyzFjList=JSON.parse(JSON.stringify(that.filelist))
						} else if (res.cancel) {
						}
					}
				});
			},
			getDown(e){
					  uni.showLoading({
					  	title: '加载中'
					  });
				var url=baseUrl+e;
				uni.downloadFile({
					url: url,//文件的下载路径
					success(result) {
							uni.hideLoading()
						var filePath = result.tempFilePath;
						   uni.openDocument({
						     filePath: filePath,
						     showMenu: true,
						     success: function (res) {
						       // console.log('打开文档成功');
						     }
						   });
					},
					fail(res) {uni.hideLoading()}
				})
			},
			
			
			getBlur(e){
				this.cursor=e.detail.cursor;
			},
			// 语音转文字
			getClosevoice(){
				this.voiceflag=false
			},
			onRecognizing(e){
				this.partialResult=e.partialResult;
			},
			// 录音转文字
			handleVoice() {
				// console.log('语音输入')
				let _this = this;
				// _this.psnr = '';
				this.options.engine = 'baidu'
				// this.options.timeout = 60 * 1000; //超时时间
				this.options.continue = true;//语音识别是否采用持续模式
				this.options.punctuation = true; // 是否需要标点符号 
				this.options.userInterface = false; // 是否显示语音界面
				plus.speech.startRecognize(this.options, (s) => {
					_this.voicetext+=s;
					console.log(s,9)
					// plus.speech.stopRecognize(); // 关
				});
			},
			//长按录音方法
			handleRecordStart(e) {
				this.voicetext='';
				this.partialResult='';
				this.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
				recorderManager.start({duration: 60000}); //开始录音
				this.handleVoice()
				this.text = `<text style="color:#333">上划取消搜索</text>`;
				this.sendLock = false; //长按时不上锁。
				this.isShow = false;
				this.resultText = '正在识别中...';
				// 按钮
				// console.log(67)
			},
			//结束录音 (手指松开)时触发
			handleRecordStop(e) {
				var that=this;
				this.isShow = true;
				setTimeout(function(){
					plus.speech.stopRecognize();
					recorderManager.stop(); //结束录音
				},1300)
				
			},
			//上划取消搜索
			handleTouchMove(e) {
				let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY;
				if (Math.abs(moveLenght) > 50) {
					this.text = `松开手指，<text style="color:#333">取消搜索</text>`;
					this.sendLock = true; //触发了上滑取消搜索，上锁
					this.isShow = false;
				} else {
					this.text = `<text style="color:#333">上划取消搜索</text>`;
					this.sendLock = false; //上划距离不足，可以搜索，不上锁
					this.isShow = false;
				}
			},
			//获取录音结果子传父
			resultClick() {
				if (this.resultText == '正在识别中...' || this.resultText == '未检测到语音，请重试') return;
				
				this.$emit('voiceResult', this.resultText)
			},
			//弹窗关闭之后的操作，点击遮罩层或关闭按钮
			// afterHide() {
			// 	this.sendLock = true;
			// 	this.$emit('closePopup');
			// 	clearInterval(this.timer);
			// 	this.resultText = '正在识别中...';
			// },
			randomRgb() {
				let R = Math.floor(Math.random() * 130 + 110);
				let G = Math.floor(Math.random() * 130 + 110);
				let B = Math.floor(Math.random() * 130 + 110);
				return {
					background: `rgb(${R},${G},${B}, 1)`
				};
			},
			// 语音转文字
			getSeep(e){
				this.seeptype=e||'';
				this.voicetext='';
				this.partialResult='';
				this.voiceflag=true;		
			},
			ontStart() {
				// recorderManager.start();
						console.log('startRecognize');
			
					},
			onEnd() {
				// recorderManager.stop();
						console.log('endRecognize');
			
					},
			getClose(){
				this.$emit("getClose")
			},
			// 意见
			getyjSubmit(){
				var data={};
				var that=this;
				var str=""
				if(!this.shenflag){
					data.shjg='3';
					str='不通过'
					if(!this.psnr){
						this.$toast('请输入反馈意见')
						return
					}else{
						data.shyj=this.psnr
					}
				}else{
					str='通过'
					data.shjg='2',
					data.shyj=this.psnr
				}
				// 确认框
				uni.showModal({
					title: '确认审核',
					content: "是否确认"+str+'审核',
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.$emit("getyjSubmit",data)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
				
			},
		}
	}
</script>

<style lang="scss" scoped>
// 弹窗
// .choseimg{width: 34rpx;height: 34rpx;position: absolute;left: 36rpx;top: 54rpx;z-index: 22;}
 // .uni-stat__select{background-color: #EEEEEE;}
.fixedbox /deep/ .uni-select{border: none;background-color: #EEEEEE;height: 88rpx;}
.fixedbox{position: fixed;left: 48rpx;right: 48rpx;background: #fff;border-radius: 10rpx;min-height: 468rpx;top: 50%;transform: translateY(-50%);z-index: 10;padding: 32rpx 40rpx 50rpx;max-height: calc(100vh - 300rpx);overflow: auto;box-sizing: border-box;
	.ttit{position: relative;text-align: center;font-weight: bold;font-size: 36rpx;color: #222327;margin-bottom: 38rpx;}
	.boxs{
		.ttxt{font-weight: bold;font-size: 30rpx;color: #222327;
			text{margin-right: 6rpx;}
		}
		// 语音按钮
		.speech{
			width: 190rpx;height:56rpx;background: linear-gradient(180deg, #4480EB 0%, #1D64E2 100%);border-radius: 28rpx;
			image{width: 20rpx;height: 26rpx;margin-right: 12rpx;}
			view{font-size: 26rpx;font-weight: 500;color: #ffffff;}
		}
		.input{height: 88rpx;width: 100%;background: #EEEEEE;border-radius: 10rpx;font-size: 30rpx;font-weight: 500;color: #222327;padding: 0 24rpx;}
		.textar{width: 100%;border-radius: 10rpx;padding: 26rpx 30rpx;font-size: 30rpx;color: #222327;height: 400rpx;background: #EEEEEE;}
	}
	.fixedbtn{
		.btns{width: 254rpx;height: 80rpx;border-radius: 40rpx;font-weight: bold;
font-size: 30rpx;display: flex;align-items: center;justify-content: center;box-sizing: border-box;
			&.btn1{color: #1D64E2;border: 2rpx solid #1D64E2;}
			&.btn2{color: #ffffff;background: #1D64E2;}
		}
		
	}
}
// 附件
.fjadd{
	.btn{font-weight: bold;font-size: 30rpx;color: #1D64E2;margin: 0;display: flex;align-items: center;}
}
// 附件
.fjlists {display: flex;align-items: flex-start;justify-content: space-between;margin-bottom: 12rpx;
		image{margin-right: 18rpx;flex: 0 0 auto;}
		.imgl{width: 40rpx;height: 40rpx;display: flex;align-items: center;justify-content: center;margin-right: 16rpx;
			image{width: 26rpx;height: 24rpx;}
			}
			.tit{font-size: 26rpx;color: #343434;font-weight: 500;margin-top: 4rpx;}
		.delimg{width: 40rpx;height:40rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;
			image{width: 26rpx;height: 26rpx;}
		}
	}

// 语音识别
.bgvoice{z-index: 1900;}
.voice {
		min-height: 500rpx;
		padding: 100rpx 60rpx 0 60rpx;
		position: relative;
		background-color: #fff;
		position: fixed;
		left:0;right:0;bottom:0;z-index: 2000;
		padding-bottom: 180rpx;
		.res-txt {
			text-align: center;
			margin-top: 40rpx;
			font-size: 36rpx;
			color: #919098;
 
			image {
				display: block;
				margin: auto;
				margin-top: 10rpx;
				width: 60rpx;
				animation: bounce-down 2.6s linear infinite;
			}
		}
 
		.tip {
			margin-top: 15rpx;
			text-align: center;
 
			.txt {
				font-size: 36rpx;
				color: #151823;
			}
 
			.txt-bt {
				margin-top: 20rpx;
				color: #919098;
			}
		}
 
		.btn {
			width: 50%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			border-radius: 50rpx;
			background: #3484fd;
			position: absolute;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);
 
			.btn-cont {
				display: flex;
				align-items: center;
			}
		}
	}
 
	@-webkit-keyframes bounce-down {
		25% {
			-webkit-transform: translateY(-10px);
		}
 
		50%,
		100% {
			-webkit-transform: translateY(0);
		}
 
		75% {
			-webkit-transform: translateY(13px);
		}
	}
	.content{background-color: #f5f5f5;position: fixed;left: 0;right: 0;bottom: 0;z-index: 10000;height: 500rpx;}
	/* 语音动画 */
	.prompt-loader {
		width: 100%;
		height: 35px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx auto;
	}
 
	.prompt-loader .em {
		height: 15%;
		width: 2px;
		float: left;
		display: block;
		background: #333333;
	}
 
	.prompt-loader .em:last-child {
		margin-right: 0px;
	}
 
	.prompt-loader .em:nth-child(1) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(2) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(3) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(4) {
		animation: load 1.3s 0.8s infinite linear;
	}
 
	.prompt-loader .em:nth-child(5) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(6) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(7) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(8) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(9) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(10) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(11) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(12) {
		animation: load 1.3s 0.8s infinite linear;
	}
 
	.prompt-loader .em:nth-child(13) {
		animation: load 1.3s 1s infinite linear;
	}
 
	.prompt-loader .em:nth-child(14) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(15) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(16) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(17) {
		animation: load 1.3s 0.8s infinite linear;
	}
 
	.prompt-loader .em:nth-child(18) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(19) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(20) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(21) {
		animation: load 1.3s 0.5s infinite linear;
	}
 
	.prompt-loader .em:nth-child(22) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(23) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(24) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	.prompt-loader .em:nth-child(25) {
		animation: load 1.3s 0.8s infinite linear;
	}
 
	.prompt-loader .em:nth-child(26) {
		animation: load 1.3s 0.2s infinite linear;
	}
 
	.prompt-loader .em:nth-child(27) {
		animation: load 1.3s 0.4s infinite linear;
	}
 
	.prompt-loader .em:nth-child(28) {
		animation: load 1.3s 0.1s infinite linear;
	}
 
	.prompt-loader .em:nth-child(29) {
		animation: load 1.3s 0.3s infinite linear;
	}
 
	.prompt-loader .em:nth-child(30) {
		animation: load 1.3s 0.6s infinite linear;
	}
 
	@keyframes load {
		0% {
			height: 15%;
		}
 
		50% {
			height: 100%;
		}
 
		100% {
			height: 15%;
		}
	}

</style>