yogaApp/pages/user/kslist.vue

<template>
	<view class="page">
		<view class="lcon">
			
			<scroll-view class="scrolllist" scroll-with-animation>
				<view class="tabicl" v-for="(item, index) in list" :key="index" :class="index==tabCurrentIndex?'cur':''" @tap="tabSelect" :data-id="index">
					<view class="ptext">{{item.name}}</view>
					<view class="pline"></view>
				</view>
				<view class="bcon">
					<view class="bcell">
						<view class="btip">上课节数</view>
						<view class="btxt">{{list[tabCurrentIndex].claCount}}</view>
					</view>
					<view class="bcell">
						<view class="btip">预计提成</view>
						<view class="btxt"><text style="font-size: 26rpx;">￥</text>{{list[tabCurrentIndex].totalFee}}</view>
					</view>
				</view>
				<view class="hcon">
					<view class="hcell">课程名称</view>
					<view class="hcell">上课日期</view>
					<view class="hcell">上课教室</view>
					<view class="hcell">课程时长</view>
				</view>
			</scroll-view>
			
			<!-- 列表 -->
			<swiper class="swiper-box" :duration="300" :current="tabCurrentIndex"  @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="tabItem in list" :key="tabItem.id">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="scell" v-if="tabItem.slist.length>0">
							<view v-for="(item, index) in tabItem.slist" :key="index" class="oitem">
								<view class="ocell">
									{{item.courseName}}
								</view>
								<view class="ocell">
									{{item.realClaDate}}
								</view>
								<view class="ocell">
									{{item.roomName}}
								</view>
								<view class="ocell">
									{{item.realStartTime+' '+item.realEndTime}}
								</view>
							</view>
						</view>
						<uni-load-more v-if="tabItem.slist.length<1" iconType="circle" :status="tabItem.loadStatus" />
					</scroll-view>
				</swiper-item>
			</swiper>
			
		</view>
		
		 
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
	</view>
</template>

