merge

pages/im/components/sentText.vue

@@ -71,11 +71,10 @@
         display: flex;
         flex-direction: row;
         justify-content: space-between;
-
         .input {
             background: #F3F6FB;
             height: 70rpx;
-            width: 500rpx;
+            width: 460rpx;
             border-radius: 10rpx;
             margin-right: 15rpx;
             padding: 0 20rpx;

pages/im/components/sentVoice.vue

@@ -1,14 +1,18 @@
 <template>
     <view class="send--voice">
-        <view class="voice" hover-class="chat-hover" @click="onShowLay">
+        <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
             <text class="button">按住说话</text>
         </view>
-        <!-- 录音中提示 -->
+        <!-- 录音中 -->
-        <view class="voice--lay" v-if="showRecordTip" @touchstart="startRecord" @touchend="stopRecord">
+        <view class="modal" v-if="showRecordTip">
-            <view class="modal">
+            <image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
-                <image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
+            <text class="text">录音中 {{recordTime}} s</text>
-                <text class="text">录音中 {{recordTime}} s</text>
+        </view>
-            </view>
+        <!-- 录音完成发送或取消 -->
+        <view class="lay" v-if="showConfirm">
+            <view class="item red" @click="()=> { this.mp3AudioSrc = null, this.showConfirm = false }">取消</view>
+            <view class="item" @click="startPlay">试听</view>
+            <view class="item greed" @click="this.senVoice">发送</view>
         </view>
     </view>
 </template>
@@ -30,11 +34,14 @@
         },
         data() {
             return {
-                showRecordTip: false,
+                showRecordTip: false,
+                showConfirm: false,
                 recordTime: 60,
                 interval: 0,
                 maxRecordTime: 60,
-                recorderManager: null
+                recorderManager: null,
+                mp3AudioSrc: null,
+                isBetaPlay: false
             }
         },
         computed: {
@@ -89,21 +96,63 @@
             },
             // 结束录音
             stopRecord(e) {
-                if (!this.showRecordTip) return
+                if (!this.showRecordTip) return
-                this.recorderManager.stop()
+                // 延迟500毫秒结束录音
-                clearInterval(this.interval)
+                setTimeout(()=> {
-                // 监听录音结束
+                    this.recorderManager.stop()
-                this.recorderManager.onStop(res => {
+                    clearInterval(this.interval)
-                    im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime -
+                    // 监听录音结束
-                        this.recordTime), this.sender, () => {
+                    this.recorderManager.onStop(res => {
-                        setTimeout(() => {
+                        console.log(res)
-                            this.$emit('success')
+                        this.mp3AudioSrc = res.tempFilePath
-                        }, 500)
+                        this.showConfirm = true
-                    })
+                        this.showRecordTip = false
-                    this.recordTime = this.maxRecordTime
+                    })
-                    this.showRecordTip = false
+                },500)
-                })
+            },
-            },
+            // 发送语音消息
+            senVoice(){
+                if(this.mp3AudioSrc === null) {
+                    uni.showToast({
+                        title: '发送失败, 暂无音频信息',
+                        icon : 'none'
+                    })
+                    return
+                }
+                im.sentVoice(this.conversationType, this.targetId, this.mp3AudioSrc, (this.maxRecordTime -
+                    this.recordTime), this.sender, () => {
+                    this.recordTime = this.maxRecordTime
+                    this.mp3AudioSrc = null
+                    this.showConfirm = false
+                    setTimeout(() => {
+                        this.$emit('success')
+                    }, 500)
+                })
+            },
+            // 试听语音
+            startPlay() {
+                let betaAudio = uni.createInnerAudioContext()
+                betaAudio.src = this.mp3AudioSrc;
+                // 在播放中
+                if(this.isBetaPlay){
+                    betaAudio.stop()
+                    betaAudio.onStop(() => {
+                        this.isBetaPlay = false;
+                        betaAudio.destroy()
+                    })
+                    return
+                }
+                // 监听音频播放中
+                betaAudio.play()
+                betaAudio.onPlay(() => {
+                    this.isBetaPlay = true;
+                })
+                // 监听音频结束
+                betaAudio.onEnded(() => {
+                    this.isBetaPlay = false;
+                    betaAudio.destroy()
+                })
+            }
         }
     }
 </script>
@@ -126,13 +175,36 @@
             }
         }
         
-        .voice--lay{
+        .lay{
             position: absolute;
             left: 0;
             bottom: 0;
-            background: rgba($color: #000000, $alpha: .2);
+            z-index: 9;
+            background: rgba($color: #000000, $alpha: .5);
             height: 100vh;
             width: 100vw;
+            padding: 20vh 30rpx;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-around;
+            align-items: flex-end;
+            flex-direction: row;
+            .item{
+                height: 140rpx;
+                width: 140rpx;
+                text-align: center;
+                line-height: 140rpx;
+                border-radius: 50%;
+                background-color: white;
+                &.red{
+                    background: #e6576b;
+                    color: white;
+                }
+                &.greed{
+                    background: #34CE98;
+                    color: white;
+                }
+            }
         }
 
         .modal {