shuju_ui/qs_zhaoshang/pages/seep.vue

<template>
	<view class="content">
		<view class="bgbox"></view>
		<view class="voice">
			<view v-if="isShow">
				<view v-if="sendLock" class="tip">
					<view class="txt">试试这样说</view>
					<view class="txt-bt">马大云银行、马大云、马大云发展有限公司</view>
				</view>
				<view v-else>
					<view class="res-txt" @click="resultClick">
						<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-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>
	export default {
		components: {
			// popup
		},
		data() {
			return {
				recorderManager: uni.getRecorderManager(),
				voiceToken: '',
				timer: null,
				text: '',
				resultText: '正在识别中...',
				startPoint: {},
				sendLock: true,
				isShow: true,
				adioFileData: '',
				adioSize: '',
				resContent: '',
				luyinStatus: true,
				voicetext:'',
				options: {}, // 语音转文字的设置
			}
		},
		watch: {
			sendLock(newVal, oldVal) {
				console.log(newVal)
				var that=this;
				this.recorderManager.onStop(res => {
					if (newVal) return //上锁不发送

					//解锁发送网络请求
					console.log(that.resultText,7)
					setTimeout(function(res){
						if(!that.voicetext){
							that.resultText='未检测到语音，请重试'
						}else{
							that.resultText=that.voicetext
						}
						console.log(that.resultText,9)
					},1200)
					// this.uploadAudio(res.tempFilePath)
					
					console.log(res.tempFilePath, '获取录音文件')
					// that.Audio2dataURL(res.tempFilePath)
				});
			},
		},
		mounted() {
			console.log(1)
			
		},
		methods: {
			// 录音转文字
			handleVoice() {
				console.log('语音输入')
				let _this = this;
				this.options.engine = 'baidu'
				this.options.punctuation = false; // 是否需要标点符号 
				this.options.timeout = 10 * 1000; //超时时间
				this.options.userInterface = false; // 是否显示语音界面
				plus.speech.startRecognize(this.options, (s) => {
					_this.voicetext = s
					_this.zwz = true
					plus.speech.stopRecognize(); // 关闭
				});
			},
			//长按录音方法
			handleRecordStart(e) {
				this.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
				this.recorderManager.start(); //开始录音
				this.handleVoice()
				this.text = `<text style="color:#333">上划取消搜索</text>`;
				this.sendLock = false; //长按时不上锁。
				this.isShow = false;
				this.resultText = '正在识别中...';
				// 按钮
				console.log(67)
			},
			//结束录音 (手指松开)时触发
			handleRecordStop(e) {
				console.log(56)
				this.isShow = true;
				console.log(this.resultText,777)
				this.recorderManager.stop(); //结束录音
			},
			//上划取消搜索
			handleTouchMove(e) {
				console.log(555)
				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;
				}
			},
 
			//上传录音文件
			uploadAudio(tempFilePath) {
	// 			uni.uploadFile({
	// 				url: `${env.test.baseURL}/asr/v2/simpleRequest/`,
	// 				filePath: tempFilePath,
	// 				name: 'file',
	// 				formData: { //接口上传参数
	// 					api_key: '3yo',
	// 					api_secret: 'zT2jXm7wCYth',
	// 				},
	// 				header: {
	// 					'content-type': 'multipart/form-data',
	// 					'Authorization': 'Basic cYmVyX3NlY3JldA',
	// 					'Blade-Auth': uni.getStorageSync('Blade-Auth')
	// 				},
	// 				success: (res) => {
	// 					if (res.statusCode != 200) {
	// 						this.resultText = "未检测到语音，请重试";
	// 						return;
	// 					}
 
	// 					let index = res.data.indexOf('{')
	// 					let id = JSON.parse(res.data.substr(index)).job_id
	// 					let params = {
	// 						job_id: id,
	// 						token: this.voiceToken,
	// 					}
	// 					this.getResult(params)
	// 					console.log(params, 'params')
	// 					console.log(res, 'resss')
	// 				},
	// 				fail: (err) => {
	// 					this.resultText = "未检测到语音，请重试";
	// 					console.log('---上传失败---' + JSON.stringify(err))
	// 				}
	// 			})
			},
			// 录音之后的结果
			//获取录音结果
			//获取录音结果子传父
			resultClick() {
				console.log(78)
				if (this.resultText == '正在识别中...' || this.resultText == '未检测到语音，请重试') return;
				this.$emit('voiceResult', this.resultText)
			},
 
			//录音token
			
			show() {
				this.$refs.popup.show() // 显示
				this.voiceTokenMethod()
			},
			hide() {
				this.$refs.popup.hide() // 隐藏
			},
			//弹窗关闭之后的操作，点击遮罩层或关闭按钮
			afterHide() {
				console.log(77)
				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)`
				};
			},
		}
	}
</script>
 
<style lang="scss" scoped>
	.voice {
		height: 500rpx;
		padding: 100rpx 60rpx 0 60rpx;
		position: relative;
		background-color: #fff;
		position: fixed;
		left:0;right:0;bottom:0;z-index: 20;
		.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: 50px;
			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);
		}
	}
</style>
<style scoped>
	.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>