swim-weapp/pages/course/course.vue

<template>
	<view class="u-wrap">
		<view v-if="show">
			<authPhone v-on:watchShow='watchShow'></authPhone>
		</view>
		<view class="select-top">
			<view class="top-tab">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FF4600"></u-tabs>
			</view>
			<!-- <view class="top">
				<view class="day">
					<view class="left">
						2020年8月
					</view>
					<view class="right">

						<view class="name">
							<text style="margin-right: 5px;">{{cardName}}</text>
							<u-icon name="arrow-down" color="#FF4600" size="28" margin-left="30"></u-icon>
						</view>

					</view>
				</view>
				<view class="tab">
					<view class="item" v-for="(item,index) in date" :key='index' @click="changeTab(item)">
						<view class="week">
							{{item.week ? item.week :'今天'}}
						</view>
						<view :class="currentDay== item.day ? 'active' : 'day'">
							<view class="num">{{item.day}}</view>
							<view class="dian">·</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<view class="order" v-if="classList.length>0" v-for="(item,index) in classList" :key='index'>
			<view class="order-message">
				<view class="order-left">
					<view class="coach">
						{{item.course.name}}
					</view>
					<view class="text">
						<text class="tag">教练:</text>{{item.coach.name}}
					</view>
					<view class="text">
						<text class="tag">学员:</text>{{item.child.name}}
					</view>
					<view class="text">
						<text class="tag">开班时间:</text><text class="tag">{{item.start_time}}~{{item.end_time}} </text>
					</view>
					<view class="text">
						<text class="tag">上课时间:</text>每天{{item.course.start }}~{{item.course.end}}
					</view>
				<!-- 	<view class="text">
						<text class="tag">类型:</text>
						<u-tag text="培训班" type="primary" size="small" border-color="#ecf5ff" />
					</view> -->
				
				</view>
				
				<image src="../../static/finish.png" v-if="item.complete_status==1" mode="" class="finish" ></image>
				<view class="evaluate" @click="evaluate(item)" v-if="current==1 && item.complete_status!=1">
					去评价
				</view>
				<view class="order-right">
					<image :src="item.coach.head_portrait" mode=""></image>
				</view>
			</view>
			<!-- <view class="tips">
				<image src="../../static/clock.png" mode=""></image>
				<text>距离上课还有30分钟28秒</text>
			</view> -->
		</view>
		<view class="empty" v-if="classList.length==0 || !classList.length">
			<u-empty text="暂无课程" mode="order"></u-empty>
		</view>

	</view>
</template>

