luoyangCoachApp/pages/recordEntry/operate/todayStudent/todayStudent.vue

<template>
		
	<view class="pageBgImg">
		<topNavbar title="上课学员"></topNavbar>
		<view class="con" v-if="list&&list.length">
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="consultItem">
					<view class="top_row">
						<view class="flex">
							<view class="schoolName">{{item.studentName}} <text style="margin-left: 6px;">{{ item.studentPhone}}</text></view>
						</view>
						<view class="status" >
							<view class="text" v-if="item.studyStatus=='计时中'">正在计时...</view>
							<view class="changeBtn btnBg" v-else-if="item.studyStatus=='已签到'" @click="timekeeping(item)">计时切换</view>
							<view class="" v-else>{{ item.studyStatus||'状态没返回' }} </view>
						</view>
					</view>
					<view class="target">
						<view class="row" v-if="item.studyStatus=='计时中'">
							<view class="iconImg">
								<image src="@/static/images/index/home_icon_zhuangtai@2x.png" mode="" style="width: 28rpx;height: 28rpx;"></image>
							</view>
							<view class="name" style="color: red;">计时开始时间：{{item.startTime}}</view>
						</view>
						<!-- <view class="row" v-else-if="item.startTime">
							<view class="iconImg">
								<image src="@/static/images/index/timerIcon.png" mode=""></image>
							</view>
							<view class="name">计时时段： {{ item.startTime }}</view>
						</view> -->
						<view class="row">
							<view class="iconImg">
								<image src="@/static/images/index/listIcon.png" mode=""></image>
							</view>
							<view class="name">训练科目：{{ item.subject }}</view>
						</view>
						<view class="row">
							<view class="iconImg">
								<image src="@/static/images/index/site.png" mode=""></image>
							</view>
							<view class="name">预约场地：{{item.address}}</view>
						</view>
						<view class="row">
							<view class="iconImg">
								<image src="@/static/images/index/carIcon.png" mode=""></image>
							</view>
							<view class="name">预约车辆：{{item.carNumber}}</view>
						</view>
						
						<view class="row">
							<view class="iconImg">
								<image src="@/static/images/index/timerIcon.png" mode=""></image>
							</view>
							<view class="name">预约时间： {{ item.bookingTimeStr }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<nodata v-else style="margin-top: 320rpx;"></nodata>
	</view>
</template>

<script>
	import { signStudentList, changeStudent,   } from '@/config/api.js'
	export default {
		
		data() {
			return {
				list: null,
				loginStatusTxt: ['未签到', '已签到', '已签退', '已过期', '已取消'],//0：未签到，1：已签到，2：已签退，3：已过期，9：已取消
			}
		},
		onLoad() {
			this.signStudentListFn()
		},
		onPullDownRefresh() {
			this.signStudentListFn()
		},
		methods: {
			async signStudentListFn() {
				const {data: res} = await signStudentList()
				// let curTimeKeep = res.find(item=>item.studyStatus=='计时中')
				// curTimeKeep.timer = curTimeKeep.bookingTimeStr.split('-')[0]
				// let storCurTimer = uni.getStorageSync('curTimeKeep')
				// if(storCurTimer&&storCurTimer.studentId==curTimeKeep.studentId&&storCurTimer.bookingTimeStr==curTimeKeep.bookingTimeStr) {
				// 	curTimeKeep.timer = storCurTimer.timer
				// }
				console.log(res)
				this.list = res
			},
			async timekeeping(item) {
				const res = await changeStudent({studentId: item.studentId})
				this.signStudentListFn()
				// let timestamp = Date.now()
				// let starTime = this.$u.timeFormat(timestamp, 'hh:MM')
				// item.timer = starTime
				// item.studyStatus ='计时中'
				// uni.setStorageSync('curTimeKeep',item)
				console.log(item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.con {
		padding: 0 28rpx;
		.card {
			padding: 0 20rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.consultItem {
			width: 100%;
			.top_row {
				display: flex;
				width: 100%;
				height: 116rpx;
				border-bottom: 2rpx dashed #E8E9EC;
				justify-content: space-between;
				align-items: center;
				.tag {
					// width: 176rpx;
					height: 60rpx;
					background: rgba(250, 149, 25, 0.1);
					border-radius: 8rpx;
					text-align: center;
					font-size: 28rpx;
					color: #FA7919;
					margin-right: 24rpx;
					padding: 10rpx 18rpx;
				}
				.schoolName {
					font-size: 28rpx;
					color: #333;
					margin-left: 20rpx;
					font-weight: 550;
				}
				.status {
					display: flex;
					align-items: center;
					.text {
						font-size: 28rpx;
						color: $themC;
					}
				}
			}
			.target {
				padding: 20rpx 0;
			}
			.row {
				padding: 16rpx 0;
				display: flex;
				align-items: center;
				.iconImg {
					width: 32rpx;
					height: 28rpx;
				}
				.name {
					font-size: 28rpx;
					color: #333;
					padding-left: 20rpx;
				}
			}
		}
		.changeBtn {
			line-height: 60rpx;
			height: 60rpx;
			padding: 0 12rpx;
		}
</style>