perf(message): 消息列表页适老化优化

perf(message/detail): 消息详情页适老化优化

components/ygoa/attachmentList.vue

@@ -3,7 +3,7 @@
 		<uni-row :gutter="0">
 			<uni-col v-for="(attachment, index) in attachments" :key="index" :xs="{span: 24}" :sm="6">
 				<view class="attachment">
-					<text @click="seeAttachment(attachment.path)" class="text-ellipsis">{{ attachment.fileName || '附件名为空' }}</text>
+					<text @click="seeAttachment(attachment.path)" class="file_name uni-ellipsis">{{ attachment.fileName || '附件名为空' }}</text>
 					<view class="icon-container">
 						<uni-icons @click="shareAttachment(attachment.path)" :size="14" color="#2196f3" type="redo-filled"
 							style="margin-left:10px;">分享</uni-icons>
@@ -125,10 +125,7 @@
 		justify-content: flex-end;
 		/* 使图标靠右 */
 	}
-	.text-ellipsis{
-		white-space: nowrap;
-		  overflow: hidden;
-		  text-overflow: ellipsis;
-		  max-width: 22vh;
+	.file_name {
+		max-width: 22vh;
 	}
 </style>

components/ygoa/messageList.vue

@@ -1,62 +1,50 @@
 <template>
-	<view class="msg_list_content">
-		<!-- <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>
-							<uni-badge :text="unReadNum" v-if="unReadNum!==undefined&&unReadNum>0"></uni-badge>
-							<button @click.stop="clickReadButton" class="read_button" v-if="unReadNum!==undefined" :disabled="unReadNum===0?true:false">一键阅读</button>
-						</template>
-					</uni-section>
-				</template> -->
-				<View style="height: 69.5vh;">
-					<z-paging :fixed="false" @query="queryData" :value="list" :default-page-size="pSize"
-						:default-page-no="pageNo" ref="paging">
-						<template #top>
-							<view v-if="props.segments" class="segmented_control_container">
-								<uni-segmented-control :current="current" :values="segmentKeys" @clickItem="onClickItem"
-									styleType="text" activeColor="#409eff"></uni-segmented-control>
-							</view>
-						</template>
-						<view @click="handleToDetail(message)" v-for="(message, index) in list" :key="index"
-							:class="message.isread == 'Y' || message.if_read ? ' ' : 'message_container_unread'"
-							class="message_container">
-							<uni-card :is-full="true" padding="5px 10px">
-								<template v-slot:title>
-									<uni-row>
-										<view class="message_top_container">
-											<text class="message_user">
-												{{ message.name }}
-											</text>
+	<view class="msg_list_container">
+		<View style="height: 63.5vh;">
+			<z-paging :fixed="false" @query="queryData" :value="list" :default-page-size="pSize"
+				:default-page-no="pageNo" ref="paging">
+				<template #top>
+					<view v-if="props.segments" class="segmented_control_container">
+						<uni-segmented-control :current="current" :values="segmentKeys" @clickItem="onClickItem"
+							styleType="text" activeColor="#409eff"></uni-segmented-control>
+					</view>
+				</template>
+				<view @click="handleToDetail(message)" v-for="(message, index) in list" :key="index"
+					:class="message.isread == 'Y' || message.if_read ? ' ' : 'message_container_unread'"
+					class="message_container">
+					<uni-card :is-full="true" padding="5px 10px">
+						<template v-slot:title>
+							<uni-row>
+								<view class="message_top_container">
+									<text class="message_user">
+										{{ message.name }}
+									</text>
+								</view>
+							</uni-row>
+							<uni-row>
+								<view class="message_mid_container">
+									<uni-col :xs="18" :sm="20">
+										<view class="message_title uni-ellipsis">
+											{{ message.title }}
 										</view>
-									</uni-row>
-									<uni-row>
-										<view class="message_mid_container">
-											<uni-col :xs="18" :sm="20">
-												<view class="message_title hidden_over">
-													{{ message.title }}
-												</view>
-											</uni-col>
-											<uni-col :xs="6" :sm="4">
-												<view class="message_time">
-													{{ formatDate(message.sendtime) }}
-												</view>
-											</uni-col>
+									</uni-col>
+									<uni-col :xs="6" :sm="4">
+										<view class="message_time">
+											{{ formatDate(message.sendtime) }}
 										</view>
-									</uni-row>
-								</template>
-								<view v-if="message.content" class="message_bottom_container">
-									<text class="message_content hidden_over">
-										{{ message.content }}
-									</text>
+									</uni-col>
 								</view>
-							</uni-card>
+							</uni-row>
+						</template>
+						<view v-if="message.content" class="message_bottom_container">
+							<text class="message_content uni-ellipsis">
+								{{ message.content }}
+							</text>
 						</view>
-					</z-paging>
-				</View>
-			<!-- </uni-collapse-item>
-		</uni-collapse> -->
+					</uni-card>
+				</view>
+			</z-paging>
+		</View>
 	</view>
 </template>
 
@@ -70,7 +58,7 @@ const props = defineProps({
 	segments: { type: Array, default: undefined }, // 分段器数据
 	pSize: { type: Number, default: 10 }, // 分页大小
 	pageNo: { type: Number, default: 1 }, // 默认页
-	defaultCurrent: {type: Number, default: 0}, // 默认选中项
+	defaultCurrent: { type: Number, default: 0 }, // 默认选中项
 	// unReadNum: { type: Number, default: undefined }, // 未读消息数
 })
 const emits = defineEmits([
@@ -93,7 +81,7 @@ onMounted(() => {
 // 	emits('readMsg')
 // }
 const paging = ref(null)
-const totalPage=ref(0)
+const totalPage = ref(0)
 // 数据列表
 const list = ref([])
 // 加载完成 更新数据
@@ -104,12 +92,12 @@ function complete(dataList, total, pageNo) {
 	}
 	// 第一页直接加载数据
 	if (pageNo === 1) {
-		list.value=dataList
+		list.value = dataList
 		paging.value.complete(dataList)
 		return
 	}
 	// 防止重复获取最后一次信息
-	if (props.pSize*pageNo < total) {
+	if (props.pSize * pageNo < total) {
 		paging.value.complete(dataList)
 	} else {
 		paging.value.complete([])
@@ -161,7 +149,7 @@ function scrollQuery(pageNo, pSize) {
 		type: '',
 		segmentValue: segmentValues.value[current.value]
 	}
-	
+
 	emits('scrollToBottom', params, complete)
 }
 // 跳转详情
@@ -199,30 +187,7 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.hidden_over {
-	white-space: nowrap; // 不换行
-	overflow: hidden; // 超出内容隐藏
-	text-overflow: ellipsis; // 超出部分显示省略号
-	display: inline-block;
-	max-width: 100%;
-}
-.msg_list_content {
-	.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;             
-	}
-
+.msg_list_container {
 	.message_container {
 		border-left: #7b7b7b .4rem solid;
 
@@ -236,7 +201,6 @@ defineExpose({
 		}
 
 		.message_mid_container {
-			// padding-top: 10px;
 			padding-left: 10px;
 			height: 1.8rem;
 
@@ -248,13 +212,14 @@ defineExpose({
 			.message_time {
 				color: #888;
 				text-align: right;
-				font-size: 0.8rem;
-				line-height: 1.8rem;
+				font-size: 0.8rem;			line-height: 1.8rem;
 			}
 		}
 
 		.message_bottom_container {
 			.message_content {
+				max-width: 100%;
+				display: inline-block;
 				font-size: 1rem;
 				color: #666;
 			}

components/ygoa/processList.vue

@@ -7,7 +7,7 @@
 					<uni-row>
 						<uni-col :xs="3" :sm="2">
 							<view class="icon_container">
-								<text style="font-size: 2.5rem;" class="ygoa-icon"
+								<text style="font-size: calc(40px + 0.5 * (1rem - 16px));" class="ygoa-icon"
 									:class="iconDict[process.modelName]"></text>
 							</view>
 						</uni-col>
@@ -16,12 +16,12 @@
 								<template v-slot:title>
 									<uni-row>
 										<uni-col :xs="19" :sm="22" v-if="current !== 0">
-											<view class="process_title">
+											<view class="process_title uni-ellipsis">
 												<text>{{ process.insName }}</text>
 											</view>
 										</uni-col>
 										<uni-col v-else>
-											<view class="process_title">
+											<view class="process_title uni-ellipsis">
 												<text>{{ process.insName }}</text>
 											</view>
 										</uni-col>
@@ -283,13 +283,13 @@ defineExpose({
 
 					.active_step_text {
 						color: #fff;
-						font-size: 11px;
+						font-size: 0.6875rem;
 						display: flex;
 						flex-direction: row;
 						align-items: center;
 						justify-content: center;
 						text-align: center;
-						line-height: 11px;
+						line-height: 0.6875rem;
 					}
 				}
 			}
@@ -298,11 +298,11 @@ defineExpose({
 				margin-top: 0 !important;
 
 				.u-text__value--content {
-					font-size: 16px !important;
+					font-size: 1rem !important;
 				}
 
 				.u-text__value--main {
-					font-size: 16px !important;
+					font-size: 1rem !important;
 				}
 			}
 		}
@@ -319,9 +319,6 @@ defineExpose({
 	.process_title {
 		// TODO 长度限制15字
 		line-height: 1.5rem;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
 		font-weight: 500;
 		font-size: 1.1rem;
 		margin: 5px 0;

pages/message/detail/URLView.vue

@@ -1,37 +1,36 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view>
 		<web-view :src="url"></web-view>
 	</view>
 </template>
 
 <script setup lang="ts">
-	import { onLoad } from '@dcloudio/uni-app';
-	import { ref } from 'vue';
-	import config from '@/config';
+import { onLoad } from '@dcloudio/uni-app';
+import { ref } from 'vue';
+import config from '@/config';
 
-	const url = ref('');
-	onLoad((options) => {
-		switch (options.type) {
-			case 'doc':
-				const previewDocUrl = 'https://view.xdocin.com/view?src='
-				url.value = decodeURIComponent(previewDocUrl + config.baseUrlPre + options.url);
-				break
-			// case 'download':
-			// 	url.value = decodeURIComponent(config.baseUrlPre + options.url);
-			// 	break
-			default:
-				url.value = decodeURIComponent(options.url)
-		}
-		// if(options.type=='doc'){
-		// 	const previewDocUrl='https://view.xdocin.com/view?src='
-		// 	url.value = decodeURIComponent(previewDocUrl+config.baseUrlPre+options.url)
-		// }else{
-		// 	url.value = decodeURIComponent(options.url)
-		// }
-		console.log('url', url.value);
-	});
+const url = ref('');
+onLoad((options) => {
+	switch (options.type) {
+		case 'doc':
+			const previewDocUrl = 'https://view.xdocin.com/view?src='
+			url.value = decodeURIComponent(previewDocUrl + config.baseUrlPre + options.url);
+			break
+		// case 'download':
+		// 	url.value = decodeURIComponent(config.baseUrlPre + options.url);
+		// 	break
+		default:
+			url.value = decodeURIComponent(options.url)
+	}
+	// if(options.type=='doc'){
+	// 	const previewDocUrl='https://view.xdocin.com/view?src='
+	// 	url.value = decodeURIComponent(previewDocUrl+config.baseUrlPre+options.url)
+	// }else{
+	// 	url.value = decodeURIComponent(options.url)
+	// }
+	console.log('url', url.value);
+});
 </script>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>

pages/message/index.vue

@@ -1,4 +1,5 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view class="index_container">
 		<uni-nav-bar dark :border="false" :fixed="true" title="宇光同行">
 		</uni-nav-bar>
@@ -17,7 +18,7 @@
 					<view class="process_list">
 						<process-list ref="processListRef" @clickSegment="getProcessData"
 							@clickItem="handleToProcessDetail" @scrollToBottom="getProcessPage" :current="0" :pSize="5"
-							:pageNo="1" contentHeight="69.5vh"></process-list>
+							:pageNo="1" contentHeight="63.5vh"></process-list>
 					</view>
 				</view>
 			</uni-collapse-item>
@@ -28,8 +29,11 @@
 					<uni-section title="公告" type="line" titleFontSize="1.3rem">
 					</uni-section>
 				</template>
-				<message-list @clickSegment="getNoticeData" @clickItem="handleToNoticeDetail"
-					@scrollToBottom="getNoticePage" :pSize="5" :pageNo="1" :anime="true" :open="false"></message-list>
+				<view class="notice_list">
+					<message-list @clickSegment="getNoticeData" @clickItem="handleToNoticeDetail"
+						@scrollToBottom="getNoticePage" :pSize="5" :pageNo="1" :anime="true"
+						:open="false"></message-list>
+				</view>
 			</uni-collapse-item>
 			<!-- 消息列表 -->
 			<uni-collapse-item title-border="show" :border="true" :show-animation="true"
@@ -44,27 +48,24 @@
 						</template>
 					</uni-section>
 				</template>
-				<message-list ref="msgListRef" @clickSegment="getMessageData"
-					@clickItem="handleToMessageDetail" @scrollToBottom="getMessagePage" :defaultCurrent="1" :pSize="5"
-					:pageNo="1" :segments="{ '全部': '', '未读': '0', '已读': '1' }">
-				</message-list>
+				<view class="message_list">
+					<message-list ref="msgListRef" @clickSegment="getMessageData" @clickItem="handleToMessageDetail"
+						@scrollToBottom="getMessagePage" :defaultCurrent="1" :pSize="5" :pageNo="1"
+						:segments="{ '全部': '', '未读': '0', '已读': '1' }"></message-list>
+				</view>
 			</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 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">
-			<uni-fab :pattern="{ icon: 'map-pin-ellipse' }" :popMenu="false" horizontal="right" @fabClick="toClockInBtn"></uni-fab>
-		</view>
-		<!-- AI咨询按钮 -->
-		<!-- <view class="fab_button"> -->
+		<view class="fab_button">
+			<view class="toClockInBtn">
+				<uni-fab :pattern="{ icon: 'map-pin-ellipse' }" :popMenu="false" horizontal="right"
+					@fabClick="toClockInBtn"></uni-fab>
+			</view>
+			<!-- AI咨询按钮 -->
+			<!-- <view> -->
 			<!-- <uni-fab :pattern="{ icon: 'headphones' }" :popMenu="false" horizontal="right" @fabClick="clickFabButton"></uni-fab> -->
-		<!-- </view> -->
-
+			<!-- </view> -->
+		</view>
 	</view>
 </template>
 
@@ -337,26 +338,105 @@ function setAllMsgRead() {
 	margin-top: 10rpx;
 }
 
-::v-deep .toClockInBtn {
-	.uni-fab__circle--rightBottom {
-		bottom: 100px;
-	}
-}
-
 ::v-deep .uni-badge {
-	height: 1.5rem !important;
-	min-width: calc(1.5rem + 0.5 * (1rem - 16px)) !important;
-	line-height: 1.375rem !important;
-	font-size: 1.125rem !important;
+	height: calc(1.5rem + 0px) !important;
+	min-width: calc(1.5rem + 0px) !important;
+	line-height: calc(1.375rem + 0px) !important;
+	font-size: calc(1.125rem + 0px) !important;
+	// 	height: calc(1.5rem + .5 * (1rem - 16px)) !important;
+	// 	min-width: calc(1.5rem + .5 * (1rem - 16px)) !important;
+	// 	line-height: calc(1.375rem + .5 * (1rem - 16px)) !important;
+	// 	font-size: calc(1.125rem + .5 * (1rem - 16px)) !important;
 }
 
+::v-deep .process_container {
+	.process_list {
+		.process_contant {
+			font-size: calc(14px + .5*(1rem - 16px));
+		}
+
+		.flow_step_section {
+			.uni-section .uni-section-header {
+				padding: 5px 10px;
+			}
+		}
+
+		.flow_step_container {
+			min-height: 60px;
+			margin: 10px 15px;
+
+			.u-steps {
+				.u-steps-item {
+					padding-bottom: 11px;
+
+					.u-text__value--content {
+						font-size: calc(13px + .5*(1rem - 16px)) !important;
+					}
+
+					.u-text__value--main {
+						font-size: calc(13px + .5*(1rem - 16px)) !important;
+						font-weight: 500 !important;
+					}
+
+					.u-text__value--tips {
+						font-size: calc(12px + .5*(1rem - 16px)) !important;
+					}
+
+					.redcontent {
+						.u-text__value--content {
+							color: #ff4500;
+						}
+					}
+
+					.active_step_circle {
+						width: 20px;
+						height: 20px;
+						box-sizing: border-box;
+						flex-shrink: 0;
+						border-radius: 100px;
+						border-width: 1px;
+						border-color: #A78BFA;
+						background-color: #A78BFA;
+						border-style: solid;
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						justify-content: center;			transition: background-color .3s;
+		
+						.active_step_text {
+							color: #fff;
+							font-size: 11px;
+							display: flex;
+							flex-direction: row;
+							align-items: center;
+							justify-content: center;
+							text-align: center;
+							line-height: 11px;
+						}
+					}
+				}
+		
+				.u-steps-item view:last-of-type {
+					margin-top: 0 !important;
+				}
+			}
+		}
+	}
+}
+::v-deep .notice_list {
+	.msg_list_container {
+		.zp-l-text-rpx {
+			font-size: calc(30rpx + .5*(1rem - 16px));
+		}
+	}
+}
 .read_button {
 	position: absolute;
-	top: calc(12px + 0.5 * (1rem - 16px));
-	right: calc(50px + 0.5 * (1rem - 16px));
-	height: 28px;
-	line-height: 28px;
-	font-size: 14px;
+	top: calc(12px + .5 * (1rem - 16px));
+	right: 3.125rem;
+	height: calc(1.75rem + 0px);
+	line-height: 1.75rem;
+	font-size: calc(0.875rem + 0px);
 	background-color: #007aff;
 	color: #fff;
 }
@@ -365,56 +445,29 @@ function setAllMsgRead() {
 	color: #666;           
 	opacity: 0.5;             
 }
-::v-deep .flow_step_section {
-	.uni-section .uni-section-header {
-		padding: 5px 10px;
+::v-deep .message_list {
+	.msg_list_container {
+		.segmented_control_container {
+			.segmented-control__text {
+				font-size: calc(14px + .5*(1rem - 16px));
+			}
+		}
+		.zp-l-text-rpx {
+			font-size: calc(30rpx + .5*(1rem - 16px));
+		}
 	}
 }
-
-::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;
-				box-sizing: border-box;
-				flex-shrink: 0;
-				border-radius: 100px;
-				border-width: 1px;
-				border-color: #A78BFA;
-				background-color: #A78BFA;
-				border-style: solid;
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				justify-content: center;
-				transition: background-color .3s;
-
-				.active_step_text {
-					color: #fff;
-					font-size: 11px;
-					display: flex;
-					flex-direction: row;
-					align-items: center;
-					justify-content: center;
-					text-align: center;
-					line-height: 11px;
-				}
-			}
+::v-deep .fab_button {
+	.toClockInBtn {
+		.uni-fab__circle--rightBottom {
+			bottom: 100px;
 		}
-
-		.u-steps-item view:last-of-type {
-			margin-top: 0 !important;
+	}
+	.uni-fab__circle {
+		width: calc(55px + .5*(1rem - 16px)) !important;
+		height: calc(55px + .5*(1rem - 16px)) !important;
+		.uni-icons {
+			font-size: calc(32px + .5*(1rem - 16px)) !important;
 		}
 	}
 }