YNUtdPlatform/pages/message/index.vue

<template>
	<view class="home">
		<view class="top-box">
			<view class="search-top">
				<u--input v-model="queryParam.keyWord" placeholder="搜索" prefixIcon="search"
					style="border-radius: 80rpx;background-color: #f9f9f9;" @change="change0"
					prefixIconStyle="font-size: 22px;color: #909399;"></u--input>
				<image src="../../static/images/qingsao.png" @click="reset"></image>
			</view>
			<view class="search">
				<view class="search-one1">
					<uni-data-select v-model="queryParam.appId" :localdata="range" @change="change1"
						placeholder="系统不限" :clear="false"></uni-data-select>
				</view>
				<view class="search-one2">
					<uni-datetime-picker v-model="timeRange" type="daterange" @maskClick="maskClick"  @change="onTimeChange"/>
				</view>
				<view class="search-one3">
					<uni-data-select v-model="queryParam.status" :localdata="range3" @change="change2"
						placeholder="状态不限"  :clear="false"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="list" v-if="indexList.length>0">
			<view class="u-page">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in indexList" :key="index">
						<view class="list-one" @click="gotoDetail(item)">
							<image :src="item.base64Url" class="list-img">
							</image>
							<view class="one-content">
								<view class="one-top">
									<view class="top-left">{{item.appName}}</view>
									<view class="top-right">{{item.addTime}}</view>
								</view>
								<view class="one-bottom">
									<view class="bottom-left">{{item.noticeTitle}}</view>
									<view class="bottom-right wd" v-if="item.noticeStatus==0">未读</view>
									<view class="bottom-right " v-else>已读</view>
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<view v-else style="text-align: center;font-size: 40rpx;padding: 50rpx;">
			暂无数据
		</view>
		<m-tabbar fixed fill :current="0" :tabbar="tabbar"></m-tabbar>
	</view>
</template>

<script>
	import TabbarConfig from '@/totalTabbar.js'
	import {
		getAppListByUser,
		getNoticeAnnoByUserId
	} from "@/api/index.js"
	export default {
		data() {
			return {
				tabbar: TabbarConfig,
				indexList: [],
				value: "",
				range: [],
				range3: [{
						value: "",
						text: "状态不限"
					}, {
						value: 0,
						text: "未读"
					},
					{
						value: 1,
						text: "已读"
					},
				],
				timeRange:[],
				queryParam: {
					appId: "",
					timeRange: "",
					status: "",
					keyWord: ""
				}
			}
		},
		onShow() {
			this.getAppListByUser()
			this.loadmore()
		},
		methods: {
			getAppListByUser() {
				this.range = [{
					value: "",
					text: "系统不限"
				}]
				getAppListByUser({}).then(response => {
					console.log(response);
					if (response.code == 200) {
						var temp = []
						response.data.forEach(e => {
							if (!temp.includes(e.id)) {
								temp.push(e.id)
								this.range.push({
									value: e.id,
									text: e.name
								})
							}
						})

					}
				});
			},

			scrolltolower() {
				// this.loadmore()
			},
			loadmore() {
				this.indexList = []
				getNoticeAnnoByUserId(this.queryParam).then(response => {
					console.log(response);
					if (response.code == 200) {
						response.data.forEach(e => {
							this.indexList.push(e)
						})
					}
				});
			},
			gotoDetail(item) {
				uni.navigateTo({
					url: "/pages/message/detail?id=" + item.id
				})
			},
			change0(e) {
				console.log("e:", e);
				this.queryParam.keyWord = e
				this.loadmore()
			},
			change1(e) {
				console.log("e:", e);
				this.queryParam.appId = e
				this.loadmore()
			},
			onTimeChange(e) {
				console.log("e:", e);
				this.queryParam.timeRange = e.join(" - ")
				this.loadmore()
			},
			change2(e) {
				console.log("e:", e);
				this.queryParam.status = e
				this.loadmore()
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			reset() {
				this.timeRange=[]
				this.queryParam = {
					appId: "",
					timeRange: "",
					status: "",
					keyWord: ""
				}
				this.loadmore()
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #eef3fa !important;
	}

	.search-top {
		padding: 20rpx;
		display: flex;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-top: 10rpx;
			margin-left: 10rpx;
		}
	}

	.search {
		display: flex;
		justify-content: space-between;
		padding: 10rpx;

		.search-one1 {
			width: 30%;
		}

		.search-one2 {
			width: 45%;
		}

		.search-one3 {
			width: 23%;
		}

	}

	.top-box {
		background-color: white;
		margin-bottom: 10rpx;
	}

	.list {
		background-color: white;
	}

	.list-one {
		display: flex;
		padding: 20rpx 40rpx;
		border-bottom: 1px solid #efefee;


		.list-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
		}

		.one-content {
			padding-left: 20rpx;
			line-height: 50rpx;
			width: calc(100% - 120rpx);

			.one-top {
				display: flex;
				justify-content: space-between;

				.top-left {
					font-weight: bold;
				}
			}

			.one-bottom {
				display: flex;
				justify-content: space-between;

				.bottom-left {
					color: rgb(142, 142, 142);
					width: calc(100% - 100rpx);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.bottom-right {
					background-color: rgb(207, 207, 207);
					color: white;
					padding: 2rpx 12rpx;
				}

				.wd {
					background-color: rgb(251, 17, 17);
				}
			}
		}
	}
</style>