jyy-smart-canteen-h5/pages/mine/announcement/index.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="message-page">
    <!-- 搜索框 -->
   <!-- <u-search
      v-model="searchText"
      placeholder="输入搜索关键词"
      :show-action="false"
      :clearabled="true"
      shape="round"
      bg-color="#f5f5f5"
    ></u-search> -->

    <!-- 标签页 -->
    <!-- <div style="margin-top: 4%;">
      <Tabs :tabList="tabList" @changeTab="handleTabChange" /> 
    </div> -->
	<view style="width: 94%;margin: 10px auto;height: 40px;display: flex;align-items: center;">
		<view style="display: flex;align-items: center;">
			<view class="unread-dot"></view>
			<view style="margin-left: 5px;color: #FF0000;" v-if="messageNumber>0">{{messageNumber}}</view>
		</view>
		<view style="margin-left: 10px;font-size: 30rpx;font-weight: bold;">
			通知列表
		</view>
	</view>

    <!-- 消息列表 -->
    <!-- <view class="message-list"> -->
	<scroll-view style="width: 100%;height: 85vh;" @scrolltolower="onScrollTolower" scroll-y="true">
      <view class="message-item" v-for="(item, index) in messageList" :key="index" @click="handleMessageClick(item)">
        <!-- 左侧图标 -->
        <view class="icon-wrapper" style="background-color: #b5bec9;">
          <u-icon name="volume-fill" color="#fff" size="32"></u-icon>
        </view>

        <!-- 消息内容 -->
        <view class="content">
          <view class="title-box">
			  <!-- <view class="title">通知</view> -->
			  <view class="time">{{ item.noticeTitle }}</view>
		  </view>
          <view class="desc" style="min-height: 42px;">{{ item.noticeContentNoHtml }}</view>
		  <view class="desc" style="float: right;height: 20px;">{{item.updateTime}}</view>
        </view>

        <!-- 右侧信息 -->
     <!--   <view class="right-info">
          <view class="time">{{ item.informStatime }}</view>
          <view v-if="!item.isRead" class="unread-dot"></view>
        </view> -->
		
      </view>
    </scroll-view>
  </view>
</template>

<script>
import UTabs from '../../../uni_modules/uview-ui/components/u-tabs/u-tabs.vue'
import Tabs from '../../components/Tabs.vue'
import UIcon from '../../../uni_modules/uview-ui/components/u-icon/u-icon.vue'
import { queryUserInformApi,queryUnreadInformNumApi } from '@/api/mine/index'

export default {
	name: 'index',
	components: { UIcon, Tabs, UTabs },
	data() {
		return { 
			fontValue:uni.getStorageSync('fontSize') || 8,
			searchText: '',
			currentTab: 0,
			// tabList: ['全部', '已查看', '未查看'],
			tabList: ['通知列表'],
			pageNum: 1,
			pageSize: 10,
			total: 0,
			messageList: [],
			messageNumber:0
		}
	},
	onLoad(){
		// this.getUnReadNoticeNum()
		this.getNoticeList()
	},
	methods: {
		//通知消息数量
		async getUnReadNoticeNum() {
			let param = {
				"userId": uni.getStorageSync('userId'),
			}
			const res = await queryUnreadInformNumApi(param)
			console.log(res, '通知消息数量--')
			this.messageNumber = Number(res.data)
		 
		},
		// 翻页
		onScrollTolower(){
			console.log(this.messageList.length)
			if(this.total>this.messageList.length){
				this.pageNum++
				this.getNoticeList()
			}
		},
	  //获取通知消息
	  async getNoticeList() {
	  	let param = {
			"pageNum": this.pageNum,
			"pageSize": this.pageSize,
	  		"userId": uni.getStorageSync('userId'),
	  	}
	    const res = await queryUserInformApi(param)
	    console.log(res, '通知消息--')
		this.total = res.total;
	    if(this.pageNum==1){
	    	this.messageList = res.rows
	    }else{
	    	this.messageList.push(...res.rows)
	    }
	  },
	  
    handleTabChange(index) {
      console.log('?? ~ changeTab ~ index:', index)
      this.currentTab = index
    },

    handleMessageClick(item) {
      console.log('?? ~ handleMessageClick ~ ', item)   
      uni.navigateTo({
        url: `/pages/mine/announcement/aDetails?params=${JSON.stringify(item)}`
      })
    },
  }
}
</script>

<style scoped lang="scss">
  page {
    background: #fff;
  }
  .message-page {
    min-height: 94vh;
    background-color: #f5f5f5;
    background: #fff;
    padding: 12px;
  }

  .message-list {
    padding: 12px 0;
  }

  .message-item {
    display: flex;
    align-items: flex-start;
    background-color: #ffffff;
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 8px;
  }

  .icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
  }

  .upgrade {
    background-color: #2ed573;
  }

  .warning {
    background-color: #ff7f50;
  }

  .read {
    background-color: #b5bec9;
  }

	.content {
		flex: 1;
		margin-right: 12px;
	}
	.title-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title {
		width: 60px;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 4px;
	
	}

  .desc {
    font-size: 24rpx;
    color: #666;  
	overflow: hidden; /* 隐藏溢出的文本 */
	text-overflow: ellipsis; /* 显示省略号 */
  }

  .right-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .time {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 4px;
  }

  .unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ff0000;
  }
</style>