jiangximiniprogramSchool/pages/tabbar/statistics/index.vue

<template>
	<view class="content pageBg">
		<view class="userInfo">
			<view class="tit">Hi,大乔{{identity=='校长'?'校长': '教练'}}</view>
			<view class="flex userRow">
				<view class="schoolIcon">
					<image src="@/static/images/index/ic_jiaxiao.png" mode=""></image>
				</view>
				<view class="schoolName oneRowText">翔力驾校</view>
				<view class="tag" v-if="identity=='校长'">驾校校长</view>
				<view class="tag" v-else>合作教练</view>
			</view>
		</view>
		<view class="card priceBox">
			<view class="blueLab">今日已结算金额</view>
			<view class="price">￥36333.66</view>
			<view class="toDay" v-if="identity==2">
				<view class="row">
					<view class="lab">今日学员退款</view>
					<view class="val">￥900</view>
				</view>
				<view class="row">
					<view class="lab">今日代收费</view>
					<view class="val">￥900</view>
				</view>
				<view class="row">
					<view class="lab">今日学员退款</view>
					<view class="val">￥900</view>
				</view>
			</view>
			<view class="flex-b">
				<view class="data">截止：2023/08/08 11:00:00</view>
				<view class="refresh">
					<view class="text">刷新</view>
					<view class="icon">
						<image src="@/static/images/index/ic_shuaxin.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="h1"> {{identity=='实操教练'?'结算': '收入'}}统计</view>
		<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 class="tab" @click="tabClick(3)" :class="{active: currentTab==3}">按年</view>
			<view class="tab long"  @click="tabClick(4)" :class="{active: currentTab==4}">自定义日期</view>
		</view>
		<view class="card">
			<view class="chart">
				图表到时候一起调
			</view>
		</view>
		<view class="flex-b">
			<view class="h1">{{identity=='实操教练'?'结算': '收入'}}明细</view>
			<moreRight text="更多"/>
		</view>
		<view class="record">
			<view class="card" v-for="(item,index) in 10" :key="index">
				<stage/>
			</view>
		</view>
		<view class="moreBtn" @click="$goPage('/pages/indexEntry/settlement/settlement')">查看更多</view>
		<UserTab :name ='identity=="实操教练"?"首页":"统计" '></UserTab>
		<u-datetime-picker
				:show="showDatePicker"
				v-model="value1"
				mode="date"
				:visibleItemCount="4"
				:closeOnClickOverlay="false"
				@confirm="confirmDatePicker"
		></u-datetime-picker>
	</view>
</template>

<script>
	import stage from './comp/stage'
	export default {
		components: { stage },
		data() {
			return {
				value1: '',
				currentTab: 1,
				showDatePicker: false,
			}
		},
		onLoad() {
			
		},
		onShow() {
			uni.hideTabBar();
		},
		methods: {
			tabClick(num) {
				this.currentTab = num
				if(num==4) {
					this.showDatePicker = true
				}
			},
			// 2选择时间选择器里的时间
			confirmDatePicker(val) {
				this.showDatePicker = false
				let date = uni.$u.date(val.value, 'yyyy-mm-dd')
				console.log(date)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background: url('http://192.168.1.20:81/zhili/image/20230824/30073140957f4349b6579cb0ff00d4b1.png') #F6F6F6 no-repeat;
		background-size: 100% 492rpx;
		padding: 142rpx 28rpx 140rpx 28rpx;
	  .userInfo {
		  
	    .tit {
			font-size: 48rpx;
			color: #fff;
			font-weight: 500;
	    }
	
	    .userRow {
			align-items: center;
			margin-bottom: 20rpx;
	      .schoolIcon {
	        width: 28rpx;
			height: 28rpx;
	      }
	
	      .schoolName {
			font-size: 28rpx;
			padding: 20rpx;
			max-width: 220rpx;
			color: #fff;
	      }
	
	      .tag {
			width: 112rpx;
			height: 44rpx;
			background: #82AFDD;
			border-radius: 22rpx;
			font-size: 20rpx;
			color: #fff;
			line-height: 44rpx;
			text-align: center;
	      }
	    }
	  }
	
	  .priceBox {
		  padding: 32rpx;
		  color: $themC;
	    .blueLab {
			font-weight: 500;
			font-size: 28rpx;
	    }
	
	    .price {
			font-size: 56rpx;
			font-weight: 600;
			padding: 12rpx 0 24rpx 0;
	    }
		.toDay {
			padding: 14rpx 0;
			border-top: 2rpx dashed #E8E9EC;
			border-bottom: 2rpx dashed #E8E9EC;
			margin-bottom: 20rpx;
			.row {
				padding: 16rpx 0;
				display: flex;
				align-items: center;
				.lab {
					color: #686B73;
					font-size: 24rpx;
					width: 210rpx;
				}
				.val {
					font-size: 28rpx;
					font-weight: 600;
				}
			}
		}
	
	    .flex-b {
			
	      .data {
			font-size: 24rpx;
			color: #363A44;
	      }
	
	      .refresh {
			  width: 130rpx;
			  height: 60rpx;
			  background: rgba(25,137,250,0.1);
			  border-radius: 8rpx;
			  border: 2rpx solid #1989FA;
			  line-height: 60rpx;
			  display: flex;
			  align-items: center;
			  justify-content: center;
	        .text {
				font-size: 28rpx;
	        }
	
	        .icon {
	          width: 24rpx;
			  height: 24rpx;
			  margin-left: 6rpx;
	        }
	      }
	    }
	  }
	
	  .h1 {
		margin: 32rpx 0 24rpx 0;
	  }
	
	  .tabs {
		  display: flex;
		  justify-content: space-between;
		  padding-bottom: 24rpx;
	    .tab {
			width: 96rpx;
			height: 60rpx;
			background: rgba(25,137,250,0.1);
			border-radius: 8rpx;
			border: 2rpx solid #1989FA;
			font-size: 28rpx;
			text-align: center;
			line-height: 60rpx;
			color: $themC;
			&.active {
				color: #fff;
				background-color: $themC;
			}
			&.long {
				width: 336rpx;
			}
	    }
	  }
	
	  .card {
		  margin-bottom: 20rpx;
	    .chart {
	
	    }
	  }
	  .moreBtn {
			width: 200rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			border: 2rpx solid #E8E9EC;
			color: #ADADAD;
			text-align: center;
			line-height: 60rpx;
			margin: 32rpx auto 8rpx auto;
	  }
	}
</style>