jiangximiniprogramSchool/pages/tabbar/statistics/index.vue

<template>
	<view class="content pageBg">
		<view class="userInfo">
			<view class="tit">Hi,大乔教练</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">合作教练</view>
			</view>
		</view>
		<view class="card priceBox">
			<view class="blueLab">今日已结算金额</view>
			<view class="price">￥36333.66</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">结算统计</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">结算明细</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 selectedIndex ='2'></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 {
				currentTab: 1,
				showDatePicker: false
			}
		},
		onLoad() {
			console.log('我的页面')
		},
		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: 0 28rpx;
		padding-top: 142rpx;
	  .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;
	    }
	
	    .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>