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

<template>
	<view class="uni-container-bg uni-container ">
		<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>
		<view class="" v-if="tableData.length>0 && isLoaded">
			<uni-card v-for="(item, index) in tableData" :key="index" @click.native="onNoticeClick(item)">
				<view class="titles">{{item.title}}</view>
				<view style="float: left;">通知公告说明:</view>
				<!-- <text class="conts">{{item.taskContent}}</text> -->
				<rich-text :nodes="item.content?item.content:''" class="font-12"></rich-text>
				<view class="an-niu">
					<text @click.native="onNoticeClick(item)" class="detail">查看详情</text>
				</view>
			</uni-card>
		</view>
		<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>
		<view>
			<!-- <image :src="Group" @click="addClick" class="tiantupian"></image> -->
		</view>


		<!-- 		
		<u-list @scrolltolower="scrolltolower" class="card">

			<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onNoticeClick(item)" link>
				<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.title" class="font-12"></rich-text>
						<text class="uni-body font-14 text-bold ">{{item.title}}</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.content" class="font-12"></rich-text>
						<text class="uni-body">{{item.comContent}}</text>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row padding-tb-sm text-sm" :gutter="20" width="100%">
					<uni-col :span="24" class=" text-grey1   ">
						<text class="uni-body flex justify-end ">{{item.createTime}}</text>
						<text class="uni-body flex justify-end ">09-26</text>
					</uni-col>
				</uni-row>
				<u-button type="primary" text="详情" plain size="small" style="width: 20%;float: right;"></u-button>
			</u-list-item>
		</u-list> -->
		<tarBar :totarBer='tar'></tarBar>
		<!-- 加载中 -->
		<isLodingModel></isLodingModel>
	</view>
</template>
<script>
	import tarBar from '@/components/tabBar/index' //先把tabBar.vue组件导入
	import {
		getNoticeList, // 通知公告列表 
	} 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: [],
				// 每页数据量
				pageSize: 20,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				// 初始化时搜索框的值
				keyword: '',
				ids: '0',
				title: '1',
				tan90: `${baseUrlImg}/tan90.png`,
			}
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			this.ids = option.id
		},
		onShow() {
			this.tableData = []
			// this.tableD
			this.getData(this.pageNo)
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		methods: {
			handleQuery() { //搜索
				this.isLoaded = false
				this.loading = true
				this.tableData = []
				this.getData(1)
			},
			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true
				this.pageNo = pageNo
				getNoticeList({
					pageNo: this.pageNo,
					pageSize: 10,
					title: this.keyword
				}).then(response => {
					this.isLoaded = true
					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
					this.tableData = [...this.tableData, ...response.data.list]
					// this.tableData = response.data.list;
					this.total = response.data.total;
					this.loading = false;
					console.log(response, 'response');
				});
			},
			// 单个公告详情点击事件
			onNoticeClick(val) {
				this.isLoaded = false
				uni.navigateTo({
					url: `/pagesA/fire/notice/notcice_details/notcice_details?id=${val.id}`,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', val)
					}
				})
			},
			// scrolltolower() {
			// 	// 判断是否还有下一页数据
			// 	if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
			// 		title: `数据加载完毕`
			// 	})
			// 	// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			// 	if (this.loading) return
			// 	this.pageNo += 1
			// 	this.getData(this.pageNo)
			// },
		},
		// 触底的事件
		onReachBottom() {
			// 判断是否还有下一页数据
			if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
				title: `数据加载完毕`
			})
			// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			if (this.loading) return
			this.pageNo += 1
			this.getData(this.pageNo)
		},
	}
</script>
<style lang="scss" scoped>
	body {
		background-color: #F5F7F9;
	}

	page {
		background-color: #F5F7F9;
	}

	.an-niu {
		float: right;
		font-size: 10px;
		text-align: center;
		display: flex;
		padding-bottom: 30rpx;
		margin-top: 50rpx;
		color: #fff;

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

	//列表样式
	.titles {
		font-weight: 600;
		margin-bottom: 10rpx;
		font-size: 14px;
	}

	/deep/.uni-card {
		box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
		border-radius: 30rpx;
	}

	rich-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
</style>