Merge branch 'master' of https://git.yuzhankeji.cn/TmOct5/ZhHealth

pages/im/components/sent/sentVoice.vue

@@ -1,18 +1,21 @@
 <template>
     <view class="send--voice">
-        <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
+        <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord" @touchmove="touchmove">
             <text class="button">按住说话</text>
         </view>
-        <!-- 录音中 -->
+        <!-- 录音层 -->
-        <view class="modal" v-if="showRecordTip">
+        <view class="lay" v-if="showRecordTip">
+            <view class="lay-header">
+                <view class="modal">
                     <image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
                     <text class="text">录音中 {{recordTime}} s</text>
                 </view>
-        <!-- 录音完成发送或取消 -->
+            </view>
-        <view class="lay" v-if="showConfirm">
+            <view class="lay-toast">上滑取消</view>
-            <view class="item red" @click="()=> { this.mp3AudioSrc = null, this.showConfirm = false }">取消</view>
+            <view class="lay-footer">
-            <view class="item" @click="startPlay">试听</view>
+                <image class="lay-footer-icon videoFlicker" src="@/static/icon/audio_green.png" mode="widthFix"></image>
-            <view class="item greed" @click="this.senVoice">发送</view>
+                <view class="lay-footer-text">松开发送</view>
+            </view>
         </view>
     </view>
 </template>
@@ -39,13 +42,13 @@
         data() {
             return {
                 showRecordTip: false,
-                showConfirm: false,
                 recordTime: 60,
                 interval: 0,
                 maxRecordTime: 60,
                 recorderManager: null,
                 mp3AudioSrc: null,
-                isBetaPlay: false
+                isBetaPlay: false, // 暂时无用
+                startOffsetTop: 0
             }
         },
         computed: {
@@ -57,23 +60,17 @@
             this.recorderManager = uni.getRecorderManager()
         },
         methods: {
-            onShowLay(){
-                // this.showRecordTip = true
-                uni.vibrateShort({
-                    complete: com => {
-                        console.log(com)
-                    }
-                })
-            },
             // 检查安卓录制权限
             async getAndroidPermission() {
                 return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
             },
             // 录制语音消息
-            startRecord() {
+            startRecord(e) {
                 this.getAndroidPermission().then(code => {
                     switch (code) {
                         case 1:
+                            this.showConfirm = true
+                            this.startOffsetTop = e.target.offsetTop
                             this.showRecordTip = true
                             this.recorderManager.start()
                             this.interval = setInterval(() => {
@@ -107,10 +104,9 @@
                     clearInterval(this.interval)
                     // 监听录音结束
                     this.recorderManager.onStop(res => {
-                        console.log(res)
                         this.mp3AudioSrc = res.tempFilePath
-                        this.showConfirm = true
                         this.showRecordTip = false
+                        this.senVoice()
                     })
                 },500)
             },
@@ -127,12 +123,24 @@
                     this.recordTime), this.sender, () => {
                     this.recordTime = this.maxRecordTime
                     this.mp3AudioSrc = null
-                    this.showConfirm = false
                     setTimeout(() => {
                         this.$emit('success')
                     }, 500)
                 })
             },
+            // 移动按钮
+            touchmove(e){
+                if(this.startOffsetTop - e.changedTouches[0].pageY > 100){
+                    if(this.showRecordTip){
+                        this.showRecordTip = false
+                        clearInterval(this.interval)
+                        this.recorderManager.stop()
+                        this.recordTime = this.maxRecordTime
+                        this.mp3AudioSrc = null
+                        return
+                    }
+                }
+            },
             // 试听语音
             startPlay() {
                 let betaAudio = uni.createInnerAudioContext()
@@ -161,6 +169,26 @@
     }
 </script>
 
+<style>
+    @keyframes playFlicker {
+        0% {
+            opacity: 1;
+        }
+
+        50% {
+            opacity: .5;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .videoFlicker {
+        animation: playFlicker 1s infinite;
+    }
+</style>
+
 <style scoped lang="scss">
     .send--voice {
         .voice {
@@ -182,35 +210,17 @@
         .lay{
             position: absolute;
             left: 0;
-            bottom: 0;
+            top: 0;
             z-index: 9;
             background: rgba($color: #000000, $alpha: .5);
             height: 100vh;
             width: 100vw;
-            padding: 20vh 30rpx;
             box-sizing: border-box;
+            .lay-header{
+                height: calc(100vh - 140px);
                 display: flex;
-            justify-content: space-around;
+                justify-content: center;
-            align-items: flex-end;
+                align-items: center;
-            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 {
                     display: flex;
                     background: rgba(0, 0, 0, .6);
@@ -219,12 +229,9 @@
                     width: 300rpx;
                     border-radius: 10rpx;
                     z-index: 99;
-            top: 550rpx;
-            left: 225rpx;
                     flex-direction: column;
                     align-items: center;
                     justify-content: center;
-
                     .icon {
                         width: 88rpx;
                         height: 88rpx;
@@ -236,4 +243,34 @@
                     }
                 }
             }
+            .lay-toast{
+                text-align: center;
+                color: rgba($color: #fff, $alpha: .8);
+                font-size: 28rpx;
+            }
+            .lay-footer{
+                background-color: white;
+                height: 100px;
+                border-radius: 50% 50% 0 0;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                text-align: center;
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+                align-items: center;
+                .lay-footer-icon{
+                    width: 58rpx;
+                    height: 58rpx;
+                }
+                .lay-footer-text{
+                    line-height: 40rpx;
+                    color: gray;
+                    font-size: 28rpx;
+                }
+            }
+        }
+    }
 </style>