ybxf-security-uniapp/pagesA/fire/notice/instruct/instruct.vue

<template>
	<view class="container uni-container uni-container-bg">
		<view class="padding-tb-sm" style="">
			<uni-row class="demo-uni-row " :gutter="20" width="100%">
				<uni-col :span="24">
					<view class="u-page__tag-item">
						<u-search v-model="keyword" :show-action="true" @custom="handleQuery"></u-search>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<u-list @scrolltolower="scrolltolower" class="card" v-if="tableData.length>0 && isLoaded">
			<view>
				<view class="clear-yidu">
					<image :src="clear_notice" class="yidu"></image>
					<u-button :plain="true" text="全部已读" @click="cleanUnread"
						style="width:180rpx;height:60rpx;border-radius: 2px;background-color: #E4E4E4;">
					</u-button>
				</view>
			</view>
			<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onNoticeClick(item)" link>
				<!-- <u-button type="primary" text="详情" plain size="small" style="width: 20%;float: right;"></u-button> -->
				<uni-row class="demo-uni-row padding-top text-sm" :gutter="20" width="100%">
					<uni-col :span="24" class="text-1cut">
						<!-- <rich-text :nodes="item.comTitle"></rich-text> -->
						<u-badge v-if="item.comBroadDOList[0].isRead==0" :isDot="true" type="warning"></u-badge>
						<text class="uni-body font-14 text-bold">标题:{{item.comTitle}}</text>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row padding-top text-sm" :gutter="20" width="100%">
					<uni-col :span="24" class="text-2cut">
						<rich-text :nodes="item.comContent?item.comContent:''" class="font-12"></rich-text>
						<!-- <text class="uni-body">{{item.comContent}}</text> -->
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col class="an-niu">
						<text @click="onNoticeClick(item)" class="detail">查看详情</text>
					</uni-col>
				</uni-row>

			</u-list-item>
		</u-list>
		<view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
			<view class="text-gray" style="padding-top: 20px;">
				<img :src="tan90" alt="暂无数据" />
			</view>
		</view>
		<tarBar :totarBer='tar'></tarBar>
		<!-- 加载中 -->
		<isLodingModel></isLodingModel>
	</view>
</template>
<script>
	import tarBar from '@/components/tabBar/index' //先把tabBar.vue组件导入
	import {
		getNoticeLists,
		getNoticeAllRead,
		getNoticeOlnyRead
	} from "@/api/notice"; // 指令列表 
	let that = null;
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	export default {
		components: {
			tarBar
		},
		data() {
			return {
				isLoaded: false,
				tar: {
					color: '#07A7E3',
					id: 1
				}, //向子组件发送的值
				// 数据
				tableData: [],
				clear_notice: `${baseUrlImg}/working/clear_notice.png`, //清除未读的图标
				tan90: `${baseUrlImg}/tan90.png`,
				// 每页数据量
				pageSize: 20,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				// 初始化时搜索框的值
				keyword: '',
				ids: '0',
				current: '', //指令
			}
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			this.ids = option.id
		},
		onShow() {
			this.tableData = []
			this.getData(this.pageNo)
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		methods: {
			handleQuery() { //搜索
				this.tableData = []
				this.isLoaded = false
				this.loading = true
				this.getData(1)
			},
			// //查看详情
			// addClickDetail(val) {
			// 	this.isLoaded = false
			// 	uni.navigateTo({
			// 		url: `/pagesA/fire/notice/notcice_details/notcice_details?id=${val.comBroadDOList[0].id}&&current=${this.current}`,
			// 		success: function(res) {
			// 			res.eventChannel.emit('acceptDataFromOpenerPage', val);
			// 		}
			// 	})
			// },
			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true
				this.pageNo = pageNo
				getNoticeLists({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					userId: this.$store.state.user.id,
					comTitle: this.keyword
				}).then(response => {
					this.isLoaded = true
					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
					this.current = response.data.current
					this.tableData = [...this.tableData, ...response.data.records]
					// this.tableData = response.data.list;
					this.total = response.data.total;
					this.loading = false;
					console.log(response, 'response');
				});
			},
			// 触底的事件
			scrolltolower() {
				// 判断是否还有下一页数据
				if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
					title: `数据加载完毕`
				})
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if (this.loading) return
				this.pageNo += 1
				this.getData(this.pageNo)
			},
			//清楚所有未读
			cleanUnread() {
				getNoticeAllRead({
					userId: this.$store.state.user.id
				}).then(response => {
					if (response.data == true) {
						this.isLoaded = false
						this.loading = true
						this.tableData = []
						this.getData();
					}
				});
			},

			// 单个公告详情点击事件
			onNoticeClick(val) {
				console.log(val, 'sd');

				getNoticeOlnyRead({
					id: val.comBroadDOList[0].id
				}).then(response => {
					if (response.data == true) {
						this.isLoaded = false
						uni.navigateTo({
							url: `/pagesA/fire/notice/notcice_details/notcice_details?id=${val.comBroadDOList[0].id}&&current=${this.current}`,
							success: function(res) {
								// 通过eventChannel向被打开页面传送数据
								res.eventChannel.emit('acceptDataFromOpenerPage', val);
							}
						});
					}
				});


			}
		}

	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #F5F7F9;
	}

	/deep/.u-button__text {
		margin-left: 20rpx;
	}

	.clear-yidu {
		margin: 0 20rpx 20rpx 0;
		position: relative;
		width: 180rpx;
		height: 60rpx;
		float: right;

		.yidu {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 16rpx;
			left: 6px;
			z-index: 999;
		}
	}

	.wei-circle {
		background-color: red;
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
	}

	.text-1cut {
		display: flex;
		align-items: center;
	}

	.an-niu {
		// float: right;
		font-size: 10px;
		text-align: center;
		display: flex;
		align-items: end;
		justify-content: flex-end;
		color: #fff;

		.detail {
			width: 72px;
			height: 60rpx;
			border-radius: 30px;
			background-color: #F7C41E;
			margin-right: 20rpx;
			text-align: center;
			line-height: 60rpx;
		}
	}

	.no-notice {
		font-size: 48rpx;
		color: rgb(175, 176, 178);
		text-align: center;
		line-height: 200px;
	}
</style>