feat(message): 消息页面折叠面板手风琴效果

components/ygoa/messageList.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="msg_list_content">
-		<uni-collapse>
-			<uni-collapse-item title-border="show" :border="true" :show-animation="anime" :open="open">
+		<!-- <uni-collapse>
+			<uni-collapse-item title-border="show" :border="true" :show-animation="anime" :open="unReadNum > 0 || false">
 				<template v-slot:title>
 					<uni-section :title="title" type="line" titleFontSize="1.3rem">
 						<template v-slot:right>
@@ -9,7 +9,7 @@
 							<button @click.stop="clickReadButton" class="read_button" v-if="unReadNum!==undefined" :disabled="unReadNum===0?true:false">一键阅读</button>
 						</template>
 					</uni-section>
-				</template>
+				</template> -->
 				<View style="height: 69.5vh;">
 					<z-paging :fixed="false" @query="queryData" :value="list" :default-page-size="pSize"
 						:default-page-no="pageNo" ref="paging">
@@ -55,8 +55,8 @@
 						</view>
 					</z-paging>
 				</View>
-			</uni-collapse-item>
-		</uni-collapse>
+			<!-- </uni-collapse-item>
+		</uni-collapse> -->
 	</view>
 </template>
 
@@ -64,21 +64,20 @@
 import { onMounted, ref } from 'vue';
 
 const props = defineProps({
-	anime: { type: Boolean, default: false }, // 是否开启动画
-	open: { type: Boolean, default: false }, // 是否默认打开
-	title: { type: String, required: true }, // 标题
+	// anime: { type: Boolean, default: false }, // 是否开启动画
+	// open: { type: Boolean, default: false }, // 是否默认打开
+	// title: { type: String, required: true }, // 标题
 	segments: { type: Array, default: undefined }, // 分段器数据
-	// list: { type: Array, required: true }, // 消息数据
 	pSize: { type: Number, default: 10 }, // 分页大小
 	pageNo: { type: Number, default: 1 }, // 默认页
 	defaultCurrent: {type: Number, default: 0}, // 默认选中项
-	unReadNum: { type: Number, default: undefined }, // 未读消息数
+	// unReadNum: { type: Number, default: undefined }, // 未读消息数
 })
 const emits = defineEmits([
 	'clickSegment', // 点击分段器
 	'clickItem', // 点击内容项
 	'scrollToBottom', // 到达底部
-	'readMsg',//消息已读
+	// 'readMsg',//消息已读
 ])
 // 分段器 键值
 const segmentKeys = ref({})
@@ -89,10 +88,10 @@ onMounted(() => {
 		segmentValues.value = Object.values(props.segments)
 	}
 })
-function clickReadButton() {
-	console.log('clickReadButton');
-	emits('readMsg')
-}
+// function clickReadButton() {
+// 	console.log('clickReadButton');
+// 	emits('readMsg')
+// }
 const paging = ref(null)
 const totalPage=ref(0)
 // 数据列表
