ZhHealth/pages/im/components/conversationList.vue

<template>
    <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">
                    {{item}}
                </view>
            </view>
        </view>
        <view v-for="(item, index) in conversations" :key="index"
            :class="['message', { 'is-top': item.isTop, 'is-active': pickedItem.targetId == item.targetId }]"
            :data-item="item" @longpress="onLongPress" @click="toDetail(item)">
            <message-cell :item="item" />
        </view>
    </view>
</template>

<script>
    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
    import im from '@/utils/im/index.js'
    import messageCell from './conversation/messageCell'

    export default {
        props: {
            conversations: {
                type: Array,
                default: function() {
                    return []
                }
            }
        },
        components: {
            messageCell
        },
        data() {
            return {
                /* 窗口尺寸 */
                winSize: {},
                /* 显示操作弹窗 */
                showPop: false,
                /* 弹窗按钮列表 */
                popButton: ['置顶聊天', '标记已读', '删除该聊天'],
                /* 弹窗定位样式 */
                popStyle: "",
                pickedItem: {},
            }
        },

        created() {
            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 index = Number(e.currentTarget.dataset.index)

                if (index == 0) {
                    RongIMLib.setConversationToTop(this.pickedItem.conversationType, this.pickedItem.targetId, !this
                        .pickedItem.isTop)
                } else if (index == 1) {
                    RongIMLib.clearMessagesUnreadStatus(this.pickedItem.conversationType, this.pickedItem.targetId, this
                        .pickedItem.sentTime)
                } else {
                    RongIMLib.removeConversation(this.pickedItem.conversationType, this.pickedItem.targetId)
                    RongIMLib.deleteMessages(this.pickedItem.conversationType, this.pickedItem.targetId)
                }
                this.$emit('refresh')
                im.setNotifyBadge()
                this.hidePop()
            },
            // 长按会话，展示功能菜单
            onLongPress(e) {
                let [touches, style, item] = [e.touches[0], "", e.currentTarget.dataset.item]

                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`
                }

                this.popButton[0] = item.isTop ? '取消置顶' : '置顶聊天'
                this.popStyle = style
                this.pickedItem = item
                this.$nextTick(() => {
                    setTimeout(() => {
                        this.showPop = true;
                    }, 10)
                })
            },
            toDetail(item) {
                if (item.conversationType == 1) {
                    uni.navigateTo({
                        url: '/pages/im/private/chat?targetId=' + item.targetId
                    })
                } else if (item.conversationType == 3) {
                    uni.navigateTo({
                        url: '/pages/im/group/chat?targetId=' + item.targetId
                    })
                }

                this.hidePop()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .message {
        background: white;

        &.is-top {
            background: $window-color;
        }

        &.is-active {
            background: #F8FAFF;
        }
    }

    /* 遮罩 */
    .shade {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999;

        .pop {
            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>