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

pages/im/components/conversationList.vue

@@ -2,8 +2,8 @@
     <view>
         <view class="shade" @click="hidePop" @touchmove="hidePop" v-show="showPop">
             <view class="pop" :style="popStyle" :class="{'show':showPop}">
-                <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu" :data-index="index">
+                <view v-for="(item, index) in popButton" :key="index" @click="pickerMenu(index)">
-                    {{item}}
+                    {{ item }}
                 </view>
             </view>
         </view>
@@ -66,9 +66,7 @@
                 }, 250)
             },
             // 点击会话功能菜单
-            pickerMenu(e) {
+            pickerMenu(index) {
-                const index = Number(e.currentTarget.dataset.index)
-
                 if (index == 0) {
                     RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
                         .pickedItem.isTop)
@@ -145,7 +143,8 @@
         height: 100%;
         z-index: 999;
 
-        .pop {
+        .pop {
+            border-radius: 10rpx;
             position: fixed;
             z-index: 101;
             width: 200rpx;

pages/im/components/showMessageCell.vue

@@ -11,7 +11,7 @@
         <view v-else :class="['cell-item', message.messageDirection == 1 ? 'right' : 'left']">
             <u-avatar class="avatar" @click="toUser(message)" :size="avatarSize" shape="square"
                 :src="contact(message.senderUserId).portraitUrl" />
-            <view class="msg" @longpress="backMessage">
+            <view class="msg" @longpress="messageAction($event, message)">
                 <show-text v-if="message.objectName === 'RC:TxtMsg'" :message="message" :isGroup="isGroup" />
                 <show-voice v-else-if="message.objectName === 'RC:HQVCMsg'" :message="message" :isGroup="isGroup" />
                 <show-image v-else-if="message.objectName === 'RC:ImgMsg'" :message="message" :isGroup="isGroup" />
@@ -60,6 +60,12 @@
             }
         },
         methods: {
+            messageAction(event, message) {
+                this.$emit('messageAction', {
+                    event,
+                    message
+                })
+            },
             toUser(item) {
                 if (item.messageDirection == 1) {
                     uni.navigateTo({
@@ -79,7 +85,7 @@
                             url: '/pages/im/group/announceCreate?type=check&targetId=' + message
                                 .targetId + '&aId=' + message.content.extra
                         })
-                    }).catch(err => {
+                    }).catch(err => {
                         IMLib.deleteMessagesByIds([message.messageId], ({
                             code
                         }) => {
@@ -98,40 +104,6 @@
                         title: '旧版本，无链接'
                     })
                 }
-            },
-            // 撤回消息测试
-            backMessage() {
-                if (this.$store.getters.sender.userId != this.message.senderUserId) {
-                    uni.showToast({
-                        icon: 'none',
-                        title: '不能撤回别人的消息'
-                    })
-                    return
-                }
-                // 判断时间超过了多久 就不能撤回 TODO
-                // this.message.sentTime
-                const pushContent = this.$store.getters.sender.name + '撤回了一条消息'
-                IMLib.recallMessage(this.message.messageId, pushContent,
-                    ({
-                        code,
-                        message
-                    }) => {
-                        if (code === 0) {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '消息撤回成功'
-                            })
-                            IMLib.getMessage(this.message.messageId, res => {
-                                uni.$emit('onRecallMessage_' + this.message.targetId, res.message)
-                            })
-                        } else {
-                            uni.showToast({
-                                icon: 'none',
-                                title: '撤回失败' + code
-                            })
-                        }
-                    }
-                )
             }
         }
     }

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>

pages/im/mixins/messageActions.js

@@ -0,0 +1,134 @@
+import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+
+export default {
+    data() {
+        return {
+            winSize: {},
+            showPop: false,
+            /* 弹窗按钮列表 */
+            popButton: ['复制', '删除', '撤回'],
+            /* 弹窗定位样式 */
+            popStyle: "",
+            pickedItem: {}
+        }
+    },
+    onLoad() {
+        uni.getSystemInfo({
+            success: (e) => {
+                this.winSize = {
+                    width: e.windowWidth,
+                    height: e.windowHeight
+                }
+            }
+        })
+    },
+    methods: {
+        // 隐藏功能菜单
+        hidePop() {
+            this.showPop = false
+            this.pickedItem = {}
+            setTimeout(() => {
+                this.showShade = false
+            }, 250)
+        },
+        // 点击会话功能菜单
+        pickerMenu(e) {
+            const msg = this.pickedItem
+            console.log(msg);
+            switch (e) {
+                case '复制':
+                    uni.setClipboardData({
+                        data: msg.content.content
+                    })
+                    uni.showToast({
+                        icon: 'none',
+                        title: '复制成功'
+                    })
+                    break;
+                case '删除':
+                    IMLib.deleteMessagesByIds([msg.messageId], ({
+                        code
+                    }) => {
+                        if (code === 0) {
+                            uni.$emit('onRemoveMessage_' + msg.targetId, msg.messageId)
+                            uni.showToast({
+                                title: '消息删除成功',
+                                icon: 'none',
+                            })
+                        }
+                    })
+                    break;
+                case '撤回':
+                    const pushContent = this.$store.getters.sender.name + '撤回了一条消息'
+                    IMLib.recallMessage(msg.messageId, pushContent,
+                        ({
+                            code,
+                            message
+                        }) => {
+                            if (code === 0) {
+                                uni.showToast({
+                                    icon: 'none',
+                                    title: '消息撤回成功'
+                                })
+                                IMLib.getMessage(msg.messageId, res => {
+                                    uni.$emit('onRecallMessage_' + msg.targetId, res.message)
+                                })
+                            } else {
+                                uni.showToast({
+                                    icon: 'none',
+                                    title: '撤回失败' + code
+                                })
+                            }
+                        }
+                    )
+                    break;
+            }
+            this.hidePop()
+        },
+        messageAction(e) {
+            let [touches, style, item] = [e.event.touches[0], "", e.message]
+
+            if (touches.clientY > (this.winSize.height / 2)) {
+                style = `bottom:${this.winSize.height-touches.clientY}px;`
+            } else {
+                style = `top:${touches.clientY}px;`
+            }
+
+            if (touches.clientX > (this.winSize.width / 2)) {
+                style += `right:${this.winSize.width-touches.clientX}px`
+            } else {
+                style += `left:${touches.clientX}px`
+            }
+
+            if (item.messageDirection == 2) {
+                if (item.objectName == 'RC:TxtMsg') {
+                    this.popButton = ['复制', '删除']
+                } else {
+                    this.popButton = ['删除']
+                }
+            } else {
+                if ((new Date()).getTime() - item.sentTime > 120 * 1000) {
+                    if (item.objectName == 'RC:TxtMsg') {
+                        this.popButton = ['复制', '删除']
+                    } else {
+                        this.popButton = ['删除']
+                    }
+                } else {
+                    if (item.objectName == 'RC:TxtMsg') {
+                        this.popButton = ['复制', '撤回']
+                    } else {
+                        this.popButton = ['删除']
+                    }
+                }
+            }
+
+            this.popStyle = style
+            this.pickedItem = item
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    this.showPop = true;
+                }, 10)
+            })
+        },
+    }
+}

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>