jyy-smart-canteen-h5/pages/feedback/history.vue

<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="message-page">    
		<!-- 列表 --> 
		<scroll-view style="width: 100%;height: 92vh;" @scrolltolower="onScrollTolower" scroll-y="true">
			<view class="message-item" v-for="(item, index) in messageList" :key="index">
				<!-- 左侧图标 -->
				<view class="icon-wrapper" style="background-color: #b5bec9;">
				  <u-icon name="email" color="#fff" size="24"></u-icon>
				</view>
				<!-- 消息内容 -->
				<view class="content">
				  <view class="title-box">
					  <view class="title">{{item.createBy}}</view>
				  </view>
				  <view class="desc">{{ item.content }}</view>
				  <!-- <view class="img-box" v-for="(imgItem,imgIndex) in item.complaintPictureList" :key="imgIndex"> -->
				  <view class="img-box">
					  <view style="width: 110rpx;height: 110rpx;margin-right: 20rpx;">
						<image :src="item.complaintPicture" mode="" style="width: 100rpx;height: 100rpx;"></image>
					  </view> 
				  </view>
				  <view class="time">{{ item.createTime }}</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 { getqueryPlaintApi } 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.getNoticeList()
	},
	methods: { 
		// 翻页
		onScrollTolower(){
			console.log(this.messageList.length)
			if(this.total>this.messageList.length){
				this.pageNum++
				this.getNoticeList()
			}
		},
	  //获取通知消息
	  async getNoticeList() {
	  	let param = {
			"userId":uni.getStorageSync("userId"),
			// "userId":1,
			"pageNum": this.pageNum,
			"pageSize": this.pageSize, 
	  	}
	    const res = await getqueryPlaintApi(param)
	    console.log(res)
		// this.messageList = res
		this.total = Number(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
    }, 
  }
}
</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: 30px;
    height: 30px;
    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 {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 4px;
	
	}

  .desc {
    font-size: 26rpx;
    color: #666;
	// padding: ;
  }
  .img-box{
	  width: 94%;
	  margin: 10px auto;
	  display: flex;
	  height: auto;
	  margin-bottom: 10px;
  }

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

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

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