Dining_Hall/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.custName}}</view>
				  </view>
				  <view class="desc">{{ item.content }}</view>
				  <view class="img-box">
					  <view style="width: 110rpx;height: 110rpx;margin-right: 20rpx;" v-for="(imgItem,imgIndex) in item.complaintPictureList" :key="imgIndex">
						<image :src="imgItem" mode="" style="width: 100rpx;height: 100rpx;" @click="opePopup(imgItem)"></image>
					  </view> 
				  </view>
				  <view class="time">{{ item.crtime }}</view>
				</view>
			</view>
		</scroll-view>
		
		
		<u-popup :show="showPic" mode="center" @close="showPic=false">
			<image :src="imagerUrl" mode="aspectFit" style="height: 100vh;width: 100vw;" @click="showPic=false"></image> 
		</u-popup>
	</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,
			showPic:false,
			imagerUrl:""
		}
	},
	onLoad(){ 
		this.getNoticeList()
	},
	methods: { 
		// 翻页
		onScrollTolower(){
			console.log(this.messageList.length)
			// if(this.total>this.messageList.length){
			// 	this.pageNum++
			// 	this.getNoticeList()
			// }
		},
		//获取通知消息
		async getNoticeList() {
			let param = {
				// "current": this.pageNum,
				// "size": this.pageSize,
				// "custId": uni.getStorageSync('custId'),
			}
			const res = await getqueryPlaintApi(param)
			console.log(res)
			this.messageList = res
			// this.total = res.total;
			// if(this.pageNum==1){
			// 	this.messageList = res.records
			// }else{
			// 	this.messageList.push(...res.records)
			// }
		}, 
		handleTabChange(index) {
		  console.log('?? ~ changeTab ~ index:', index)
		  this.currentTab = index
		},
		opePopup(item){
			this.imagerUrl = item;
			this.showPic = true
		}
	}
}
</script>

<style scoped lang="scss">
  page {
    background: #fff;
  }
  .message-page {
    height: 96vh; 
	overflow-y: auto;
    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;
	  align-items: center;
	  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>