yogaApp/pages/book/bookteacher.vue

<template>
	<view class="page">
		
		<scroll-view scroll-y style="height: 100%;width: 100%;">
			<view class="scell" v-if="list.length>0">
				<view v-for="(item, index) in list" :key="index" class="oitem">
					
					<view class="otop" @click="gotoInfo(item.courseTimeId)">
						<view class="hleft">
							<text>{{item.storeName?item.storeName:'门店'}}</text>
						</view>
						<view class="hright">
							<!-- 1：待上课，2：预约中，3：待评价 ，4：已完成 ，5：已取消 -->
							<!-- 描述:0->预约中;1->教练确认;2->店长确认/预约成功/待上课 3->已取消;4->已完成/待评价; -->
							<view v-if="item.bookStatus==1" class="ztip">教练确认</view>
							<view v-else-if="item.bookStatus==0" class="jtip">预约中</view>
							<view v-else-if="item.bookStatus==2" class="htip">待上课</view>
							<view v-else-if="item.bookStatus==4" class="wtip">已完成</view>
							<view v-else-if="item.bookStatus==3" class="ctip">已取消</view>
						</view>
					</view>
					
					<view class="oscon" @click="gotoInfo(item.courseTimeId)">
						<view class="osimg imgload">
							<image class="osimg" v-if="item.pic" :src="getimgRemoteFile(item.pic)" mode="aspectFill"></image>
						</view>
						<view class="osname">
							<text class="ntxt">{{item.courseName}} {{item.claName}} </text>
							<text class="txt"> 教练：{{item.teacherName }}</text>
							<text class="txt">上课时间：{{ item.claDate+' '+item.startTime+'-'+item.endTime}}</text>
							<text class="txt">教室：{{item.roomName}}</text>
						</view>
					</view> 
					<view class="obtn">
						<view class="omoney"></view>
						<!--  1：待上课，2：预约中，3：待评价 ，4：已完成  5：已取消-->
						<!-- 描述:0->预约中;1->教练确认;2->店长确认/预约成功/待上课 3->已取消;4->已完成/待评价; -->
						<button type="primary" class="conbtn" @click="gototeacher(item)">联系教练</button>
						<button v-if="item.orderstate==2||item.orderstate==1" type="primary" class="cancelbtn" :data-id="item.courseTimeId" @click="cancelkcdo">取消课程</button>
						<button v-if="item.orderstate==0" type="primary" class="cancelbtn" :data-id="item.courseTimeId" @click="cancelyydo">取消预约</button>
						<button v-if="item.orderstate==0" type="primary" class="paybtn" :data-id="item.courseTimeId" @click="checkdo($event,item)">确认上课</button>
						<button v-if="item.orderstate==4" type="primary" class="viewbtn" :data-id="item.courseTimeId" @click="orderdo($event,item)">再次预约</button>
						<button v-if="item.orderstate==4" type="primary" class="gzbtn" :data-id="item.courseTimeId" @click="gotoevaluate($event,item)">评价</button>
					</view>
				</view>
			</view>
			
			<view v-if="list.length==0 && loadStatus=='noMore'" class="nodata"></view>
			<uni-load-more v-if="list.length>0" iconType="circle" :status="loadStatus" />
			
		</scroll-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:"",
				loadStatus:"more", // loading  noMore
				list:[],
			};
		},
		onLoad(option) {
			myCache('courserefresh',0);
			this.loadData();
		},
		onShow(option){
			// 预约后重新刷新课程表
			if(myCache('courserefresh')){
				this.loadData();
				myCache('courserefresh',0);
			}
		},
		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: {
			getimgRemoteFile(img){
				if(img){
					img=img.split(',')[0];
					return getRemoteFile(img)
				}
				else{
					return require("@/static/image/theme/p1.jpg")
				}
			},
			getPhoneNumber(e){
				if(e.phone){
					this.phone = e.phone
				}
				if(e.userid){
					this.userid = e.userid
				}
			},
			async getOrderList() {
				if(this.loadStatus!=="noMore")
				{
					uni.showLoading({
						title: '数据加载中...'
					});
					const {data: res} = await uni.$http.get('/api/my/appointmentListForTeacher');
					if(res&&res.data){
						// 全部
						this.loadStatus="noMore";
						this.list=res.data;
						this.$forceUpdate();
					}
					else{
						this.loadStatus="noMore";
						this.$forceUpdate();
					}
				}
			},
			loadData(){
				console.log('loadData');
				// 加载
				if(this.loadStatus=="more") {
					this.loadStatus="loading";
					setTimeout(() => {
						this.getOrderList();
					}, 300);
				}
			},
			gotoInfo(id){
				// 预约详情
				uni.navigateTo({
					url: `/pages/book/bookinfo?id=${id}`
				});
			},
			// 联系教练
			gototeacher(item){
				var data={
					id:item.id,
					name:"教练A"
				}
				// 联系教练
				var data=encodeURIComponent(JSON.stringify(data));
				uni.navigateTo({
					url: `/pages/teacher/chat?data=${data}`
				})
			},
			// 去评价
			gotoevaluate(item){
				var data=encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: `/pages/book/bookpj?data=${data}`
				});
			},
			iflogin(){
				this.openId = myCache('openId');
				var user = myCache('user');
				this.userid = user.userid? user.userid:'';
				this.phone = user.userphone;
				if(this.userid==""||this.userid=="0"||this.phone==""){
					uni.navigateTo({
						url: `/pages/login/login`
					});
					return false;
				}
				else{
					return true;
				}
			},
			// 再次预约
			orderdo(e,item){
				console.log(id,item);
				var that = this;
				// 再次预约
				uni.showModal({
					title: '提示',
					content: '确定再次预约吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.checkdodo(id,item);
						}
					}
				});
			},
			// 再次预约
			async orderdodo(id,item){
				var param={
					"courseTimeId": item.courseTimeId
				};
				uni.showToast({
					title: '再次预约中...',
					icon: 'success',
					duration: 2000
				});
				const {data: res} = await uni.$http.post('/api/course/bookCourse', param);
				if(res.success){
					uni.showToast({
						title: '上课已预约！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.loadData();
				}
				else{
					// uni.showToast({
					// 	title: res.msg? res.msg:'上课预约失败！',
					// 	icon: 'error',
					// 	duration: 2000
					// });
					uni.showModal({
						title: '提示',
						content: res.message? res.message:'课程预约失败！',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							if (ress.confirm) {
							}
						}
					});
				}
			},
			// 确认上课
			checkdo(e,item){
				console.log(e);
				var id= e.currentTarget.dataset.id;
				var that = this;
				// 确认上课
				uni.showModal({
					title: '提示',
					content: '确定上课吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.checkdodo(id,item);
						}
					}
				});
			},
			// 确认上课
			async checkdodo(id,item){
				var param={
					"courseTimeId": item.courseTimeId, 
					"startTime": item.startTime, 
					"endTime":  item.endTime
				};
				uni.showToast({
					title: '确定上课中...',
					icon: 'success',
					duration: 2000
				});
				const {data: res} = await uni.$http.post('/api/my/confirmClass', param);
				if(res.msg=="successed"){
					uni.showToast({
						title: '上课已确认！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.loadData();
				}
				else{
					uni.showToast({
						title: res.msg? res.msg:'上课确认失败！',
						icon: 'error',
						duration: 2000
					});
				}
			},
			// 取消预约
			cancelyydo(e){
				console.log(e);
				var id= e.currentTarget.dataset.id;
				var that = this;
				//取消预约
				uni.showModal({
					title: '提示',
					content: '确定要取消预约吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.delyydo(id);
						}
					}
				});
			},
			// 取消预约
			async delyydo(id){
				var param={
					"courseTimeId":id
				};
				uni.showToast({
					title: '取消中...',
					icon: 'success',
					duration: 2000
				});
				const {data: res} = await uni.$http.post('/api/course/cancelCourse', param);
				if(res.msg=="successed"){
					uni.showToast({
						title: '预约已取消！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.loadData();
				}
				else{
					uni.showToast({
						title: res.msg? res.msg:'预约取消失败！',
						icon: 'error',
						duration: 2000
					});
				}
			},
			// 取消课程
			cancelkcdo(e){
				console.log(e);
				var id= e.currentTarget.dataset.id;
				var that = this;
				//取消课程
				uni.showModal({
					title: '提示',
					content: '确定要取消课程吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.delkcdo(id);
						}
					}
				});
			},
			// 取消课程
			async delkcdo(id){
				var param={
					"courseTimeId":id
				};
				uni.showToast({
					title: '取消中...',
					icon: 'success',
					duration: 2000
				});
				const {data: res} = await uni.$http.post('/api/course/cancelCourse', param);
				if(res.msg=="successed"){
					uni.showToast({
						title: '课程已取消！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.loadData();
				}
				else{
					uni.showToast({
						title: res.msg? res.msg:'课程取消失败！',
						icon: 'error',
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style lang="scss" 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));
	}
	.olistcon{
		padding: 0 20rpx 20rpx 20rpx;
		.olist{
			display: flex;
			flex-direction: column;
			.ocell{
				font-size: 26rpx;
				color:#747474;
				padding: 10rpx 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				.red{
					color:#ff3d0e;
				}
				.green{
					color:#00cd00;
				}
			}
		}
	}
	.swiper-box {
		flex: 1;
		height: calc(100vh - var(--window-top) - 130rpx) !important;
	}
	.swiper-item {
		height: 100%;
	}
	.scrolllist{
		height: 110rpx; 
		background: #FFF;
		white-space: nowrap;
		width: 100%;
	}
	.tabicl{
		min-width: 130rpx;
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		display: inline-block;
		overflow: hidden;
		margin-right: 20rpx;
	}
	.ptext{
		font-size: 30rpx;
		text-align: center;
		color: #000;
		font-weight: 600;
		height: 90rpx;
	}
	.cur .ptext{
		color: #00a89b;
		font-size: 33rpx;
		font-weight: 600;
	}
	.cur .pline{
		width: 40%;
		height: 9rpx;
		background: #00a89b;
		border-radius: 6rpx;
		opacity: 1;
		margin-left: 30%;
	}
	.nodata{
		width: 100%;
		height:  calc(100vh - 400rpx) !important;
		line-height: calc(100vh) !important;
		background-image: url('/static/image/no.png');
		background-size: 52% auto;
		background-repeat: no-repeat;
		background-position: center; 
		font-size: 28rpx;
		text-align: center;
		color: #00a89b;
		overflow: hidden;
	}
	.scell{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 20rpx;
		.oitem{
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: 6rpx;
			padding: 20rpx;
			width: 100%;
			margin-bottom: 20rpx;
			.otop{
				display: flex;
				flex-direction: row;
				padding: 10rpx 0 0;
				height: 60rpx;
				line-height: 60rpx;
				width: 100%;
				.hleft{
					display: flex;
					flex-direction: row;
					flex:1;
					align-items: center;
					font-size: 30rpx;
					color: #000;
				}
				.hright{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					// <!--1：待付款，2：待发货，3：待收货 ，4：待评价 ，5：已完成，6：订单取消-->
					.ztip{
						border-radius: 12rpx;
						color:#1296db;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.jtip{
						border-radius: 12rpx;
						color:#feb467;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.htip{
						border-radius: 12rpx;
						color:#fc6900;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.hwtip{
						border-radius: 12rpx;
						color:#FF0000;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.wtip{
						border-radius: 12rpx;
						color:#43cca4;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.gtip{
						border-radius: 12rpx;
						color:#0036D6;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.ftip{
						border-radius: 12rpx;
						color:#6A81F1;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
					.ctip{
						border-radius: 12rpx;
						color:#888;
						font-size: 26rpx;
						padding: 0;
						height: 40rpx;
						line-height: 40rpx;
					}
				}
			}
			.obtn{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				border-top: 1rpx solid #eee;
				padding: 20rpx 0 10rpx;
				width: 100%;
				.omoney{
					display: flex;
					flex:1;
					height: 60rpx;
					width: 100%;
					color:#333;
					align-items: center;
					.omtip{
						font-size: 36rpx;
						color:rgb(252, 105, 0);
					}
				}
				.cancelbtn{
					background-color: #FFFFFF !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					color:#888;
					border:1rpx solid #888;
				}
				.cancelbtn::after{
					border:0 !important;
				}
				.viewbtn{
					background-color: #FFFFFF !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					color:#6A81F1;
					border:1rpx solid #6A81F1;
				}
				.viewbtn::after{
					border:0 !important;
				}
				.pjbtn{
					background-color: #FFFFFF !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					border:1rpx solid rgb(252, 105, 0);
					color:rgb(252, 105, 0);
				}
				.pjbtn::after{
					border:0 !important;
				}
				.conbtn{
					background-color: #f3f4ef !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					border:1rpx solid #00a89b;
					color:#595d4d;
				}
				.conbtn::after{
					border:0 !important;
				}
				.paybtn{
					background-color: #00a89b !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					border:1rpx solid #00a89b;
				}
				.paybtn::after{
					border:0 !important;
				}
				.gzbtn{
					background-color: #f5aa00 !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					border:1rpx solid #f5aa00;
				}
				.gzbtn::after{
					border:0 !important;
				}
				.gzbtn{
					background-color: #f5aa00 !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					border:1rpx solid #f5aa00;
				}
				.gzbtn::after{
					border:0 !important;
				}
			}
			.oscon{
				margin:20rpx 0;
				border-radius: 16rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				.osimg{
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
				}
				.osname{
					display: flex;
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-left: 26rpx;
					.ntxt{
						font-size: 28rpx;
						color:#000;
						line-height: 36rpx;
						margin-bottom: 8rpx;
					}
					.txt{
						font-size: 24rpx;
						color:#666;
					}
				}
				.osprice{
					display: flex;
					justify-content: flex-end;
					margin-right: 10rpx;
					font-size: 30rpx;
					color:#666;
				}
			}
		}
		.sitem {
			display: flex;
			flex-direction: column;
			flex: 1;
			background-color: #FFFFFF;
		    /*设置最小宽度，才会让元素排不下，导致换行排列*/
		    min-width: calc((100% - 20rpx) / 2);
			max-width: calc((100% - 20rpx) / 2);
			margin-right:5rpx;
			margin-left:5rpx;
			margin-bottom: 10rpx;
			border-radius: 16rpx;
			.simg{
				width: 100%;
				height: 360rpx;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 16rpx 16rpx 0 0;
				}
			}
			.sname{
				font-size: 30rpx;
				font-weight: 600;
				color: rgb(29, 29, 29);
				padding: 16rpx;
			}
			.sinfo{
				font-size: 26rpx;
				color:rgb(116, 116, 116);
				padding: 0 16rpx;
				height: 60rpx;
				line-height: 30rpx;
				overflow: hidden;
				position: relative;
				text-overflow: ellipsis;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
			}
			.sprices{
				padding: 0 16rpx 20rpx 16rpx;
				font-size: 36rpx;
				color:rgb(252, 105, 0);
				border-radius: 0 0 16rpx 16rpx;
				.cx{
					font-size: 28rpx;
					color:rgb(116, 116, 116);
					text-decoration: line-through;
					margin-left: 20rpx;
				}
			}
		}
	}
	
	
</style>