2026-09-10 10:57:40 +08:00
|
|
|
<template>
|
2026-09-15 16:16:55 +08:00
|
|
|
<view class="page" :style="pageStyle()">
|
2026-09-10 10:57:40 +08:00
|
|
|
<AppHeader title="消息中心" :back="false" />
|
|
|
|
|
<view class="message-tabs"><view v-for="item in tabs" :key="item" :class="tab == item ? 'message-tab active' : 'message-tab'" @click="tab=item"><text>{{ item }}</text></view></view>
|
2026-09-15 16:16:55 +08:00
|
|
|
<scroll-view scroll-y class="messages-scroll" :style="contentStyle(314, false)">
|
2026-09-10 10:57:40 +08:00
|
|
|
<view class="messages-content">
|
|
|
|
|
<view class="notice" v-for="item in notices" :key="item.title"><view :class="'notice-icon ' + item.color"><AppIcon :name="item.icon" :size="44" /></view><view class="notice-copy"><view class="notice-head"><text class="notice-title">{{ item.title }}</text><text class="notice-time">{{ item.time }}</text></view><text class="notice-desc">{{ item.desc }}</text></view><view v-if="item.unread" class="unread"></view></view>
|
|
|
|
|
</view>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
<BottomNav active="message" />
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="uts">
|
2026-09-15 16:16:55 +08:00
|
|
|
import { usePageLayout } from '@/services/layout.uts'
|
|
|
|
|
const { contentStyle, pageStyle } = usePageLayout()
|
2026-09-10 10:57:40 +08:00
|
|
|
import AppHeader from '@/components/AppHeader.uvue'
|
|
|
|
|
import BottomNav from '@/components/BottomNav.uvue'
|
|
|
|
|
import AppIcon from '@/components/AppIcon.uvue'
|
|
|
|
|
const tabs = ['全部', '系统通知', '审批进度', '活动消息']
|
|
|
|
|
const tab = ref('全部')
|
2026-09-15 16:16:55 +08:00
|
|
|
type Notice = { icon: string, color: string, title: string, desc: string, time: string, unread: boolean }
|
|
|
|
|
const notices: Notice[] = [
|
2026-09-10 10:57:40 +08:00
|
|
|
{ icon: 'approval', color: 'blue', title: '审核进度更新', desc: '您的融资评估已完成，匹配到3个方案。', time: '10:30', unread: true },
|
|
|
|
|
{ icon: 'payout', color: 'purple', title: '放款成功', desc: '您的招商银行闪电贷已成功放款。', time: '09:15', unread: false },
|
|
|
|
|
{ icon: 'gift', color: 'orange', title: '活动通知', desc: '邀请好友赢积分活动进行中。', time: '08:42', unread: false },
|
|
|
|
|
{ icon: 'system-bell', color: 'green', title: '系统通知', desc: '隐私政策已更新，请及时查看。', time: '昨天', unread: false }
|
|
|
|
|
]
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
2026-09-15 16:16:55 +08:00
|
|
|
.message-tabs { height: 88rpx; flex-direction: row; background-color: #fff; border-bottom: 1rpx solid #e6edf6; padding: 0 18rpx; }
|
|
|
|
|
.message-tab { flex: 1; align-items: center; justify-content: center; color: #7b8799; font-size: 22rpx; }
|
|
|
|
|
.message-tab.active { color: #0868f7; font-weight: 700; border-bottom: 4rpx solid #0868f7; }
|
|
|
|
|
.messages-scroll { }
|
|
|
|
|
.messages-content { padding: 10rpx 28rpx 150rpx; }
|
|
|
|
|
.notice { min-height: 150rpx; background-color: #fff; border-bottom: 1rpx solid #e8eef6; flex-direction: row; align-items: center; position: relative; }
|
|
|
|
|
.notice-icon { width: 78rpx; height: 78rpx; border-radius: 25rpx; align-items: center; justify-content: center; color: #fff; font-size: 24rpx; font-weight: 800; margin-right: 20rpx; }
|
|
|
|
|
.blue { background-color: #3b7df1; }
|
|
|
|
|
.purple { background-color: #b74ae8; }
|
|
|
|
|
.orange { background-color: #ff8431; }
|
|
|
|
|
.green { background-color: #18ae82; }
|
|
|
|
|
.notice-copy { flex: 1; }
|
|
|
|
|
.notice-head { flex-direction: row; justify-content: space-between; align-items: center; }
|
|
|
|
|
.notice-title { font-size: 27rpx; font-weight: 700; }
|
|
|
|
|
.notice-time { color: #9ca7b7; font-size: 19rpx; }
|
|
|
|
|
.notice-desc { color: #778499; font-size: 22rpx; margin-top: 11rpx; }
|
|
|
|
|
.unread { position: absolute; width: 13rpx; height: 13rpx; border-radius: 50%; background-color: #ff4d4f; right: 2rpx; top: 40rpx; }
|
2026-09-10 10:57:40 +08:00
|
|
|
</style>
|
