WenWuGuanJia/index_fenbao/fuWu/zuZhi/fuWu.vue

<template>
	<view class="box">
		<u-navbar
			:autoBack="true"
			leftIconColor="#303133"
			title="志愿者联盟"
			bgColor="rgba(255,255,255,0)"
			:placeholder="true"
			titleStyle="font-weight:bold;color:#000000"
		></u-navbar>
		<view style="width: 90%; margin: auto">
			<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 style="width: 660rpx; margin: auto; margin-top: 25rpx">
			<u-notice-bar speed="60" color="#f9ae3d" bgColor="#fefdfb" :text="notice.title" mode="link"></u-notice-bar>
		</view>
		<!-- 菜单 -->
		<view class="cd_box">
			<view class="cd_item" @click="menuBtn(index)" v-for="(item, index) in list" :key="item.index">
				<image style="width: 72rpx; height: 72rpx" :src="item.image"></image>
				<view>
					{{ item.title }}
				</view>
			</view>
		</view>
		<view class="tj">数据统计</view>
		<!-- 区域 -->
		<view class="ranking_menu">
			<scroll-view scroll-x style="display: flex; white-space: nowrap" class="">
				<view @click="regionTab(index)" v-for="(item, index) in regionList" :key="item.index" class="ranking_item" :class="{ active: Tab == index }">
					{{ item.title }}
				</view>
			</scroll-view>
		</view>

		<view class="gg_box">
			<view class="gg_item">
				<view>
					<view class="">志愿人数</view>
					<view style="font-size: 44rpx; color: #81acb0">{{ information.volunteerNum }}</view>
				</view>
				<view>
					<view>文物点</view>
					<view style="font-size: 44rpx; color: #81acb0">{{ information.crNum }}</view>
				</view>
			</view>
			<view class="">
				<view class="">总巡查次数</view>
				<view style="font-size: 44rpx; color: #81acb0">{{ information.patrolNum }}</view>
			</view>
		</view>
		<!-- 		<view class="tj">最新动态</view>
		<view class="gg_box">
			<view style="font-size: 32rpx">今日最新巡查</view>
			<view class="gg_item2" v-for="(item, index) in trendsList" :key="item.index">
				<view class="" style="display: flex; align-items: center">
					<image :src="item.image" style="margin-right: 30rpx; width: 112rpx; height: 112rpx"></image>
					<view class="">
						<view>{{ item.title }}</view>
						<view style="font-size: 24rpx; color: rgba(68, 68, 68, 0.4)">发生时间 {{ item.date }}</view>
					</view>
				</view>
				<view class="active2">正常</view>
			</view>
		</view> -->
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			information: {},
			Tab: 11,
			notice: {},
			trendsList: [
				{
					date: '2024-3-15',
					title: '周文学宅',
					image: 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/zwxz.png'
				},
				{
					date: '2024-3-17',
					title: '仑后王清祥宅',
					image: 'https://huli-app.wenlvti.net/uploads/20230423/4268647ba8b76f65e4ef45cd59653cbd.jpg'
				}
			],
			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'],
			regionList: [],
			list: [
				{
					title: '组织介绍',
					image: '/static/img/icon_1.png',
					page: '/index_fenbao/fuWu/zuZhi/zuZhi'
				},

				{
					title: '志愿报名',
					image: '/static/img/icon_3.png',
					page: '/index_fenbao/fuWu/baoMing/renLing'
				},
				{
					title: '文物地图',
					image: '/static/img/icon_8.png',
					page: '/index_fenbao/fuWu/diTu/diTu'
				},
				{
					title: '志愿排名',
					image: '/static/img/icon_4.png',
					page: '/index_fenbao/fuWu/paiMing/paiMing'
				},
				{
					title: '志愿风采',
					image: '/static/img/icon_6.png',
					page: '/index_fenbao/fuWu/fengCai/fengCai'
				},
				{
					title: '法律法规',
					image: '/static/img/icon_2.png',
					page: '/index_fenbao/fuWu/FaLv/FaLv'
				},
				{
					title: '知识库',
					image: '/static/img/icon_7.png',
					page: '/index_fenbao/fuWu/zuZhi/XueYuan'
				},

				{
					title: '志愿捐助',
					image: '/static/img/icon_5.png',
					page: '/index_fenbao/fuWu/jiJin/jiJin'
				}
			]
		};
	},
	onLoad() {
		that = this;
		this.getNotice();
		this.getCategoryOnlyChildList();
		this.regionData();
	},
	methods: {
		// 公告
		getNotice() {
			this.$api.getNotice({ main_body_id: 1 }, function (res) {
				that.notice = res.data;
			});
		},
		getCategoryOnlyChildList() {
			this.$api.getCategoryOnlyChildList({ main_body_id: 1, pid: '5' }, function (res) {
				if (res.code == 1) {
					that.regionList = res.data;
					console.log(that.regionList, 454);
				} else {
					console.log(res);
				}
			});
		},
		/* 数据统计 */
		regionData(id) {
			this.$api.regionData({ main_body_id: 1, region_id: id || '11' }, function (res) {
				// console.log(res, '统计');
				that.information = res.data;
			});
		},
		menuBtn(i) {
			uni.navigateTo({
				url: that.list[i].page
			});
		},

		regionTab(i) {
			this.Tab = i;
			this.regionData(this.regionList[i].id);
		},
		// 加载字体
		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;
}
/deep/.u-notice-bar.data-v-24c07869 {
	border: 2rpx solid #ebc9a9;
}
/deep/.u-notice-bar.data-v-6862e5d8 {
	border: 2rpx solid #ebc9a9;
}

.box {
	width: 100%;
	min-height: 100%;
	height: auto;
	background-color: #fff9e9;
	padding-bottom: 50rpx;
	font-family: 'MyGlobalFont';
}
.active {
	background-image: url('/static/img/tab.png');
	background-size: 100% 100%;
}
.active2 {
	font-size: 32rpx;
	color: #81acb0;
}
.active3 {
	font-size: 32rpx;

	color: #ff542d;
}
.cd_box {
	width: 90%;
	margin: auto;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
.cd_item {
	width: 150rpx;
	height: 120rpx;
	text-align: center;
	margin-top: 30rpx;
}
.ranking_item {
	display: inline-block;
	width: 200rpx;
	height: 62rpx;
}
.ranking_menu {
	width: 90%;
	margin: auto;
	margin-top: 40rpx;
	display: flex;
	justify-content: space-around;
	font-size: 28rpx;
	color: rgba(68, 68, 68, 0.6);
	text-align: center;
	line-height: 60rpx;
}

.tj {
	font-size: 40rpx;
	color: #444444;
	font-weight: 900;
	letter-spacing: 2px;
	margin: 40rpx 0 0 40rpx;
}
.gg_box {
	width: 670rpx;
	margin: auto;
	margin-top: 20rpx;
	padding: 20rpx;
	border: 2rpx solid #ebc9a9;
	line-height: 45rpx;
}
.gg_item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 500rpx;
	margin-bottom: 30rpx;
}
.gg_item2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 30rpx;
}
</style>