WenWuGuanJia/user_fenbao/houTai/xunCha.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="巡查管理" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>

		<view class="ranking_menu">
			<view @click="rankingTab(index)" class="ranking_item" :class="{ active2: menuTab == index }" v-for="(item, index) in rankingList" :key="item.index">
				<view class="tab_tit">
					{{ item.title }}
				</view>
			</view>
		</view>
		<!-- 时间 -->
		<view class="tab_box">
			<view @click="tabBtn(index)" class="tab_item" v-for="(item, index) in recordTab" :key="item.index" :class="{ active: index === tab }">
				<view class="tab_tit">
					{{ item.title }}
				</view>
			</view>
		</view>
		<view class="tit_box">
			<view style="width: 158rpx" class="">志愿者</view>
			<view style="width: 158rpx">文物名称</view>
			<view style="width: 158rpx">巡查时间</view>
			<view style="width: 158rpx">文物状况</view>

			<view style="width: 158rpx">操作</view>
		</view>
		<view class="jl_box">
			<scroll-view v-if="recordList.length > 0" style="height: 1000rpx" scroll-y="true" @scrolltolower="LoadMore">
				<view>
					<view class="jl_item" v-for="item in recordList" :key="item.id">
						<view class="bk" style="line-height: 120rpx">{{ item.name }}</view>
						<view class="bk" style="line-height: 120rpx; overflow-x: auto; white-space: nowrap">
							{{ item.cr_title }}
						</view>
						<view class="bk">
							{{ item.progress == 3 ? item.submit_time : item.progress == 2 ? item.submit_time : item.progress == -1 ? item.submit_time : '' }}
						</view>
						<view class="bk" style="line-height: 120rpx">
							{{ item.status_text }}
						</view>
						<!-- <view v-if="item.status == '-2'" class="bk" style="display: flex; justify-content: space-around">
							<view class="ck">提醒</view>
						</view> -->
						<view @click="checkBtn(item.id)" class="bk" style="display: flex; justify-content: space-around">
							<view class="ck">查看</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view v-else>
				<u-empty text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
			</view>
		</view>

		<!-- 日历 -->
		<uv-calendars ref="calendars" mode="range" lunar @confirm="confirmOk" />
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			tab: -1,
			time: '' /* 时间筛选 */,
			result: '' /* 自定义时间 */,
			menuTab: 0,
			progressId: 0 /* 任务状态id */,
			page: 1,
			status: '',
			isLoading: false,
			rankingList: [
				{
					title: '待巡查',
					id: '0'
				},
				{
					title: '待审核',
					id: 2
				},
				{
					title: '已通过',
					id: 3
				},

				{
					title: '驳回',
					id: -1
				},
				{
					title: '未提交',
					id: -2
				},
				{
					title: '正常',
					status: 1
				},
				{
					title: '异常',
					status: 2
				}
			],

			recordTab: [
				{
					title: '今天',
					time: 'today'
				},
				{
					title: '本周',
					time: 'week'
				},
				{
					title: '上周',
					time: 'last week'
				},
				{
					title: '本月',
					time: 'month'
				},
				{
					title: '上月',
					time: 'last month'
				},
				{
					title: '今年',
					time: 'year'
				},
				{
					title: '去年',
					time: 'last year'
				},
				{
					title: '自定义',
					time: ''
				}
			],

			recordList: [] /* 巡查任务列表 */
		};
	},

	onLoad() {
		that = this;
		this.getPatrolTask();
	},
	methods: {
		// 巡查任务列表
		getPatrolTask(id) {
			this.isLoading = true;
			this.$api.getPatrolTask(
				{ status: this.status, custom_time: this.result || '', created_at: this.time, main_body_id: 1, page: this.page, pageSize: 30, progress: id ? id : this.progressId },
				function (res) {
					if (res.code == 1) {
						that.isLoading = false;
						that.recordList = [...that.recordList, ...res.data];
						// console.log(that.recordList, '任务');
					}
				}
			);
		},
		LoadMore() {
			// console.log(454);
			if (this.isLoading) {
				return;
			} else {
				// console.log(69666);
				this.page++;
				this.getPatrolTask(this.progressId);
			}
		},
		// 查看巡查详情
		checkBtn(id) {
			uni.navigateTo({
				url: '/user_fenbao/houTai/taskDEetailsPage?id=' + id
			});
		},
		// 时间筛选
		tabBtn(i) {
			this.page = 1;
			if (this.tab === i) {
				this.tab = -1;
				this.time = '';
				return;
			}
			this.tab = i;
			this.recordList = [];
			this.time = this.recordTab[i].time;
			if (this.recordTab[i].title != '自定义') {
				this.result = '';
				this.getPatrolTask(this.progressId);
			}
			if (this.recordTab[i].title == '自定义') {
				this.$refs.calendars.open();
			}
		},
		// 状态筛选
		rankingTab(i) {
			this.page = 1;
			this.recordList = [];
			this.menuTab = i;
			this.status = this.rankingList[i].status || '';
			this.progressId = this.rankingList[i].id;
			if (this.rankingList[i].title == '正常' || this.rankingList[i].title == '异常') {
				this.progressId = 3;
				this.getPatrolTask();
			} else {
				this.getPatrolTask(this.rankingList[i].id);
			}
		},
		confirmOk(e) {
			console.log(e);
			this.page = 1;
			this.result = `${e.range.before} - ${e.range.after}`;
			// console.log(this.result, '自定义');
			this.recordList = [];
			this.getPatrolTask(this.progressId);
		},
		close() {}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	height: 100%;
}
.uv-toolbar__wrapper__confirm.data-v-58504ea1 {
	color: #3c9cff !important;
}
.tab_box {
	width: 94%;
	margin: auto;
	margin-top: 40rpx;
	align-items: center;
	display: flex;
	justify-content: space-between;
}
.tab_item {
	width: 125rpx;
	height: 62rpx;
	background-image: url('/static/img/sj_tit2.png');
	background-size: 100% 100%;
}
.tab_tit {
	font-weight: 700;
	font-size: 28rpx;
	line-height: 62rpx;
	color: #95543f;
	text-align: center;
}
.active {
	background-image: url('/static/img/sj_tit.png') !important;
	background-size: 100% 100%;
}

