ybxf-security-uniapp/pagesA/fire/auditRecord/auditRecord.vue

<template>
	<view class="uni-container uni-container-bg">
		<view class="" v-if="tableData.length!=0">
			<uni-card v-for="(item, index) in tableData" :key="index">
				<view class="titles">{{item.taskName}}</view>
				<view style="float: left;">任务说明:</view>
				<rich-text :nodes="item.taskContent?item.taskContent:''" class="conts"></rich-text>
				<view class="an-niu">
					<text @click="addClickDetail(item.broadId)" class="detail">查看详情</text>
				</view>
			</uni-card>
		</view>
		<view style="text-align: center;">
			<view class="text-gray" style="padding-top: 20px;" v-if="tableData.length==0"> 暂无主动检查任务 </view>
		</view>
		<view>
			<!-- <image :src="Group" @click="addClick" class="tiantupian"></image> -->
		</view>
	</view>
</template>

<script>
	import {
		taskList, //获取除草稿箱以外的列表
	} from "@/api/check_active";
	export default {
		data() {
			return {
				tableData: [],
				// 数据总量
				total: 0,
				formdata: {
					pageNo: 1,
					pageSize: 10,
					// receiver: this.$store.state.user.id,
					taskStatus: 3
				},
			};
		},
		onShow() {
			this.tableData = []
			this.getData(this.formdata.pageNo)
		},
		methods:{
			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true;
				this.formdata.pageNo = pageNo ? pageNo : 1;
				const json = JSON.stringify(this.formdata)
				taskList(json).then(response => {
					this.tableData = [...this.tableData, ...response.data.list]
					this.total = response.data.total
					this.loading = false;
					// console.log('this.tabk=-=======================',this.tableData);
				})
			},
			// 触底的事件
			onReachBottom() {
				// 判断是否还有下一页数据
				if (this.formdata.pageNo  * this.formdata.pageSize >= this.total) return uni.showToast({
					title: `数据加载完毕`
				})
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if (this.loading) return
				this.formdata.pageNo += 1
				this.getData(this.formdata.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>