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

<template>
	<view class="container uni-container uni-container-bg">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="button" active-color="#C3D8F9"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<!-- 	<view class=" ">
					<uni-card v-for="(item, index) in tableData" :key="index" :title="item.name"
						:sub-title="item.code" extra="去完成" @click="onClick(item)">
						<view class=" flex  flex-direction">
							<text class="text-cut">任务介绍：{{item.introduction}}</text>
							<text class="text-cut">发布单位：{{item.unit}}</text>
							<text class="text-cut">
								<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
									<uni-col :span="18" class="text-cut text-grey1">截止时间：{{item.cutofftime}}</uni-col>
									<uni-col :span="6" class="justify-end flex ">
										<u-button size="small"
											:color="item.status==='0'||item.status==='3'?'red':item.status==='1'?'green':'blue'"
											style="width: 160rpx;">{{statusListTran(item.status)}}</u-button>
									</uni-col>
								</uni-row>
							</text>
						</view>
					</uni-card>
				</view> -->
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
						<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
							<uni-col :span="24">
								<text class="text-xl font-weight-700">
									{{item.name}}
								</text>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-xl font-weight-700">
								<u-line></u-line>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1"> 任务介绍：{{item.introduction}}</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">发布单位：{{item.unit}}</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="18" class="text-cut text-grey1">截止时间：{{item.cutofftime}}</uni-col>
							<uni-col :span="6" class="justify-end flex ">
								<u-button size="small"
									:color="item.status==='0'||item.status==='3'?'#D51A52':item.status==='1'?'#00B998':'#2563EB'"
									style="width: 160rpx;">{{statusListTran(item.status)}}</u-button>
							</uni-col>
						</uni-row>
					</u-list-item>
				</u-list>
			</view>
			<view v-if="current === 1">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
						<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-xl font-weight-700">
								<text class="text-xl font-weight-700">
									{{item.name}}
								</text>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-xl font-weight-700">
								<u-line></u-line>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1"> 任务介绍：{{item.introduction}}</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">发布单位：{{item.unit}}</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="18" class="text-cut text-grey1">截止时间：{{item.cutofftime}}</uni-col>
							<uni-col :span="6" class="justify-end flex ">
								<u-button size="small" color="#D51A52" style="width: 160rpx;">未完成</u-button>
							</uni-col>
						</uni-row>
					</u-list-item>
				</u-list>
			</view>
			<view v-if="current === 2">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
						<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-xl font-weight-700">
								<text class="text-xl font-weight-700">
									{{item.name}}
								</text>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-xl font-weight-700">
								<u-line></u-line>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1"> 任务介绍：{{item.introduction}}</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">发布单位：{{item.unit}}</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="18" class="text-cut text-grey1">截止时间：{{item.cutofftime}}</uni-col>
							<uni-col :span="6" class="justify-end flex ">
								<u-button size="small" color="#2563EB" style="width: 160rpx;">审核中</u-button>
							</uni-col>
						</uni-row>
					</u-list-item>
				</u-list>
			</view>
			<view v-if="current === 3">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
						<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-xl font-weight-700">
								<text class="text-xl font-weight-700">
									{{item.name}}
								</text>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-xl font-weight-700">
								<u-line></u-line>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1"> 任务介绍：{{item.introduction}}</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="24" class="text-cut text-grey1">发布单位：{{item.unit}}</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
							<uni-col :span="18" class="text-cut text-grey1">截止时间：{{item.cutofftime}}</uni-col>
							<uni-col :span="6" class="justify-end flex ">
								<u-button size="small" color="#00B998" style="width: 160rpx;">已完成</u-button>
							</uni-col>
						</uni-row>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
</template>
<script>
	let that = null;
	import {
		getTask
	} from "@/api/task";
	export default {
		data() {
			return {
				current: 0,
				items: ['全部', '未完成', '审核中', '已完成'],
				// 数据
				tableData: [],
				// 每页数据量
				pageSize: 20,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				statusList: {
					0: "未完成",
					1: "已完成",
					2: "审核中",
					3: "审核未通过"
				},
			}
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			this.getData(1)
		},
		methods: {
			// =================数据转换==================
			statusListTran(val) { //status状态转换
				return this.statusList[val]
			},
			// ================================
			// tab头部点击
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true
				this.pageNo = pageNo
				getTask({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					status: '1',
				}).then(response => {
					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
					this.tableData = [...this.tableData, ...response.data.list]
					// this.tableData = response.data.list;
					this.total = response.data.total;
					this.loading = false;
				});
			},
			onClick(val) {
				uni.navigateTo({
					url: '/pagesA/fire/check_tasks/tasks_details/tasks_details?id=' + val.id,
					// events: {
					// 	// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					// 	acceptDataFromOpenedPage: function(val) {
					// 	},
					// },
					// 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>
</style>