anmo-user/pages/my/jinji.vue

<template>
	<view>
		<view class="text-white text-center" style="margin-top: 200rpx;">
			<view class="datt">严重危害生命财产安全 </view>
			<view class="datt margin-top-sm">求助专属通道</view>
			<view class="margin-top">平台将为您，保留录音证据，实时位置，通知平台联系人</view>
		</view>

		<view class="text-center" style="margin-top: 120rpx;" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng"
			@touchend="voiceEnd" @touchcancel="voiceCancel">
			<image src="../../static/images/index/yuyin.png" style="width: 300rpx;height: 300rpx;"></image>
		</view>

		<!-- 录音UI效果 -->
		<view class="record" :class="recording?'':'hidden'">
			<view class="ing" :class="willStop?'hidden':''">
				<view class="icon luyin2"></view>
			</view>
			<view class="cancel" :class="willStop?'':'hidden'">
				<view class="icon chehui"></view>
			</view>
			<view class="tis" :class="willStop?'change':''">{{recordTis}}</view>
		</view>

		<view class="text-center" style="margin-top:200rpx;" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng"
			@touchend="voiceEnd" @touchcancel="voiceCancel">
			<image src="../../static/images/index/sos.png" style="width: 200rpx;height: 200rpx;"></image>
			<!-- <view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']"
				@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
				@touchcancel="voiceCancel">{{voiceTis}}</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				content: '',
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				isVoice: false,
				voiceTis: '按住 说话',
				recordTis: "手指上滑 取消发送",
				recording: false,
				willStop: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				recordTimer: null,
				recordLength: 0,

				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,
			}
		},
		onLoad: function(option) {
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				this.recordEnd(e);
			})
			// #endif
			let that = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					that.latitude = res.latitude
					that.longitude = res.longitude
				}
			});
		},
		onBackPress() {
			this.AUDIO.stop();
		},
		onHide() {
			this.AUDIO.stop();
		},
		methods: {
			// 切换语音/文字输入
			switchVoice() {
				this.isVoice = this.isVoice ? false : true;
			},
			setChatSave() {
				let userId = this.$queue.getData('userId');
				let userName = this.$queue.getData('userName');
				let data = {
					image: this.content,
					state: 9,
					typeId: this.longitude,
					typeName: this.latitude,
					userId: userId,
					userName: userName
				}
				this.$Request.postJson('/app/message/insertMessage',data).then(
					res => {
						if (res.code == 0) {
							this.$queue.showToast('上传成功！');
						} else {
							this.$queue.showToast(res.msg);
						}
					});
			},
			// 录音开始
			voiceBegin(e) {
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({
					format: "mp3"
				}); //录音开始,
			},
			//录音开始UI效果
			recordBegin(e) {
				this.recording = true;
				this.voiceTis = '松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000)
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			// 结束录音
			voiceEnd(e) {
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送'
				this.RECORDER.stop(); //录音结束
			},
			//录音结束(回调文件)
			recordEnd(e) {
				clearInterval(this.recordTimer);
				if (!this.willStop) {
					this.$queue.showLoading('发送中...')
					console.log("e: " + JSON.stringify(e));
					let msg = {
						length: 0,
						url: e.tempFilePath
					}
					let min = parseInt(this.recordLength / 60);
					let sec = this.recordLength % 60;
					min = min < 10 ? '0' + min : min;
					sec = sec < 10 ? '0' + sec : sec;
					if (this.recordLength % 60 > 1) {
						msg.length = min + ':' + sec;
						console.log('msg.length___:' + msg.length)
						uni.uploadFile({ // 上传接口
							url: this.config("APIHOST1") + '/alioss/upload', //真实的接口地址
							filePath: e.tempFilePath,
							name: 'file',
							success: (uploadFileRes) => {
								uni.hideLoading();
								this.content = JSON.parse(uploadFileRes.data).data;
								console.log("语音：" + this.content)
								this.setChatSave();
								uni.hideLoading();
							}
						});
					} else {
						this.$queue.showToast('语音要大于一秒才可以发送！')
					}
				} else {
					console.log('取消发送录音');
				}
				this.willStop = false;
			},
		}
	}
</script>

<style lang="scss">
	@import "../my/css/style.scss";

	page {
		background: #3FCB46;
	}

	.datt {
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: 800;
	}
</style>