2

src/pages.json

@@ -129,6 +129,14 @@
 					"navigationStyle": "custom"
 				}
 			}]
+		},{
+			"root": "pages/appointment", //约课分包
+			"pages":[
+				{"path": "list"},
+				{"path": "mySubscribe"},
+				{"path": "timeSlot"},
+				{"path": "record"}
+			]
 		}
 	],
 	"tabBar": {

src/pages/appointment/list.vue

@@ -7,6 +7,13 @@
 		display: flex;
 		align-items: center;
 	}
+	.basics-block{
+		width: 50%;
+		box-sizing: border-box;
+		padding-left: 10rpx;
+		text-align: left;
+		font-size: 26rpx;
+	}
 	.box-top{
 		display: flex;
 		box-shadow: 0 4rpx 24rpx rgba(100,101,102,.12);
@@ -55,30 +62,29 @@
 		font-size: 13px;
 		color: #111;
 		height: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		align-content: space-around;
 	}
 </style>
 <template>
 	<div class="Appointmentlist">
 		<view class="basics">
 			<view class="basics-box">
-				<view class="row" style="justify-content: space-between;">
-					<view class="row">
-						提前几天预约:{{basics.AdvanceDay}}天
+				<view class="row basics-block" >
+					提前几天预约:{{basics.AdvanceDay||0}}天
 				</view>
-					<view class="row">
-						可预约时间:{{basics.ScrollETime}}
+				<view class="row basics-block">
+					可预约时间:{{basics.ScrollETime||'无'}}
 				</view>
+				<view class="row basics-block">
+					可预约的天数:{{basics.AppointDay||0}}天
 				</view>
-				<view class="row" style="justify-content: space-between;">
-					<view class="row">
-						可预约的天数:{{basics.AppointDay}}天
-					</view>
-					<view class="row">
+				<view class="row basics-block">
 					是否可以继续预约:{{basics.IsNextAppoint?'是':'否'}}
 				</view>
 			</view>
 		</view>
-		</view>
 		<view class="box-top">
 			<view class="box-top-item row" @click="getscreen(1)">
 				<view class="ellipsis">
@@ -100,7 +106,7 @@
 			<scroll-view :scroll-y="true" style="height: calc(100vh - 100rpx - 200rpx);width: calc(100vw);">
 				<view class="center" v-for='(x,y) in dataList' :key = 'y' @click="gotimelist(x)">
 					<view class="center-box">
-						<view class="center-top row"  >
+						<view class="center-top row">
 							<image :src='x.TeacherHead' mode="aspectFill" style="width:38px ;height: 38px;border-radius: 50%;"></image>
 							<view style="margin-left: 15px;padding-bottom:10px ;">
 								<div style="font-size: 13px;color: #111;font-weight: bold">{{x.TeacherName}}</div>
@@ -120,8 +126,7 @@
 		<view v-else>
 			<van-empty description="暂无约课老师"  />
 		</view>
-		<van-calendar :show="dateshow"  @confirm="onConfirm" :default-date='defaultDate' @close='dateshow=false'/>
-		
+		<van-calendar :show="dateshow" color="#2961fe"  @confirm="onConfirm" :default-date='defaultDate' @close='dateshow=false'/>
 	</div>
 </template>
 

src/pages/appointment/list2.vue

