hujun
dcf12a4471
- 新增配置、存储、金额转换工具服务 - 按userId隔离本地缓存，替换旧设备级存储 - 统一移动端金额单位为万元，新增转换适配逻辑 - 重构认证与请求逻辑，支持真实后端会话 - 调整搜索、帮助、融资模块的模拟开关与数据适配 - 更新文档说明开发状态与配置规则
88 lines
6.9 KiB
Plaintext
88 lines
6.9 KiB
Plaintext
<template>
|
|
<view class="page" :style="pageStyle()">
|
|
<AppHeader title="消息中心" :back="false" />
|
|
<view class="message-tabs"><view v-for="item in tabs" :key="item" :class="tab == item ? 'message-tab active-tab' : 'message-tab'" @click="tab = item"><text :class="tab == item ? 'tab-text active-text' : 'tab-text'">{{ item }}</text></view></view>
|
|
<scroll-view scroll-y :style="contentStyle(314, false)">
|
|
<view class="messages-content">
|
|
<view class="message-summary"><text class="summary-text">{{ unreadCount > 0 ? unreadCount + ' 条未读消息' : '消息已全部阅读' }}</text><view class="read-all" @click="markAllRead"><text class="read-all-text">全部已读</text></view></view>
|
|
<view class="notice-list">
|
|
<view class="notice" v-for="(item, index) in filteredNotices" :key="item.id" :class="index == filteredNotices.length - 1 ? 'last-notice' : ''" @click="openNotice(item)">
|
|
<view class="notice-icon" :class="'notice-icon-' + item.icon"><view class="notice-icon-surface"><image class="notice-symbol" :src="'/packages/account/static/notifications/' + item.icon + '.svg'" mode="aspectFit" /></view><view v-if="item.unread" class="unread"></view></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><text class="notice-category">{{ item.category }}</text></view>
|
|
</view>
|
|
</view>
|
|
<text class="message-footer">点击消息查看完整内容</text>
|
|
</view>
|
|
</scroll-view>
|
|
<BottomNav active="message" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { getUserStorage, setUserStorage } from '@/services/storage.uts'
|
|
|
|
import { usePageLayout } from '@/services/layout.uts'
|
|
import AppHeader from '@/components/AppHeader.uvue'
|
|
import BottomNav from '@/components/BottomNav.uvue'
|
|
const { contentStyle, pageStyle } = usePageLayout()
|
|
const tabs: string[] = ['全部', '系统通知', '服务通知', '活动消息']
|
|
const tab = ref('全部')
|
|
type Notice = { id: string, icon: string, category: string, title: string, desc: string, body: string, time: string, unread: boolean }
|
|
const notices = ref<Notice[]>([
|
|
{ id: 'assessment-guide', icon: 'approval', category: '服务通知', title: '融资评估使用指南', desc: '完成资料填写，了解自己的融资需求。', body: '从首页选择个人或企业融资入口，按步骤填写基本信息、经营或收入、资产与负债情况。提交前请核对资料，评估结果仅供参考，具体申请条件以机构审核为准。', time: '10:30', unread: true },
|
|
{ id: 'repayment-guide', icon: 'payout', category: '服务通知', title: '还款安排提醒', desc: '申请前，记得核对每期应还金额与日期。', body: '比较融资方案时，除利率外还应核对还款方式、每期应还金额与到期本金。正式签约后，请以机构提供的合同和还款计划为准，通过官方渠道查询账户状态。', time: '09:15', unread: false },
|
|
{ id: 'invite-guide', icon: 'gift', category: '活动消息', title: '邀请积分说明', desc: '邀请前先了解积分规则与适用范围。', body: '可在积分中心查看邀请入口与积分说明。积分发放条件、有效期及可用权益以活动页面公布的规则为准，请勿向他人承诺固定收益或贷款结果。', time: '08:42', unread: false },
|
|
{ id: 'privacy-guide', icon: 'system-bell', category: '系统通知', title: '个人信息保护提醒', desc: '留意授权范围，保护账号与验证码。', body: '提交资料或授权数据前，请阅读相应说明，确认使用目的、数据范围和授权期限。不要向他人泄露账户密码、短信验证码或银行支付信息。', time: '昨天', unread: false }
|
|
])
|
|
const filteredNotices = computed((): Notice[] => tab.value == '全部' ? notices.value : notices.value.filter((item: Notice): boolean => item.category == tab.value))
|
|
const unreadCount = computed((): number => notices.value.filter((item: Notice): boolean => item.unread).length)
|
|
onShow(() => {
|
|
notices.value.forEach((item: Notice): void => {
|
|
if (getUserStorage('finance.notice.read.' + item.id) == true) item.unread = false
|
|
})
|
|
})
|
|
const markRead = (id: string): void => {
|
|
const item = notices.value.find((value: Notice): boolean => value.id == id)
|
|
if (item == null) return
|
|
item.unread = false
|
|
setUserStorage('finance.notice.read.' + id, true)
|
|
}
|
|
const openNotice = (item: Notice): void => {
|
|
markRead(item.id)
|
|
uni.showModal({ title: item.title, content: item.body, showCancel: false, confirmText: '知道了' })
|
|
}
|
|
const markAllRead = (): void => {
|
|
notices.value.forEach((item: Notice): void => { markRead(item.id) })
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.message-tabs { height: 88rpx; flex-direction: row; background-color: #ffffff; border-bottom: 1rpx solid #e8eef6; padding: 0 18rpx; }
|
|
.message-tab { flex: 1; align-items: center; justify-content: center; border-bottom: 4rpx solid transparent; }
|
|
.active-tab { border-bottom-color: #0868f7; }
|
|
.tab-text { color: #66758a; font-size: 25rpx; }
|
|
.active-text { color: #0868f7; font-weight: 700; }
|
|
.messages-content { padding: 14rpx 28rpx 90rpx; }
|
|
.message-summary { flex-direction: row; align-items: center; justify-content: space-between; min-height: 66rpx; }
|
|
.summary-text { color: #66758a; font-size: 23rpx; }
|
|
.read-all { padding: 14rpx 0 14rpx 24rpx; }
|
|
.read-all-text { color: #0868f7; font-size: 23rpx; }
|
|
.notice-list { background-color: #ffffff; border-radius: 18rpx; padding: 0 20rpx; }
|
|
.notice { padding: 26rpx 0; border-bottom: 1rpx solid #e8eef6; flex-direction: row; align-items: center; }
|
|
.last-notice { border-bottom-width: 0; }
|
|
.notice-icon { width: 76rpx; height: 76rpx; margin-right: 20rpx; position: relative; flex-shrink: 0; }
|
|
.notice-icon-surface { width: 100%; height: 100%; border-radius: 20rpx; background-color: #edf5ff; align-items: center; justify-content: center; }
|
|
.notice-icon-payout .notice-icon-surface { background-color: #eaf7f3; }
|
|
.notice-icon-gift .notice-icon-surface { background-color: #fff3e8; }
|
|
.notice-symbol { width: 46rpx; height: 46rpx; flex-shrink: 0; }
|
|
.notice-copy { flex: 1; min-width: 0; }
|
|
.notice-head { flex-direction: row; justify-content: space-between; align-items: flex-start; }
|
|
.notice-title { color: #172640; font-size: 28rpx; line-height: 40rpx; font-weight: 600; flex: 1; }
|
|
.notice-time { color: #66758a; font-size: 22rpx; line-height: 40rpx; margin-left: 12rpx; flex-shrink: 0; }
|
|
.notice-desc { color: #66758a; font-size: 25rpx; line-height: 38rpx; margin-top: 10rpx; }
|
|
.notice-category { color: #66758a; font-size: 22rpx; line-height: 32rpx; margin-top: 10rpx; }
|
|
/* 红点独立于圆角背景，避免跨端圆角裁切。 */
|
|
.unread { position: absolute; width: 15rpx; height: 15rpx; border-radius: 8rpx; background-color: #f04452; border: 2rpx solid #ffffff; right: -3rpx; top: -3rpx; z-index: 1; }
|
|
.message-footer { color: #66758a; font-size: 22rpx; text-align: center; margin-top: 28rpx; }
|
|
</style>
|