waterElectricityMinApp/pagesRepairs/order/order.vue

<template>
	<view class="container">
		<view class="">接单池</view>
		<view class="button" @longpress="longpressBtn" @touchend="touchendBtn" @touchmove="handleTouchMove">
			{{ longPress }}
		</view>

		<view class="audio" v-if="tempFilePath" @click="playBtn">
			<!-- {{ playStatus === 1 ? remainTime + 's' : '点击播放' }} -->
			点击播放 {{ longTime + 's' }}
		</view>

		<!-- 语音音阶动画 -->
		<view class="recording_btn" v-if="longPress === '说话中...'">
			<view class="loading_btn">
				<view class="em" v-for="(item, index) in 15" :key="index"></view>
			</view>
			<text class="p">{{ '剩余：' + remainTime + 's' }}</text>
			<text class="span">松手结束录音</text>
		</view>
	</view>
</template>

<script>
const recorderManager = uni.getRecorderManager()
const innerAudioContext = uni.createInnerAudioContext()
export default {
	data() {
		return {
			timer: null,
			timer_long: null,
			remainTime: 0,
			temLongTime: 0,
			longTime: 0,
			longPress: '按住说话',
			duration: 60000,
			startPoint: {},
			tempFilePath: '',
			playStatus: 0, //录音播放状态 0:未播放 1:正在播放

			sendLock: true //发送锁，当为true时上锁，false时解锁发送
		}
	},
	methods: {
		// 播放按钮回调
		playBtn() {
			innerAudioContext.src = this.tempFilePath
			//在ios下静音时播放没有声音，默认为true，改为false就好了。
			// innerAudioContext.obeyMuteSwitch = false
			//点击播放
			if (this.playStatus === 0) {
				this.playStatus = 1
				innerAudioContext.play()
				// this.countdown(this.longTime)
			} else {
				this.playStatus = 0
				innerAudioContext.pause()
			}
			// //播放结束
			innerAudioContext.onEnded(() => {
				this.playStatus = 0
				innerAudioContext.stop()
			})
		},
		// 长按回调
		longpressBtn(e) {
			// 先授权麦克风权限
			uni.getSetting({
				success: (res) => {
					console.log(res.authSetting['scope.record'])
					if (!res.authSetting['scope.record']) {
						console.log(1)
						uni.showModal({
							title: '提示',
							content: '需要您授权麦克风权限',
							showCancel: false,
							success: () => {
								uni.openSetting({
									success(settingdata) {
										if (settingdata.authSetting['scope.record']) {
											uni.showToast({
												title: '已获取麦克风使用权限',
												icon: 'none'
											})
										} else {
											uni.showToast({
												title: '您取消了授权',
												icon: 'none'
											})
										}
									}
								})
							}
						})
					} else {
						console.log(2)
						this.longPress = '说话中...'
						//记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
						this.startPoint = e.touches[0]
						// 倒计时
						this.countdown(60)
						// 记录录音时长
						this.recordingTimer()
						recorderManager.onStop((res) => {
							this.tempFilePath = res.tempFilePath
						})
						const options = {
							duration: this.duration, // 指定录音的时长，单位 ms
							sampleRate: 16000, // 采样率
							numberOfChannels: 1, // 录音通道数
							encodeBitRate: 96000, // 编码码率
							format: 'mp3', // 音频格式，有效值 aac/mp3
							frameSize: 10 // 指定帧大小，单位 KB
						}
						recorderManager.start(options)
						// 监听音频开始事件
						this.sendLock = false //长按时是不上锁的。
						recorderManager.onStart((res) => {
							// console.log(res)
						})
					}
				}
			})
		},
		// 记录录音时长回调
		recordingTimer() {
			this.temLongTime = 0
			this.timer_long = setInterval(() => {
				this.temLongTime++
			}, 1000)
		},
		// 录音时长倒计时
		countdown(val) {
			this.remainTime = Number(val)
			this.timer = setInterval(() => {
				if (this.remainTime > 0) {
					this.remainTime--
				} else {
					this.longPress = '按住说话'
					recorderManager.stop()
					clearInterval(this.timer)
				}
			}, 1000)
		},
		// 手指触摸离开回调
		touchendBtn() {
			this.longPress = '按住说话'
			this.longTime = this.temLongTime
			clearInterval(this.timer)
			clearInterval(this.timer_long)

			recorderManager.onStop((res) => {
				console.log(this.sendLock)
				if (this.sendLock) {
					//上锁不发送
				} else {
					//解锁发送，发送网络请求
					if (res.duration < 1000)
						wx.showToast({
							title: '录音时间太短',
							icon: 'none',
							duration: 1000
						})
					else {
						this.tempFilePath = res.tempFilePath
						console.log(this.tempFilePath + ' 666')
						// uploadFile({
						// 	url: '/voice/VoiceControl',
						// 	src: res.tempFilePath,
						// }).then(res => {
						// 	console.log(JSON.parse(res.data));
						// })
					}
				}
			})
			recorderManager.stop() //结束录音
		},
		//手指移动回调  删除录音
		handleTouchMove(e) {
			//touchmove时触发
			var moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY //移动距离
			console.log(moveLenght)
			if (Math.abs(moveLenght) > 70) {
				this.longPress = '松开手指,取消发送'
				this.delBtn()
				this.sendLock = true //触发了上滑取消发送，上锁
			} else {
				this.sendLock = false //上划距离不足，依然可以发送，不上锁
			}
		},
		delBtn() {
			// this.delShow = false
			// this.time = 0
			this.tempFilePath = ''
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	width: 100vw;
	height: calc(100vh - 102rpx);
	.button {
		margin: auto;
		margin-top: 300rpx;
		width: 50vw;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		background-color: skyblue;
	}

	.audio {
		margin: auto;
		margin-top: 100rpx;
		width: 50vw;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		background-color: skyblue;
	}

	.recording_btn {
		position: absolute;
		top: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 8px 16px;
		box-sizing: border-box;
		width: 128px;
		font-size: 12px;
		text-align: center;
		border-radius: 8px;
		background: #ffd300;

		::after {
			content: '';
			display: block;
			border: 6px solid rgba(0, 0, 0, 0);
			border-top-color: rgba(255, 211, 0, 1);
			position: absolute;
			bottom: -10px;
			left: 50%;
			transform: translateX(-50%);
		}

		.loading_btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 6px;
			width: 96px;
			height: 20px;

			.em {
				float: left;
				display: block;
				margin-right: 2.5px;
				width: 1px;
				height: 10%;
				background: #333333;
			}
		}

		.loading_btn .em:last-child {
			margin-right: 0px;
		}
		.loading_btn .em:nth-child(1) {
			animation: load 2.5s 1.4s infinite linear;
		}
		.loading_btn .em:nth-child(2) {
			animation: load 2.5s 1.2s infinite linear;
		}
		.loading_btn .em:nth-child(3) {
			animation: load 2.5s 1s infinite linear;
		}
		.loading_btn .em:nth-child(4) {
			animation: load 2.5s 0.8s infinite linear;
		}
		.loading_btn .em:nth-child(5) {
			animation: load 2.5s 0.6s infinite linear;
		}
		.loading_btn .em:nth-child(6) {
			animation: load 2.5s 0.4s infinite linear;
		}
		.loading_btn .em:nth-child(7) {
			animation: load 2.5s 0.2s infinite linear;
		}
		.loading_btn .em:nth-child(8) {
			animation: load 2.5s 0s infinite linear;
		}
		.loading_btn .em:nth-child(9) {
			animation: load 2.5s 0.2s infinite linear;
		}
		.loading_btn .em:nth-child(10) {
			animation: load 2.5s 0.4s infinite linear;
		}
		.loading_btn .em:nth-child(11) {
			animation: load 2.5s 0.6s infinite linear;
		}
		.loading_btn .em:nth-child(12) {
			animation: load 2.5s 0.8s infinite linear;
		}
		.loading_btn .em:nth-child(13) {
			animation: load 2.5s 1s infinite linear;
		}
		.loading_btn .em:nth-child(14) {
			animation: load 2.5s 1.2s infinite linear;
		}
		.loading_btn .em:nth-child(15) {
			animation: load 2.5s 1.4s infinite linear;
		}
		@keyframes load {
			0% {
				height: 10%;
			}
			50% {
				height: 100%;
			}
			100% {
				height: 10%;
			}
		}

		.p {
			color: #000000;
		}
		.span {
			color: rgba(0, 0, 0, 0.6);
		}
	}
}
</style>