WenWuGuanJia/index_fenbao/GuanLi/GuanLi.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 style="width: 90%; margin: auto">
			<u-swiper
				:list="swiperList"
				imgMode="aspectFill"
				bgColor="transparent"
				keyName="image"
				: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="" style="display: flex; justify-content: space-evenly; flex-wrap: wrap; width: 90%; margin: auto">
			<view class="zj_box" @click="menuBtn(index)" v-for="(item, index) in menuList" :key="item.index">
				<view>
					<image style="width: 130rpx; height: 120rpx" :src="item.image"></image>
				</view>
				<view style="font-size: 30rpx; font-weight: 600">{{ item.title }}</view>
			</view>
			<!-- 个人按钮 -->
			<view v-if="authority" class="zj_box" @click="$common.navigateTo('/index_fenbao/GuanLi/zhiYuanGeRen')">
				<view>
					<image style="width: 130rpx; height: 120rpx" src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/ht_menu5.png"></image>
				</view>
				<view style="font-size: 30rpx; font-weight: 600">个人记录</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 class="tj_box">
			<view class="btm_box">
				<view style="font-size: 32rpx; font-weight: 600; margin-bottom: 20rpx">全市志愿者人数 (合计:{{ list.volunteerNum }})</view>
				<view class="" style="display: flex; flex-wrap: wrap; justify-content: space-between; text-align: initial">
					<view v-for="item in list.volunteerData" :key="item.index" style="">
						<view style="width: 160rpx; margin-left: 20rpx">{{ item.title }}:{{ item.num }}</view>
					</view>
				</view>
			</view>
			<!-- 活跃人数 -->
			<view class="btm_box">
				<view style="font-size: 32rpx; font-weight: 600; margin-bottom: 20rpx">活跃人数</view>
				<view class="" style="display: flex; flex-wrap: wrap; justify-content: space-between; text-align: initial">
					<view v-for="item in list.activeData" :key="item.index" style="">
						<view style="width: 160rpx; margin-left: 20rpx">{{ item.title }}:{{ item.num }}</view>
					</view>
				</view>
			</view>
			<!-- 文物 -->
			<view class="btm_box">
				<view style="font-size: 32rpx; font-weight: 600; margin-bottom: 20rpx">全市文物</view>
				<view class="" style="display: flex; flex-wrap: wrap; justify-content: space-between; text-align: initial">
					<view v-for="item in list.crData" :key="item.index" style="">
						<view style="width: 160rpx; margin-left: 20rpx">{{ item.title }}:{{ item.num }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return {
			authority: false /* 管理页判断自己是否是志愿者 */,
			id: '' /* 区域管理id */,
			list: [] /* 数据统计 */,
			swiperList: [],
			menuList: [
				{
					image: 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/ht_menu6.png',
					title: '志愿者',
					path: '/user_fenbao/houTai/zhiYuanZhe'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/ht_menu7.png',
					title: '巡查管理',
					path: '/user_fenbao/houTai/xunCha'
				}
			]
		};
	},
	onLoad(o) {
		that = this;
		this.id = o.id;
		this.cityData();
		this.details();
		this.loadGlobalFont();
		this.getIndexBanner();
	},
	methods: {
		// 轮播
		getIndexBanner() {
			this.$api.getIndexBanner({ main_body_id: 1 }, function (res) {
				that.swiperList = res.data.filter((item) => {
					return item.title == '文物管家';
				});
			});
		},
		// 判断是否为志愿者
		details() {
			this.$api.details({ main_body_id: 1 }, function (res) {
				// console.log(res, '志愿者');
				if (res.data != false && res.data.id != undefined) {
					that.authority = true;
				} else {
					console.log(res, '非志愿者');
				}
			});
		},
		// 数据统计
		cityData() {
			this.$api.cityData({ main_body_id: 1 }, function (res) {
				that.list = res.data;
			});
		},
		menuBtn(i) {
			uni.navigateTo({
				url: this.menuList[i].path + '?id=' + this.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>
.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;
}
/deep/.u-swiper-indicator__wrapper__dot--active {
	width: 5px !important;
}
.zj_box {
	width: 150rpx;
	/* height: 292rpx; */
	text-align: center;
	margin-top: 40rpx;
}
.tiwen {
	width: 134rpx;
	height: 52rpx;
	text-align: center;
	line-height: 52rpx;
	font-size: 24rpx;
	color: #ffffff;
	margin-left: 32rpx;
	margin-top: 10rpx;
	background-color: #c46354;
}

.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;
}
.tj_box {
	width: 90%;
	margin: auto;
	margin-top: 30rpx;
	/* background-color: #fceece; */
}
.top_box {
	display: flex;
	margin-left: 260rpx;
	justify-content: space-between;
}
.tit_box {
	width: 160rpx;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	background-image: url('/static/img/fj_bg.png');
	background-size: 100% 100%;
}
.btm_box {
	text-align: center;
	margin-top: 40rpx;
}
</style>