driverSchool/newPages/messageCenter/index.vue

<template>
  <view class="container">
    <VNavigationBar background-color="#fff" title-color="#333" title="消息中心" :showClear="showClear" @clearNoRead="clearNoReadFun"></VNavigationBar>
    <view class="body">
      <view class="messageList">
        <scroll-view  scroll-y="true" class="itemContent" @scrolltolower="onReachBottomCus"
                     refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
          <view v-for="(item, index) in messageList" :key="index" class="messageItem" @click="readNotice(item)">
            <image class="messageIcon" src="@/static/imgs/message-icon1.png" mode="aspectFit"></image>
            <view class="messageContent">
              <view :class="{'messageTitle':item.readStatus,'noReadTitle':!item.readStatus}" >系统通知</view>
              <view class="messageContent_content">{{item.templateContent}}</view>
              <view class="messageContent_content" style="text-align: right">{{formatTime(item.createTime)}}</view>
            </view>
          </view>
          <view style="text-align: center" v-if="messageList.length==0">
            <image class="" src="@/static/imgs/nothing.png"></image>
          </view>
        </scroll-view>
      </view>
    </view>
    <!-- 普通弹窗 -->
    <uni-popup ref="popup" background-color="#fff" >
      <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
        <text class="text popup-content-text">{{ nowReadItem.templateContent }}</text>
        <button class="button popup-info" @click="dialogToggle"><text
            class="button-text info-text">知道了</text></button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import VNavigationBar from '@/components/tabbar/VNavigationBar.vue'
  import request from '@/utils/request.js'
  // import {formatTimestamp} from "@/utils/utils";

	export default {
		components: {
			VNavigationBar,
		},
	data() {
		return {
			type:"center",
			messageList: [],
			pageNo: 1,
			pageSize: 15,
			total: 0,
			//下来刷新状态
			isTriggered:false,
			//是否显示一键清空
			showClear:true,
			nowReadItem:{},
			systemCode: 'jiaxiao',
		};
	},
    onLoad(){

    },
    onShow(){
      this.getList()
    },
    methods:{
		  /**
       * 点击阅读消息
       */
      async readNotice(item) {
        this.nowReadItem = item
        // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
        this.$refs.popup.open(this.type)
        //直接请求后台已读
        await request({
          url: "/app-api/system/notify-message/update-read",
          method: "PUT",
          params:{ids:this.nowReadItem.id},
          tenantIdFlag:false
        }).then((res) => {
          if(res.code==200){
            this.onRefresherrefresh()
          }
        })
      },
      /**
       * 消息设置为已读
       */
      dialogToggle(){
        this.$refs.popup.close()
      },
		  /**
       * 一键清空未读消息
       */
      async clearNoReadFun(){
        console.log("清空了")
        await request({
          url: "/app-api/system/notify-message/update-all-read",
          method: "PUT",
          tenantIdFlag:false
        }).then((res) => {
          if(res.code==200){
            uni.showToast({
              title: '操作成功',
              icon: 'none'
            })
            setTimeout(()=>{
              this.onRefresherrefresh()
            },500)
          }
        })
      },
      formatTime(value){
        // 将时间戳转换为Date对象
        const date = new Date(value);
        // 获取年月日时分秒
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hours = date.getHours().toString().padStart(2, '0');
        const minutes = date.getMinutes().toString().padStart(2, '0');
        const seconds = date.getSeconds().toString().padStart(2, '0');
        // 组合成日期时间字符串
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      /**
       * 上滑加载数据
       */
      onReachBottomCus() {
        //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
        if (this.pageNo * this.pageSize >= this.total) {
          uni.$u.toast('没有更多数据了')
          return
        }
        //页码+1,调用获取数据的方法获取第二页数据
        this.pageNo++
        //此处调用自己获取数据列表的方法
        this.getList()
      },
      /**
       * 下拉刷新数据
       */
      onRefresherrefresh(){
        this.isTriggered = true
        this.pageNo = 1
        this.total = 0
        this.messageList = []
        this.getList()
      },
      /**
       * 分页查询
       */
      async getList(){
        await request({
          url: "/app-api/system/notify-message/my-page",
          method: "GET",
          params:{
            pageNo:this.pageNo,
            pageSize:this.pageSize
          },
          tenantIdFlag:false
        }).then((res) => {
          //判断 如果获取的数据的页码不是第一页，就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
          if (this.pageNo != 1) {
            this.messageList = this.messageList.concat(res.data.list)
          } else {
            this.messageList = res.data.list
          }
          //将获取的总条数赋值
          this.total = res.data.total
          this.isTriggered = false
        })
      },
    }
	}
</script>

<style lang="less" scoped>
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	.body {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.messageList {
		flex: 1;
		display: flex;
		flex-direction: column;
		
		.itemContent {
		      flex: 1; // 核心：scroll-view 占满剩余空间
		      display: flex;
		      flex-direction: column;
			  padding: 0 20rpx;
			  box-sizing: border-box;
		    }
	}
	.messageItem {
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		column-gap: 20rpx;
		border-bottom: 1rpx solid #EEEEEE;

		.messageIcon {
			width: 80rpx;
			height: 80rpx;
		}
    .noReadTitle {
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
    }
    .noReadTitle:after{
      content: "*";
      color: red;
      display: block; /* 或者其他的块级显示类型，比如 inline-block, table 等 */
      position: absolute; /* 或者 absolute 或者 fixed，取决于你的布局需求 */
      z-index: 1; /* 确保它在元素的上方 */
      right: 0;
    }

		.messageContent {
			flex: 1;
			width: 0;
		}
		.messageTitle {
			font-size: 32rpx;
			color: #333333;
		}
		.messageContent_content {
			font-weight: 500;
			font-size: 28rpx;
			color: #858BA0;

			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin-top: 20rpx;
		}
  }
  .popup-content {
    padding: 15px;
    height: auto;
    margin: auto;
    width: 80%;
    background-color: #fff;
  }
  .popup-content-text {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text {
    color: #333;
  }

  .popup-info {
    margin-top: 30rpx;
    color: #fff;
    background-color: #f2f6fc;
  }

  .info-text {
    color: #909399;
  }
}
</style>