assess-app/pages/statistics/statistics.vue

<template>
	<view class="total-page page_env page-box container">
		<Nav :title="'2024-3.12-3.18'+ statType" :back="false" is_icons is_fixed :bgHeight="bgHeight"
			:navsHeight="navsHeight" :opacity="scrollTop" :justify="'left'" :color="'#fff'" :fixedHeight="160">
			<view class="task-tabs m-t20" :style="{top:`${$tools.topHeight()}px`}">
				<HeadFilter @onTopSelect="onTopSelect" :user-status-list="userStatusList"></HeadFilter>
				<view class="m-lr30 m-tb30 bor-255 r-100" v-if="statType === 3">
					<uv-subsection :list="list" :bgColor="'rgba(255,255,255,0.1)'" :activeColor="'#0FB160'"
						:inactiveColor="'#004615'" :fontSize="14" custom-style="height: 70rpx;border-radius: 30rpx;"
						custom-item-style="border-radius: 30rpx;" :current="current" @change="onChange"></uv-subsection>
				</view>
			</view>
		</Nav>
		<view class="statistics_content" :style="[{top:`${$tools.topHeight() + positionHeight}px`}]">

			<view class="">
				<HeadData v-if="statType === 0 || statType === 1"></HeadData>
				<view class="tabs page-box-bg-fff m-lr30 r-30" v-if="statType === 2 || statType === 3"
					:style="[{position:is_fixed?'absolute':''},{top:`${$tools.topHeight() + 85}px`}]"
					style="height: 100rpx;">
					<z-tabs ref="tabs" :list="tabsList"
						:active-style="{color:'#10B261',fontWeight:'bold',fontSize:'30rpx'}"
						:bar-style="{background:'#10B261'}" :inactive-style="{fontWeight:'bold',fontSize:'28rpx'}"
						:current="current" :bar-animate-mode="'worm'" @change="tabsChange" />
				</view>
				<!-- 顶部单行统计 -->
				<StatSingleData :is_fixed="is_tabs_fixed" v-if="is_single_data"></StatSingleData>
				<view class="sys-list-background-color p-lr30">
					<!-- 汇总统计-公司 -->
					<GeneralStat v-if="statType === 0"></GeneralStat>
					<!-- 资金统计-部门 -->
					<CapitalStat v-if="statType === 1"></CapitalStat>
					<!-- 提放统计-部门 -->
					<DrawingsStat v-if="statType === 2"></DrawingsStat>
					<!-- 消金统计-部门 -->
					<ConsumeStat v-if="statType === 3"></ConsumeStat>
					<!-- 任务统计-个人 -->
					<TaskStat v-if="statType === 4"></TaskStat>
					<!-- 业绩统计-个人 -->
					<PerformanceStat v-if="statType === 5"></PerformanceStat>
					<view class="bottom_view"></view>
				</view>
			</view>
		</view>
		<Tab :tab-index="3"></Tab>
	</view>

</template>

<!-- 
财务汇总占比 stat_finance_chart
放款汇总占比 stat_loan_chart
财务汇总明细 stat_finance
任务资金汇总 stat_capital
行业占比 stat_industry
年龄分布 stat_age_chart
情况说明 stat_situation
排名 stat_rankin
-->

<script>
	// 顶部筛选
	import HeadFilter from "./module/head_filter.vue"
	// 顶部左右统计数据
	import HeadData from "./module/head_data.vue"
	// 顶部单统计数据
	import StatSingleData from "./module/stat_single_data.vue"
	// 汇总统计
	import GeneralStat from "./components/general_stat.vue"
	// 资金统计
	import CapitalStat from "./components/capital_stat.vue"
	// 提放统计
	import DrawingsStat from "./components/drawings_stat.vue"
	// 消金统计
	import ConsumeStat from "./components/consume_stat.vue"
	// 任务统计
	import TaskStat from "./components/task_stat.vue"
	// 业绩统计
	import PerformanceStat from "./components/performance_stat.vue"

	import {
		getUserType
	} from "@/api/statistics";

	export default {
		components: {
			HeadFilter,
			HeadData,
			StatSingleData,
			CapitalStat,
			GeneralStat,
			ConsumeStat,
			DrawingsStat,
			PerformanceStat,
			TaskStat
		},
		data() {
			return {
				is_single_data: false, // 顶部单行统计是否显示
				is_tabs_fixed: false, // tabs是否固定
				scrollTop: 0,
				statType: 0,
				current: 0,
				tabsList: [{
					name: '汇总',
					dot_color: 'red',
					disabled: false
				}, {
					name: '银行',
					dot_color: 'yellow',
					disabled: false
				}],
				bgHeight: 140,
				navsHeight: 65,
				positionHeight: 50,
				list: ['中银消费', '中邮消费', '新网车抵'],
				userStatusList: []
			}
		},
		onLoad() {
			uni.hideTabBar()
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop / 120
		},
		mounted() {
			// this.getUserType()
		},

		computed: {
			// getBgHeight() {
			// 	switch (this.statType) {
			// 		case 0:
			// 		case 1:
			// 			this.statType = 0
			// 			return 48;
			// 		case 0:
			// 		case 1:
			// 			return 140;
			// 		default:
			// 			break;
			// 	}
			// },
		},
		methods: {
			getUserType() {
				getUserType().then((res) => {
					if (res.code === 1) {
						this.userStatusList = res.data
						this.statType = this.userStatusList[0].id
						console.log(this.statType)
					}
				})
			},
			onChange(e) {
				this.current = e
			},
			onTopSelect(type) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.statType = type
				this.is_single_data = type == 0 || type == 1 ? false : true
				this.is_tabs_fixed = type === 2 ? true : false
				if (type == 0 || type == 1) {
					this.bgHeight = 140
					this.positionHeight = 50
				}
				if (type == 2) {
					this.bgHeight = 65
					this.positionHeight = 80
				}
				if (type == 3) {
					this.bgHeight = 120
					this.navsHeight = 120
					this.positionHeight = 135
				}
				if (type == 4 || type == 5) {
					this.bgHeight = 105
					this.navsHeight = 65
					this.positionHeight = 55
				}
				this.$forceUpdate()
			},
		},
	}
</script>
<style lang="scss" scoped>
	.statistics_content {
		width: 100%;
		position: absolute;
	}

	.stat_blank {
		// height: 100vh;
		background: red;
		// flex: 1;
	}

	.bottom_view {
		height: calc(160rpx + env(safe-area-inset-bottom));
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		/* 高度占满整个屏幕 */
	}

	.content {
		flex: 1;
		/* 充满剩余空间 */
		background-color: #ffffff;
		/* 内容区域的背景颜色 */
		/* 其他样式按需添加 */
	}
</style>