WenWuGuanJia/shouhu_fenbao/shouHu/woDe.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="map_tit" style="margin-left: 90rpx">
			<image style="width: 211rpx; height: 52rpx" src="/static/img/right_img.png"></image>
			<view class="">文物守护</view>
			<image style="width: 211rpx; height: 52rpx" src="/static/img/left_img.png"></image>
		</view> -->

		<view style="width: 90%; margin: auto; display: flex; justify-content: space-between">
			<view @click="myTeam" class="td_box">我的团队</view>
			<view @click="deleteShow = true" class="td_box">退出组织</view>
		</view>
		<view class="map_tit" style="margin-left: 90rpx">
			<image style="width: 211rpx; height: 52rpx" src="/static/img/right_img.png"></image>
			<view class="">守护记录</view>
			<image style="width: 211rpx; height: 52rpx" src="/static/img/left_img.png"></image>
		</view>

		<view class="dc_box">
			<view style="display: flex; align-items: center">
				<view style="width: 16rpx; height: 60rpx; background-color: #e9ccaf"></view>
				<view style="margin-left: 10rpx; font-size: 32rpx; font-weight: 700">个人巡查记录</view>
			</view>
			<view @click="exportPatrolRecord" class="dc">
				<uni-icons type="cloud-download" size="20" color="#934b36"></uni-icons>
				<view class="tit">导出记录</view>
			</view>
		</view>
		<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="jl_box">
			<view class="tit_box">
				<view class="">文物点</view>
				<view>巡查时间</view>
				<!-- <view class="">巡查结果</view> -->
				<view class="">任务状态</view>
				<view class="">操作</view>
			</view>
			<scroll-view v-if="recordList.length > 0" style="height: 600rpx" scroll-y="true" @scrolltolower="LoadMore">
				<view @click="checkBtn(item)" class="jl_item" v-for="item in recordList" :key="item.id">
					<view style="width: 120rpx; overflow-x: auto; white-space: nowrap">
						{{ item.cr_title }}
					</view>
					<view style="width: 180rpx">
						{{ item.progress == 3 ? item.submit_time : item.progress == 2 ? item.submit_time : item.progress == -1 ? item.submit_time : '' }}
					</view>
					<view style="">
						{{ item.progress_text }}
					</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>
		<u-popup bgColor="#f2c8a2" :show="deleteShow" @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">
				<u--textarea height="50" v-model.trim="reasonVal" placeholder="请填写退出原因:"></u--textarea>
			</view>
			<view class="bt_box">
				<view
					class="bt1"
					@click="
						deleteShow = false;
						reasonVal = '';
					"
				>
					取消
				</view>
				<view @click="isOk" class="bt2">确认</view>
			</view>
		</u-popup>
		<!-- 日历 -->

		<uv-calendars ref="calendars" mode="range" lunar @confirm="confirmOk" />
		<!-- 导出弹层 -->
		<u-popup bgColor="#f2c8a2" closeable :show="exportShow" @close="close" mode="center" customStyle="width:600rpx;padding: 40rpx " round="20rpx">
			<view style="text-align: center; font-size: 26rpx; color: #8a8a8a">点击下方链接复制到浏览器进行下载</view>
			<view style="text-align: center; font-size: 26rpx; color: #8a8a8a">链接有效期为三分钟</view>
			<view @click="copyText" style="margin-top: 20rpx; word-break: break-all; color: #315efb">
				{{ expor }}
			</view>
		</u-popup>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			expor: '' /* 下载链接 */,
			exportShow: false,
			progressId: '' /* 任务状态id */,
			menuTab: 0,
			volunteer_id: '' /* 志愿者id */,
			reasonVal: '',
			deleteShow: false /* 弹层 */,
			pageSize: 30,
			isLoading: false,
			page: 1,
			tab: -1,
			time: '',
			result: '' /* 自定义时间 */,
			rankingList: [
				{
					title: '全部',
					id: 'all'
				},
				{
					title: '待巡查',
					id: '0'
				},
				{
					title: '待审核',
					id: 2
				},
				{
					title: '已通过',
					id: 3
				},

				{
					title: '驳回',
					id: -1
				},
				{
					title: '已过期',
					id: -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: []
		};
	},
	onShow() {
		// this.menuTab = 0;
		// this.recordList = [];
	},
	onLoad() {
		that = this;
		this.details();

		this.loadGlobalFont();
	},
	methods: {
		// 志愿者详情判断是否为志愿者
		details() {
			this.$api.details({ main_body_id: 1 }, function (res) {
				if (res.code == 1) {
					// console.log(res);
					if (res.data != false && res.data.id != undefined) {
						that.volunteer_id = res.data.id;
						that.getPatrolTask();
					}
				}
			});
		},
		isOk() {
			if (this.reasonVal != undefined && this.reasonVal != '') {
				this.$api.logOffVolunteer(
					{
						main_body_id: 1,
						volunteer_id: this.volunteer_id,
						logout_desc: this.reasonVal
					},
					function (res) {
						if (res.code === 1) {
							that.$common.errorToShow('提交成功,正在审核中');
							that.deleteShow = false;
							// console.log(res);
						} else {
							that.$common.errorToShow(res.msg);
							that.deleteShow = false;
						}
					}
				);
			} else {
				that.$common.errorToShow('请填写退出原因');
			}
		},
		// 任务列表
		getPatrolTask(id) {
			this.isLoading = true;
			this.$api.getPatrolTask(
				{
					custom_time: this.result || '',
					created_at: this.time,
					main_body_id: 1,
					page: this.page,
					pageSize: this.pageSize,
					progress: id ? id : 'all',
					volunteer_id: this.volunteer_id
				},
				function (res) {
					if (res.code === 1) {
						that.isLoading = false;
						that.recordList = [...that.recordList, ...res.data];
						// console.log(that.recordList, '任务');
					} else {
					}
				}
			);
		},
		// 导出
		exportPatrolRecord() {
			this.$api.exportPatrolRecord(
				{
					main_body_id: 1,
					volunteer_id: this.volunteer_id,
					progress: this.progressId,
					created_at: this.time,
					custom_time: this.result || '',
					page: this.page,
					pageSize: this.pageSize
				},
				function (res) {
					if (res.code == 1) {
						console.log(res, '任务');
						that.expor = res.data;
						that.exportShow = true;
					} else {
						that.$common.errorToShow(res.msg);
					}
				}
			);
		},
		// 复制链接
		copyText() {
			uni.setClipboardData({
				data: this.expor,
				success: function () {
					uni.showToast({
						title: '复制成功',
						icon: 'success',
						duration: 2000
					});
				},
				fail: (err) => {
					uni.showToast({
						title: '复制失败',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		LoadMore() {
			if (this.isLoading) {
				return;
			} else {
				this.page++;
				this.getPatrolTask(this.progressId);
			}
		},
		// 任务详情
		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
				});
			}
		},
		myTeam() {
			uni.navigateTo({
				url: '/shouhu_fenbao/shouHu/tuanDui?id=' + this.volunteer_id
			});
		},
		// 时间tab
		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();
			}
		},
		// tab
		rankingTab(i) {
			this.page = 1;
			this.recordList = [];
			this.menuTab = i;
			this.progressId = this.rankingList[i].id;
			if (this.rankingList[i].title == '全部') {
				this.time = '';
				this.tab = -1;
				this.getPatrolTask(this.rankingList[i].id);
			} 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() {
			this.reasonVal = '';
			this.deleteShow = false;
			this.exportShow = false;
		},
		// 加载字体
		loadGlobalFont() {
			try {
				uni.loadFontFace({
					family: 'MyGlobalFont', // 自定义字体名
					source: 'url("https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/songTi.ttf")',
					success() {
						console.log('全局字体加载成功');
					}
				});
			} catch (error) {
				console.error('全局字体加载异常', error);
			}
		}
	}
};
</script>

