WenWuGuanJia/pages/index/index.vue

<template>
	<view class="box">
		<u-navbar title="厦门文物管家" :placeholder="true" bgColor="rgba(255,255,255,0)" :leftIconSize="0" titleStyle="font-weight:bold;color:#000000"></u-navbar>

		<view style="width: 90%; margin: auto">
			<u-swiper
				:list="swiperList"
				imgMode="aspectFill"
				:height="160"
				bgColor="transparent"
				:indicator="true"
				radius="5"
				keyName="image"
				:autoplay="true"
				:circular="true"
				indicatorStyle="bottom: 10px"
				indicatorMode="dot"
				indicatorActiveColor="#fff"
				indicatorInactiveColor="rgba(255, 255, 255, 0.35)"
			></u-swiper>
		</view>
		<view class="cd_box">
			<view @click="menuBtn(index)" class="cd_item" v-for="(item, index) in menuList" :key="item.index">
				<view style="width: 322rpx; height: 68rpx">
					<image class="img" :src="item.image"></image>
				</view>
				<view class="cd_tit">{{ item.title }}</view>
			</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 style="position: relative" @click="noticeBtn">
			<view style="width: 660rpx; margin: auto; margin-top: 25rpx">
				<u-notice-bar
					speed="60"
					bgColor="#fefdfb"
					:text="newsList.title + (newsList.updated_at ? ` (${newsList.updated_at.split(' ')[0]})` : '')"
					mode="link"
				></u-notice-bar>
			</view>
		</view>
		<view class="map_tit">
			<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="ranking_menu">
			<scroll-view scroll-x style="display: flex; white-space: nowrap" class="">
				<view @click="rankingTab(index)" v-for="(item, index) in rankingList" :key="item.id" class="ranking_item" :class="{ active: Tab == index }">
					{{ item.title }}
				</view>
			</scroll-view>
		</view>

		<view class="pm_box">
			<view class="pm_tit">排名</view>
			<view class="pm_tit">志愿者</view>
			<view class="pm_tit">活跃度</view>
			<view class="pm_tit" style="width: 60rpx">积分</view>
			<view class="pm_tit" style="width: 145rpx">任务达标率</view>
		</view>
		<view class="xx_box">
			<scroll-view style="height: 1000rpx" scroll-y="true" @scrolltolower="LoadMoress">
				<view @click="detailsBtn(item.id)" class="xx_item" v-for="(item, index) in information" :key="item.id">
					<view style="width: 64rpx; height: 64rpx">{{ index + 1 }}</view>
					<view style="width: 120rpx; font-size: 32rpx">{{ item.name }}</view>
					<view style="width: 60rpx">{{ item.active }}</view>
					<view>{{ item.score }}</view>
					<view>{{ item.completion_rate }}</view>
				</view>
			</scroll-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 @click="researchBtn" class="gengduo">更多</view>
		<view class="yx_box" @click="$common.navigateTo('/index_fenbao/HuoHuaLiYong/YanXue/XiangQing?id=' + research.id)">
			<view style="position: absolute; left: 6rpx; top: 6rpx">
				<image style="width: 160rpx; height: 240rpx" :src="research.image"></image>
			</view>
			<view style="margin-left: 200rpx">
				<view class="wwd">{{ research.title }}</view>
				<view class="time">活动时：{{ (research.start_time && research.start_time.split(' ')[0]) || '' }}</view>
			</view>
			<view class="baoming">
				<text>查看</text>
				<image style="margin-left: 10rpx; width: 32rpx; height: 32rpx" src="/static/img/arrow-right-line.png"></image>
			</view>
		</view>

		<!-- 	<view class="hd_btm">
			<view @click="researchBtn" style="display: flex;justify-content: flex-end;" >
				<view class="">查看更多</view>
				<image style="margin-left: 10rpx; width: 40rpx; height: 40rpx" src="/static/img/more.png"></image>
			</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 @click="gengDuo" class="gengduo">更多</view>

		<view class="wenwu_box">
			<view @click="openBuildingInfo(item.id)" v-for="(item, index) in recommendList" :key="item.id">
				<view class="gc_item">
					<view class="gc_box" style="">
						<image v-if="item.thumbnail != null" style="width: 100%; height: 100%; border-radius: 15rpx" :src="item.thumbnail"></image>
						<image v-else src="https://huli-app.wenlvti.net/assets/addons/cms/img/noimage.jpg" style="width: 100%; height: 100%; border-radius: 15rpx"></image>
					</view>
					<view class="ww_tit">{{ item.title }}</view>
					<!-- <view class="bg_box">湖里区</view> -->
					<u-badge type="primary" max="99" :value="item.district" :absolute="true" :offset="[10, 5]"></u-badge>
				</view>
			</view>
		</view>
		<u-back-top :scrollTop="scrollTop" mode="square" top="1000" customStyle="background-color: #f1ceb4" :iconStyle="iconStyle"></u-back-top>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			user: {},
			iconStyle: {
				color: '#af7e44'
			},
			research: {} /* 研学 */,
			region_id: '' /* 排行区域id */,
			cycle: 'year' /* 年度id */,
			scrollTop: 0,
			Tab: 0,
			page: '1',
			page2: '1',
			isLoading: false,
			isLoading2: false,
			recommendList: [],
			swiperList: [],
			menuList: [
				{
					image: '/static/img/cd_bg2.png',
					title: '志愿服务',
					page: '/index_fenbao/fuWu/zuZhi/fuWu'
				},
				{
					image: '/static/img/cd_bg1.png',
					title: '巡查守护',
					page: '/index_fenbao/GuanLi/zhiYuanGeRen',
					path: '/index_fenbao/GuanLi/GuanLi'
				},
				{
					image: '/static/img/cd_bg1.png',
					title: '厦门文物',
					page: '/pages/wenWuPage/wenWuPage'
				},
				{
					image: '/static/img/cd_bg2.png',
					title: '活化利用',
					page: '/index_fenbao/HuoHuaLiYong/YanXue/HuoHuaLiYong'
				}
			],
			newsList: {} /* 新闻 */,

			rankingList: [],

			// 信息列表
			information: []
		};
	},
	/* 页面触底 */
	onReachBottom() {
		if (this.isLoading) {
			return;
		} else {
			this.page++;
			this.getContentList();
		}
	},
	onShow() {
		this.page2 = 1;
		that.information = [];
		this.gitRankingList();
	},
	onLoad(option) {
		that = this;
		this.user = this.$common.userInfo();
		if (this.user === 'undefined' || this.user === '' || this.user === [] || this.user === null) {
			/* 跳转到登录页 */
			this.$common.toLogin();
		} else {
			// console.log(this.user);
			// 如果登录自动打卡
			this.checkInOnce();
		}
		this.getIndexBanner();
		this.getContentList();
		this.getCategoryOnlyChildList();
		this.getNewsNotice();
		// this.checkInOnce()
		this.activityLists();
		this.loadGlobalFont();
	},
	methods: {
		// 轮播
		getIndexBanner() {
			this.$api.getIndexBanner({ main_body_id: 1 }, function (res) {
				that.swiperList = res.data.filter((item) => {
					return item.title == '文物管家';
				});
			});
		},
		// 排行
		gitRankingList() {
			this.isLoading2 = true;
			this.$api.rankingList({ page: this.page2, pageSize: '50', main_body_id: 1, cycle: this.cycle || '', region_id: this.region_id || '' }, function (res) {
				that.isLoading2 = false;
				that.information = [...that.information, ...res.data];
			});
		},
		rankingTab(i) {
			this.Tab = i;
			this.page2 = 1;
			that.information = [];
			this.cycle = this.rankingList[i].cycleId;
			this.region_id = this.rankingList[i].id;
			this.gitRankingList();
		},

		getContentList() {
			this.isLoading = true;
			this.$api.getContentList({ main_body_id: 1, model_id: 1, page: this.page, pageSize: '10' }, function (res) {
				// console.log(res, 666666666);
				that.isLoading = false;
				that.recommendList = [...that.recommendList, ...res.data];
			});
		},

		LoadMoress() {
			if (this.isLoading2) {
				return;
			} else {
				this.page2++;
				this.gitRankingList(this.cycle, this.region_id);
			}
		},
		getCategoryOnlyChildList() {
			this.$api.getCategoryOnlyChildList({ main_body_id: 1, pid: '5' }, function (res) {
				if (res.code == 1) {
					let a = {
						title: '年度',
						cycleId: 'year'
					};
					let b = {
						title: '月度',
						cycleId: 'month'
					};
					let dataArray = Object.values(res.data);
					dataArray.unshift(a, b);
					that.rankingList = dataArray;
					// console.log( that.rankingList, 454);
				} else {
					// console.log(res);
				}
			});
		},
		menuBtn(i) {
			if (this.menuList[i].title === '厦门文物') {
				uni.switchTab({
					url: this.menuList[i].page
				});
			} else if (this.menuList[i].title === '巡查守护') {
				// 判断是否为管理员
				this.$api.userManageRegionCrAuth({ main_body_id: 1 }, function (res) {
					if (res.code === 1) {
						console.log(res.data, '管理员');
						if (res.data != false) {
							uni.navigateTo({
								url: that.menuList[i].path + '?id=' + res.data
							});
						} else {
							uni.navigateTo({
								url: that.menuList[i].page
							});
						}
					}
				});
			} else {
				uni.navigateTo({
					url: this.menuList[i].page
				});
			}
		},
		// 公告
		noticeBtn() {
			uni.navigateTo({
				url: '/index_fenbao/XinWen/XinWen?id=' + this.newsList.id
			});
		},
		// 公告
		getNewsNotice() {
			this.$api.getNotice({ main_body_id: 1 }, function (res) {
				if (res.code == 1) {
					that.newsList = res.data;

					// console.log(that.newsListTit,'新闻')
				}
			});
		},
		// 新闻公告
		// getNewsNotice(){
		// 	this.$api.getNewsNotice({main_body_id:1},function(res){
		// 		// console.log(res,'新闻')
		// 		that.newsList=res.data

		// 	})
		// },
		// 文物研学
		activityLists() {
			this.$api.activityLists({ main_body_id: 1, type: 1 }, function (res) {
				// console.log(res, '活动');
				that.research = res.data[0];
			});
		},
		// 时间戳转换
		// timestampToDate(timestamp) {
		//   const date = new Date(timestamp);
		//   const year = date.getFullYear();
		//   const month = date.getMonth() + 1; // JavaScript月份从0开始，所以需要加1
		//   const day = date.getDate();

		//   // 补零操作，确保日期和月份始终为两位数
		//   const formattedMonth = month < 10 ? '0' + month : month;
		//   const formattedDay = day < 10 ? '0' + day : day;

		//   return year + '-' + formattedMonth + '-' + formattedDay;
		// },
		checkInOnce() {
			// 获取当前UTC日期，确保跨时区的一致性
			const now = new Date();
			const todayUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
			const checkInKey = `checkInTimestamp_${todayUTC.toISOString().slice(0, 10)}`; // 根据UTC日期构建键
			console.log(checkInKey, '时间');
			// 从本地存储获取今天的打卡时间戳
			const lastCheckInTimestampStr = uni.getStorageSync(checkInKey);

			// 转换为日期对象进行比较，确保基于日期而非具体时间
			let lastCheckInDate;
			if (lastCheckInTimestampStr) {
				lastCheckInDate = new Date(parseInt(lastCheckInTimestampStr)).setHours(0, 0, 0, 0);
			} else {
				lastCheckInDate = null;
			}
			const nowDate = todayUTC.setHours(0, 0, 0, 0);

			// 检查昨天是否有打卡记录，且今天是新的日期
			if (lastCheckInDate && nowDate > lastCheckInDate) {
				// 新的一天，理论上允许打卡
				console.log('新的一天，可以打卡。');
				// 清除昨天的记录，准备新一天的打卡
				uni.removeStorageSync(checkInKey);

				// 实际调用打卡接口
				this.$api.checkIn({ main_body_id: 1 }, (res) => {
					if (res.code === 1) {
						console.log(res, '实际打卡成功');
						// 保存打卡时间戳
						uni.setStorageSync(checkInKey, now.getTime());
					} else {
						console.error('实际打卡失败:', res);
					}
				});
			} else if (lastCheckInDate && nowDate === lastCheckInDate) {
				// 如果今天已经有打卡记录，则提示已打卡
				console.log('今日已打卡，明天再来吧！');
			} else {
				// 如果昨天没有打卡记录（首次尝试打卡）
				console.log('今天首次尝试打卡。');
				// 尝试调用打卡接口
				this.$api.checkIn({ main_body_id: 1 }, (res) => {
					if (res.code === 1) {
						console.log(res, '打卡成功');
						// 保存打卡时间戳
						uni.setStorageSync(checkInKey, now.getTime());
					} else {
						console.error('打卡失败:', res);
					}
				});
			}
		},

		// 排行
		detailsBtn(id) {
			uni.navigateTo({
				url: '/index_fenbao/fuWu/paiMing/paiMingXQ?id=' + id
			});
		},

		researchBtn() {
			uni.navigateTo({
				url: '/index_fenbao/HuoHuaLiYong/YanXue/YanXue'
			});
		},
		// 文物风采
		openBuildingInfo(id) {
			uni.navigateTo({
				url: '/index_fenbao/GuanLi/XiangQing?id=' + id
			});
		},
		// 更多风采
		gengDuo() {
			uni.navigateTo({
				url: '/index_fenbao/GuanLi/gengDuoFC'
			});
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 加载字体
		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>
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.box {
	height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/gj_bg.png');
	background-repeat: repeat-y;
	background-size: 100%;
}
.tuchu {
	color: #000000 !important;
}
.img {
	width: 100%;
	height: 100%;
}
.cd_box {
	display: flex;
	width: 90%;
	margin: auto;
	justify-content: space-between;
	flex-flow: wrap;
	margin-top: 60rpx;
	margin-bottom: 50rpx;
}
.cd_item {
	width: 322rpx;
	position: relative;
	margin-top: 34rpx;
}
.cd_tit {
	position: absolute;
	font-size: 32rpx;
	top: 4rpx;
	left: 90rpx;
	font-weight: 900;
	line-height: 64rpx;
	letter-spacing: 8rpx;
	color: #feece3;
	font-family: 'MyGlobalFont';
}
.gengduo {
	width: 175rpx;
	height: 60rpx;
	position: relative;
	top: 10px;
	left: 30px;
	text-align: center;
	line-height: 62rpx;
	font-size: 30rpx;
	font-weight: 600;
	margin-left: 475rpx;
	background-image: url('/static/img/tab.png');
	background-size: 100% 100%;
	font-family: 'MyGlobalFont';
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 60rpx;
	margin-top: 40rpx;
	font-size: 40rpx;

	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
	font-family: 'MyGlobalFont';
}
.ranking_menu {
	width: 90%;
	margin: auto;
	margin-top: 30rpx;
	display: flex;
	justify-content: space-around;
	font-size: 28rpx;
	color: rgba(68, 68, 68, 0.6);
	text-align: center;
	line-height: 60rpx;
}
.ranking_item {
	display: inline-block;
	width: 200rpx;
	height: 62rpx;
	font-family: 'MyGlobalFont';
}
.active {
	background-image: url('/static/img/tab.png');
	background-size: 100% 100%;
}
.pm_box {
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: auto;
	margin-top: 40rpx;
}
.pm_tit {
	width: 135rpx;
	font-size: 26rpx;
	font-family: MiSans, MiSans;
	font-weight: 400;
	color: rgba(68, 68, 68, 0.6);
	line-height: 40rpx;
}
.xx_box {
	width: 90%;
	height: 400rpx;
	margin-top: 40rpx;
	margin-left: 30rpx;
	overflow: scroll;
}
.xx_item {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
	font-size: 28rpx;
	color: #444444;
	line-height: 44rpx;
}
.yx_box {
	position: relative;
	width: 670rpx;
	height: 252rpx;
	display: flex;
	align-items: center;
	padding-right: 10rpx;
	justify-content: space-around;
	margin: auto;
	margin-top: 34rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/hh_item_bg.png');
	background-size: 100% 100%;
}
.wwd {
	font-size: 36rpx;
	font-weight: 400;
	color: #444444;
	line-height: 52rpx;
}
.time {
	font-size: 28rpx;
	color: rgba(68, 68, 68, 0.6);
	line-height: 44rpx;
	margin-top: 12rpx;
}
.baoming {
	display: flex;
	width: 145rpx;
	height: 56rpx;
	line-height: 56rpx;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	color: #eba869;
	border: 2rpx solid #eba869;
}
.hd_btm {
	width: 90%;
	margin: auto;
	margin-top: 12rpx;
	letter-spacing: 0.2em;
}

.gg_box {
	width: 670rpx;
	height: 150rpx;
	margin: auto;
	margin-top: 20rpx;
	padding: 0 20rpx 0 20rpx;
	border: 2rpx solid #ebc9a9;
}
.gg_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 25rpx;
	width: 630rpx;
	height: 80rpx;
}
.wenwu_box {
	width: 92%;
	margin: auto;
	margin-top: 25rpx;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.gc_item {
	position: relative;
	width: 324rpx;
	color: #444444;
	/* font-weight: 900; */
	font-size: 32rpx;
	margin-top: 20rpx;
	font-family: 'MyGlobalFont';
	/* background: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/ww_bg2.png') no-repeat;
	background-size: 100% 100%; */
}
.gc_box {
	width: 333rpx;
	height: 280rpx;
}
.bg_box {
	width: 184rpx;
	height: 62rpx;
	margin: auto;
	margin-top: 20rpx;
	line-height: 62rpx;
	color: #fef3e1;
	font-size: 28rpx;
	font-weight: 500;
	background-image: url('/static/img/tab.png');
	background-size: 100% 100%;
	font-family: 'MyGlobalFont';
}
.ww_tit {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-top: 10rpx;
	margin-left: 10rpx;
}
/deep/.u-notice-bar.data-v-24c07869 {
	border: 2rpx solid #ebc9a9;
}
/deep/.u-notice-bar.data-v-6862e5d8 {
	border: 2rpx solid #ebc9a9;
}
</style>