949 lines
22 KiB
Plaintext
949 lines
22 KiB
Plaintext
<template>
|
|
<ServicePageScaffold title="消息中心" fallback-url="/pages/mall/delivery/home/index" :hide-header="true">
|
|
<view class="delivery-messages-page">
|
|
<view class="delivery-messages-hero">
|
|
<view class="delivery-messages-hero-top">
|
|
<view class="delivery-messages-hero-main">
|
|
<text class="delivery-messages-hero-title">业务消息</text>
|
|
<text class="delivery-messages-hero-subtitle">{{ getCurrentTabLabel() }} · {{ getCurrentTabSubtitle() }}</text>
|
|
</view>
|
|
<view class="delivery-messages-hero-badge">
|
|
<text class="delivery-messages-hero-badge-text">{{ formatTabCount(getTabCount(currentTab)) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="delivery-messages-hero-tip-box">
|
|
<text class="delivery-messages-hero-tip">新工单、改派、异常、验收与结算消息会在这里汇总。</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="delivery-messages-card delivery-messages-filter-card">
|
|
<view class="delivery-messages-card-header">
|
|
<view>
|
|
<text class="delivery-messages-card-title">消息分类</text>
|
|
<text class="delivery-messages-card-subtitle">横向滑动切换消息分类，当前面板会同步展示对应消息</text>
|
|
</view>
|
|
</view>
|
|
<scroll-view
|
|
class="status-scroll"
|
|
direction="horizontal"
|
|
:show-scrollbar="false"
|
|
:scroll-into-view="activeTabViewId"
|
|
scroll-with-animation="true"
|
|
>
|
|
<view class="status-tabs-row">
|
|
<view
|
|
v-for="item in tabs"
|
|
:key="item.value"
|
|
:id="'status-tab-' + item.value"
|
|
class="status-tab-item"
|
|
:class="getTabItemClass(item.value)"
|
|
@click="switchTab(item.value)"
|
|
>
|
|
<view class="status-tab-content">
|
|
<text class="status-tab-text" :class="getTabTextClass(item.value)">{{ item.label }}</text>
|
|
<text class="status-tab-count" :class="getTabCountClass(item.value)">{{ formatTabCount(getTabCount(item.value)) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view v-if="messages.length > 0" class="delivery-messages-card delivery-messages-summary-card">
|
|
<view class="delivery-messages-card-header">
|
|
<view>
|
|
<text class="delivery-messages-card-title">消息概览</text>
|
|
<text class="delivery-messages-card-subtitle">关注未读、今日更新与全部消息总量</text>
|
|
</view>
|
|
</view>
|
|
<view class="message-summary">
|
|
<view class="summary-card summary-card-accent">
|
|
<text class="summary-value">{{ messageStats.unread }}</text>
|
|
<text class="summary-label">未读消息</text>
|
|
</view>
|
|
<view class="summary-card">
|
|
<text class="summary-value summary-value-dark">{{ messageStats.today }}</text>
|
|
<text class="summary-label">今日更新</text>
|
|
</view>
|
|
<view class="summary-card summary-card-last">
|
|
<text class="summary-value summary-value-dark">{{ messageStats.all }}</text>
|
|
<text class="summary-label">全部消息</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="delivery-messages-card delivery-messages-list-card">
|
|
<view class="delivery-messages-card-header">
|
|
<view>
|
|
<text class="delivery-messages-card-title">消息列表</text>
|
|
<text class="delivery-messages-card-subtitle">突出消息级别、业务类型、未读状态与关联工单</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="filteredMessages.length == 0" class="empty-box"><text class="empty-text">{{ getEmptyText() }}</text></view>
|
|
<view
|
|
v-for="item in filteredMessages"
|
|
:key="item.id"
|
|
class="message-card"
|
|
:class="getMessageCardClass(item.title, item.type, item.read)"
|
|
@click="openMessage(item.orderId)"
|
|
>
|
|
<view class="message-icon" :class="getMessageLevelClass(item.title, item.type)">
|
|
<text class="message-icon-text" :class="getMessageTextLevelClass(item.title, item.type)">{{ getMessageIconText(item.title, item.type) }}</text>
|
|
</view>
|
|
<view class="message-main">
|
|
<view class="message-title-row">
|
|
<text class="message-title" :class="getMessageTitleClass(item.title, item.type, item.read)">{{ item.title }}</text>
|
|
<text v-if="!item.read" class="message-badge">未读</text>
|
|
<text v-else class="message-read-text">已读</text>
|
|
</view>
|
|
<text class="message-biz-line" :class="getMessageTextLevelClass(item.title, item.type)">{{ getMessageBizLine(item.title, item.type, item.orderId) }}</text>
|
|
<text class="message-content">{{ item.content }}</text>
|
|
<text class="message-meta">{{ item.createdAt }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="delivery-messages-safe"></view>
|
|
</view>
|
|
</ServicePageScaffold>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
|
import type { DeliveryMessageType } from '@/types/delivery.uts'
|
|
import { getDeliveryMessages } from '@/services/deliveryService.uts'
|
|
import { requireDeliveryAuth } from '@/utils/deliveryAuth.uts'
|
|
|
|
type MessageStatsType = {
|
|
all: number
|
|
unread: number
|
|
dispatch: number
|
|
exception: number
|
|
result: number
|
|
notice: number
|
|
today: number
|
|
}
|
|
|
|
const tabs = [
|
|
{ label: '全部', value: 'all' },
|
|
{ label: '未读', value: 'unread' },
|
|
{ label: '调度', value: 'dispatch' },
|
|
{ label: '异常', value: 'exception' },
|
|
{ label: '结果', value: 'result' },
|
|
{ label: '通知', value: 'notice' }
|
|
]
|
|
|
|
const currentTab = ref('all')
|
|
const activeTabViewId = ref('status-tab-all')
|
|
const messages = ref([] as Array<DeliveryMessageType>)
|
|
const filteredMessages = ref([] as Array<DeliveryMessageType>)
|
|
const messageStats = ref(createEmptyMessageStats())
|
|
|
|
function getCurrentTabLabel(): string {
|
|
for (let i = 0; i < tabs.length; i++) {
|
|
if (tabs[i].value == currentTab.value) {
|
|
return tabs[i].label
|
|
}
|
|
}
|
|
return '全部'
|
|
}
|
|
|
|
function getCurrentTabSubtitle(): string {
|
|
if (currentTab.value == 'unread') {
|
|
return '优先处理未读提醒，避免遗漏服务动作'
|
|
}
|
|
if (currentTab.value == 'dispatch') {
|
|
return '关注派单、改派、出发与签到类调度消息'
|
|
}
|
|
if (currentTab.value == 'exception') {
|
|
return '优先处理异常与风险反馈，保障服务连续性'
|
|
}
|
|
if (currentTab.value == 'result') {
|
|
return '查看验收、提交与结算结果类消息'
|
|
}
|
|
if (currentTab.value == 'notice') {
|
|
return '查看系统公告、平台通知与通用提醒'
|
|
}
|
|
return '集中查看全部业务消息与处理进展'
|
|
}
|
|
|
|
function createEmptyMessageStats(): MessageStatsType {
|
|
return {
|
|
all: 0,
|
|
unread: 0,
|
|
dispatch: 0,
|
|
exception: 0,
|
|
result: 0,
|
|
notice: 0,
|
|
today: 0
|
|
} as MessageStatsType
|
|
}
|
|
|
|
async function loadData() {
|
|
const authResult = await requireDeliveryAuth({ redirectOnFail: true, toastOnFail: true })
|
|
if (!authResult.ok) {
|
|
messages.value = [] as Array<DeliveryMessageType>
|
|
filteredMessages.value = [] as Array<DeliveryMessageType>
|
|
refreshSummary([] as Array<DeliveryMessageType>)
|
|
return
|
|
}
|
|
messages.value = await getDeliveryMessages()
|
|
refreshSummary(messages.value)
|
|
applyFilter()
|
|
}
|
|
|
|
function isValidTab(tab: string): boolean {
|
|
for (let i = 0; i < tabs.length; i++) {
|
|
if (tabs[i].value == tab) {
|
|
return true
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
|
|
function syncActiveTabViewId(): void {
|
|
activeTabViewId.value = 'status-tab-' + currentTab.value
|
|
}
|
|
|
|
function applyTab(tab: string): void {
|
|
if (tab == '' || !isValidTab(tab)) {
|
|
currentTab.value = 'all'
|
|
} else {
|
|
currentTab.value = tab
|
|
}
|
|
syncActiveTabViewId()
|
|
applyFilter()
|
|
}
|
|
|
|
function switchTab(tab: string) {
|
|
if (currentTab.value == tab) {
|
|
return
|
|
}
|
|
applyTab(tab)
|
|
}
|
|
|
|
function matchesTabMessage(tab: string, item: DeliveryMessageType): boolean {
|
|
if (tab == 'all') {
|
|
return true
|
|
}
|
|
if (tab == 'unread') {
|
|
return !item.read
|
|
}
|
|
if (tab == 'dispatch') {
|
|
return item.type == 'order' || item.type == 'dispatch' || item.type == 'reminder' || item.type == 'checkin'
|
|
}
|
|
if (tab == 'exception') {
|
|
return item.type == 'exception'
|
|
}
|
|
if (tab == 'result') {
|
|
return item.type == 'result' || item.type == 'settlement'
|
|
}
|
|
if (tab == 'notice') {
|
|
return item.type == 'notice'
|
|
}
|
|
return true
|
|
}
|
|
|
|
function applyFilter(): void {
|
|
const nextList = [] as Array<DeliveryMessageType>
|
|
for (let i = 0; i < messages.value.length; i++) {
|
|
const item = messages.value[i]
|
|
if (matchesTabMessage(currentTab.value, item)) {
|
|
nextList.push(item)
|
|
}
|
|
}
|
|
filteredMessages.value = nextList
|
|
}
|
|
|
|
function getTabCount(tab: string): number {
|
|
if (tab == 'unread') {
|
|
return messageStats.value.unread
|
|
}
|
|
if (tab == 'dispatch') {
|
|
return messageStats.value.dispatch
|
|
}
|
|
if (tab == 'exception') {
|
|
return messageStats.value.exception
|
|
}
|
|
if (tab == 'result') {
|
|
return messageStats.value.result
|
|
}
|
|
if (tab == 'notice') {
|
|
return messageStats.value.notice
|
|
}
|
|
return messageStats.value.all
|
|
}
|
|
|
|
function formatTabCount(count: number): string {
|
|
if (count > 99) {
|
|
return '99+'
|
|
}
|
|
return '' + count
|
|
}
|
|
|
|
function getTabLevel(tab: string): string {
|
|
if (tab == 'exception') {
|
|
return 'danger'
|
|
}
|
|
if (tab == 'dispatch' || tab == 'unread') {
|
|
return 'warning'
|
|
}
|
|
if (tab == 'result') {
|
|
return 'success'
|
|
}
|
|
if (tab == 'notice') {
|
|
return 'neutral'
|
|
}
|
|
return 'default'
|
|
}
|
|
|
|
function getTabItemClass(tab: string): string {
|
|
if (currentTab.value != tab) {
|
|
return ''
|
|
}
|
|
const level = getTabLevel(tab)
|
|
if (level == 'danger') {
|
|
return 'status-tab-active status-tab-active-danger'
|
|
}
|
|
if (level == 'warning') {
|
|
return 'status-tab-active status-tab-active-warning'
|
|
}
|
|
if (level == 'success') {
|
|
return 'status-tab-active status-tab-active-success'
|
|
}
|
|
if (level == 'neutral') {
|
|
return 'status-tab-active status-tab-active-neutral'
|
|
}
|
|
return 'status-tab-active'
|
|
}
|
|
|
|
function getTabTextClass(tab: string): string {
|
|
if (currentTab.value != tab) {
|
|
return ''
|
|
}
|
|
const level = getTabLevel(tab)
|
|
if (level == 'danger') {
|
|
return 'status-tab-text-active status-tab-text-active-danger'
|
|
}
|
|
if (level == 'warning') {
|
|
return 'status-tab-text-active status-tab-text-active-warning'
|
|
}
|
|
if (level == 'success') {
|
|
return 'status-tab-text-active status-tab-text-active-success'
|
|
}
|
|
if (level == 'neutral') {
|
|
return 'status-tab-text-active status-tab-text-active-neutral'
|
|
}
|
|
return 'status-tab-text-active'
|
|
}
|
|
|
|
function getTabCountClass(tab: string): string {
|
|
if (tab == 'unread' && messageStats.value.unread > 0) {
|
|
if (currentTab.value == tab) {
|
|
return 'status-tab-count-active status-tab-count-unread status-tab-count-unread-active'
|
|
}
|
|
return 'status-tab-count-unread'
|
|
}
|
|
if (currentTab.value == tab) {
|
|
return 'status-tab-count-active'
|
|
}
|
|
return ''
|
|
}
|
|
|
|
function padDatePart(value: number): string {
|
|
if (value < 10) {
|
|
return '0' + value
|
|
}
|
|
return '' + value
|
|
}
|
|
|
|
function getTodayText(): string {
|
|
const now = new Date()
|
|
const year = now.getFullYear()
|
|
const month = now.getMonth() + 1
|
|
const day = now.getDate()
|
|
return '' + year + '-' + padDatePart(month) + '-' + padDatePart(day)
|
|
}
|
|
|
|
function refreshSummary(list: Array<DeliveryMessageType>): void {
|
|
const nextStats = createEmptyMessageStats()
|
|
const todayText = getTodayText()
|
|
nextStats.all = list.length
|
|
for (let i = 0; i < list.length; i++) {
|
|
const item = list[i]
|
|
if (!item.read) {
|
|
nextStats.unread++
|
|
}
|
|
if (item.type == 'order' || item.type == 'dispatch' || item.type == 'reminder' || item.type == 'checkin') {
|
|
nextStats.dispatch++
|
|
}
|
|
if (item.type == 'exception') {
|
|
nextStats.exception++
|
|
}
|
|
if (item.type == 'result' || item.type == 'settlement') {
|
|
nextStats.result++
|
|
}
|
|
if (item.type == 'notice') {
|
|
nextStats.notice++
|
|
}
|
|
if (item.createdAt.length >= 10 && item.createdAt.substring(0, 10) == todayText) {
|
|
nextStats.today++
|
|
}
|
|
}
|
|
messageStats.value = nextStats
|
|
}
|
|
|
|
function getEmptyText(): string {
|
|
if (currentTab.value == 'unread') {
|
|
return '暂无未读消息'
|
|
}
|
|
if (currentTab.value == 'dispatch') {
|
|
return '暂无调度消息'
|
|
}
|
|
if (currentTab.value == 'exception') {
|
|
return '暂无异常消息'
|
|
}
|
|
if (currentTab.value == 'result') {
|
|
return '暂无结果消息'
|
|
}
|
|
if (currentTab.value == 'notice') {
|
|
return '暂无通知消息'
|
|
}
|
|
return '暂无消息'
|
|
}
|
|
|
|
function openMessage(orderId: string) {
|
|
if (orderId == '') {
|
|
uni.showToast({
|
|
title: '暂无关联工单',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.navigateTo({ url: '/pages/mall/delivery/orders/detail?id=' + orderId })
|
|
}
|
|
|
|
function getMessageIconText(title: string, messageType: string): string {
|
|
if (title.indexOf('异常') >= 0 || messageType == 'exception') {
|
|
return '!'
|
|
}
|
|
if (title.indexOf('新工单') >= 0 || title.indexOf('待接单') >= 0 || messageType == 'order' || messageType == 'dispatch') {
|
|
return '单'
|
|
}
|
|
if (title.indexOf('出发') >= 0 || title.indexOf('签到') >= 0 || messageType == 'reminder' || messageType == 'checkin') {
|
|
return '行'
|
|
}
|
|
if (title.indexOf('结算') >= 0 || messageType == 'settlement') {
|
|
return '结'
|
|
}
|
|
if (title.indexOf('公告') >= 0 || title.indexOf('系统') >= 0 || messageType == 'notice') {
|
|
return '告'
|
|
}
|
|
if (messageType == 'result') {
|
|
return '验'
|
|
}
|
|
return '息'
|
|
}
|
|
|
|
function getMessageLevel(title: string, messageType: string): string {
|
|
if (title.indexOf('异常') >= 0 || messageType == 'exception') {
|
|
return 'danger'
|
|
}
|
|
if (title.indexOf('新工单') >= 0 || title.indexOf('待接单') >= 0 || messageType == 'order' || messageType == 'dispatch') {
|
|
return 'warning'
|
|
}
|
|
if (title.indexOf('出发') >= 0 || title.indexOf('签到') >= 0 || messageType == 'reminder' || messageType == 'checkin') {
|
|
return 'info'
|
|
}
|
|
if (title.indexOf('结算') >= 0 || messageType == 'settlement' || messageType == 'result') {
|
|
return 'success'
|
|
}
|
|
return 'neutral'
|
|
}
|
|
|
|
function getMessageLevelClass(title: string, messageType: string): string {
|
|
const level = getMessageLevel(title, messageType)
|
|
if (level == 'danger') {
|
|
return 'message-level-danger'
|
|
}
|
|
if (level == 'warning') {
|
|
return 'message-level-warning'
|
|
}
|
|
if (level == 'info') {
|
|
return 'message-level-info'
|
|
}
|
|
if (level == 'success') {
|
|
return 'message-level-success'
|
|
}
|
|
return 'message-level-neutral'
|
|
}
|
|
|
|
function getMessageTextLevelClass(title: string, messageType: string): string {
|
|
const level = getMessageLevel(title, messageType)
|
|
if (level == 'danger') {
|
|
return 'message-text-danger'
|
|
}
|
|
if (level == 'warning') {
|
|
return 'message-text-warning'
|
|
}
|
|
if (level == 'info') {
|
|
return 'message-text-info'
|
|
}
|
|
if (level == 'success') {
|
|
return 'message-text-success'
|
|
}
|
|
return 'message-text-neutral'
|
|
}
|
|
|
|
function getMessageTitleClass(title: string, messageType: string, read: boolean): string {
|
|
const levelClass = getMessageTextLevelClass(title, messageType)
|
|
if (read) {
|
|
return 'message-title-read ' + levelClass
|
|
}
|
|
return levelClass
|
|
}
|
|
|
|
function getMessageCardClass(title: string, messageType: string, read: boolean): string {
|
|
const level = getMessageLevel(title, messageType)
|
|
let cardClass = read ? 'message-read' : 'message-unread'
|
|
if (level == 'danger') {
|
|
cardClass += ' message-card-danger'
|
|
}
|
|
return cardClass
|
|
}
|
|
|
|
function getMessageBizLine(title: string, messageType: string, orderId: string): string {
|
|
let bizText = '业务类型：服务通知'
|
|
if (messageType == 'order' || title.indexOf('新工单') >= 0 || title.indexOf('待接单') >= 0) {
|
|
bizText = '业务类型：基础照护'
|
|
} else if (messageType == 'dispatch' || title.indexOf('改派') >= 0) {
|
|
bizText = '业务类型：陪诊协助'
|
|
} else if (messageType == 'reminder' || title.indexOf('出发') >= 0) {
|
|
bizText = '业务类型：康复指导'
|
|
} else if (messageType == 'checkin' || title.indexOf('签到') >= 0) {
|
|
bizText = '业务类型：上门签到'
|
|
} else if (messageType == 'exception' || title.indexOf('异常') >= 0) {
|
|
bizText = '业务类型：异常处理'
|
|
} else if (messageType == 'result' || title.indexOf('验收') >= 0) {
|
|
bizText = '业务类型：服务验收'
|
|
} else if (messageType == 'settlement' || title.indexOf('结算') >= 0) {
|
|
bizText = '业务类型：结算通知'
|
|
} else if (messageType == 'notice' || title.indexOf('系统') >= 0 || title.indexOf('公告') >= 0) {
|
|
bizText = '业务类型：系统通知'
|
|
}
|
|
if (orderId != '') {
|
|
return bizText + ' · 关联工单可查看详情'
|
|
}
|
|
return bizText + ' · 暂无关联工单'
|
|
}
|
|
|
|
onShow(() => {
|
|
loadData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.delivery-messages-page {
|
|
min-height: 100%;
|
|
margin-left: -24rpx;
|
|
margin-right: -24rpx;
|
|
margin-top: -24rpx;
|
|
padding-bottom: 32rpx;
|
|
background-color: #f4f8fb;
|
|
}
|
|
|
|
.delivery-messages-hero {
|
|
padding: 72rpx 28rpx 34rpx;
|
|
border-bottom-left-radius: 36rpx;
|
|
border-bottom-right-radius: 36rpx;
|
|
background-color: #0f766e;
|
|
}
|
|
|
|
.delivery-messages-hero-top,
|
|
.delivery-messages-card-header,
|
|
.message-title-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.delivery-messages-hero-top {
|
|
align-items: center;
|
|
}
|
|
|
|
.delivery-messages-hero-main {
|
|
flex: 1;
|
|
padding-right: 16rpx;
|
|
}
|
|
|
|
.delivery-messages-hero-title {
|
|
font-size: 38rpx;
|
|
font-weight: 700;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.delivery-messages-hero-subtitle {
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.delivery-messages-hero-badge {
|
|
padding: 10rpx 18rpx;
|
|
border-radius: 999rpx;
|
|
background-color: rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.delivery-messages-hero-badge-text {
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.delivery-messages-hero-tip-box {
|
|
margin-top: 28rpx;
|
|
padding: 20rpx 22rpx;
|
|
border-radius: 22rpx;
|
|
background-color: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
.delivery-messages-hero-tip {
|
|
font-size: 23rpx;
|
|
line-height: 34rpx;
|
|
color: rgba(255, 255, 255, 0.88);
|
|
}
|
|
|
|
.delivery-messages-card {
|
|
margin-left: 24rpx;
|
|
margin-right: 24rpx;
|
|
margin-top: 22rpx;
|
|
padding: 26rpx;
|
|
border-radius: 28rpx;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 10rpx 28rpx rgba(15, 35, 55, 0.06);
|
|
}
|
|
|
|
.delivery-messages-filter-card {
|
|
margin-top: -18rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.delivery-messages-card-title {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
}
|
|
|
|
.delivery-messages-card-subtitle {
|
|
display: block;
|
|
margin-top: 8rpx;
|
|
font-size: 22rpx;
|
|
line-height: 34rpx;
|
|
color: #64748b;
|
|
}
|
|
|
|
.status-scroll {
|
|
margin-top: 22rpx;
|
|
width: 100%;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.status-tabs-row {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-left: 4rpx;
|
|
padding-right: 20rpx;
|
|
padding-top: 4rpx;
|
|
padding-bottom: 4rpx;
|
|
}
|
|
|
|
.status-tab-item {
|
|
flex-shrink: 0;
|
|
height: 64rpx;
|
|
padding-left: 28rpx;
|
|
padding-right: 28rpx;
|
|
margin-right: 16rpx;
|
|
border-radius: 999rpx;
|
|
background-color: #f1f5f9;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.status-tab-content {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.status-tab-active {
|
|
background-color: #0f766e;
|
|
box-shadow: 0 8rpx 18rpx rgba(15, 118, 110, 0.18);
|
|
}
|
|
|
|
.status-tab-active-danger {
|
|
background-color: #dc2626;
|
|
box-shadow: 0 8rpx 18rpx rgba(220, 38, 38, 0.18);
|
|
}
|
|
|
|
.status-tab-active-warning {
|
|
background-color: #d97706;
|
|
box-shadow: 0 8rpx 18rpx rgba(217, 119, 6, 0.18);
|
|
}
|
|
|
|
.status-tab-active-success {
|
|
background-color: #16a34a;
|
|
box-shadow: 0 8rpx 18rpx rgba(22, 163, 74, 0.18);
|
|
}
|
|
|
|
.status-tab-active-neutral {
|
|
background-color: #475569;
|
|
box-shadow: 0 8rpx 18rpx rgba(71, 85, 105, 0.18);
|
|
}
|
|
|
|
.status-tab-text {
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #64748b;
|
|
}
|
|
|
|
.status-tab-count {
|
|
margin-left: 10rpx;
|
|
min-width: 30rpx;
|
|
padding-left: 8rpx;
|
|
padding-right: 8rpx;
|
|
padding-top: 2rpx;
|
|
padding-bottom: 2rpx;
|
|
border-radius: 999rpx;
|
|
font-size: 20rpx;
|
|
line-height: 24rpx;
|
|
text-align: center;
|
|
color: #64748b;
|
|
background-color: rgba(148, 163, 184, 0.16);
|
|
}
|
|
|
|
.status-tab-text-active {
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.status-tab-count-active {
|
|
color: #ffffff;
|
|
background-color: rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.status-tab-count-unread {
|
|
min-width: 34rpx;
|
|
color: #ffffff;
|
|
background-color: #ef4444;
|
|
}
|
|
|
|
.status-tab-count-unread-active {
|
|
background-color: rgba(255, 255, 255, 0.24);
|
|
}
|
|
|
|
.status-tab-text-active-danger,
|
|
.status-tab-text-active-warning,
|
|
.status-tab-text-active-success,
|
|
.status-tab-text-active-neutral {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.message-summary {
|
|
flex-direction: row;
|
|
margin-top: 22rpx;
|
|
}
|
|
|
|
.summary-card {
|
|
flex: 1;
|
|
padding-top: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
padding-left: 18rpx;
|
|
padding-right: 18rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #f8fbfc;
|
|
margin-right: 14rpx;
|
|
}
|
|
|
|
.summary-card-accent {
|
|
background-color: #ecfdf5;
|
|
}
|
|
|
|
.summary-card-last {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.summary-value {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: #0f766e;
|
|
}
|
|
|
|
.summary-value-dark {
|
|
color: #16324f;
|
|
}
|
|
|
|
.summary-label {
|
|
margin-top: 8rpx;
|
|
font-size: 22rpx;
|
|
line-height: 30rpx;
|
|
color: #6b7a89;
|
|
}
|
|
|
|
.message-card {
|
|
margin-top: 22rpx;
|
|
padding: 24rpx;
|
|
border-radius: 24rpx;
|
|
background-color: #ffffff;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
box-shadow: 0 8rpx 24rpx rgba(15, 35, 55, 0.06);
|
|
border-left-width: 0rpx;
|
|
border-left-style: solid;
|
|
border-left-color: transparent;
|
|
}
|
|
|
|
.message-unread {
|
|
background-color: #f0fdfa;
|
|
}
|
|
|
|
.message-read {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.message-icon {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 32rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 18rpx;
|
|
background-color: #f1f5f9;
|
|
}
|
|
|
|
.message-level-danger {
|
|
background-color: #fee2e2;
|
|
}
|
|
|
|
.message-level-warning {
|
|
background-color: #fef3c7;
|
|
}
|
|
|
|
.message-level-info {
|
|
background-color: #dbeafe;
|
|
}
|
|
|
|
.message-level-success {
|
|
background-color: #dcfce7;
|
|
}
|
|
|
|
.message-level-neutral {
|
|
background-color: #f1f5f9;
|
|
}
|
|
|
|
.message-icon-text {
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
color: #0f766e;
|
|
}
|
|
|
|
.message-text-danger {
|
|
color: #dc2626;
|
|
}
|
|
|
|
.message-text-warning {
|
|
color: #d97706;
|
|
}
|
|
|
|
.message-text-info {
|
|
color: #2563eb;
|
|
}
|
|
|
|
.message-text-success {
|
|
color: #16a34a;
|
|
}
|
|
|
|
.message-text-neutral {
|
|
color: #64748b;
|
|
}
|
|
|
|
.message-main {
|
|
flex: 1;
|
|
}
|
|
|
|
.message-title-row {
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.message-title {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
}
|
|
|
|
.message-title-read {
|
|
color: #38526b;
|
|
}
|
|
|
|
.message-card-danger {
|
|
border-left-width: 8rpx;
|
|
border-left-color: #dc2626;
|
|
}
|
|
|
|
.message-badge {
|
|
font-size: 20rpx;
|
|
color: #ef4444;
|
|
background-color: #fee2e2;
|
|
border-radius: 999rpx;
|
|
padding-left: 12rpx;
|
|
padding-right: 12rpx;
|
|
padding-top: 4rpx;
|
|
padding-bottom: 4rpx;
|
|
}
|
|
|
|
.message-read-text {
|
|
font-size: 22rpx;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.message-biz-line {
|
|
display: block;
|
|
margin-top: 2rpx;
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
color: #0f766e;
|
|
}
|
|
|
|
.message-content,
|
|
.message-meta {
|
|
display: block;
|
|
margin-top: 12rpx;
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
color: #5e758c;
|
|
}
|
|
|
|
.message-meta {
|
|
font-size: 22rpx;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.empty-box {
|
|
padding: 40rpx 24rpx;
|
|
margin-top: 22rpx;
|
|
border-radius: 22rpx;
|
|
background: #f8fbfc;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 26rpx;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.delivery-messages-safe {
|
|
height: 40rpx;
|
|
}
|
|
</style> |