luoyangCoachApp/pages/tabbar/statistics/index.vue

<template>
	<view class="main">
	
		<!-- <operateCoach  v-if="identity=='实操教练'"/>
		<principal  v-if="identity=='校长'||identity=='驾校财务'"/> -->
		<view class="content">
			<view class="status_bar"></view>
			<view class="" style="height: 30rpx;"></view>
			<view class="userInfo">
				<view class="tit">Hi,{{ vuex_userInfo.name }} {{identity}}</view>
				<view class="flex userRow">
					<view class="schoolIcon">
						<image src="@/static/images/index/ic_jiaxiao.png" mode=""></image>
					</view>
					<view class="schoolName oneRowText">{{ vuex_userInfo.schoolName }}</view>
					<!-- <view class="tag">合作教练</view> -->
				</view>
			</view>
			<view class="card priceBox">
				<view class="blueLab">今日已结算金额</view>
				<view class="price">￥{{statistics.amount}}</view>
				<view class="flex-b">
					<view class="data">截止：{{statistics.refreshDate}}</view>
					<view class="refresh" @click="getSettlementStatisticsFn">
						<view class="text">刷新</view>
						<view class="icon">
							<image src="@/static/images/index/ic_shuaxin.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		
			<view class="h1"> 结算统计</view>
			<!-- <view class="tab_box"> -->
				<view class="tabBox">
					<view class="tabs">
						<view class="tab" @click="tabClick(1)" :class="{active: currentTab==1}">最近五天</view>
						<view class="tab" @click="tabClick(2)" :class="{active: currentTab==2}">最近半年</view>
					</view>
				</view>
				<!-- <tabDate /> -->
			<!-- </view> -->
			<view class="card">
				<view class="chart">
					<columnChart :chartData="chartData"/>
				</view>
			</view>
			<view class="flex-b">
				<view class="h1">结算明细</view>
				<moreRight text="更多" @click.native="$goPage('/pages/indexEntry/settlement/settlement')"/>
			</view>
			<view class="record">
				<view class="card" v-for="(item,index) in list" :key="index">
					<stage :item="item"/>
				</view>
			</view>
			<view class="moreBtn" @click="$goPage('/pages/indexEntry/settlement/settlement')">查看更多</view>
		</view>
		
		<UserTab name ='统计'></UserTab>
		
		
	</view>
</template>


<script>
	import stage from './comp/stage'
	import columnChart from './comp/columnChart'
	import tabDate from './comp/tabDate'
	import {
		getSettlementStatistics,
		settle_list,
		getDaySettlement,
		getMonthSettlement
	} from '@/config/api.js'
	export default {
		components: {
			stage,
			columnChart,
			tabDate
		},
		data() {
			return {
				value1: '',
				currentTab: 1,
				statistics: {},
				list: [],
				show: false,
				chartData: []
			}
		},
		onShow() {
			uni.hideTabBar();
			this.getSettlementStatisticsFn()
			this.settle_listFn()
			this.getDaySettlement()
		},
		onLoad() {
			
		},
		mounted() {
			
		},
		methods: {
			// 结算统计按月查询
			async getDaySettlement() {
				let obj = {
				  // startDate: 20240406,
				  // endDate: 20240605,
				  // coachId: this.vuex_coachId,
				  schoolId: this.vuex_schoolId
				}
				let data = {}
				let categories = []
				if(this.currentTab==1) {
					data = await getDaySettlement(obj)
					categories = data.data.map(item=> {
						let str = item.refreshDate.slice(2,8)
						return	str.slice(0, 2) + '-' + str.slice(2, 4) + '-' + str.slice(4, 6)
					})
				}else {
					data = await getMonthSettlement(obj)
					categories = data.data.map(item=> {
						return item.refreshDate.slice(0, 4) + '-' + item.refreshDate.slice(4)
					})
				}
				let res = data.data
				
				let amount = res.map(item=>item.amount)
				let chartData = {
				    categories: categories,
				    series: [
				      {
				        name: "目标值",
				        data: amount
				      }
				    ]
				  };
				this.chartData = chartData
			},
			tabClick(num) {
				if(num==this.currentTab) return
				this.currentTab = num
				this.getDaySettlement()
			},
			async getSettlementStatisticsFn() {
				let obj = {
					searchDateType: uni.$u.timeFormat(Date.now(), 'yyyymm'),
					// coachId: this.vuex_coachId || ''
				}
				const {
					data: res
				} = await getSettlementStatistics(obj)
				this.statistics = res
				console.log(res)
			},
			async settle_listFn() {
				let obj = {
					"pageNo": 1,
					"pageSize": 10,
				}
				const {
					data: res
				} = await settle_list(obj)
				this.list = res.list || []
			}
		}
	}
</script>


<style lang="scss" scoped>
	@import './comp/comp.scss';
	.main {
		background: url('../../../static/images/bigImg/indexTopBanner.png') #f6f6f6 no-repeat;
		background-size: 100% 492rpx;
	}
	
</style>