@@ -199,7 +198,7 @@ defineExpose({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .hidden_over {
 	white-space: nowrap; // 不换行
 	overflow: hidden; // 超出内容隐藏

pages/message/index.vue

@@ -3,13 +3,13 @@
 		<uni-nav-bar dark :border="false" :fixed="true" title="宇光同行">
 		</uni-nav-bar>
 		<!-- 待办消息列表 -->
-		<uni-collapse>
-			<uni-collapse-item title-border="show" :border="true" :show-animation="true" :open="unProcessNum > 0 || false">
+		<uni-collapse :accordion="true">
+			<uni-collapse-item title-border="show" :border="true" :show-animation="true"
+				:open="unProcessNum > 0 || false">
 				<template v-slot:title>
 					<uni-section title="待办" type="line" titleFontSize="1.3rem">
 						<template v-slot:right>
-							<uni-badge :text="unProcessNum" class="unReadBadge"
-								v-if="unProcessNum > 0"></uni-badge>
+							<uni-badge :text="unProcessNum" class="unReadBadge" v-if="unProcessNum > 0"></uni-badge>
 						</template>
 					</uni-section>
 				</template>
@@ -21,19 +21,46 @@
 					</view>
 				</view>
 			</uni-collapse-item>
+			<!-- 公告列表  -->
+			<uni-collapse-item title-border="show" :border="true" :show-animation="true"
+				:open="unReadMsgNum > 0 || false">
+				<template v-slot:title>
+					<uni-section title="公告" type="line" titleFontSize="1.3rem">
+						<!-- <template v-slot:right>
+							<uni-badge :text="unReadMsgNum"
+								v-if="unReadMsgNum !== undefined && unReadMsgNum > 0"></uni-badge>
+							<button @click.stop="clickReadButton" class="read_button" v-if="unReadMsgNum !== undefined"
+								:disabled="unReadMsgNum === 0 ? true : false">一键阅读</button>
+						</template> -->
+					</uni-section>
+				</template>
+				<message-list @clickSegment="getNoticeData" @clickItem="handleToNoticeDetail"
+					@scrollToBottom="getNoticePage" :pSize="5" :pageNo="1" :anime="true" :open="false"></message-list>
+			</uni-collapse-item>
+			<!-- 消息列表 -->
+			<uni-collapse-item title-border="show" :border="true" :show-animation="true"
+				:open="unReadMsgNum > 0 || false">
+				<template v-slot:title>
+					<uni-section title="消息" type="line" titleFontSize="1.3rem">
+						<template v-slot:right>
+							<uni-badge :text="unReadMsgNum"
+								v-if="unReadMsgNum !== undefined && unReadMsgNum > 0"></uni-badge>
+							<button @click.stop="setAllMsgRead" class="read_button" v-if="unReadMsgNum !== undefined"
+								:disabled="unReadMsgNum === 0 ? true : false">一键阅读</button>
+						</template>
+					</uni-section>
+				</template>
+				<message-list ref="msgListRef" @readMsg="setAllMsgRead" @clickSegment="getMessageData"
+					@clickItem="handleToMessageDetail" @scrollToBottom="getMessagePage" :defaultCurrent="1" :pSize="5"
+					:pageNo="1" :segments="{ '全部': '', '未读': '0', '已读': '1' }">
+				</message-list>
+			</uni-collapse-item>
 		</uni-collapse>
-
 		<!-- 公告列表  -->
-		<message-list @clickSegment="getNoticeData" @clickItem="handleToNoticeDetail" @scrollToBottom="getNoticePage" :pSize="5" :pageNo="1" 
-		:anime="true" :open="false" title="公告"></message-list>
+		<!-- <message-list @clickSegment="getNoticeData" @clickItem="handleToNoticeDetail" @scrollToBottom="getNoticePage" :pSize="5" :pageNo="1" :anime="true" :open="false" title="公告"></message-list> -->
 
 		<!-- 消息列表 -->
-		<message-list ref="msgListRef" @readMsg="setAllMsgRead" :unReadNum="unReadMsgNum" @clickSegment="getMessageData" 
-		@clickItem="handleToMessageDetail" 
-		@scrollToBottom="getMessagePage" :defaultCurrent="1" :pSize="5" 
-		:pageNo="1" :anime="true" :open="false" 
-		:segments="{ '全部': '', '未读': '0', '已读': '1' }" title="消息">
-		</message-list>
+		<!-- <message-list ref="msgListRef" @readMsg="setAllMsgRead" :unReadNum="unReadMsgNum" @clickSegment="getMessageData" @clickItem="handleToMessageDetail" @scrollToBottom="getMessagePage" :defaultCurrent="1" :pSize="5" :pageNo="1" :anime="true" :open="false" :segments="{ '全部': '', '未读': '0', '已读': '1' }" title="消息"></message-list> -->
 
 		<!-- 跳转打卡页按钮 -->
 		<view class="fab_button toClockInBtn">
@@ -67,7 +94,7 @@ const processListRef = ref(null)
 onMounted(() => {
 	uni.$on('showTabBarBadge', showTabBarBadge)
 	uni.$on('ReloadProcessData', () => {
-		new Promise((resolve, reject) =>{
+		new Promise((resolve, reject) => {
 			processListRef.value.onClickItem()
 		})
 	})
@@ -297,12 +324,12 @@ function setAllMsgRead() {
 							userStore.LogOut().then(res => {
 								uni.reLaunch({ url: '/pages/login' })
 							})
-						}).catch(()=>{})
+						}).catch(() => { })
 					}
 				})
 			})
 		}
-	}).catch(()=>{})
+	}).catch(() => { })
 }
 </script>
 
@@ -320,27 +347,47 @@ function setAllMsgRead() {
 		bottom: 100px;
 	}
 }
+
 .uni-badge {
-    height: 1.5rem !important;
-    line-height: 1.375rem !important;
-    font-size: 1.125rem !important;
+	height: 1.5rem !important;
+	line-height: 1.375rem !important;
+	font-size: 1.125rem !important;
 }
 
+.read_button {
+	position: absolute;
+	top: 12px;
+	right: 38px;
+	height: 28px;
+	line-height: 28px;
+	font-size: 14px;
+	background-color: #007aff;
+	color: #fff;
+}
+.read_button[disabled] {
+	background-color: #f5f5f5; 
+	color: #666;           
+	opacity: 0.5;             
+}
 ::v-deep .flow_step_section {
-	 .uni-section .uni-section-header {
+	.uni-section .uni-section-header {
 		padding: 5px 10px;
 	}
 }
 
 ::v-deep .flow_step_container {
+	min-height: 60px;
+	margin: 10px 15px;
 	.u-steps {
 		.u-steps-item {
 			padding-bottom: 11px;
+
 			.redcontent {
 				.u-text__value--content {
 					color: #ff4500;
 				}
 			}
+
 			.active_step_circle {
 				width: 20px;
 				height: 20px;