.tit {
	font-weight: 700;
	font-size: 32rpx;
	line-height: 50rpx;
	align-items: center;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
}
.jl_box {
	/* height: 500rpx; */
	margin: auto;
	text-align: center;
	/* overflow: scroll; */
}
.tit_box {
	display: flex;
	height: 60rpx;
	line-height: 60rpx;
	font-weight: 700;
	font-size: 28rpx;
	text-align: center;
	margin-top: 40rpx;
	justify-content: space-around;
	background-color: #e4c3a6;
}
.jl_item {
	display: flex;
	justify-content: space-around;

	font-size: 30rpx;
	margin-bottom: -4rpx;
	border-bottom: 4rpx solid #e7cbad;
}

.bk {
	align-items: center;
	width: 100%;
	height: 120rpx;
	border-top: 4rpx solid #e7cbad;
	border-right: 4rpx solid #e7cbad;
}
.ck {
	width: 100rpx;
	height: 50rpx;
	line-height: 50rpx;
	margin-top: 15rpx;
	background-color: #e7cbad;
}
.ranking_menu {
	width: 90%;
	margin: auto;
	margin-top: 50rpx;
	display: flex;
	justify-content: space-between;
	font-size: 28rpx;
	color: rgba(68, 68, 68, 0.6);
	text-align: center;
	line-height: 60rpx;
}
.ranking_item {
	width: 260rpx;
	height: 62rpx;
}
.active2 {
	background-image: url('/static/img/gr_tab.png');
	background-size: 100% 100%;
}
</style>