<script>
	import { myCache,getRemoteFile } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	export default {
		components: {
			openlogin
		},
		data() {
			return {
				openId:"",
				phone:"",
				userid:"",
				tabCurrentIndex: 0,
				scrollLeft: 0,//tabs
				//  1：今日，2：昨日，3：本月 ，4：上月 
				list:[
					{
						id:1,
						order_state:1,
						value:"today",
						claCount: 0,
						totalFee: 0,
						loadStatus:'noMore', // 'more',
						name:'今日',
						slist:[
							{
								id:1,
								name1:"普拉提",
								name2:"2025年03月12日",
								name3:"公共教室3",
								name4:"1.5小时",
							},
							{
								id:1,
								name1:"普拉提",
								name2:"2025年03月12日",
								name3:"公共教室3",
								name4:"1.5小时",
							},
						],
						
					},
					{
						id:2,
						order_state:2,
						value:"yesterday",
						claCount: 0,
						totalFee: 0,
						loadStatus:'noMore', // 'more',
						name:'昨日',
						slist:[
							{
								id:1,
								name1:"普拉提",
								name2:"2025年03月12日",
								name3:"公共教室3",
								name4:"1.5小时",
							},
							{
								id:1,
								name1:"普拉提",
								name2:"2025年03月12日",
								name3:"公共教室3",
								name4:"1.5小时",
							},
						],
						
					},
					{
						id:3,
						order_state:3,
						value:"thisMonth",
						claCount: 0,
						totalFee: 0,
						loadStatus:'noMore', // 'more',
						name:'本月',
						slist:[
							{
								id:1,
								name1:"普拉提",
								name2:"2025年03月12日",
								name3:"公共教室3",
								name4:"1.5小时",
							},
							{
								id:1,
								name1:"普拉提",
								name2:"2025年03月12日",
								name3:"公共教室3",
								name4:"1.5小时",
							},
						],
					},
					{
						id:4,
						order_state:4,
						value:"lastMonth",
						claCount: 0,
						totalFee: 0,
						loadStatus:'noMore', // 'more',
						name:'上月',
						slist:[
							{
								id:1,
								name1:"普拉提",
								name2:"2025年03月12日",
								name3:"公共教室3",
								name4:"1.5小时",
							},
							{
								id:1,
								name1:"普拉提",
								name2:"2025年03月12日",
								name3:"公共教室3",
								name4:"1.5小时",
							},
						],
					},
				],
			};
		},
		onLoad(option) {
			if(option.id||option.id==0){
				if(parseInt(option.id)==0){
					this.tabCurrentIndex=0;
				}
				else{
					this.tabCurrentIndex=parseInt(option.id);
				}
				this.scrollLeft = (this.tabCurrentIndex - 1) * 60;
			}
		},
		onShow(option){
			this.reset();
		},
		onReady(){
			this.openId = myCache('openId');
			var user = myCache('user');
			this.userid = user.userid? user.userid:'';
			this.phone = user.userphone;
			if(this.userid==""||this.userid=="0"){
				uni.navigateTo({
					url: `/pages/login/login`
				});
			}
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},100);
		},
		methods: {
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			async getOrderList() {
				if(this.list[this.tabCurrentIndex].loadStatus!=="noMore")
				{
					uni.showLoading({
						title: '数据加载中...'
					});
					var para={
						time: this.list[this.tabCurrentIndex].value
						// time: "thisMonth"
					}
					const {data: res} = await uni.$http.post('/api/my/teacherClaTotal', para);
					if(res&&res.data){
						var data=res.data;
						this.list[this.tabCurrentIndex].loadStatus="noMore";
						this.list[this.tabCurrentIndex].slist=data.claTimeList;
						this.list[this.tabCurrentIndex].totalFee=data.totalFee;
						this.list[this.tabCurrentIndex].claCount=data.claCount;
						this.$forceUpdate();
					}
					else{
						this.list[this.tabCurrentIndex].loadStatus="noMore";
						this.list[this.tabCurrentIndex].slist=[];
						this.list[this.tabCurrentIndex].totalFee=0;
						this.list[this.tabCurrentIndex].claCount=0;
						this.$forceUpdate();
						uni.showModal({
							title: '提示',
							content: res.message? res.message : '当前信息不存在..',
							cancelText: '取消',
							confirmText: '确定',
							success: ress => {
								// 返回
								uni.navigateBack({
									delta: 1
								});
							}
						});
					}
				}
			},
			loadData(){
				console.log('loadData');
				// 加载
				if(this.list[this.tabCurrentIndex].loadStatus=="more") {
					this.list[this.tabCurrentIndex].loadStatus="loading";
					setTimeout(() => {
						this.getOrderList();
					}, 300);
				}
			},
			tabSelect(e) {
				console.log(e)
				this.tabCurrentIndex = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				// 重新加载 暂不需要加载
				// this.list[this.tabCurrentIndex].loadStatus="more";
				// this.list[this.tabCurrentIndex].slist=[];
				this.loadData();
			},
			animationfinish({ detail: { current } }) {
				this.tabCurrentIndex = current;
				this.loadData();
			},
			// 联系教练
			gototeacher(item){
				var data={
					id:item.id,
					name:"教练A"
				}
				// 联系教练
				var data=encodeURIComponent(JSON.stringify(data));
				uni.navigateTo({
					url: `/pages/teacher/chat?data=${data}`
				})
			},
			reset(){
				// 重新加载数据
				this.list.forEach((cell,idx)=>{
					this.list[idx].loadStatus='more';
					this.list[idx].slist=[];
				});
				this.$forceUpdate();
				this.loadData();
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0;
		position: relative;
		background-image: url('@/static/image/bg.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center center;
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
	}
	.zcon{
		padding: 0;
		position: relative;
		background: #6f8c6e;
		padding: 30rpx;
		margin: 30rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		.ztip{
			font-size: 26rpx;
			color: #fff;
			margin-bottom: 5rpx;
		}
		.ztxt{
			font-size: 40rpx;
			color: #fff;
			font-weight: 600;
		}
	}
	.scrolllist{
		height: 280rpx; 
		background: #fff;
		white-space: nowrap;
		width: 100%;
	}
	.bcon{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		.bcell{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 50%;
			.btip{
				color: #888;
				font-size: 26rpx;
			}
			.btxt{
				font-size: 40rpx;
				font-weight: 600;
				color:#000;
			}
		}
	}
	.tabicl{
		width: 140rpx;
		height: 80rpx;
		line-height: 80rpx;
		position: relative;
		display: inline-block;
		overflow: hidden;
		margin-right: 20rpx;
	}
	.ptext{
		font-size: 30rpx;
		text-align: center;
		color: #000;
		font-weight: 600;
		height: 75rpx;
	}
	.cur .ptext{
		color: #89965f;
		font-size: 33rpx;
		font-weight: 600;
	}
	.cur .pline{
		width: 40%;
		height: 9rpx;
		background: #89965f;
		border-radius: 6rpx;
		opacity: 1;
		margin-left: 30%;
	}
	.hcon{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-bottom: 10rpx;
		margin-top: 10rpx;
		border-top: 1rpx solid #e5e5e5;
		border-bottom: 1rpx solid #e5e5e5;
	}
	.hcell{
		width: 25%;
		font-size: 26rpx;
		font-weight: 600;
		color: #000;
		padding: 10rpx;
		text-align: center;
	}
	.swiper-box {
		flex: 1;
		height: calc(100vh - var(--window-top) - 410rpx) !important;
	}
	.swiper-item {
		height: 100%;
	}
	.lcon{
		background: #fff;
		padding: 30rpx;
		margin: 30rpx;
		border-radius: 20rpx;
	}
	.scell{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		.oitem{
			display: flex;
			flex-direction: row;
			background-color: #FFFFFF;
			width: 100%;
			border-bottom: 1rpx solid #e5e5e5;
			align-items: center;
			justify-content: center;
			.ocell{
				width: 25%;
				font-size: 26rpx;
				color: #333;
				padding: 10rpx 10rpx 15rpx;
				text-align: center;
			}
		}
	}
	
	
	
	
</style>