335 lines
12 KiB
Vue
335 lines
12 KiB
Vue
<template>
|
||
<view class="notice-detail">
|
||
<!-- 通知头部 -->
|
||
<view class="notice-header">
|
||
<view class="notice-title">
|
||
<text>{{data.title}}</text>
|
||
</view>
|
||
<view class="notice-meta">
|
||
<text class="publisher">发布人: {{data.author}}</text>
|
||
<text class="date">{{data.releaseTime}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 通知内容 -->
|
||
<view class="notice-content">
|
||
<rich-text :nodes="data.content"></rich-text>
|
||
<!-- <view class="content-section">
|
||
<text class="section-title">尊敬的各位家长：</text>
|
||
<text class="section-text">您好！经学校研究决定，将于2023年9月1日（星期五）上午9:00举行新学年开学典礼。现将有关事项通知如下：</text>
|
||
</view>
|
||
|
||
<view class="content-section">
|
||
<text class="section-title">一、时间安排</text>
|
||
<text class="section-text">1. 开学典礼时间：2023年9月1日（星期五）上午9:00-10:30</text>
|
||
<text class="section-text">2. 学生到校时间：上午8:30前</text>
|
||
<text class="section-text">3. 家长参观时间：上午10:30-11:30</text>
|
||
</view>
|
||
|
||
<view class="content-section">
|
||
<text class="section-title">二、地点</text>
|
||
<text class="section-text">学校操场（雨天改至体育馆）</text>
|
||
</view>
|
||
|
||
<view class="content-section">
|
||
<text class="section-title">三、着装要求</text>
|
||
<text class="section-text">1. 学生：穿着校服，佩戴校徽</text>
|
||
<text class="section-text">2. 教师：着正装</text>
|
||
</view>
|
||
|
||
<view class="content-section">
|
||
<text class="section-title">四、注意事项</text>
|
||
<text class="section-text">1. 请家长们提前安排孩子的出行，避免迟到</text>
|
||
<text class="section-text">2. 开学当天请带齐学习用品</text>
|
||
<text class="section-text">3. 新生请佩戴校牌</text>
|
||
<text class="section-text">4. 如遇天气变化，请关注学校短信通知</text>
|
||
</view>
|
||
|
||
<view class="content-section">
|
||
<text class="section-title">五、联系方式</text>
|
||
<text class="section-text">学校办公室：0123-4567890</text>
|
||
<text class="section-text">教务处：0123-4567891</text>
|
||
</view>
|
||
|
||
<view class="content-section">
|
||
<text class="section-text">感谢各位家长的配合与支持！</text>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- 附件区域 -->
|
||
<!-- <view class="attachment-section">
|
||
<view class="section-header">
|
||
<text class="header-title">附件</text>
|
||
</view>
|
||
|
||
<view class="attachment-list">
|
||
<view class="attachment-item" @click="downloadFile(file)"
|
||
v-for="(file, index) in fileList"
|
||
:key="index">
|
||
<u-icon name="file-text" size="22" color="#2D81FF"></u-icon>
|
||
<text class="attachment-name">{{file}}</text>
|
||
<u-icon name="download" size="20" color="#999"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from "vue";
|
||
import { useDataStore } from "@/store/modules/data";
|
||
const { getData } = useDataStore();
|
||
|
||
let data = ref({
|
||
"id": 2142746416,
|
||
"createdTime": "2024-10-10 09:37:45",
|
||
"updatedTime": "2024-10-12 15:47:44",
|
||
"createdUserName": "管理员",
|
||
"updatedUserName": "管理员",
|
||
"title": "值周学生常规规范",
|
||
"columnId": 24,
|
||
"sort": 1,
|
||
"description": "",
|
||
"releaseTime": "2024-10-10 09:32:36",
|
||
"author": "",
|
||
"source": "",
|
||
"content": "<p style=\"text-align: center;\"><br></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">1.值周前一周放假前清楚自己常规检查的位楼栋、楼层和班级；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">2.检查时段包括早读、大课间、下午眼保健操。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">3.检查内容。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>早读八看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否有教师值守；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看值守教师是否长时间玩手机；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看黑板上的值日课程贴是否填写；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看同学是否到班即读，有无疯玩打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看课桌椅、讲桌是否整齐、整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看红领巾佩戴(队徽)情况；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看教室、走廊是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑻看黑板上是否书写(课件)有早读的内容和要求。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>大课间七看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否认真组织室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看室外操班级是否留有学生在教室且打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看室内操是否安静、动用是否整齐；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看是否有教师值守室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看教室、走廊地面是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看室外操班级桌面是否收拾整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看室外操班级是否关闭用电设备。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>眼保健操五看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否按要求组织眼保健操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看做操时是否关灯；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看是否有学生讲话、未做、未闭眼做操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看教室、走廊地面是否整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看走廊书吧是否整齐。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">4.检查时实行蹲点检查，整个时段来回巡查。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">5.校门口礼仪队同学要保持良好的精神状态，着装整洁，可设计个性的欢迎口号、动作、道具等，热情向师生问好；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">6.常规检查同学到班检查要佩戴好绶带，进入教室要喊“报告”。</span></p>",
|
||
"columnName": "师、生值周工作要求",
|
||
"pk": 2142746416,
|
||
"linkaddress": ""
|
||
})
|
||
|
||
let fileList = ref([
|
||
{
|
||
title: '',
|
||
url: ''
|
||
}
|
||
])
|
||
|
||
// 下载附件
|
||
const downloadFile = (file: any) => {
|
||
uni.showToast({
|
||
title: "附件下载中...",
|
||
icon: "loading"
|
||
});
|
||
uni.downloadFile({
|
||
url: file.url, // 文件下载链接
|
||
success: (res) => {
|
||
if (res.statusCode === 200) {
|
||
// 在 H5 或 App 中，可以通过临时路径访问文件
|
||
console.log('下载成功，临时路径:', res.tempFilePath);
|
||
// 在 App 中，可以调用保存到本地的方法
|
||
// #ifdef APP-PLUS
|
||
uni.saveFile({
|
||
tempFilePath: res.tempFilePath,
|
||
success: (saveRes) => {
|
||
console.log('文件保存成功:', saveRes.savedFilePath);
|
||
uni.showToast({
|
||
title: "下载成功",
|
||
icon: "success"
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.log('保存失败:', err);
|
||
uni.showToast({
|
||
title: "保存失败",
|
||
icon: "error"
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
|
||
// 在小程序中，可能需要调用小程序的保存文件 API
|
||
// #ifdef MP-WEIXIN
|
||
wx.saveFile({
|
||
tempFilePath: res.tempFilePath,
|
||
success: (saveRes) => {
|
||
console.log('文件保存成功:', saveRes.savedFilePath);
|
||
uni.showToast({
|
||
title: "下载成功",
|
||
icon: "success"
|
||
});
|
||
},
|
||
fail: (err) => {
|
||
console.log('保存失败:', err);
|
||
uni.showToast({
|
||
title: "保存失败",
|
||
icon: "error"
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log('下载失败:', err);
|
||
uni.showToast({
|
||
title: "下载失败",
|
||
icon: "error"
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
// 分享通知
|
||
const shareNotice = () => {
|
||
uni.showShareMenu({
|
||
withShareTicket: true,
|
||
menus: ['shareAppMessage', 'shareTimeline']
|
||
});
|
||
};
|
||
|
||
onMounted(async () => {
|
||
data.value = getData
|
||
// 滚动到顶部
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 0 // 立即滚动，无动画
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 工具类
|
||
@mixin text-ellipsis {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.notice-detail {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
padding-bottom: 80px; // 留出底部按钮的空间
|
||
}
|
||
|
||
// 通知头部
|
||
.notice-header {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
.notice-title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 15px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.notice-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
color: #999;
|
||
|
||
.publisher {
|
||
margin-right: 15px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 通知内容
|
||
.notice-content {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
margin-top: 10px;
|
||
|
||
.content-section {
|
||
margin-bottom: 20px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
display: block;
|
||
}
|
||
|
||
.section-text {
|
||
font-size: 15px;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
margin-bottom: 10px;
|
||
display: block;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 附件区域
|
||
.attachment-section {
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
margin-top: 10px;
|
||
|
||
.section-header {
|
||
margin-bottom: 15px;
|
||
|
||
.header-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.attachment-list {
|
||
.attachment-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 12px 15px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.attachment-name {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin: 0 10px;
|
||
@include text-ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 底部按钮
|
||
.bottom-actions {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 15px 20px;
|
||
background-color: #fff;
|
||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
|
||
|
||
.action-btn {
|
||
width: 100%;
|
||
height: 45px;
|
||
line-height: 45px;
|
||
border-radius: 25px;
|
||
font-size: 16px;
|
||
|
||
&.share {
|
||
background: linear-gradient(to right, #2D81FF, #5A9EFF);
|
||
color: #fff;
|
||
}
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
</style>
|