luoyangCoachApp/pages/tabbar/student/index.vue

<template>
	<view class="pageBgImg pad" >
	<!-- <view class="pad"  :style="{ background: `url(${imgUrl}) #f6f6f6 no-repeat`, backgroundSize: backgroundSize }" > -->
		<view class="status_bar"></view>
		<view class="" style="height: 30rpx;"></view>
		<!-- <view class="searchBox">
			<searchRow placeholder="搜索学员姓名、学员手机号"></searchRow>
		</view>
		<view class="card" v-if="identity=='实操教练'">
			<view class="addStudent">
				<view class="h2">我的学员</view>
				<view class="btnBg" @click="$goPage('/pages/recordEntry/student/addStudent/addStudent')">手动添加</view>
			</view>
		</view>
		
		<view class="card">
			<view class="statistics">
				<view class="statisticsItem">
					<view class="val">260</view>
					<view class="lab">累计学员数量</view>
				</view>
				<view class="statisticsItem">
					<view class="val">260</view>
					<view class="lab">今日新增学员</view>
				</view>
				<view class="statisticsItem" v-if="identity=='校长'">
					<view class="val">260</view>
					<view class="lab">今日退学学员</view>
				</view>
			</view>
		</view> -->
			<view class="searchBox" v-if="identity=='校长'">
				<searchRow placeholder="搜索学员姓名、学员手机号" @searchFn="searchFn"></searchRow>
			</view>
			<!-- <topUserInfo v-if="identity=='实操教练'"/> -->
			
			<view class="card">
				<view class="h2" v-if="identity=='实操教练'">我的学员</view>
				<view class="statistics">
					<view class="statisticsItem">
						<view class="val">{{count.accumulateCount}}</view>
						<view class="lab">累计学员数量</view>
					</view>
					<view class="statisticsItem">
						<view class="val">{{count.todayCount}}</view>
						<view class="lab">今日新增学员</view>
					</view>
					<view class="statisticsItem" v-if="identity=='校长'">
						<view class="val">{{count.todayDropoutCount}}</view>
						<view class="lab">今日退学学员</view>
					</view>
				</view>
				<view class="addStudent"  @click="$goPage('/pages/recordEntry/student/addStudent/addStudent')" v-if="identity=='实操教练'">+ 添加学员</view>
			</view>
			
		
		<view class="screen_row">
			<view class="selectItem" @click="showDatePicker=true">
				<view class="text ">{{screen.timer}}</view>
				<view class="downIcon">
					<u-icon name="arrow-down" :size="'28rpx'"></u-icon>
				</view>
			</view>
			<view class="selectItem" @click="showCar=true">
				<view class="text oneRowText">{{screen.car}}</view>
				<view class="downIcon">
					<u-icon name="arrow-down" :size="'28rpx'"></u-icon>
				</view>
			</view>
			<view class="selectItem" @click="showClass=true">
				<view class="text oneRowText">{{screen.className}}</view>
				<view class="downIcon">
					<u-icon name="arrow-down" :size="'28rpx'"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="list">
			<view class="card" @click="$goPage('/pages/recordEntry/student/studentDetail/studentDetail?id='+item.id)" v-for="(item,index) in list" :key="index">
				<appointItem-student :item="item"/>
			</view>
		</view>
		<nodata v-if="!list.length&&status=='nomore'"></nodata>
		
		<UserTab name ='学员'></UserTab>
		
		<!-- <u-datetime-picker
				:show="showDatePicker"
				mode="date"
				:minDate="1669341725000"
				:visibleItemCount="4"
				:closeOnClickOverlay="false"
				@confirm="confirmDatePicker"
				@cancel="cancelDate"
				cancelText="不限日期"
		></u-datetime-picker> -->
		<u-calendar :show="showDatePicker" ref="calendar"  @confirm="confirmDatePicker" @close="closeCalendar"  :minDate="minDate" :maxDate="maxDate"></u-calendar>
		<u-picker :show="showCar" :columns="carArr" keyName="lab" @confirm="confirmCar" @cancel="showCar=false"></u-picker>
		<u-picker :show="showClass" :columns="classArr" keyName="name" @confirm="confirmClass" @cancel="showClass=false"></u-picker>
	</view>
</template>