<style>
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-repeat: repeat-y;
	background-size: cover;
	background-size: 100% 100%;
	font-family: 'MyGlobalFont';
}
/deep/.u-textarea.data-v-09988a29 {
	background-color: #fce3c4 !important;
	border-radius: 0;
}
/deep/.u-textarea.data-v-09988a29 {
	background-color: #fce3c4 !important;
}
.uv-toolbar__wrapper__confirm.data-v-58504ea1 {
	color: #3c9cff !important;
}

.active {
	background-image: url('/static/img/sj_tit.png') !important;
	background-size: 100% 100%;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 60rpx;
	margin-top: 40rpx;
	font-size: 40rpx;
	font-family: 'MyGlobalFont';
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}

.dc_box {
	width: 90%;
	margin: auto;
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dc {
	padding: 10rpx;
	display: flex;
	align-items: center;
	height: 50rpx;
	background-color: #ead2b2;
}
.tit {
	font-weight: 700;
	font-size: 32rpx;
	line-height: 50rpx;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
}
.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;
}
.jl_box {
	width: 92%;
	height: 774rpx;
	margin: auto;
	margin-top: 40rpx;
	padding: 60rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/jl_bg_bg.png');
	background-size: 100% 100%;
}
.tit_box {
	width: 585rpx;
	display: flex;
	font-weight: 700;
	font-size: 28rpx;
	justify-content: space-between;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.jl_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40rpx;
	font-size: 30rpx;
	padding: 0 10rpx 0 10rpx;
	background-color: #e4c3a6;
}
.td_box {
	width: 188rpx;
	height: 102rpx;
	line-height: 102rpx;
	font-weight: 600;
	margin-top: 40rpx;
	text-align: center;
	font-size: 30rpx;
	background-image: url('/static/img/rl_bg.png');
	background-size: 100% 100%;
}
.bt_box {
	display: flex;
	margin-top: 50rpx;
	justify-content: space-around;
}
.bt1 {
	width: 244rpx;
	height: 78rpx;
	border: 1px solid #312520;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: black;
}
.bt2 {
	width: 244rpx;
	height: 78rpx;
	background: #ca5642;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
}
.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>