404 lines
10 KiB
Vue
404 lines
10 KiB
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 style="background: #fff;width: 200rpx;text-align: center;margin: 30rpx auto;padding: 20rpx 0;"
|
||
@touchstart.stop.prevent="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend.stop.prevent="voiceEnd"
|
||
@touchcancel.stop.prevent="voiceCancel">开始录音</view> -->
|
||
|
||
<view class="text-center" style="margin-top: 120rpx;" @touchstart.stop.prevent="voiceBegin"
|
||
@touchmove.stop.prevent="voiceIng" @touchend.stop.prevent="voiceEnd"
|
||
@touchcancel.stop.prevent="voiceCancel">
|
||
<image src="/static/images/index/yuyin.png" style="width: 300rpx;height: 300rpx;pointer-events: none;">
|
||
</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.stop.prevent="voiceBegin"
|
||
@touchmove.stop.prevent="voiceIng" @touchend.stop.prevent="voiceEnd"
|
||
@touchcancel.stop.prevent="voiceCancel">
|
||
<image src="/static/images/index/sos.png" style="width: 200rpx;height: 200rpx;pointer-events: none;">
|
||
</image>
|
||
</view> -->
|
||
|
||
<view class="text-center" style="margin-top:200rpx;" @tap="callPhone">
|
||
<image src="/static/images/index/sos.png" style="width: 200rpx;height: 200rpx;pointer-events: none;">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as websocketUtils from 'utils/websocketUtils.js';
|
||
var innerAudioContext; //播放
|
||
// #ifdef H5
|
||
var recorder; // 定义一个MediaRecorder对象
|
||
var stream; //定义一个音频流的对象
|
||
var chunks = []; // 定义一个用于存储音频数据片段的数组
|
||
// #endif
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
latitude: '',
|
||
longitude: '',
|
||
content: '',
|
||
//录音相关参数
|
||
|
||
//H5不能录音
|
||
RECORDER: uni.getRecorderManager(),
|
||
|
||
isVoice: false,
|
||
voiceTis: '按住 说话',
|
||
recordTis: "手指上滑 取消发送",
|
||
recording: false,
|
||
willStop: false,
|
||
initPoint: {
|
||
identifier: 0,
|
||
Y: 0
|
||
},
|
||
recordTimer: null,
|
||
recordLength: 0,
|
||
|
||
//播放语音相关参数
|
||
AUDIO: uni.createInnerAudioContext(),
|
||
playMsgid: null,
|
||
VoiceTimer: null,
|
||
blobData: '',
|
||
voicePaths: '',
|
||
voicePath: '',
|
||
phoneNumberList: ["0431-81873999", "18143098929"],
|
||
}
|
||
},
|
||
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();
|
||
},
|
||
mounted() {
|
||
innerAudioContext = uni.createInnerAudioContext(); //播放
|
||
let _this = this;
|
||
|
||
// #ifndef H5
|
||
//录音停止事件
|
||
// recorderManager.onStop(function(res) {
|
||
// console.log('recorder stop' + res.tempFilePath);
|
||
// // _this.recordEnd(res);
|
||
// _this.voicePath = res.tempFilePath;
|
||
// });
|
||
// #endif
|
||
|
||
},
|
||
beforeDestroy() {
|
||
innerAudioContext.destroy();
|
||
// var recorder; // 定义一个MediaRecorder对象
|
||
// chunks = [];
|
||
},
|
||
methods: {
|
||
// 紧急求助拨打电话
|
||
callPhone() {
|
||
uni.showActionSheet({
|
||
itemList: this.phoneNumberList,
|
||
success: (res) => {
|
||
console.log(this.phoneNumberList[res?.tapIndex]);
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.phoneNumberList[res?.tapIndex],
|
||
success() { },
|
||
})
|
||
},
|
||
fail: (res) => {
|
||
console.log(res.errMsg);
|
||
}
|
||
});
|
||
},
|
||
// 切换语音/文字输入
|
||
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) {
|
||
// #ifdef H5
|
||
if (stream) {
|
||
stream.getTracks().forEach((track) => track.stop())
|
||
stream = null
|
||
}
|
||
if (recorder) {
|
||
recorder = null
|
||
}
|
||
this.recordLength = 0
|
||
this.voicePaths = '';
|
||
this.voicePath = '';
|
||
this.startRecord()
|
||
// #endif
|
||
|
||
if (e.touches.length > 1) {
|
||
return;
|
||
}
|
||
this.initPoint.Y = e.touches[0].clientY;
|
||
this.initPoint.identifier = e.touches[0].identifier;
|
||
// #ifndef H5
|
||
this.RECORDER.start({
|
||
format: "mp3"
|
||
}); //录音开始,
|
||
// #endif
|
||
|
||
},
|
||
//开始录音
|
||
startRecord: async function () {
|
||
|
||
let _this = this
|
||
// 获取麦克风音频数据流
|
||
stream = await navigator.mediaDevices.getUserMedia({
|
||
audio: true
|
||
})
|
||
|
||
|
||
// 初始化MediaRecorder对象
|
||
recorder = new MediaRecorder(stream);
|
||
console.log('asdsad___' + recorder)
|
||
// alert('asdsad___' + recorder)
|
||
// 将 stream 转成 blob 来存放
|
||
recorder.ondataavailable = (blobEvent) => {
|
||
chunks.push(blobEvent.data);
|
||
}
|
||
// 停止时生成预览的 blob url
|
||
recorder.onstop = () => {
|
||
const blob = new Blob(chunks, {
|
||
type: 'audio/mp3'
|
||
})
|
||
// const mediaUrl = URL.createObjectURL(blob);
|
||
_this.voicePaths = blob;
|
||
_this.blobData = blob;
|
||
// that.voicePath = mediaUrl;
|
||
// const newbold = new File([recordPath]),{type:'audio/mp3'}
|
||
// alert(that.voicePaths,URL.createObjectURL(blob))
|
||
|
||
}
|
||
recorder.start();
|
||
_this.recordBegin()
|
||
},
|
||
//录音开始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) {
|
||
|
||
// // #ifdef H5
|
||
// this.startRecord()
|
||
// // #endif
|
||
|
||
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 = '手指上滑 取消发送'
|
||
|
||
//原生录音停止
|
||
// #ifdef H5
|
||
//停止录音
|
||
|
||
if (recorder.state != "inactive") {
|
||
recorder.stop();
|
||
}
|
||
//把音频流也停止掉
|
||
stream.getTracks().forEach((track) => track.stop())
|
||
|
||
|
||
this.uplodMp3(this.voicePaths);
|
||
// #endif
|
||
// #ifndef H5
|
||
this.RECORDER.stop(); //录音结束
|
||
// #endif
|
||
|
||
},
|
||
//录音结束(回调文件)
|
||
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: websocketUtils.uploadFileUrl(), //真实的接口地址
|
||
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;
|
||
},
|
||
//上传mp3格式的音频
|
||
uplodMp3(recordPath) {
|
||
let _this = this;
|
||
// var newbold = new File([recordPath],{type:'audio/mp3'})
|
||
|
||
clearInterval(_this.recordTimer);
|
||
if (!_this.willStop) {
|
||
// that.$queue.showLoading('发送中...')
|
||
uni.showLoading({
|
||
title: '录音上传中...'
|
||
})
|
||
let msg = {
|
||
length: 0,
|
||
url: recordPath
|
||
}
|
||
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)
|
||
setTimeout(function () {
|
||
uni.uploadFile({ // 上传接口
|
||
url: websocketUtils.uploadFileUrl(), //真实的接口地址
|
||
file: _this.blobData,
|
||
// file: recordPath,
|
||
name: 'file',
|
||
success: (uploadFileRes) => {
|
||
console.error('uploadFileRes------' + uploadFileRes)
|
||
uni.hideLoading();
|
||
_this.content = JSON.parse(uploadFileRes.data).data;
|
||
// console.log("语音：" + that.content)
|
||
_this.setChatSave();
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
}, 1000)
|
||
} else {
|
||
_this.$queue.showToast('语音要大于一秒才可以发送！')
|
||
}
|
||
} else {
|
||
console.log('取消发送录音');
|
||
}
|
||
_this.willStop = false;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "./css/style.scss";
|
||
|
||
page {
|
||
background: linear-gradient(to right, #223845, #00a85b);
|
||
}
|
||
|
||
.datt {
|
||
font-size: 42rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 800;
|
||
}
|
||
</style> |