ZhHealth/pages/im/components/conversationGroup.vue

<template>
    <view>
        <view v-for="(item, index) in conversations" :key="index" :class="['message', { 'is-top': item.isTop }]"
            :data-item="item" @longpress="onLongPress" @click="toDetail(item)">
            <view class="avatar">
                <u-badge max="99" shape="horn" absolute :offset="[-5, -8]" :value="item.unreadMessageCount" />
                <u-avatar text="群" shape="square" size="44" />
            </view>
            <view class="content u-border-bottom">
                <view class="header">
                    <view class="name">群组名称</view>
                    <view class="time">{{ item.sentTime|timeCustomCN }}</view>
                </view>
                <message-preview class="preview" :msg="item.latestMessage" :user="item.latestMessage.userInfo" />
            </view>
        </view>

        <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" :data-index="index">
                    {{item}}
                </view>
            </view>
        </view>
    </view>
</template>

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

    export default {
        props: {
            conversations: {
                type: Array,
                default: function() {
                    return []
                }
            }
        },
        components: {
            messagePreview
        },
        data() {
            return {
                /* 窗口尺寸 */
                winSize: {},
                /* 显示操作弹窗 */
                showPop: false,
                /* 弹窗按钮列表 */
                popButton: ['置顶聊天', '删除该聊天'],
                /* 弹窗定位样式 */
                popStyle: "",
                pickedItem: {},
            }
        },
        computed: {
            friend() {
                return function(targetId) {
                    return this.$store.getters.userInfo(targetId)
                }
            }
        },
        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 {
                    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.witdh / 2)) {
                    style += `right:${this.winSize.witdh-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) {
                uni.navigateTo({
                    url: '/pages/im/group/chat?targetId=' + item.targetId
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .message {
        background: white;
        padding: 20rpx 0 0 20rpx;
        position: relative;
        display: flex;

        &.is-top {
            background: $window-color;
            border-bottom: #e8e8e8;
        }

        .avatar {
            position: relative;

            .u-badge {
                z-index: 998;
            }
        }

        .content {
            margin-left: 30rpx;
            width: calc(100% - 46px);
            box-sizing: border-box;
            position: relative;

            .header {
                display: flex;
                justify-content: space-between;

                .name {
                    font-size: $title-size + 2;
                    color: #454545;
                    color: #454545;
                }

                .time {
                    font-size: $title-size-sm;
                    color: $text-gray-m;
                    position: absolute;
                    right: 30rpx;
                }
            }
        }
    }

    /* 遮罩 */
    .shade {
        position: fixed;
        width: 100%;
        height: 100%;

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