消息操作弹窗，删除、撤回、

pages/im/group/chat.vue

@@ -2,10 +2,18 @@
     <view class="chat">
         <sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
 
+        <view class="shade" @click="hidePop" v-show="showPop">
+            <view class="pop" :style="popStyle" :class="{'show':showPop}">
+                <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu(item)">
+                    {{ item }}
+                </view>
+            </view>
+        </view>
+
         <view class="body">
             <view class="scroll">
                 <view class="cell" v-for="(message, index) in messages" :key="index">
-                    <show-message-cell :message="message" isGroup />
+                    <show-message-cell :message="message" isGroup @messageAction="messageAction" />
                 </view>
             </view>
         </view>
@@ -22,12 +30,14 @@
     import showMessageCell from '../components/showMessageCell'
     import utils from '@/utils/index.js'
     import onGroupDismiss from '../mixins/onGroupDismiss.js'
-    import imBase from '../mixins/imBase.js'
+    import imBase from '../mixins/imBase.js'
+    import messageActions from '../mixins/messageActions.js'
 
     export default {
         mixins: [
             imBase,
-            onGroupDismiss
+            onGroupDismiss,
+            messageActions
         ],
         components: {
             sentMessageBar,
@@ -98,12 +108,12 @@
                     }
                 })
             })
-            uni.$on('remove_message_' + this.targetId, (messageId) => {
+            uni.$on('onRemoveMessage_' + this.targetId, (messageId) => {
                 this.messages = this.messages.filter(item => item.messageId != messageId)
             })
         },
         onUnload() {
-            uni.$off('remove_message_' + this.targetId)
+            uni.$off('onRemoveMessage_' + this.targetId)
             uni.$off('onReceiveMessage_' + this.targetId)
             uni.$off('onUpdateProfile_' + this.targetId)
             uni.$off('onRecallMessage_' + this.targetId)
@@ -210,4 +220,47 @@
             }
         }
     }
+
+    /* 遮罩 */
+    .shade {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        z-index: 999;
+
+        .pop {
+            border-radius: 10rpx;
+            position: fixed;
+            z-index: 101;
+            width: 200rpx;
+            box-sizing: border-box;
+            font-size: 28rpx;
+            text-align: left;
+            color: #333;
+            background-color: #fff;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+            line-height: 80rpx;
+            transition: transform 0.15s ease-in-out 0s;
+            user-select: none;
+            -webkit-touch-callout: none;
+            transform: scale(0, 0);
+
+            &.show {
+                transform: scale(1, 1);
+            }
+
+            &>view {
+                padding: 0 20rpx;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                user-select: none;
+                -webkit-touch-callout: none;
+
+                &:active {
+                    background-color: #f3f3f3;
+                }
+            }
+        }
+    }
 </style>