Skip to content

陈岩 / CvaYap-app

Go to a project
Commit 2c67707a by anxin
Options

fix: 优化消息页面状态loading及详情页按钮处理

1 parent 9e4b3e50
Inline Side-by-side
Showing 3 changed files with 164 additions and 48 deletions
package-lock.json
{
"name": "CvaYap-app",
"lockfileVersion": 3,
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"@intlify/core-base": {
"packages": {
"": {
"dependencies": {
"dayjs": "^1.11.18",
"echarts": "^5.6.0",
"pinyin-pro": "^3.26.0",
"tslib": "^2.8.1",
"vue-i18n": "^11.1.3",
"zrender": "^5.6.1"
}
},
"node_modules/@intlify/core-base": {
"version": "11.1.3",
"resolved": "https://registry.npmmirror.com/@intlify/core-base/-/core-base-11.1.3.tgz",
"integrity": "sha512-cMuHunYO7LE80azTitcvEbs1KJmtd6g7I5pxlApV3Jo547zdO3h31/0uXpqHc+Y3RKt1wo2y68RGSx77Z1klyA==",
"requires": {
"dependencies": {
"@intlify/message-compiler": "11.1.3",
"@intlify/shared": "11.1.3"
},
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://github.com/sponsors/kazupon"
}
},
"@intlify/message-compiler": {
"node_modules/@intlify/message-compiler": {
"version": "11.1.3",
"resolved": "https://registry.npmmirror.com/@intlify/message-compiler/-/message-compiler-11.1.3.tgz",
"integrity": "sha512-7rbqqpo2f5+tIcwZTAG/Ooy9C8NDVwfDkvSeDPWUPQW+Dyzfw2o9H103N5lKBxO7wxX9dgCDjQ8Umz73uYw3hw==",
"requires": {
"dependencies": {
"@intlify/shared": "11.1.3",
"source-map-js": "^1.0.2"
},
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://github.com/sponsors/kazupon"
}
},
"@intlify/shared": {
"node_modules/@intlify/shared": {
"version": "11.1.3",
"resolved": "https://registry.npmmirror.com/@intlify/shared/-/shared-11.1.3.tgz",
"integrity": "sha512-pTFBgqa/99JRA2H1qfyqv97MKWJrYngXBA/I0elZcYxvJgcCw3mApAoPW3mJ7vx3j+Ti0FyKUFZ4hWxdjKaxvA=="
"integrity": "sha512-pTFBgqa/99JRA2H1qfyqv97MKWJrYngXBA/I0elZcYxvJgcCw3mApAoPW3mJ7vx3j+Ti0FyKUFZ4hWxdjKaxvA==",
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://github.com/sponsors/kazupon"
}
},
"@vue/devtools-api": {
"node_modules/@vue/devtools-api": {
"version": "6.6.4",
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
},
"dayjs": {
"node_modules/dayjs": {
"version": "1.11.18",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.18.tgz",
"integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA=="
},
"echarts": {
"node_modules/echarts": {
"version": "5.6.0",
"requires": {
"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.6.1"
},
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
},
"pinyin-pro": {
"version": "3.26.0"
"node_modules/echarts/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
},
"node_modules/pinyin-pro": {
"version": "3.26.0",
"integrity": "sha512-HcBZZb0pvm0/JkPhZHWA5Hqp2cWHXrrW/WrV+OtaYYM+kf35ffvZppIUuGmyuQ7gDr1JDJKMkbEE+GN0wfMoGg=="
},
"source-map-js": {
"node_modules/source-map-js": {
"version": "1.2.1",
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
"engines": {
"node": ">=0.10.0"
}
},
"tslib": {
"version": "2.8.1"
"node_modules/tslib": {
"version": "2.8.1",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
},
"vue-i18n": {
"node_modules/vue-i18n": {
"version": "11.1.3",
"requires": {
"integrity": "sha512-Pcylh9z9S5+CJAqgbRZ3EKxFIBIrtY5YUppU722GIT65+Nukm0TCqiQegZnNLCZkXGthxe0cpqj0AoM51H+6Gw==",
"deprecated": "This version is NOT deprecated. Previous deprecation was a mistake.",
"dependencies": {
"@intlify/core-base": "11.1.3",
"@intlify/shared": "11.1.3",
"@vue/devtools-api": "^6.5.0"
},
"engines": {
"node": ">= 16"
},
"funding": {
"url": "https://github.com/sponsors/kazupon"
},
"peerDependencies": {
"vue": "^3.0.0"
}
},
"zrender": {
"node_modules/zrender": {
"version": "5.6.1",
"requires": {
"tslib": "2.3.0"
},
"integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
"dependencies": {
"tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
"tslib": "2.3.0"
}
},
"node_modules/zrender/node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
}
}
}
pages/message/index.vue
......@@ -39,16 +39,28 @@
<view style="height: 230rpx; background-color: #ffffff"></view>
<view class="h-c-container">
<view class="rank">
<MessageList ref="messageListRef" @itemClick="handleMessageClick" @selectionChange="handleSelectionChange"
@editModeChange="handleEditModeChange" @falseAlarm="handleFalseAlarm" @confirm="handleConfirm"
v-if="!isShowEmptyFlag" :messages="messageList">
</MessageList>
<view class="p-empty" v-else style="margin-top: 40rpx; padding-bottom: 40rpx">
<image class="p-empty-img" src="/static/common/empty.png" mode=""></image>
<text class="p-empty-text chart-text">{{
t("maintenance.monitor.project.empty.text")
}}</text>
<!-- 骨架屏 loading -->
<view v-if="isLoading" class="skeleton-list">
<view v-for="i in 7" :key="i" class="skeleton-item">
<view class="skeleton-icon"></view>
<view class="skeleton-content">
<view class="skeleton-line skeleton-short"></view>
<view class="skeleton-line skeleton-long"></view>
</view>
</view>
</view>
<template v-else>
<MessageList ref="messageListRef" @itemClick="handleMessageClick" @selectionChange="handleSelectionChange"
@editModeChange="handleEditModeChange" @falseAlarm="handleFalseAlarm" @confirm="handleConfirm"
v-if="!isShowEmptyFlag" :messages="messageList">
</MessageList>
<view class="p-empty" v-else style="margin-top: 40rpx; padding-bottom: 40rpx">
<image class="p-empty-img" src="/static/common/empty.png" mode=""></image>
<text class="p-empty-text chart-text">{{
t("maintenance.monitor.project.empty.text")
}}</text>
</view>
</template>
<!-- <ChartsNvue style="height: 580px;flex:none" ref="rankingRef" /> -->
</view>
<uv-load-more v-if="messageList.length > pageSize" :status="loadMoreStatus" :loading-text="loadingText"
......@@ -122,6 +134,8 @@
const messageList = ref([]);
// 是否显示空数据
const isShowEmptyFlag = ref(false);
// 是否正在加载
const isLoading = ref(true);
const scrollTop = ref(0);
// 保存滚动位置的键
......@@ -290,6 +304,7 @@ onMounted(() => {
messageList.value = [];
isEditMode.value = false;
messageListRef.value && messageListRef.value.toggleEditMode('force');
isLoading.value = true;
}
loadMoreStatus.value = "loading";
......@@ -318,6 +333,9 @@ onMounted(() => {
undefined,
startTime: params.value.startDate,
endTime: params.value.endDate,
// mock
// startTime: '2025-01-01',
// endTime: '2025-12-31',
pageNum: pageNum.value,
pageSize: pageSize.value,
};
......@@ -409,6 +427,8 @@ onMounted(() => {
// }, 1000);
} catch (error) {
uni.stopPullDownRefresh()
} finally {
isLoading.value = false;
}
};
......@@ -645,4 +665,56 @@ onShow(() => {
border-radius: 16rpx;
flex: 1;
}
.skeleton-list {
padding: 0;
}
.skeleton-item {
display: flex;
padding: 32rpx 0;
border-bottom: 2rpx solid #eef0f3;
align-items: center;
gap: 26rpx;
&:last-child {
border-bottom: none;
}
}
@keyframes skeleton-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.skeleton-icon {
width: 96rpx;
height: 96rpx;
border-radius: 50%;
flex-shrink: 0;
background-color: #ebebeb;
animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-content {
flex: 1;
}
.skeleton-line {
height: 28rpx;
border-radius: 8rpx;
margin-bottom: 18rpx;
background-color: #ebebeb;
animation: skeleton-pulse 1.4s ease-in-out infinite;
&:last-child {
margin-bottom: 0;
}
}
.skeleton-short {
width: 40%;
}
.skeleton-long {
width: 70%;
}
</style>
subPackages/accountGroup/pages/message/messageOperation.vue
......@@ -90,14 +90,14 @@
<!-- 底部按钮 -->
<view class="action-buttons" v-if="isResolveFlag == 1">
<view class="btn btn-ignore" @click="handleIgnore">
<!-- <view class="btn btn-ignore" @click="handleIgnore">
<image
src="/static/message/undo.png"
mode="aspectFit"
class="btn-icon"
></image>
<text class="btn-text">{{ t('maintenance.monitor.project.ignore') }}</text>
</view>
</view> -->
<view
class="btn btn-false"
@click="handleOpenAlarmHandlePop('FALSE_ALARM')"
......@@ -424,6 +424,7 @@ const handleIgnore = () => {
justify-content: space-between;
padding: 30rpx 8rpx;
margin-top: auto;
gap: 24rpx;
.btn {
display: flex;
......@@ -432,6 +433,7 @@ const handleIgnore = () => {
font-weight: 400;
font-size: 28rpx;
color: #4e515e;
height: 76rpx;
&.btn-ignore {
flex-direction: column;
......@@ -448,7 +450,6 @@ const handleIgnore = () => {
&.btn-false {
flex: 1;
margin: 0 20rpx 0 54rpx;
background: rgba(209, 218, 227, 0.4);
border-radius: 48rpx 48rpx 48rpx 48rpx;
font-weight: 400;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!