yogaApp/pages/book/bookshop.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">
						<view class="hleft">
							<view>
								<text>姓名：{{item.studentName?item.studentName:'-'}}</text>
								<text style="margin-left: 30rpx;">性别：{{item.sex==2?'男':(item.sex==1?'女':'未知')}}</text>
							</view>
							<text>电话：{{item.phone?item.phone:'-'}}</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"> 
						<view class="osname">
							<view>
								<text class="txt">课程：{{item.courseName}}</text>
								<text class="txt" style="margin-left: 30rpx;">班级：{{item.claName}} </text>
							</view>
							<view>
								<text class="txt">教练：{{item.teacherName }}</text>
								<text class="txt" style="margin-left: 30rpx;">教室：{{item.roomName}}</text>
							</view>
							<text class="txt">上课时间：{{ item.claDate+' '+item.startTime+(item.endTime?'-'+item.endTime:'')}}</text>
							<view>
								<text class="txt">预约人数：{{item.bookAttendCnt}}</text>
								<text class="txt" style="margin-left: 30rpx;">可容纳人数：{{item.atClassCnt}} </text>
							</view>
						</view>
					</view> 
					<view class="obtn">
						<view class="omoney"></view>
						<!--  1：待上课，2：预约中，3：待评价 ，4：已完成  5：已取消-->
						<!-- 描述:0->预约中;1->教练确认;2->店长确认/预约成功/待上课 3->已取消;4->已完成/待评价; -->
						<button v-if="item.bookStatus==1" type="primary"  class="stopbtn" :data-id="item.courseTimeId" @click="stopdo($event,item)">禁止预约</button>
						<button v-if="item.bookStatus==1" type="primary" class="orderbtn" :data-id="item.courseTimeId" @click="checkdo($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/appointmentListForManager');
					if(res&&res.data){
						// 全部
						this.loadStatus="noMore";
						this.list=res.data;
						this.$forceUpdate();
					}
					else{
						this.loadStatus="noMore";
						this.$forceUpdate();
					}
				}
			},
			loadData(){
				// 加载
				if(this.loadStatus=="more") {
					this.loadStatus="loading";
					setTimeout(() => {
						this.getOrderList();
					}, 300);
				}
			},
			gotoInfo(id){
				// 预约详情
				uni.navigateTo({
					url: `/pages/book/bookinfo?id=${id}`
				});
			},
			// 去评价
			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;
				}
			},
			// 禁止预约
			stopdo(e,item){
				var that = this;
				// 禁止预约
				uni.showModal({
					title: '提示',
					content: '确定禁止预约吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: ress => {
						if (ress.confirm) {
							that.stopdodo(item);
						}
					}
				});
			},
			// 禁止预约
			async stopdodo(item){
				var param={
					"bookId": item.bookId,
					"bookStatus": 2
				};
				uni.showLoading({
					title: '禁止预约中...'
				});
				const {data: res} = await uni.$http.post('/api/my/checkAppointment', param);
				if(res.success){
					uni.showToast({
						title: '已禁止预约！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.loadStatus="more";
					this.$forceUpdate();
					this.loadData();
				}
				else{
					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(item);
						}
					}
				});
			},
			// 确认预约
			async checkdodo(item){
				var param={
					"bookId": item.bookId, 
					"bookStatus": 1
				};
				uni.showLoading({
					title: '确认预约中...'
				});
				const {data: res} = await uni.$http.post('/api/my/checkAppointment', param);
				if(res.success){
					uni.showToast({
						title: '已确认预约！',
						icon: 'success',
						duration: 2000
					});
					// 重新加载
					this.loadStatus="more";
					this.$forceUpdate();
					this.loadData();
				}
				else{
					uni.showModal({
						title: '提示',
						content: res.message? res.message:'确认预约失败！',
						cancelText: '取消',
						confirmText: '确定',
						success: ress => {
							if (ress.confirm) {
							}
						}
					});
				}
			},
		
		}
	}
</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 30rpx;
			width: 100%;
			margin-bottom: 20rpx;
			.otop{
				display: flex;
				flex-direction: row;
				width: 100%;
				padding: 10rpx 0 10rpx;
				border-bottom: 1rpx solid #eee;
				.hleft{
					display: flex;
					flex-direction: column;
					flex:1;
					justify-content: flex-start;
					font-size: 28rpx;
					color: #000;
				}
				.hright{
					display: flex;
					justify-content: flex-end;
					// <!--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 2rpx;
				width: 100%;
				.omoney{
					display: flex;
					flex:1;
					width: 100%;
					color:#333;
					align-items: center; 
				}
				.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;
				}
				.orderbtn{
					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;
				}
				.orderbtn::after{
					border:0 !important;
				}
				.stopbtn{
					background-color: #f47fa0 !important;
					margin-left: 20rpx;
					border-radius: 50rpx;
					height: 50rpx;
					line-height: 48rpx;
					padding: 0 20rpx;
					font-size: 24rpx;
					border:1rpx solid #f47fa0;
				}
				.stopbtn::after{
					border:0 !important;
				}
			}
			.oscon{
				margin:16rpx 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;
					.ntxt{
						font-size: 26rpx;
						color:#333;
						line-height: 36rpx;
						margin-bottom: 8rpx;
					}
					.txt{
						font-size: 26rpx;
						color:#333;
					}
				} 
			}
		}
		.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>