ZhHealth/pages/im/group/announcement.vue

<template>
	<view class="announce">
		<!--  有列表 -->
		<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)">
				<view class="content-a"><span>置顶</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
	} from '@/apis/interfaces/im.js'

	export default {
		data() {
			return {
				targetId: '',
				groupAnnouncementId: '', //  选择公告 id
				announcements: [], // 公告列表
				loading: true,
				isAdmin: false,
				actionShow: false,
				list: [{name: '选项一'}, {name: '选项二'}],
				actionMap: [{key: 1,name: '编辑',disabled: false}, {key: 2,name: '删除',disabled: false}, {key: 3,name: '置顶',disabled: false}],
				actionTitle: '请选择操作',
			}
		},
		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?targetId=' + this.targetId
				})
			} else {
				uni.showToast({
					icon: 'none',
					title: '没有权限'
				})
			}
		},
		methods: {
			// 获取公告信息
			initData() {
				getGroupAnnouncements(this.targetId).then(res => {
					console.log(res)
					this.announcements = res
					this.loading = false
				})
			},
			// 选择公告 并显示操作弹窗
			actions(id) {
				this.groupAnnouncementId = id
				this.actionShow = true
			},
			// 选择了操作出发事件
			handleAction(e) {
				console.log('addadfs', e)
				UNI.showToast({
					title:e,
					icon:"none"
				})
			},
			//  删除公告
			onDelete(aId) {
				uni.showModal({
					title: '删除公告',
					success: (res) => {
						if (res.confirm) {
							deleteGroupAnnouncement(this.targetId, aId).then(res => {
								uni.showToast({
									icon: 'none',
									title: '删除成功'
								})
								this.initData()
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.announce {
		background-color: #f9f9f9;
		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;
			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;

				.name {
					padding-left: 10rpx;
				}

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

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

				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>