From 8b888e250ffd110f10c8ee300e8863bb2c85b282 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E6=98=8E=E6=98=8E?= <970899069@qq.com>
Date: Thu, 24 Feb 2022 14:15:59 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=AF=AD=E9=9F=B3?=
 =?UTF-8?q?=E5=BD=95=E5=88=B6=E5=8F=96=E6=B6=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/components/sent/sentVoice.vue | 181 +++++++++++++++----------
 1 file changed, 109 insertions(+), 72 deletions(-)

diff --git a/pages/im/components/sent/sentVoice.vue b/pages/im/components/sent/sentVoice.vue
index f435ff2..d9ee19f 100644
--- a/pages/im/components/sent/sentVoice.vue
+++ b/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">
-            <image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
-            <text class="text">录音中 {{recordTime}} s</text>
-        </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 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-toast">上滑取消</view>
+            <view class="lay-footer">
+                <image class="lay-footer-icon videoFlicker" src="@/static/icon/audio_green.png" mode="widthFix"></image>
+                <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:
+                        case 1:
+                            this.showConfirm = true
+                            this.startOffsetTop = e.target.offsetTop
                             this.showRecordTip = true
                             this.recorderManager.start()
                             this.interval = setInterval(() => {
@@ -99,7 +96,7 @@
                 })
             },
             // 结束录音
-            stopRecord(e) {
+            stopRecord(e) {
                 if (!this.showRecordTip) return
                 // 延迟500毫秒结束录音
                 setTimeout(()=> {
@@ -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()
@@ -159,7 +167,27 @@
             }
         }
     }
-</script>
+</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 {
@@ -182,58 +210,67 @@
         .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;
-            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;
+            .lay-header{
+                height: calc(100vh - 140px);
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .modal {
+                    display: flex;
+                    background: rgba(0, 0, 0, .6);
+                    position: fixed;
+                    height: 200rpx;
+                    width: 300rpx;
+                    border-radius: 10rpx;
+                    z-index: 99;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    .icon {
+                        width: 88rpx;
+                        height: 88rpx;
+                    }
+                
+                    .text {
+                        font-size: 28rpx;
+                        color: #FFFFFF;
+                    }
                 }
-                &.greed{
-                    background: #34CE98;
-                    color: white;
+            }
+            .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;
                 }
             }
         }
-
-        .modal {
-            display: flex;
-            background: rgba(0, 0, 0, .6);
-            position: fixed;
-            height: 200rpx;
-            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;
-            }
-
-            .text {
-                font-size: 28rpx;
-                color: #FFFFFF;
-            }
-        }
     }
 </style>

From ae0fa1bde30ba8b55a31a8e44213b143047cacee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=94=90=E6=98=8E=E6=98=8E?=
 <tmoct5@noreply.git.yuzhankeji.cn>
Date: Thu, 24 Feb 2022 14:19:22 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=88=A0=E9=99=A4=20'pages/im/.DS=5FStore'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/im/.DS_Store | Bin 6148 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 pages/im/.DS_Store

diff --git a/pages/im/.DS_Store b/pages/im/.DS_Store
deleted file mode 100644
index 33ddb7920b287ee287f505ae5118dd9b8ced25a0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6148
zcmeHKI|>3Z5S{S@f{mqRuHX%V=n3`$7J`lJilFsYp39^8=F=>TofgU)n7m{%FCnkk
z*%1-l-i{lQm540hhVrmsY_@McvPni12*(+hdvk5iU3(hkz6%(4E+@H4C$|CLc4$<9
z3Qz$mKn1A4rxnNwyI6kuV4g<>sKC!FVBd!VH>`<$pnp0rcnbiWA?${^_Y%Nj0bot+
z0}+8~P=P_!Y%w(Gh?mT(iG5(uMYH+PyjinDQNJDM7f%<hfgGs-6&NZojpfSf{~rFP
z{~waLq5@RluN2VPuGwwzq^zx@$62i{@B`d(o^UhFor1y3G0@8~7FLeeo)me-=Gd=^
UeW243cRG+i1Evd&3Vd6E7hpjY;{X5v