merge

pages/im/components/sentVoice.vue

@@ -1,12 +1,14 @@
 <template>
     <view class="send--voice">
-        <view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
+        <view class="voice" hover-class="chat-hover" @click="onShowLay">
             <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="voice--lay" v-if="showRecordTip" @touchstart="startRecord" @touchend="stopRecord">
+            <view class="modal">
+                <image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
+                <text class="text">录音中 {{recordTime}} s</text>
+            </view>
         </view>
     </view>
 </template>
@@ -40,16 +42,24 @@
                 return this.$store.getters.sender
             }
         },
-        created() {
+        created() {
             this.recorderManager = uni.getRecorderManager()
         },
-        methods: {
+        methods: {
+            onShowLay(){
+                // this.showRecordTip = true
+                uni.vibrateShort({
+                    complete: com => {
+                        console.log(com)
+                    }
+                })
+            },
             // 检查安卓录制权限
             async getAndroidPermission() {
                 return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
             },
             // 录制语音消息
-            startRecord() {
+            startRecord() {
                 this.getAndroidPermission().then(code => {
                     switch (code) {
                         case 1:
@@ -114,6 +124,15 @@
                 font-size: 30rpx;
                 color: #333;
             }
+        }
+        
+        .voice--lay{
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            background: rgba($color: #000000, $alpha: .2);
+            height: 100vh;
+            width: 100vw;
         }
 
         .modal {