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

pages/im/private/chat.vue

@@ -1,11 +1,20 @@
 <template>
     <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>
+
         <!-- chat -->
         <view class="body">
             <view class="scroll">
                 <view class="cell" v-for="(message, index) in messages" :key="index">
-                    <show-message-cell :message="message" />
+                    <show-message-cell :message="message" @messageAction="messageAction" />
                 </view>
             </view>
         </view>
@@ -19,10 +28,12 @@
     import showMessageCell from '../components/showMessageCell'
     import utils from '@/utils/index.js'
     import imBase from '../mixins/imBase.js'
-
+    import messageActions from '../mixins/messageActions.js'
+    
     export default {
         mixins: [
-            imBase
+            imBase,
+            messageActions
         ],
         components: {
             sentMessageBar,
@@ -202,4 +213,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>