ZhHealth/pages/im/group/index.vue

<template>
    <view class="group" :style="`background-color:${bg};`">
        <block v-if="groups.length > 0">
            <view class="title"> 群聊 </view>
            <view v-for="(item, index) in groups" :key="index" class="friend-flex" @click="toGroup(item.targetId)">
                <u-avatar size="38" shape="square" :src="contact(item.targetId).portraitUrl" />
                <view class="info">
                    <view class="name">{{item.name}}  <span class="total">共10人</span></view>
                </view>
            </view>
            <view class="group-count"> {{groups.length}}个群聊 </view>
        </block>
        <view class="no-lists" v-else>
            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
                :src="require('@/static/imgs/no-friend.png')" :lazy-load="true" />
            <span>空空如也~</span>
        </view>
        <u-modal negativeTop="300" :show="createModal" title="创建群聊" showCancelButton @cancel="onHideModal"
            @confirm="onCreateGroup">
            <view class="slot-content">
                <u--input placeholder="群名称" border="surround" focus v-model="groupName"></u--input>
            </view>
        </u-modal>
    </view>
</template>

<script>
    import {
        getMyGroups,
        createGroup
    } from '@/apis/interfaces/im.js'

    export default {
        data() {
            return {
                groups: [],
                createModal: false,
                groupName: '',
                bg: '#fff'
            }
        },
        computed: {
            contact() {
                return function(targetId) {
                    return this.$store.getters.contactInfo(targetId)
                }
            }
        },
        onNavigationBarButtonTap() {
            this.createModal = true
        },
        onShow() {
            this.initData()
            uni.$on('onGroupDismiss', this.initData)
        },
        methods: {
            initData() {
                getMyGroups().then((res) => {
                    if (res.length > 0) {
                        this.bg = '#f9f9f9'
                    } else {
                        this.bg = '#fff'
                    }
                    this.groups = res
                    res.map(item => {
                        this.$store.dispatch('updateContact', item)
                    })
                })
            },
            onHideModal() {
                this.createModal = false
                this.groupName = ''
            },
            onCreateGroup() {
                createGroup({
                    name: this.groupName
                }).then(res => {
                    uni.showToast({
                        title: '创建成功'
                    })
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err.message
                    })
                }).finally(() => {
                    this.initData()
                    this.onHideModal()
                })
            },
            toGroup(targetId) {
                uni.navigateTo({
                    url: '/pages/im/group/chat?targetId=' + targetId
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .group {
        min-height: 100vh;
        background-color: $window-color;

        .title {
            font-size: $title-size-m;
            color: $text-gray-m;
            padding: 10rpx $padding;
        }

        .group-count {
            text-align: center;
            font-size: $title-size;
            color: $text-gray;
            background-color: #fff;
            padding: 10rpx $padding 20rpx $padding;
            font-weight: normal;
        }
    }

    // 好友列表
    .friend-flex {
        position: relative;
        padding: 20rpx $padding;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #fff;


        .info {
            flex: 1;
            margin-left: $padding + 10;
            border-bottom: solid 1rpx #f9f9f9;
            padding-bottom: $padding;

            .name {
                font-size: $title-size + 1;
                color: #454545 !important;
            }
            .total{
                color: $text-gray-m;
                font-size: $title-size-m - 5;
                padding-left: 10rpx;
            }

            .address {
                color: $text-gray-m;
                font-size: $title-size-m - 5;
            }
        }
    }

    .no-lists {
        padding-top: $padding * 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        font-size: $title-size-m;
        color: $text-gray-m;

        span {
            padding-top: $padding;
        }
    }
</style>