移动app
This commit is contained in:
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<view>
|
||||
<view :style="{'height':soundState?'':0,bottom:markBottom}" class="mark"></view>
|
||||
<view @touchmove="touchmove" @touchstart="soundStart" @touchend="soundEnd" @touchcancel="soundEnd"
|
||||
class="sound-buttom" :class="{soundState}">
|
||||
<view v-if="soundProgress" class="sound-progress" :style="{'width':soundProgress}"></view>
|
||||
<text class="sound-text">{{soundState?'录音中（'+time+'s）':'按住 说话'}}</text>
|
||||
<view class="sound-tip" v-if="soundState">
|
||||
<text class="sound-tip-text" :style="{color:cancel?'#f70000':'#FFFFFF'}">{{cancel?'松手取消':'松手发送，上划取消'}}</text>
|
||||
<view class="closeIcon" :style="{'background-color':cancel?'#f70000':'#EEEEEE'}">
|
||||
<uni-im-icons code="e61a" size="10px" color="#FFFFFF"></uni-im-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifndef H5
|
||||
const recorderManager = uni.getRecorderManager();
|
||||
// #endif
|
||||
|
||||
import uniIm from '@/uni_modules/uni-im/lib/main.js';
|
||||
const systemInfo = uniIm.systemInfo
|
||||
|
||||
let soundInterval,soundPath,startTime;
|
||||
export default {
|
||||
emits: ['success'],
|
||||
data() {
|
||||
return {
|
||||
soundState:0,
|
||||
soundProgress:0,
|
||||
cancel:false,
|
||||
time:0,
|
||||
phoneBH:0
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
markBottom(){
|
||||
let markBottom = 58;
|
||||
// #ifdef MP-WEIXIN
|
||||
markBottom += (systemInfo.screenHeight - systemInfo.safeArea.bottom)
|
||||
// #endif
|
||||
return markBottom + 'px'
|
||||
},
|
||||
},
|
||||
created() {
|
||||
// #ifndef H5
|
||||
recorderManager.onStop((res)=> {
|
||||
// console.log('recorderManager.onStop',{res});
|
||||
if(!this.cancel){
|
||||
if(this.time < 2){
|
||||
return uni.showToast({
|
||||
title: '语音时间过短',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '上传中',
|
||||
mask: false
|
||||
});
|
||||
uniCloud.uploadFile({
|
||||
filePath:res.tempFilePath,
|
||||
cloudPath:'uni-im/' + uniCloud.getCurrentUserInfo().uid + '/sound/' + Date.now() + '.mp3',
|
||||
// fileType:"audio",
|
||||
success: (e) => {
|
||||
console.log('uniCloud.uploadFile-success',e,'success',{"url":e.fileID,time:this.time});
|
||||
try{
|
||||
this.$emit('success',{"url":e.fileID,time:this.time})
|
||||
}catch(e){
|
||||
console.log(e);
|
||||
//TODO handle the exception
|
||||
}
|
||||
uni.hideLoading()
|
||||
},
|
||||
fail: (e) =>{
|
||||
console.log(e);
|
||||
uni.showModal({
|
||||
content: JSON.stringify(e),
|
||||
showCancel: false,
|
||||
confirmText: '知道了'
|
||||
});
|
||||
},
|
||||
complete: (e) =>{
|
||||
console.log('complete',e);
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}else{
|
||||
console.log('用户取消了录音功能','this.time:'+this.time);
|
||||
}
|
||||
});
|
||||
|
||||
recorderManager.onStart(e=>{
|
||||
// console.log(e);
|
||||
})
|
||||
recorderManager.onPause(e=>{
|
||||
// console.log(e);
|
||||
})
|
||||
recorderManager.onError(e=>{
|
||||
console.error(e);
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
touchmove(e){
|
||||
// #ifndef APP-NVUE
|
||||
let y = e.touches[0].clientY + systemInfo.safeArea.top + (systemInfo.screenHeight - systemInfo.safeArea.bottom)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
let y = e.touches[0].screenY
|
||||
// #endif
|
||||
|
||||
|
||||
if(systemInfo.safeArea.bottom - y > 58){
|
||||
this.cancel = true
|
||||
}else{
|
||||
this.cancel = false
|
||||
}
|
||||
},
|
||||
soundStart(e){
|
||||
// 关闭正在播放的sound
|
||||
uniIm.audioContext.stop()
|
||||
this.time = 0
|
||||
|
||||
// #ifdef H5
|
||||
// 防止H5端 调试出现鼠标右键菜单
|
||||
window.oncontextmenu = function () { return false; }
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
return uni.showToast({
|
||||
title: 'h5端不支持语音功能',
|
||||
icon: 'none'
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
recorderManager.start({
|
||||
sampleRate:16000,
|
||||
numberOfChannels:2,
|
||||
format:"mp3"
|
||||
});
|
||||
// #endif
|
||||
|
||||
startTime = Date.now()
|
||||
|
||||
console.log('soundStart');
|
||||
|
||||
//进度条
|
||||
this.soundState = 1
|
||||
soundInterval = setInterval(()=>{
|
||||
this.soundProgress = parseInt(this.soundProgress) + uni.upx2px(450/60) +'px'
|
||||
// console.log('this.soundProgress',this.soundProgress);
|
||||
this.time = parseInt((Date.now() - startTime) / 1000)
|
||||
},1000)
|
||||
// e.preventDefault();
|
||||
},
|
||||
soundEnd(){
|
||||
// #ifndef H5
|
||||
recorderManager.stop();
|
||||
// #endif
|
||||
console.log('soundEnd');
|
||||
clearInterval(soundInterval)
|
||||
setTimeout(()=> {
|
||||
this.soundState = 0
|
||||
this.soundProgress = 0
|
||||
this.cancel = false
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sound-buttom {
|
||||
background-color: #ffffff;
|
||||
padding: 10px;
|
||||
width: 450rpx;
|
||||
height: 46px;
|
||||
// border-radius: 10px;
|
||||
font-size: 16px;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
overflow:hidden;
|
||||
/* #endif */
|
||||
}
|
||||
.sound-text{
|
||||
position: relative;
|
||||
left: -20rpx;
|
||||
width: 450rpx;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
.sound-tip{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 95px;
|
||||
width: 750rpx;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.sound-tip-text{
|
||||
margin-bottom: 10px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
}
|
||||
.closeIcon{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: #DDDDDD;
|
||||
border-radius: 100px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.sound-progress {
|
||||
// border-radius: 10px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
transition: width 0.2s linear;
|
||||
background-color: #2faf4c;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.soundState{
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.mark{
|
||||
width: 750rpx;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 57px;
|
||||
right: 0;
|
||||
background:rgba(0,0,0,0.7);
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user