ZhHealth/pages/im/group/announcement.vue

<template>
    <view class="announce" :style="`background-color:${bg};`">
        <!--  有列表 -->
        <u-skeleton rows="2" :loading="loading" avatar :rows="5" v-if="announcements.length>0">
            <view v-for="(item,index) in announcements" :key="index" class="item"
                @longpress="actions(item.announcement_id)" @click="tabA(item.announcement_id)">
                <view class="content-a"><span v-if="item.is_top">置顶</span>{{ item.content }}</view>
                <view class="user">
                    <u-avatar :src="item.user.portraitUrl" size="40rpx" />
                    <view class="name">{{ item.user.name }}</view>
                    <view class="time">{{ item.created_at }}</view>
                </view>
                <!-- <view class="delete" v-if="isAdmin" @click="onDelete(item.announcement_id)">删除</view> -->
            </view>
        </u-skeleton>

        <!-- 没有列表 -->
        <view class="no-lists" v-else>
            <u-image class="cover" radius="4" width="400rpx" height="400rpx"
                :src="require('@/static/imgs/no-level-list.png')" :lazy-load="true" />
            <span>暂无公告内容~</span>
        </view>

        <!--  弹出 -->
        <u-action-sheet :actions="actionMap" :title="actionTitle" :show="actionShow" cancelText="取消"
            @close="actionShow = false" @select="handleAction" />

    </view>
</template>

<script>
    import {
        getGroupInfo,
        getGroupAnnouncements,
        deleteGroupAnnouncement,
        topGroupAnnouncement
    } from '@/apis/interfaces/im.js'
    import onGroupDismiss from '../mixins/onGroupDismiss.js'
    import imBase from '../mixins/imBase.js'
    
    export default {
        mixins: [
            imBase,
            onGroupDismiss
        ],
        data() {
            return {
                targetId: '',
                groupAnnouncementId: '', //  选择公告 id
                announcements: [], // 公告列表
                loading: true,
                isAdmin: false,
                actionShow: false,
                actionMap: [{
                    key: 2,
                    name: ' 删除该公告',
                    disabled: false
                }, {
                    key: 3,
                    name: '置顶该公告',
                    disabled: false
                }],
                actionTitle: '请选择操作',
                bg: '#fff'
            }
        },
        onLoad(e) {
            this.targetId = e.targetId
            getGroupInfo(this.targetId).then(res => {
                this.isAdmin = res.group.is_admin
            })
            this.initData()
            uni.$on('groupAnnouncementCreated', this.initData)
        },
        onUnload() {
            uni.$off('groupAnnouncementCreated')
        },
        onNavigationBarButtonTap() {
            if (this.isAdmin) {
                uni.navigateTo({
                    url: '/pages/im/group/announceCreate?type=check&targetId=' + this.targetId
                })
            } else {
                uni.showToast({
                    icon: 'none',
                    title: '没有权限'
                })
            }
        },
        methods: {
            // 获取公告信息
            initData() {
                getGroupAnnouncements(this.targetId).then(res => {
                    if (res.length > 0) {
                        this.bg = '#f9f9f9'
                    } else {
                        this.bg = '#fff'
                    }
                    this.announcements = res
                    this.loading = false
                })
            },
            // 选择公告 并显示操作弹窗
            actions(id) {
                if (this.isAdmin) {
                    this.groupAnnouncementId = id
                    this.actionShow = true
                }
            },
            // 选择了操作出发事件
            handleAction(e) {
                console.log(e.key)
                switch (e.key) {
                    case 2:
                        this.onDelete(this.groupAnnouncementId)
                        break;
                    case 3:
                        this.onTop(this.groupAnnouncementId)
                        break;
                }
            },
            tabA(id) {
                uni.navigateTo({
                    url: '/pages/im/group/announceCreate?type=check&targetId=' + this.targetId + '&aId=' + id
                })
            },
            onTop(aId) {
                topGroupAnnouncement(this.targetId, aId).then(res => {
                    uni.showToast({
                        icon: 'none',
                        title: ' 置顶成功',
                        mask: true
                    })
                    uni.$emit('updateAnnouncement')
                    this.initData()
                })
                // uni.showModal({
                //     title: ' 置顶该公告',
                //     success: (res) => {
                //         if (res.confirm) {

                //         }
                //     }
                // })
            },
            //  删除公告
            onDelete(aId) {
                deleteGroupAnnouncement(this.targetId, aId).then(res => {
                    uni.showToast({
                        icon: 'none',
                        title: '删除成功',
                        mask: true
                    })
                    uni.$emit('updateAnnouncement')
                    this.initData()
                })
                //        uni.showModal({
                //            title: '删除该公告',
                //            success: (res) => {
                //                if (res.confirm) {

                //                }
                //            }
                //        })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .announce {
        min-height: 99vh;

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

        .item {
            background-color: #fff;
            padding: $padding $padding + 10 10rpx $padding + 10;
            border-bottom: $padding solid #f9f9f9;


            .user {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                box-sizing: border-box;
                font-size: $title-size-m;
                color: $text-gray-m;
                padding: 10rpx;

                .name {
                    padding-left: 10rpx;
                }

                .time {
                    margin-left: 20rpx;
                }
            }

            .content-a {
                font-size: $title-size;
                color: $text-color;
                max-width: 100%;
                margin-bottom: 10rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
                line-height: 1.5;
                border-bottom: solid 1rpx #F9F9F9;
                padding-bottom: 20rpx;

                span {
                    color: #fff;
                    display: inline-block;
                    border-radius: 10rpx;
                    background-color: $main-color;
                    font-size: $title-size-m - 4;
                    padding: 4rpx 10rpx;
                    margin-right: 10rpx;
                    line-height: 1.4;
                    margin-bottom: 10rpx;
                }
            }
        }
    }
</style>