<script>
	import { imgUrl } from '@/config/site.config'
	import { studentRecordPage, schoolClass, studentOwner } from '@/config/api.js'
	// import topUserInfo from '../statistics/comp/topUserInfo.vue'
	export default {
		// components: { topUserInfo },
		data() {
			return {
				imgUrl: imgUrl+'indexTopBanner.png',
				backgroundSize: '100% 492rpx',
				screen: {
					timer: '报名时间',
					car: '全部车型',
					className: '全部班型'
				},
				showDatePicker: false,
				showCar: false,
				showClass: false,
				carArr: [
					[
						{lab: '全部车型',id: 0},
						{lab: 'C1',id: 1},
						{lab: 'C2',id: 2},
					]
				],
				classArr: [
					[
						{lab: '普通班型',id: 1},
						{lab: 'C2vip',id: 2},
					]
				],
				params: {
					 "pageNo": 1,  "pageSize": 10,  status: 1, name: ''
				},
				total: 20,
				list: [],
				count: {},
				status: 'loading'
			}
		},
		onShow() {
			uni.hideTabBar();
			this.studentOwnerFn()
		},
		onLoad() {
			this.params.schoolId = this.vuex_schoolId
			this.studentRecordPageFn()
			this.schoolClass()
			
			let nowTime = new Date()*1
			// 一个月的时间戳
			const oneMonthMilliseconds = 30 * 24 * 60 * 60 * 1000;
			this.minDate = parseInt( nowTime - oneMonthMilliseconds )
			this.maxDate = parseInt( nowTime + oneMonthMilliseconds )
		},
		onPullDownRefresh() {
			this.studentRecordPageFn()
			this.studentOwnerFn()
			this.listInit()
		},
		methods: {
			searchFn(val) {
				this.params.name = val
				this.listInit()
			},
			async studentOwnerFn() {
				const {data: res} = await studentOwner()
				this.count = res
				console.log(res)
			},
			cancelDate() {
				this.showDatePicker=false
				this.params.applyDateTime = ''
				this.screen.timer = '预约时间'
				this.listInit()
			},
			confirmDatePicker(val) {
				this.showDatePicker = false
				console.log(val)
				this.params.applyDateTime =  this.screen.timer = val[0]
				this.listInit()
			},
			closeCalendar() {
				this.showDatePicker = false
				this.params.applyDateTime = ''
				this.screen.timer = '报名时间'
				this.listInit()
			},
			confirmCar(val) {
				let item = val.value[0]
				this.params.trainType = this.screen.car = item.lab
				if(this.screen.car=='全部车型') this.params.trainType = ''
				this.showCar = false
				this.listInit()
			},
			confirmClass(val) {
				let item = val.value[0]
				this.screen.className = item.name
				this.params.schoolClassId = item.id
				this.showClass = false
				this.listInit()
			},
			// 获取班型
			async schoolClass() {
				const {data: res} = await schoolClass({id: this.vuex_schoolId,pageNo: 1,pageSize: 100})
				this.classArr = [res]
				this.classArr[0].unshift({name: '全部班型', id: 0})
				console.log(this.classArr)
			},
			listInit() {
				this.params.pageNo = 1
				this.list = []
				this.status = 'loading'
				this.studentRecordPageFn()
			},
			async studentRecordPageFn() {
				let obj = {}
				for(let key in this.params) {
					if(this.params[key]) obj[key] = this.params[key]
				}
				const {data: res} = await studentRecordPage(obj)
				this.params.pageNo ++
				this.list.push(...res.list)
				this.total = res.total
				if(this.list.length>=this.total) this.status = 'nomore'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pad {
		min-height: 100vh;
		padding-bottom: 110rpx;
	}
	.card {
		padding: 0 28rpx;
		margin-bottom: 24rpx;
	}
	.searchBox {
		padding:  0rpx 0 24rpx 0;
	}
	.h2 {
			font-size: 32rpx;
			font-weight: 500;
			color: $themC;
			padding-top: 26rpx;
	}
	.addStudent {
		padding: 10rpx 0 30rpx 0;
		font-size: 28rpx;
		color: $themC;
		text-align: center;
	}
	
	.statistics {
		display: flex;
		height: 170rpx;
	  .statisticsItem {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  flex-direction: column;
		  flex: 1;
	    .val {
			font-weight: 600;
			font-size: 56rpx;
			color: $themC;
			position: relative;
			&::before {
				content: '个';
				position: absolute;
				right: -30rpx;
				bottom: 10rpx;
				font-size: 24rpx;
				font-weight: 400;
			}
	    }
		
	    .lab {
			font-size: 28rpx;
			color: #999;
			// margin-top: 20rpx;
	    }
	  }
	}
	
	.screen_row {
		display: flex;
		margin-bottom: 24rpx;
		width: 100%;
		justify-content: space-between;
		.selectItem {
			display: flex;
			padding: 0 16rpx;
			border: 2rpx solid rgba(25,137,250,0.3);
			height: 60rpx;
			border-radius: 16rpx;
			background-color: #FFFFFF;
			line-height: 60rpx;
			align-items: center;
			width: 29%;
			.text {
				color: $themC;
				flex: 1;
				text-align: center;
				font-size: 26rpx;
			}
			.downIcon {
				width: 24rpx;
			}
		}
	}
</style>