|
|
|
@ -1,7 +1,10 @@ |
|
|
|
<template> |
|
|
|
<view class="chat-record"> |
|
|
|
<view class="chat-record-bar" id="chat-record-bar" :style="recordBarStyle" @touchstart="onStartRecord" |
|
|
|
@touchmove="onTouchMove" @touchend.prevent="onEndRecord">{{recording?'正在录音':'长按 说话'}}</view> |
|
|
|
<view class="chat-record-bar" id="chat-record-bar" :style="recordBarStyle" |
|
|
|
@click.stop="" |
|
|
|
@touchstart.prevent="onStartRecord" |
|
|
|
@touchmove.prevent="onTouchMove" |
|
|
|
@touchend.prevent="onEndRecord">{{recording?'正在录音':'长按 说话'}}</view> |
|
|
|
<view v-if="recording" class="chat-record-window" :style="recordWindowStyle"> |
|
|
|
<view class="rc-wave"> |
|
|
|
<text class="note" style="--d: 0"></text> |
|
|
|
@ -13,7 +16,7 @@ |
|
|
|
<text class="note" style="--d: 6"></text> |
|
|
|
</view> |
|
|
|
<view class="rc-tip">{{recordTip}}</view> |
|
|
|
<view class="cancel-btn"> |
|
|
|
<view class="cancel-btn" @click="onCancel"> |
|
|
|
<uni-icons :class="moveToCancel?'red':'black'" type="clear" |
|
|
|
:size="moveToCancel?45:40"></uni-icons> |
|
|
|
</view> |
|
|
|
@ -40,7 +43,19 @@ |
|
|
|
const moveY = e.touches[0].clientY; |
|
|
|
this.moveToCancel = moveY < this.recordBarTop-40; |
|
|
|
}, |
|
|
|
onCancel(){ |
|
|
|
if(this.recording){ |
|
|
|
this.moveToCancel = true; |
|
|
|
this.onEndRecord(); |
|
|
|
} |
|
|
|
}, |
|
|
|
onStartRecord() { |
|
|
|
/* 用户第一次使用语音会唤醒录音权限请求,此时会导致@touchend失效, |
|
|
|
一直处于录音状态,这里允许用户再次点击发送语音并结束录音 */ |
|
|
|
if(this.recording){ |
|
|
|
this.onEndRecord(); |
|
|
|
return; |
|
|
|
} |
|
|
|
console.log("开始录音") |
|
|
|
this.moveToCancel = false; |
|
|
|
this.initRecordBar(); |
|
|
|
|