zhxy-jzd/src/pages/base/home/detail.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 st
  "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>