<script>
	var app=getApp()
	import authPhone from "../../components/authorize.vue"
	import classifyData from "@/common/classify.data.js";
	export default {
		components: {
			// 注册
			authPhone
		},
		data() {
			return {
				show: false,
				list: [{
					name: '未开始',
					type: 0
				}, {
					name: '进行中',
					type: 1
				}, {
					name: '已结束',
					type: 2
				}],
				current: 1,
				length: [0, 1, 2, 3, 4, 5],
				date: [],
				currentDay: '',
				year: '', //年分
				schedulingId: '', //课程id
				day: '', //选中日期
				classList: [], //课程列表
				page: 1, //页码
				last:false
			}
		},
		onLoad(options) {
			console.log(app.globalData.classCurrent)
			
		},
		onShow() {
			this.page=1
			this.last=false
			this.classList=[]
			// this.getTabs()
			// // if(app.globalData.classCurrent){
			// // 	this.current=app.globalData.classCurrent
			// // }else{
			// 	this.current=1
			// }
			this.getClass()
			
		},
		onReachBottom() {
			if (!this.last) {
				this.page++
			}
			this.getClass()
		},
		methods: {
			//去评价
			evaluate(item) {
				console.log(item, '去评价')
				let cardUserId = item.card_user_id
				let subscribeId = item.scheduling_id
				let data1={
					course_child_id:item.id,
					head_portrait:item.coach.head_portrait,
					name:item.coach.name,
					courseName:item.course.name
				}
				let data=JSON.stringify(data1)
				console.log(data,'ppppp')
				uni.navigateTo({
					url:'./evaluate?data=' + data
				})
				
			},
			//监听子组件变化
			watchShow(value) {
				this.show = value
			},
			//课程列表
			getClass() {
			
				let	params = {
						page: this.page,
						type: this.current
					}
				
				
				this.$u.get('/user/course', params).then(res => {
					console.log(res, 'pppppppp')
					let data = res.data.data
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多'
						})
						this.last=true
					} else {
						this.classList = this.classList.concat(data)
					}
				})
			},
			change(e) {
				console.log(e, '顶部切换')
				this.current = e
				this.page = 1
				this.last=false
				this.classList = []
				this.getClass()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		padding-top: 45px;
		padding-bottom: 10px;
	}

	.select-top {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		height: 45px;
		z-index: 2;
	}

	.top-tab {
		height: 44px;
		border-top: 1px solid #eeeeee;
		border-bottom: 1px solid #eeeeee;
		background-color: #FFFFFF;
	}

	.top {
		background-color: #FFFFFF;
		padding: 12px;
		margin-bottom: 12px;
		font-size: 15px;
		line-height: 28px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;

		.day {
			display: flex;

			.left {
				flex: 1;
			}

			.right {
				flex: 1;
				text-align: right;

				.name {
					display: inline-block;
					padding: 4px 7px;
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 20px;
					color: #FF4600;
					opacity: 1;
					background: #FFEEE5;
				}
			}
		}

		.tab {
			display: flex;

			.item {
				flex: 1;
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #333333;
				opacity: 1;

				.week {
					height: 36px;
					line-height: 36px;
				}

				.day,
				.active {
					height: 32px;
					width: 32px;
					text-align: center;
					border-radius: 4px;

					.num {
						display: block;
						height: 23px;
						line-height: 23px;
					}

					.dian {
						display: none;
						height: 9px;
						line-height: 0px;
					}

				}

				.active {
					height: 32px;
					width: 32px;
					background: linear-gradient(180deg, #FF3B21 0%, #FF8F09 100%);
					text-align: center;
					border-radius: 4px;
					color: #FFFFFF;

					.dian {
						display: block;
						height: 9px;
						line-height: 0px;
					}


				}
			}
		}
	}

	.order {
		padding: 10px;
		margin: 10px 12px 0;
		border-radius: 8px;
		background-color: #FFFFFF;
		position: relative;
.finish{
	position: absolute;
	bottom: 12px;
	right:12px;
	height:60px;
	width:70px;
}
		.evaluate {
			position: absolute;
			right: 12px;
			bottom: 12px;
			width: 82px;
			height: 30px;
			background: linear-gradient(266deg, #FF3B21 0%, #FF8F09 100%);
			opacity: 1;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 30px;
			color: #FFFFFF;
			text-align: center;
			opacity: 1;
			border-radius: 15px;
		}

		.order-message {

			display: flex;

			.order-left {
				flex: 1;

				.coach {
					font-size: 19px;
					font-weight: bold;
					color: #333333;
					margin-bottom: 10px;
				}

				.text {
					line-height: 28px;
					font-size: 14px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					opacity: 1;

					.tag {
						margin-right: 5px;
					}
				}
			}

			.order-right {
				flex: 0 0 73px;

				image {
					height: 73px;
					width: 73px;
				}
			}
		}

		.tips {
			margin-top: 10px;
			height: 36px;
			// line-height: 36px;
			text-align: center;
			background: #FFEEE5;
			opacity: 1;
			border-radius: 4px;

			image {
				display: inline-block;
				vertical-align: middle;
				line-height: 36px;
				height: 24px;
				width: 24px;
			}

			text {
				margin-left: 8px;
				font-size: 15px;
				display: inline-block;
				vertical-align: middle;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 21px;
				line-height: 36px;
				color: #FF4600;
				opacity: 1;
			}
		}
	}

	.empty {
		margin-top: 50%;
	}
</style>