first commit
This commit is contained in:
@@ -0,0 +1,357 @@
|
||||
<template>
|
||||
<!-- 导航栏 -->
|
||||
<view class=""
|
||||
style=" z-index: 100; padding:50rpx 20rpx 18rpx;box-sizing: border-box; position: fixed;top: 0; left: 0; width: 100vw; background-color: #fff; display: flex; align-items: center; justify-content: space-between; ">
|
||||
<view class="" @click="Service.GoPageBack()">
|
||||
<up-icon name="arrow-left" size="32rpx"></up-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
消息通知
|
||||
</view>
|
||||
<view class="" style="font-size: 22rpx; color: #999999; " >
|
||||
全部已读
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="width: 100%; height: 108rpx; ">
|
||||
|
||||
</view>
|
||||
<view v-if="loading" class="">
|
||||
<!-- 消息列表骨架 -->
|
||||
<view class="skeleton-list">
|
||||
<!-- 模拟4条消息 -->
|
||||
<view v-for="index in 4" :key="index" class="skeleton-message-item">
|
||||
<view class="skeleton-message-icon">
|
||||
<view class="skeleton-icon-container"></view>
|
||||
<view class="skeleton-unread-dot"></view>
|
||||
</view>
|
||||
<view class="skeleton-message-content">
|
||||
<view class="skeleton-message-header">
|
||||
<view class="skeleton-message-title"></view>
|
||||
<view class="skeleton-message-time"></view>
|
||||
</view>
|
||||
<view class="skeleton-message-desc">
|
||||
<view class="skeleton-desc-line"></view>
|
||||
<view class="skeleton-desc-line short"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多骨架 -->
|
||||
<view class="skeleton-load-more"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="message-center-container">
|
||||
<!-- 标签页 -->
|
||||
<up-tabs :list="tabList" :current="currentTab" @change="handleTabChange" lineWidth='60' :scrollable="false"
|
||||
lineColor="var(--nav-mian)"
|
||||
:activeStyle="{ color: 'var(--nav-mian)', fontWeight: 'bold', transform: 'scale(1.05)'}"
|
||||
:inactiveStyle="{color: '#606266', transform: 'scale(1)'}"></up-tabs>
|
||||
<!-- 消息列表 -->
|
||||
<scroll-view scroll-y class="message-list" :show-scrollbar="false">
|
||||
<!-- 根据不同标签显示不同的消息 -->
|
||||
<view v-for="(message, index) in 4" :key="index" class="message-item">
|
||||
<view class="message-icon">
|
||||
<view class="icon-container">
|
||||
<image v-if="currentTab === 1" style="width: 100%; height: 100%;"
|
||||
:src=" Service.GetIconImg('/static/index/home/shop.png')" mode=""></image>
|
||||
<image v-if="currentTab === 2" style="width: 100%; height: 100%;"
|
||||
:src=" Service.GetIconImg('/static/index/home/custom.png')" mode=""></image>
|
||||
<image v-if="currentTab === 3" style="width: 100%; height: 100%;"
|
||||
:src=" Service.GetIconImg('/static/index/home/system.png')" mode=""></image>
|
||||
</view>
|
||||
<view class="unread-dot"></view>
|
||||
</view>
|
||||
<view class="message-content">
|
||||
<view class="message-header">
|
||||
<text class="message-title">系统维护通知</text>
|
||||
<text class="message-time">10分钟前</text>
|
||||
</view>
|
||||
<text class="message-desc">为了给您提供更好的服务体验，系统将于今晚24:00-次日凌晨2:00进行例行维护</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<up-loadmore :status="status" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { Service } from "@/Service/Service"
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
// 标签页数据
|
||||
const tabList = ref([
|
||||
{ name: '全部' },
|
||||
{ name: '订单通知' },
|
||||
{ name: '客户消息' },
|
||||
{ name: '系统通知' }
|
||||
]);
|
||||
// 当前选中标签
|
||||
const currentTab = ref(0);
|
||||
|
||||
// 加载状态
|
||||
let loading = ref(true);
|
||||
let status = ref('nomore')
|
||||
|
||||
onLoad(() => {
|
||||
setTimeout(() => { loading.value = false; }, 1500);
|
||||
})
|
||||
|
||||
// 处理标签切换
|
||||
const handleTabChange = (e) => {
|
||||
currentTab.value = e.index;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 消息列表骨架 */
|
||||
.skeleton-list {
|
||||
padding: 30rpx;
|
||||
height: calc(100vh - 220rpx);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeleton-message-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-message-icon {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.skeleton-icon-container {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 16rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-unread-dot {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
right: -8rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 50%;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-message-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.skeleton-message-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.skeleton-message-title {
|
||||
width: 200rpx;
|
||||
height: 44rpx;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-message-time {
|
||||
width: 100rpx;
|
||||
height: 32rpx;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 6rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-message-desc {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.skeleton-desc-line {
|
||||
height: 40rpx;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 8rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.skeleton-desc-line.short {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.skeleton-load-more {
|
||||
height: 60rpx;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 30rpx;
|
||||
margin-top: 20rpx;
|
||||
animation: skeleton-loading 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
/* 骨架屏加载动画 */
|
||||
@keyframes skeleton-loading {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 设置延迟，让骨架屏各部分加载动画错开 */
|
||||
.skeleton-tab:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.skeleton-tab:nth-child(2) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.skeleton-tab:nth-child(3) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.skeleton-tab:nth-child(4) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.skeleton-message-item:nth-child(1) {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.skeleton-message-item:nth-child(2) {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
|
||||
.skeleton-message-item:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.skeleton-message-item:nth-child(4) {
|
||||
animation-delay: 0.45s;
|
||||
}
|
||||
|
||||
// end
|
||||
|
||||
.message-center-container {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.read-all-btn {
|
||||
position: absolute;
|
||||
top: 88rpx;
|
||||
right: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
padding: 30rpx;
|
||||
height: calc(100vh - 220rpx);
|
||||
}
|
||||
|
||||
.message-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.message-icon {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.unread-dot {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
right: -8rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background-color: #FF4444;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #ffffff;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.message-desc {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 100rpx 0;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user