<template>
|
<view class="notification">
|
<!-- 通知设置 -->
|
<view class="section-card">
|
<view class="section-title">通知设置</view>
|
<view class="setting-list">
|
<view class="setting-item">
|
<view class="setting-info">
|
<text class="name">系统通知</text>
|
<text class="desc">接收系统更新、维护等通知</text>
|
</view>
|
<switch
|
:checked="settings.system"
|
@change="e => toggleSetting('system', e.detail.value)"
|
color="#0f95b0"
|
/>
|
</view>
|
<view class="setting-item">
|
<view class="setting-info">
|
<text class="name">预约提醒</text>
|
<text class="desc">接收挂号、疫苗等预约提醒</text>
|
</view>
|
<switch
|
:checked="settings.appointment"
|
@change="e => toggleSetting('appointment', e.detail.value)"
|
color="#0f95b0"
|
/>
|
</view>
|
<view class="setting-item">
|
<view class="setting-info">
|
<text class="name">就医提醒</text>
|
<text class="desc">接收就医、取药等提醒</text>
|
</view>
|
<switch
|
:checked="settings.medical"
|
@change="e => toggleSetting('medical', e.detail.value)"
|
color="#0f95b0"
|
/>
|
</view>
|
<view class="setting-item">
|
<view class="setting-info">
|
<text class="name">缴费提醒</text>
|
<text class="desc">接收待缴费、退款等提醒</text>
|
</view>
|
<switch
|
:checked="settings.payment"
|
@change="e => toggleSetting('payment', e.detail.value)"
|
color="#0f95b0"
|
/>
|
</view>
|
</view>
|
</view>
|
|
<!-- 消息列表 -->
|
<view class="section-card">
|
<view class="section-header">
|
<text class="title">最近消息</text>
|
<text class="clear-btn" @tap="clearMessages">清空消息</text>
|
</view>
|
<view class="message-list">
|
<view
|
class="message-item"
|
v-for="(message, index) in messages"
|
:key="index"
|
:class="{ unread: !message.read }"
|
@tap="viewMessage(message)"
|
>
|
<view class="message-icon" :class="message.type">
|
<text class="iconfont" :class="getIconClass(message.type)"></text>
|
</view>
|
<view class="message-content">
|
<view class="message-header">
|
<text class="title">{{ message.title }}</text>
|
<text class="time">{{ message.time }}</text>
|
</view>
|
<text class="desc">{{ message.content }}</text>
|
</view>
|
<text class="unread-dot" v-if="!message.read"></text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 通知方式设置 -->
|
<view class="section-card">
|
<view class="section-title">通知方式</view>
|
<view class="notify-list">
|
<view class="notify-item">
|
<view class="notify-info">
|
<text class="name">应用内通知</text>
|
<text class="desc">在应用内接收消息提醒</text>
|
</view>
|
<switch
|
:checked="notifyMethods.app"
|
@change="e => toggleNotifyMethod('app', e.detail.value)"
|
color="#0f95b0"
|
/>
|
</view>
|
<view class="notify-item">
|
<view class="notify-info">
|
<text class="name">短信通知</text>
|
<text class="desc">通过短信接收重要提醒</text>
|
</view>
|
<switch
|
:checked="notifyMethods.sms"
|
@change="e => toggleNotifyMethod('sms', e.detail.value)"
|
color="#0f95b0"
|
/>
|
</view>
|
<view class="notify-item">
|
<view class="notify-info">
|
<text class="name">微信服务通知</text>
|
<text class="desc">通过微信接收服务通知</text>
|
</view>
|
<switch
|
:checked="notifyMethods.wechat"
|
@change="e => toggleNotifyMethod('wechat', e.detail.value)"
|
color="#0f95b0"
|
/>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
// 通知设置
|
const settings = ref({
|
system: true,
|
appointment: true,
|
medical: true,
|
payment: true
|
})
|
|
// 通知方式
|
const notifyMethods = ref({
|
app: true,
|
sms: true,
|
wechat: true
|
})
|
|
// 消息列表
|
const messages = ref([
|
{
|
id: 1,
|
type: 'appointment',
|
title: '预约提醒',
|
content: '您预约的明天上午9:30心内科张医生的门诊即将开始',
|
time: '10分钟前',
|
read: false
|
},
|
{
|
id: 2,
|
type: 'payment',
|
title: '缴费提醒',
|
content: '您有一笔￥360.00的待缴费订单，请及时处理',
|
time: '1小时前',
|
read: false
|
},
|
{
|
id: 3,
|
type: 'system',
|
title: '系统通知',
|
content: '系统将于今晚23:00-次日凌晨2:00进行维护升级',
|
time: '2小时前',
|
read: true
|
},
|
{
|
id: 4,
|
type: 'medical',
|
title: '取药提醒',
|
content: '您的处方药已准备就绪，请到3号窗口取药',
|
time: '昨天',
|
read: true
|
}
|
])
|
|
// 切换通知设置
|
const toggleSetting = (key, value) => {
|
settings.value[key] = value
|
uni.showToast({
|
title: value ? '已开启' : '已关闭',
|
icon: 'success'
|
})
|
}
|
|
// 切换通知方式
|
const toggleNotifyMethod = (key, value) => {
|
notifyMethods.value[key] = value
|
uni.showToast({
|
title: value ? '已开启' : '已关闭',
|
icon: 'success'
|
})
|
}
|
|
// 获取图标类名
|
const getIconClass = (type) => {
|
const icons = {
|
system: 'icon-system',
|
appointment: 'icon-calendar',
|
medical: 'icon-medical',
|
payment: 'icon-wallet'
|
}
|
return icons[type]
|
}
|
|
// 查看消息
|
const viewMessage = (message) => {
|
// 标记为已读
|
message.read = true
|
// 这里可以跳转到消息详情页
|
console.log('查看消息:', message)
|
}
|
|
// 清空消息
|
const clearMessages = () => {
|
uni.showModal({
|
title: '提示',
|
content: '确定要清空所有消息吗？',
|
success: (res) => {
|
if (res.confirm) {
|
messages.value = []
|
uni.showToast({
|
title: '已清空',
|
icon: 'success'
|
})
|
}
|
}
|
})
|
}
|
</script>
|
|
<style lang="scss">
|
.notification {
|
min-height: 100vh;
|
background: $bg-color;
|
padding: 20rpx;
|
|
.section-card {
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
|
.section-title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
}
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
|
.clear-btn {
|
font-size: 28rpx;
|
color: $text-secondary;
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
|
.setting-list,
|
.notify-list {
|
.setting-item,
|
.notify-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.setting-info,
|
.notify-info {
|
flex: 1;
|
margin-right: 20rpx;
|
|
.name {
|
font-size: 30rpx;
|
color: $text-primary;
|
margin-bottom: 4rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
}
|
|
.message-list {
|
.message-item {
|
display: flex;
|
align-items: flex-start;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #eee;
|
position: relative;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.message-icon {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: $radius-lg;
|
margin-right: 20rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-shrink: 0;
|
|
.iconfont {
|
font-size: 40rpx;
|
color: #fff;
|
}
|
|
&.system {
|
background: linear-gradient(135deg, #36D1DC, #5B86E5);
|
}
|
|
&.appointment {
|
background: linear-gradient(135deg, #FF9A9E, #FAD0C4);
|
}
|
|
&.medical {
|
background: linear-gradient(135deg, #A8EDEA, #FED6E3);
|
}
|
|
&.payment {
|
background: linear-gradient(135deg, #D4FC79, #96E6A1);
|
}
|
}
|
|
.message-content {
|
flex: 1;
|
|
.message-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 8rpx;
|
|
.title {
|
font-size: 30rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
|
.time {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.desc {
|
font-size: 26rpx;
|
color: $text-regular;
|
line-height: 1.5;
|
}
|
}
|
|
.unread-dot {
|
position: absolute;
|
right: 0;
|
top: 20rpx;
|
width: 16rpx;
|
height: 16rpx;
|
background: $danger;
|
border-radius: 50%;
|
}
|
|
&.unread {
|
.message-header .title {
|
color: $primary-color;
|
}
|
}
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