+<template>
+	<view class="">
+		
+	</view>
+</template>
+
+<script>
+	import { ref,toRefs, reactive,getCurrentInstance} from 'vue'
+	export default {
+		setup(){
+			const data=reactive({
+				
+			})
+			return{
+				...toRefs(data)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/pages/appointment/record.vue

+<template>
+	<view class="">
+		<view class="box-top">
+			<view class="box-top-item flex" @click="showCalendar">
+				<view class="ellipsis">
+					<text v-if="date.length==2">{{date[0]}}-{{date[1]}}</text>
+					<text v-else>选择日期</text>
+				</view>
+				<van-icon name="arrow-down" size='12' style='margin-left: 5px;'/>
+			</view>
+			<picker mode="selector"  range-key="Name"  style="width: 50%;"
+				:range="stateList" @change="getState">
+				<view class="box-top-item flex"  style="width: 100%;height: 100rpx;" >
+					<view class="ellipsis">
+						{{stateName}}
+					</view>
+					<van-icon name="arrow-down" size='12' style='margin-left: 5px;'/>
+				</view>
+			</picker>
+		</view>
+		<van-calendar
+		  :show="isShowcalendar"
+		  type="range"
+		  @close="isShowcalendar=false"
+		  @confirm="onConfirmCalendar"
+		/>
+
+	</view>
+</template>
+
+<script>
+	import {  toRefs, reactive,getCurrentInstance} from 'vue'
+	import {DateFormat} from '../../utils/date.js'
+	export default{
+		setup(){
+			const data=reactive({
+				msg:{
+					State:1,
+				},
+				isShowcalendar:false,
+				date:[],
+				stateName:"不限",
+				stateList:[
+					{
+						Name:"待确认",
+						Id:1,
+					},
+					{
+						Name:"待上课",
+						Id:2
+					},{
+						Name:"已上课",
+						Id:3
+					},{
+						Name:"缺席",
+						Id:4
+					}
+				]
+			})
+			const methods={
+				showCalendar(){
+					data.isShowcalendar=true
+				},
+				getState(e){
+					let  i = e.detail.value;
+					data.stateName=data.stateList[i].Name;
+					let id=data.stateList[i].Id
+				},
+				onConfirmCalendar(e){
+					data.isShowcalendar=false
+					let dateS = DateFormat(e.detail[0],'/')
+					let dateE = DateFormat(e.detail[1],'/')
+					data.date=[dateS,dateE]
+					console.log(68,data.date)
+				}
+			}
+			return{
+				...toRefs(data),
+				...methods
+			}
+		},
+		onLoad() {
+			uni.setNavigationBarTitle({
+				title:"约课记录"
+			})
+		}
+	}
+</script>
+
+<style scoped>
+	.flex{
+		display: flex;
+		align-items: center;
+	}
+	.box-top{
+		display: flex;
+		box-shadow: 0 4rpx 24rpx rgba(100,101,102,.12);
+		height: 100rpx;
+		background: #FFF;
+	}
+	.box-top-item{
+		width: 50%;
+		justify-content: center;
+		font-size: 13px;
+	}
+	.ellipsis{
+		font-size: 24rpx;
+		max-width: 80%;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+</style>

src/pages/contract/orderList.vue

@@ -33,7 +33,15 @@
 		color: #0000ff;
 		font-size: 24rpx;
 	}
-
+	.Order_Type{
+		box-sizing: border-box;
+		padding: 4rpx 14rpx;
+		font-size: 20rpx;
+		background-color: #2961fe;
+		margin-left: 20rpx;
+		color: #FFFFFF;
+		border-radius: 20rpx;
+	}
 	.courseName {
 		font-size: 40rpx;
 		margin-bottom: 20rpx;
@@ -109,6 +117,12 @@
 				<view class="Order_Top">
 					<view class="Order_label">订单号：</view>
 					<view class="Order_Number">#{{item.OrderId}}</view>
+					<view class="Order_Type" v-if="item.ClassScrollType===1">
+						跟班
+					</view>
+					<view class="Order_Type" style="background-color: #29CC40;" v-if="item.ClassScrollType===2">
+						约课
+					</view>
 				</view>
 				<view class="p-lc-c">
 					<view class="p-lc-item">

src/pages/person/person.vue

@@ -43,6 +43,9 @@
 				</view>
 			</view>
 		</view>
+		<view class="" @click="jumpPage(`/pages/appointment/record`)">
+			约课记录
+		</view>
 		<view class="courseInfo">
 			<view class="title">课程信息</view>
 			<view class="statistic">
@@ -106,7 +109,7 @@
           }}</view>
 					<view class="Grade">等级：{{ pageData.CourseInfo.CourseRate||'' }}</view>
 					<view><text class="Grade">状态：</text>
-						<text class="StatusName">{{
+						<text class="StatusName" v-if="pageData.CourseInfo.ClassStatusName">{{
               pageData.CourseInfo.ClassStatusName
             }}</text>
 					</view>

src/pages/timetable/timeTable.vue

 <template>
 	<view class="" :style="{ 'padding-top': `${statusBarHeight}px` }">
+
 		<view style="height: 100rpx"></view>
 		<view class="navbar">
 			<van-nav-bar title="课表" fixed title-class="navTitle">
@@ -17,14 +18,17 @@
 		<van-popup :show="showPopup" round position="bottom" custom-style="height: 50%" @close="onClose">
 			<van-datetime-picker type="year-month" :value="getCurrentDate" @cancel="onClose" @confirm="onConfirm" />
 		</van-popup>
+		<swiper :style="{height:!isShowAllDay?'220rpx':'620rpx'}" circular :current-item-id="2"
+			@change="changeSwiper($event,preSwiperId)">
+			<swiper-item v-for="(Sitem,Sindex) in swiperArr" :key="Sindex" :item-id="Sitem.id" style="height: 400rpx;">
 				<view class="calendar flex flex_wrap">
 					<view v-for="(item, index) in weekArr" :key="index" class="calendar-week-item no_shrink">
 						<view class="calendar-week">{{ item }}</view>
 					</view>
 					<view v-for="(item, index) in sliceWeekArr" :key="index" class="calendar-item no_shrink"
 						v-if="!isShowAllDay">
-				<view class="calendar-day flex flex_center_center" ref="calendarDay" @click="calendarActive(item)"
-					v-show="item">
+						<view class="calendar-day flex flex_center_center" ref="calendarDay"
+							@click="calendarActive(item)" v-show="item">
 							<view class=""
 								:class="{ 'calendar-active': activeDay === item.day ,'calendar-leave':isLeave(item),'calendar-leave2':isLeave2(item)}">
 								{{ item.day }}
@@ -33,7 +37,8 @@
 						<view class="isToday" v-if="item.isToday === 1">今天</view>
 						<view class="haveCourse" v-if="getHaveCourse(item)"></view>
 					</view>
-			<view v-for="(item, index) in calendar" :key="index" class="calendar-item no_shrink" v-if="isShowAllDay">
+					<view v-for="(item, index) in calendar" :key="index" class="calendar-item no_shrink"
+						v-if="isShowAllDay">
 						<view class="calendar-day flex flex_center_center" ref="calendarDay"
 							@click="calendarActive(item), sliceWeek(item)" v-show="item">
 							<view class=""
@@ -54,19 +59,24 @@
 						</van-divider>
 					</view>
 				</view>
+			</swiper-item>
+		</swiper>
+
 		<view class="Timetable-box">
-			<view class="flex flex_center_center" v-if="loading">
+			<view class="flex flex_center_center loading" v-if="loading">
 				<van-loading size="48rpx" type="spinner">加载中...</van-loading>
 			</view>
 			<van-empty description="暂无课程" v-if="dataList.length === 0" />
-			<view class="btnfixed">
-				<image @click="goappointment" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/jiaheb2b/checkDuplicate_btn.png" mode="widthFix"></image>
-			</view>
 			<view v-for="(item, index) in dataList" :key="index" v-if="dataList.length > 0">
-				<Item :data="item"/>
+				<Item :data="item" />
 			</view>
 		</view>
 		<van-toast id="van-toast" />
+		<view class="btnfixed">
+			<image @click="goappointment"
+				src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/jiaheb2b/checkDuplicate_btn.png"
+				mode="widthFix"></image>
+		</view>
 	</view>
 </template>
 
@@ -82,6 +92,7 @@
 		computed,
 		onMounted,
 		nextTick,
+		inject,
 	} from "vue";
 	import {
 		getWeek,
@@ -98,6 +109,7 @@
 			Item
 		},
 		setup(props) {
+			const Toast = inject('$toast')
 			let weekArr = ["日", "一", "二", "三", "四", "五", "六"];
 			//年月选择
 			let currentDate = ref(0);
@@ -127,7 +139,7 @@
 				sliceWeek(newArr[0]);
 				data.msg.StartTime = currentDate.value + '-01'
 				data.msg.EndTime = currentDate.value + '-' + getMonthMaxDay(year, month);
-				that.getData()
+				// that.getData()
 				that.getAllData()
 
 			};
@@ -160,8 +172,8 @@
 			let isShowAllDay = ref(false);
 			let sliceWeekArr = ref([]);
 			let sliceWeek = (item) => {
-				let w = item.$orig?.week || item.week||0
-				let d = item.$orig?.day || item.day||0
+				let w = item.$orig?.week || item.week || 0
+				let d = item.$orig?.day || item.day || 0
 				let newArr = calendar.value.slice(emptyArr.length, calendar.value.length);
 				let s = d - (w + 1) <= 0 ? 0 : d - (w + 1);
 				let e = d + (6 - w);
@@ -169,13 +181,19 @@
 				if (s === 0) {
 					sliceWeekArr.value.unshift(...emptyArr);
 				}
-				
 			};
 			//切换日历展示模式
 			let changeCalendar = () => {
 				isShowAllDay.value = !isShowAllDay.value;
 			};
 			//-------------------上边日历部分---------------------------------------
+			let loadingS = () => Toast({
+				type: "loading",
+				message: "加载中...",
+				mask: true,
+				duration: 0,
+				forbidClick: true,
+			})
 			let data = reactive({
 				msg: {
 					ClassId: 0,
@@ -186,12 +204,40 @@
 				dataList: [],
 				allData: [],
 				loading: false,
-
+				swiperArr: [{
+					y: 2022,
+					m: 1,
+					id: 1
+				}, {
+					y: 2022,
+					m: 2,
+					id: 2
+				}, {
+					y: 2022,
+					m: 3,
+					id: 3
+				}],
+				swiperArrDemo: [{
+					y: 2022,
+					m: 1,
+					id: 1
+				}, {
+					y: 2022,
+					m: 2,
+					id: 2
+				}, {
+					y: 2022,
+					m: 3,
+					id: 3
+				}],
+				currentSwiper: 1,
+				preSwiperId: 1,
+				timer: null, //防抖
 			});
 			let methods = {
 				// 获取当天数据
 				async getData() {
-					if(data.msg.ClassId<=0) return
+					// if(data.msg.ClassId<=0) return
 					data.loading = true
 					let res = await getStundentPlanStatistical(data.msg);
 					data.loading = false
@@ -201,11 +247,20 @@
 				},
 				//获取当月数据
 				async getAllData() {
-					if(data.msg.ClassId<=0) return
+					// if(data.msg.ClassId<=0) return
+					loadingS()
+					try {
 						let res = await getStundentPlanStatistical(data.msg);
+						Toast.clear()
+						if (data.timer) data.timer = null
 						if (res) {
+							data.dataList = res.Data;
 							data.allData = res.Data;
 						}
+					} catch {
+						Toast.clear()
+					}
+
 				},
 				jumpPage(url) {
 					uni.navigateTo({
@@ -261,11 +316,78 @@
 					}
 					return res
 				},
-				goappointment(){
-					let day = currentDate.value+'-'+activeDay.value;
+				goappointment() {
+					let day = currentDate.value + '-' + activeDay.value;
 					uni.navigateTo({
-						url: '/pages/appointment/list?day='+day,
+						url: '/pages/appointment/list?day=' + day,
 					});
+				},
+				changeSwiper(val, PreId) {
+					let CurId = val.detail.current
+					data.currentSwiper = 1
+					if ((CurId > PreId && (CurId !== 2 || PreId !== 0)) || (CurId == 0 && PreId == 2)) {
+						console.log('右滑')
+						methods.right(CurId)
+					} else if ((CurId < PreId && (CurId !== 0 || PreId !== 2)) || (CurId == 2 && PreId == 0)) {
+						console.log('左滑')
+						methods.left(CurId)
+					}
+					data.preSwiperId = val.detail.current
+
+				},
+				right(curId) {
+					data.swiperArrDemo.forEach(e => {
+						if (e.m == 12) {
+							e.y = e.y + 1
+							e.m = 1
+						} else {
+							e.m += 1
+						}
+
+					})
+					if (curId == 0) {
+						data.swiperArr = [data.swiperArrDemo[1], {}, {}]
+					} else if (curId == 1) {
+						data.swiperArr = [{}, data.swiperArrDemo[1], {}]
+					} else if (curId == 2) {
+						data.swiperArr = [{}, {}, data.swiperArrDemo[1]]
+					}
+					const showM = data.swiperArrDemo[1]
+					const obj = {
+						detail: showM.y + '-' + (showM.m < 10 ? '0' + showM.m : showM.m) + '-01'
+					}
+					if (data.timer) clearTimeout(data.timer)
+					data.timer = setTimeout(() => {
+						onConfirm(obj)
+					}, 500)
+
+
+
+				},
+				left(curId) {
+					data.swiperArrDemo.forEach(e => {
+						if (e.m == 1) {
+							e.y = e.y - 1
+							e.m = 12
+						} else {
+							e.m = e.m - 1
+						}
+					})
+					if (curId == 0) {
+						data.swiperArr = [data.swiperArrDemo[1], {}, {}]
+					} else if (curId == 1) {
+						data.swiperArr = [{}, data.swiperArrDemo[1], {}]
+					} else if (curId == 2) {
+						data.swiperArr = [{}, {}, data.swiperArrDemo[1]]
+					}
+					const showM = data.swiperArrDemo[1]
+					const obj = {
+						detail: showM.y + '-' + (showM.m < 10 ? '0' + showM.m : showM.m) + '-01'
+					}
+					if (data.timer) clearTimeout(data.timer)
+					data.timer = setTimeout(() => {
+						onConfirm(obj)
+					}, 500)
 				}
 			};
 			onMounted(() => {
@@ -304,9 +426,9 @@
 			// this.msg.ClassId = indexData.ClassId
 			this.msg.ClassId = '1'
 			this.msg.StartTime = getToday('y', 'm') + '-01';
-			this.msg.EndTime = getToday('y', 'm') + '-'+ getMonthMaxDay();
+			this.msg.EndTime = getToday('y', 'm') + '-' + getMonthMaxDay();
 			if (this.$isLogin()) {
-				this.getData()
+				// this.getData()
 				this.getAllData()
 			}
 		},
@@ -314,6 +436,11 @@
 </script>
 
 <style scoped>
+	.swiper {
+		/* min-height: 400rpx; */
+		height: 620rpx;
+	}
+
 	.chooseDate {
 		font-size: 24rpx;
 		font-family: PingFang SC;
@@ -427,14 +554,24 @@
 		top: 10rpx;
 		right: 10rpx;
 	}
-	.btnfixed{
+
+	.btnfixed {
 		position: fixed;
 		right: 0px;
 		bottom: 92px;
 		z-index: 9999;
 	}
-	.btnfixed image{
+
+	.btnfixed image {
 		width: 80px;
 		height: auto;
 	}
+
+	.loading {
+		/* position: fixed;
+		top: 200rpx;
+		left: 50%;
+		z-index: 999;
+		transform: translateX(-50%); */
+	}
 </style>

src/utils/date.js

@@ -72,3 +72,11 @@ export let getdate = (time, tomorrow) => {
 	let d = year + "-" + month + '-' + day
 	return d
 }
+export let DateFormat = (time, separator='-') => {
+	let date = new Date(time)
+	let year = date.getFullYear()
+	let month = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+	let day = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
+	let d = year + separator + month + separator + day
+	return d
+}