WenWuGuanJia/index_fenbao/GuanLi/zhiYuanGeRen.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="巡查守护" titleStyle="font-weight:bold;color:#000000" bgColor="rgba(255,255,255,0)" :placeholder="true"></u-navbar>
		<view style="width: 92%; margin: auto">
			<view>
				<u-swiper
					:list="swiperList"
					imgMode="aspectFill"
					:height="160"
					:indicator="true"
					radius="5"
					:autoplay="true"
					:circular="true"
					indicatorStyle="bottom: 10px"
					indicatorMode="dot"
					indicatorActiveColor="#fff"
					indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
				></u-swiper>
			</view>
			<!-- <view class="gy_box" @click="tougaoBtn">
				<view class="">管理</view>
				<uni-icons type="gear" size="22" color="#000000"></uni-icons>
			</view> -->
			<view class="top_box">
				<view class="time">{{ currentYear }}年</view>
				<view class="item_tit">巡查次数：{{ detailsList.patrolNum !== undefined ? detailsList.patrolNum : '' }}</view>
				<view class="item_tit">月度积分：{{ detailsList.monthScore !== undefined ? detailsList.monthScore : '' }}</view>
				<view class="item_tit">年度积分：{{ detailsList.yearScore !== undefined ? detailsList.yearScore : '' }}</view>
				<view class="item_tit">巡查完成率：{{ detailsList.completion_rate !== undefined ? detailsList.completion_rate : '' }}</view>
			</view>
			<view style="display: flex; justify-content: space-around">
				<view class="tab" @click="taskBtn">
					<view class="jb">任务</view>
					<view class="wb">{{ numberTasks }}</view>
				</view>
				<view class="tab" @click="HistoryBtn">
					<view class="jb">历史巡查</view>
				</view>

				<view class="tab" @click="tougaoBtn">
					<view class="jb">管理</view>
				</view>
			</view>
			<view class="ranking_menu">
				<view @click="rankingTab(index)" class="ranking_item" :class="{ active: Tab == index }" v-for="(item, index) in rankingList" :key="item.index">
					{{ item.title }}
				</view>
			</view>

			<scroll-view v-if="patrolList.length > 0" style="height: 600rpx" scroll-y="true" @scrolltolower="LoadMore">
				<view>
					<view class="tit_box" @click="checkBtn(item)" v-for="item in patrolList" :key="item.id">
						<view class="bk" style="width: 160rpx">{{ item.cr_title }}</view>
						<view class="bk" style="width: 240rpx">
							{{ item.progress == 3 ? item.submit_time : item.progress == 2 ? item.submit_time : item.progress == -1 ? item.submit_time : '' }}
						</view>
						<view class="bk">{{ item.type_text }}</view>
						<view class="ck">查看</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>
		<!-- 非管理员提示 -->
		<u-popup bgColor="#f2c8a2" :show="show" @close="close" mode="center" customStyle="width:600rpx;padding: 30rpx;" round="20rpx">
			<view style="text-align: center; font-size: 32rpx">您当前还不是管理员</view>
			<view style="margin-top: 20rpx"></view>
			<view class="bt_box">
				<view class="bt2" @click="show = false">确认</view>
			</view>
		</u-popup>
		<!-- 去报名弹层 -->
		<u-popup bgColor="#f2c8a2" :show="volhow" @close="close" mode="center" customStyle="width:600rpx;padding: 30rpx;" round="20rpx">
			<view style="text-align: center; font-size: 30rpx">您当前还不是志愿者</view>
			<view style="margin-top: 20rpx"></view>
			<view class="bt_box">
				<view class="bt1" @click="volhow = false">取消</view>
				<view @click="goSignUp" class="bt2">去报名</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			currentYear: new Date().getFullYear(),
			volhow: false /* 非志愿者弹层 */,
			volunteerShow: false /* 是否是志愿者控制页面去报名弹层 */,
			isLoading: false,
			page: 1,
			show: false,
			Tab: 0,
			numberTasks: '' /* 任务数量 */,
			rankingList: [
				{
					title: '待巡查',
					id: '0'
				},
				{
					title: '待审核',
					id: 2
				},
				{
					title: '已通过',
					id: 3
				},

				{
					title: '驳回',
					id: -1
				},
				{
					title: '已过期',
					id: -2
				}
			],
			detailsList: {},
			patrolList: [],
			swiperList: ['https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/zyz_gr.png', 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/gj_zyjz.jpg']
		};
	},
	onLoad() {
		that = this;
		this.details();
		// this.getPatrolTask('0');
	},
	methods: {
		// 志愿者详情判断是否为志愿者
		details() {
			this.$api.details({ main_body_id: 1 }, function (res) {
				if (res.code == 1) {
					if (res.data != false && res.data.id != undefined) {
						that.detailsList = res.data;
						// console.log(that.volunteerDetails, '是志愿者');
						that.volhow = false;
						that.volunteerShow = true;
						// 任务列表
						that.getPatrolTask('0');
					} else {
						// 控制非志愿者弹层
						that.volhow = true;
						that.volunteerShow = false;
						// console.log(that.volunteerShow, '非志愿者点击11');
						// console.log(res, '非志愿者');
					}
				} else {
					console.log(res);
				}
			});
		},
		// 志愿者任务列表
		getPatrolTask(id) {
			this.isLoading = true;
			this.$api.getPatrolTask({ volunteer_id: that.detailsList.id, main_body_id: 1, progress: id ? id : 0, page: this.page, pageSize: 10 }, function (res) {
				if (res.code === 1) {
					that.isLoading = false;
					that.patrolList = [...that.patrolList, ...res.data];
					if (id == '0') {
						that.numberTasks = res.data.length;
					}
					console.log(that.patrolList, '任务');
				} else {
				}
			});
		},
		//
		rankingTab(i) {
			this.Tab = i;
			this.page = 1;
			that.patrolList = [];
			this.getPatrolTask(this.rankingList[i].id);
		},
		tougaoBtn() {
			this.$api.userManageRegionCrAuth({ main_body_id: 1 }, function (res) {
				if (res.data != false) {
					uni.navigateTo({
						url: '/index_fenbao/GuanLi/GuanLi'
					});
				} else {
					that.show = true;
					// console.log(res, '非管理员');
				}
			});
		},
		checkBtn(item) {
			if (item.progress == 0) {
				uni.navigateTo({
					url: '/shouhu_fenbao/xunCha/xunCha?id=' + item.id
				});
			} else {
				uni.navigateTo({
					url: '/user_fenbao/houTai/taskDEetailsPage?id=' + item.id
				});
			}
		},
		taskBtn() {
			uni.switchTab({
				url: '/pages/shouhu/shouhu'
			});
		},
		HistoryBtn() {
			if (this.volunteerShow) {
				uni.navigateTo({
					url: '/shouhu_fenbao/shouHu/woDe'
				});
			}
		},
		goSignUp() {
			uni.navigateTo({
				url: '/index_fenbao/fuWu/baoMing/renLing'
			});
		},
		LoadMore() {
			if (this.isLoading) {
				return;
			} else {
				this.page++;
				this.getPatrolTask();
			}
		},
		close() {
			this.show = false;
			this.volhow = false;
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xbg_2.png');
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: repeat-y;
	min-height: 100%;
	height: auto;
}
.bt1 {
	width: 244rpx;
	height: 78rpx;
	border: 1px solid #312520;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: black;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.top_box {
	position: relative;
	height: 260rpx;
	display: flex;
	text-align: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 30rpx;
	margin-top: 50rpx;
	margin-bottom: 40rpx;
	justify-content: space-around;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/zyz_bk.png');
	background-size: 100% 100%;
}
.bt2 {
	width: 244rpx;
	height: 78rpx;
	background: #ca5642;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
}
.item_tit {
	width: 302rpx;
	font-size: 30rpx;
}
.time {
	position: absolute;
	top: -16rpx;
	text-align: center;
	line-height: 50rpx;
	width: 140rpx;
	height: 45rpx;
	color: #934b36;
	background-image: url('/static/img/time_bg .png');
	background-size: 100% 100%;
}
.tab {
	position: relative;
	width: 195rpx;
	height: 65rpx;
	text-align: center;
	font-weight: 600;
	line-height: 65rpx;
	background-image: url('/static/img/gr_tab.png');
	background-size: 100% 100%;
}
.jb {
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.fg {
	width: 8rpx;
	height: 40rpx;
	background-color: #e36f65;
	border-radius: 10rpx;
	margin-right: 10rpx;
}
.fg_tit {
	font-size: 30rpx;
	font-weight: 600;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.tit_box {
	display: flex;
	align-items: center;
	font-size: 30rpx;
	margin: auto;
	margin-top: 20rpx;
	justify-content: space-between;
}
.ck {
	width: 96rpx;
	height: 40rpx;
	text-align: center;
	border-radius: 10rpx;
	background-color: #eeae5a;
}
.wb {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	width: 35rpx;
	line-height: 38rpx;
	height: 35rpx;
	color: #ffffff;
	background: #de5448;
	border-radius: 50%;
}
.wb2 {
	position: absolute;
	width: 35rpx;
	height: 35rpx;
	color: #ffffff;
	top: -5px;
	right: -10rpx;
	line-height: 38rpx;
	background: #de5448;
	border-radius: 50%;
}
.gy_box {
	width: 120rpx;
	height: 120rpx;
	display: flex;
	align-items: center;
	position: absolute;
	top: 240rpx;
	right: -40rpx;
	padding-left: 10rpx;
	font-size: 30rpx;
	font-family: MiSans, MiSans;
	font-weight: 500;
	justify-content: space-evenly;
	line-height: 44rpx;
	z-index: 11;
	border-radius: 50%;
	background-color: #eeae5a;
}
.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;
}
.active {
	background-image: url('/static/img/gr_tab.png');
	background-size: 100% 100%;
}
.bk {
	width: 180rpx;
	overflow-x: auto;
	white-space: nowrap;
}
.bt_box {
	display: flex;
	margin-top: 50rpx;
	justify-content: space-around;
}
.bt2 {
	width: 244rpx;
	height: 78rpx;
	background: #ca5642;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
}
</style>