...

pages/im/group/announcement.vue

@@ -1,9 +1,8 @@
 <template>
-	<view class="announce">
+	<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"
+			<view v-for="(item,index) in announcements" :key="index" class="item" @longpress="actions(item.announcement_id)">
-				@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" />
@@ -12,18 +11,17 @@
 				</view>
 				<!-- <view class="delete" v-if="isAdmin" @click="onDelete(item.announcement_id)">删除</view> -->
 			</view>
-		</u-skeleton>
+		</u-skeleton>
-		
+
 		<!-- 没有列表 -->
 		<view class="no-lists" v-else>
-			<u-image class="cover" radius="4" width="400rpx" height="400rpx"
+			<u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-level-list.png')" :lazy-load="true" />
-				:src="require('@/static/imgs/no-level-list.png')" :lazy-load="true" />
 			<span>暂无公告内容~</span>
-		</view>
+		</view>
-		
+
-		<!--  弹出 -->
+		<!--  弹出 -->
-		<u-action-sheet :actions="actionMap" :title="actionTitle" cancelText="取消" @close="hideAction"
+		<u-action-sheet :actions="actionMap" :title="actionTitle" :show="actionShow" cancelText="取消" @close="actionShow = false" @select="handleAction" />
-		    @select="handleAction" :show="actionShow" />
+
 	</view>
 </template>
 
@@ -38,12 +36,14 @@
 		data() {
 			return {
 				targetId: '',
-				announcements: [],
+				groupAnnouncementId: '', //  选择公告 id
+				announcements: [], // 公告列表
 				loading: true,
-				isAdmin: false,
+				isAdmin: false,
-				actionShow: false,
+				actionShow: false,
-				actionMap: [],
+				list: [{name: '选项一'}, {name: '选项二'}],
-				actionTitle: '请选择',
+				actionMap: [{key: 1,name: '编辑',disabled: false}, {key: 2,name: '删除',disabled: false}, {key: 3,name: '置顶',disabled: false}],
+				actionTitle: '请选择操作',
 			}
 		},
 		onLoad(e) {
@@ -70,15 +70,28 @@
 			}
 		},
 		methods: {
+			// 获取公告信息
 			initData() {
-				getGroupAnnouncements(this.targetId).then(res => {
+				getGroupAnnouncements(this.targetId).then(res => {
+					console.log(res)
 					this.announcements = res
 					this.loading = false
 				})
-			},
-			actions(id){
-				console.log(id)
 			},
+			// 选择公告 并显示操作弹窗
+			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: '删除公告',
@@ -120,8 +133,8 @@
 		}
 
 		.item {
-			background-color: #fff;
+			background-color: #fff;
-			padding: $padding $padding + 10;
+			padding: $padding $padding + 10;
 			border-bottom: $padding solid #f9f9f9;
 
 			.user {
@@ -145,23 +158,24 @@
 			.content-a {
 				font-size: $title-size;
 				color: $text-color;
-				max-width: 100%;
+				max-width: 100%;
-				margin-bottom: $padding;
+				margin-bottom: $padding;
-				display: -webkit-box;
+				display: -webkit-box;
-				-webkit-box-orient: vertical;
+				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 3;
+				-webkit-line-clamp: 3;
-				overflow: hidden;
+				overflow: hidden;
-				line-height: 1.5;
+				line-height: 1.5;
-				span{
+
-					color: #fff;
+				span {
-					display: inline-block;
+					color: #fff;
-					border-radius: 10rpx;
+					display: inline-block;
-					background-color: $main-color;
+					border-radius: 10rpx;
-					font-size: $title-size-m - 4;
+					background-color: $main-color;
-					padding: 4rpx 10rpx;
+					font-size: $title-size-m - 4;
-					margin-right: 10rpx;
+					padding: 4rpx 10rpx;
-					line-height: 1.4;
+					margin-right: 10rpx;
-					margin-bottom: 10rpx;
+					line-height: 1.4;
+					margin-bottom: 10rpx;
 				}
 			}
 		}