ybxf-security-uniapp/pagesA/fire/remind/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 style="float: left;">发布日期:{{item}}</view>
				<view class="an-niu">
					<view class="an-niu-street" @click.native="uploadButton" link>
						<text class="bianji">上传</text>
					</view>
					<text @click="isRead" class="detail isread">已阅</text>
					<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>
		<u-popup :show="showDel" title="完成提醒" mode="center">
			<view style="width: 400rpx;height: 200rpx;margin: 20rpx 20rpx;">
				<view>完成描述</view>
				<u--textarea v-model="eventContent" placeholder="请输入内容" :disabled="isview" :maxlength="1000" count
					height="150">
					<view class="">
						附件上传
					</view>
					<uni-file-picker v-model="formData.attId" del-icon limit="5" auto-upload file-mediatype="all"
						@select="selectFile" @delete="deleteFile">
						<button type="primary" class="selectBtn">选择文件</button>
						<!-- 加载中 -->
						<isLodingModel v-if="loading"></isLodingModel>
					</uni-file-picker>
				</u--textarea>
				<view style="display: flex;justify-content: space-around;align-items: center;margin-top: 40rpx;">
					<button class="antherBtn" @click="makeSureDel" style="background-color: red;">确认</button>
					<button class="antherBtn" @click="showDel = false">取消</button>
				</view>
			</view>
		</u-popup>
		<!-- 加载中 -->
		<isLodingModel></isLodingModel>
	</view>
</template>
<script>
	import tarBar from '@/components/tabBar/index' //先把tabBar.vue组件导入
	import {
		getRemindBroadPage, // 通知公告列表 
	} from "@/api/remind";
	import {
		uploadFile
	} from '@/utils/common.js';
	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`,
				eventContent: '', //上传描述内容
				fileUrls: [], //上传附件
				formData: {
					attId: []
				},
			}
		},
		// 在 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
				const deptId = uni.getStorageSync('getUserInfo_key')?.streetInfo?.id;
				const userId = uni.getStorageSync('getUserInfo_key')?.userInfo?.id;
				getRemindBroadPage({
					pageNo: this.pageNo,
					pageSize: 10,
					reciver: deptId,
					userId: userId
				}).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;
				});
			},
			// 移出图片函数
			async deleteFile(e) {
				this.formData.attId = [];
			},
			selectFile(e) {
				let promises = [];
				for (let i = 0; i < e.tempFilePaths.length; i++) {
					const promise = uploadFile(e.tempFilePaths, i, this);
					promises.push(promise);
				}
				Promise.all(promises).then(result => {
					// 处理上传文件成功的结果
				}).catch(error => {
					// 处理上传文件失败的错误
				});
			},
			// 单个公告详情点击事件
			onNoticeClick(val) {
				this.isLoaded = false
				uni.navigateTo({
					url: `/pagesA/fire/remind/details/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;
		cursor: pointer;

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

		.isread {
			background-color: #18a2f7;
		}
	}

	//列表样式
	.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>