shuju_ui/qs_zhaoshang/components/toptab/search.vue

<template>
	<view class="search">
		<uni-nav-bar fixed="true"  :leftWidth="leftwith+'rpx'" :rightWidth="rightwith+'rpx'"  statusBar='true'   @clickRight='clickRight' @clickLeft='clickLeft'>
			<block slot="left" v-if="leftwith>0">
				<view class="cont_topl">
						<image :src='checkimg'></image>
					</view>
			</block>
			<view class="listtopa flexc">
				
				<image :src="speechimg"  @click="getSeep" ></image>
				<input  placeholder="请输入项目名称进行搜索" v-model="xmmc" class="flex1 f15 c34"/>
				<view class="btn f15 cf flexcc" @click="getSearch">搜索</view>
			</view>
			<block slot="right" v-if="rightwith>0">
				<view class="min_top" >
					<image :src="noticimg"></image>
					<view v-if="noticenum">
						<block v-if="noticenum>99">99+</block>
						<block v-else>{{noticenum}}</block>
					</view>
				</view>
			</block>
		</uni-nav-bar>
		<view class="bgbox"  v-if="voiceflag"  @click="getClose"></view>
		<view class="voice" v-if="voiceflag">
			<image :src="closeimg" class="choseimg" @click="getClose"></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...' || 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 { uploadPhoto } from '@/api/system/user.js';
	const recorderManager = uni.getRecorderManager();
	//播放录音
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default{
		props:{
			leftwith:{
				type: String,
				default () {
					return '0'
				}
			},
			rightwith:{
				type: String,
				default () {
					return '0'
				}
			},
			noticenum:{
				type: Number,
				default () {
					return 0
				}
			}
		},
		data(){
			return{
				checkimg:require('@/static/images/index/check.png'),
				speechimg:require('@/static/images/index/speech.png'),
				noticimg:require("@/static/images/index/notice.png") ,
				closeimg:require('@/static/images/close.png'),
				title: '未开始',
				text: '',
				result: '',
				valueWidth: '0px',
				voicePath:'',
				xmmc:'',
				
				voiceflag:false,
				voiceToken: '',
				timer: null,
				text: '',
				resultText: '正在识别中...',
				startPoint: {},
				sendLock: true,
				isShow: true,
				adioFileData: '',
				adioSize: '',
				resContent: '',
				luyinStatus: true,
				voicetext:'',
				options: {}, // 语音转文字的设置
				partialResult:'',//临时语音
			}
		},
		watch: {
			sendLock(newVal, oldVal) {
				var that=this;
				recorderManager.onStop(res => {
					if (newVal) return //上锁不发送
					//解锁发送网络请求
					setTimeout(function(res){
						// console.log(that.voicetext,that.partialResult,888)
						if(!that.voicetext&&!that.partialResult){
							that.resultText='未检测到语音，请重试'
							that.sendLock=true;
						}else{
							that.resultText=that.voicetext||that.partialResult;
							// console.log(that.resultText,85)
							that.xmmc=that.xmmc+that.resultText;
							// var tempFilePath=res.tempFilePath||"";
							// that.uploadFileFn(tempFilePath)
							setTimeout(function(){
								// 获取录音文件
								that.$emit('getSearch',that.resultText)
								that.voiceflag=false;
								that.sendLock=true;
							},1200)
						}
					},1000)
					// var tempFilePath=res.tempFilePath||"";
					// that.uploadFileFn(tempFilePath)
					// console.log(res.tempFilePath, '获取录音文件')
				});
			},
		},
		 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:{
			getClose(){
				this.voiceflag=false;
				this.sendLock=true;
			},
			onRecognizing(e){
				// console.log(e,8) 
				this.partialResult=e.partialResult;
			},
			// 上传文件
			uploadFileFn(res){
				console.log(res)
				let data = { name: 'file', filePath: res };
				uploadPhoto(data).then(response => {
					console.log(response,5)
					
				});
			},
			// 录音转文字
			handleVoice() {
				// console.log('语音输入')
				let _this = this;
				this.options.engine = 'baidu'
				// this.options.timeout = 60 * 1000; //超时时间
				this.options.continue = true;//语音识别是否采用持续模式
				this.options.punctuation = false; // 是否需要标点符号 
				this.options.userInterface = false; // 是否显示语音界面
				plus.speech.startRecognize(this.options, (s) => {
					_this.voicetext+=s;
					// console.log(s,88)
					// 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(); //结束录音
				},1200)
				
			},
			//上划取消搜索
			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('getSearch',this.resultText)
				// this.voiceflag=false;
				// this.sendLock=true;
				// 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(){
				this.voicetext='';
				this.partialResult='';
				this.voiceflag=true;		
			},
			onEnd() {
				// console.log(88)
				// recorderManager.stop();
				// let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				//   let curRoute = routes[routes.length - 1].route //获取当前页面路由
				//   if(curRoute=='pages/work/shprogress'){
					  
				//   }else{
				// 	  if(this.xmmc){
				// 	  	console.log('endRecognize1');
				// 	  	// this.getSearch()
				// 	  }
				//   }
					
				},
			clickRight(){
				this.$emit('clickRight')
			},
			clickLeft(){
				this.$emit('clickLeft')
			},
			getSearch(){
				// console.log(this.xmmc,99)
				this.$emit('getSearch',this.xmmc)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.search /deep/ .uni-navbar__header{align-items: center;}
.search /deep/ .uni-navbar__header-btns{overflow: inherit;}
.search /deep/ .uni-navbar__header-container {padding: 0;}

// 切换
.cont_topl {
	width: 60rpx;height: 60rpx;display: flex;align-items: center;justify-content: center;
	image{width: 42rpx;height: 34rpx;}
}
// 搜索
.listtopa{border: 6rpx solid #FD5001;border-radius: 32rpx;height:64rpx;box-sizing: border-box;padding:0 140rpx 0 32rpx ;position: relative;flex:1;
 input{}
 image{width: 20rpx;height: 30rpx;margin-right: 16rpx;}
 .btn{background: #FA5F03;border-radius: 32rpx;width: 120rpx;position: absolute;right: -2rpx;top: -2rpx;bottom:-2rpx;}
 }
 
// 消息
.min_top{position: relative;width: 44rpx;height: 44rpx;display: flex;align-items: center;justify-content: center;margin-right: 32rpx;
	image{width: 38rpx;height: 40rpx;}
	view{position: absolute;background: #FF5858;box-shadow: 0px 2rpx 6rpx 0px rgba(198,78,0,0.49);border-radius: 10rpx;color: #ffffff;font-size: 18rpx;right: -50%;top: -12rpx;border-radius: 50%;min-width: 40rpx;height: 40rpx;text-align: center;padding: 0 4rpx;box-sizing: border-box;line-height: 40rpx;}
}


.bgbox{z-index: 1900;}
.choseimg{width: 34rpx;height: 34rpx;position: absolute;left: 36rpx;top: 54rpx;}
.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>