assess-app/pages/statistics/statistics.vue

<template>
	<view class="total-page page_env page-box container sys-list-background-color"
		:style="[{'background-size':`100% ${$tools.topHeight()+bgSize}px`},{'background-image':`url(${bg_path})`}]">
		<Nav :title="timeData[0]+'--'+timeData[1]" :genre="3" :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 v-model="dateTypeObj" @onTopSelect="onTopSelect" :user-status-list="userStatusList"
					@setTimeDate="setTimeDate"></HeadFilter>
				<view class="m-lr30 m-t30 bor-255 r-100" v-if="statType === 7">
					<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="">
			<view class="tabs page-box-bg-fff m-lr30 r-30 m-t30"
				v-if="dateTypeObj.censusUserType === 6 || dateTypeObj.censusUserType === 7"
				:style="[{position:is_fixed?'absolute':''}]" 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 :genre="dateTypeObj.censusUserType" :is_fixed="is_tabs_fixed" v-if="is_single_data">
			</StatSingleData>
			<view class=" p-lr30">
				<!-- 汇总统计-公司 -->
				<GeneralStat :date-type-obj="dateTypeObj" v-if="dateTypeObj.censusUserType === 3"></GeneralStat>
				<!-- 资金统计-部门 -->
				<CapitalStat :date-type-obj="dateTypeObj" v-if="dateTypeObj.censusUserType === 4"></CapitalStat>
				<!-- 提放统计-部门 -->
				<DrawingsStat :date-type-obj="dateTypeObj" v-if="dateTypeObj.censusUserType === 6"></DrawingsStat>
				<!-- 消金统计-部门 -->
				<ConsumeStat :date-type-obj="dateTypeObj" v-if="dateTypeObj.censusUserType === 7"></ConsumeStat>
				<!-- 任务统计-个人 -->
				<TaskStat :date-type-obj="dateTypeObj" v-if="dateTypeObj.censusUserType === 1"></TaskStat>
				<!-- 业绩统计-个人 -->
				<PerformanceStat :date-type-obj="dateTypeObj" v-if="dateTypeObj.censusUserType === 2">
				</PerformanceStat>
				<view class="bottom_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 {
				timeData: ['', ''],
				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: 50,
				navsHeight: 65,
				positionHeight: 50,
				bgSize: 150,
				bg_path: 'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/statistics/statistics-bg.png',
				list: ['中银消费', '中邮消费', '新网车抵'],
				userStatusList: [],
				dateTypeObj: {
					dateType: 4, //时间类型
					selectDate: '2023-02-25', //自定义的时候传数组，其它传开始日期
					money_type: 1,
					censusUserType: 0,
					product_id: 5,
				},
			}
		},
		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: {
			setTimeDate(timeDate) {
				this.timeData = timeDate
			},
			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 = this.dateTypeObj.censusUserType == 3 || type == 4 ? false : true
				console.log(type);
				if (type == 3 || type == 4) {
					this.bgSize = 150
					this.bgHeight = 50
					this.navsHeight = 65

				}
				if (type == 1 || type == 2) {
					this.bgSize = 125
					this.bgHeight = 55
					this.navsHeight = 65
				}
				if (type == 6 || type == 7) {
					this.bg_path =
						'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/statistics/statistics-bg2.png'
				} else {
					this.bg_path =
						'https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/statistics/statistics-bg.png'
				}
				if (type == 6) {
					this.bgSize = 65
					this.bgHeight = 65
					this.navsHeight = 65
				}
				if (type == 7) {
					this.bgSize = 120
					this.bgHeight = 120
					this.navsHeight = 120
				}
				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;
		min-height: 100%;
		/* 高度占满整个屏幕 */
		background-image: url('https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/statistics/statistics-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 240px;
	}

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