driver-manage/pages/index/ManageList.vue

<template>
	<view class="content">
		<u-empty mode="list" v-if="courseList.length == 0">
		</u-empty>
		<view class="f-box" v-for="(item,index) in courseList" :key="index">
			<view class="f-top">{{item.createTime}}</view>
			<view class="f_title">
				{{item.driveSchoolPay.driveSchoolCourse.automatic}}
			</view>
			<view class="wrap-box">
				<view class="icon-lv">{{item.driveSchoolPay.driveSchoolCourse.license}}</view>
				<view class="icon-huang">{{item.driveSchoolPay.driveSchoolCourse.name}}</view>
			</view>
			<view class="f-ds">
				<view class="hui-">预约人：</view>
				<view class="hei-">{{item.userName}}</view>
			</view>
			<view class="f-ds">
				<view class="hui-">所属教练：</view>
				<view class="hei-">{{item.coachName}}</view>
			</view>
		</view>


	</view>
</template>

<script>
	import request from '../../utils/request'
	export default {
		data() {
			return {
				courseList: []
			}
		},
		onShow() {
			this.findCourseList()
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},

		methods: {
			async findCourseList() {
				let res = await request({
					url: `/drivingSchool/system/reservationCourse/applet/getReservationCourseList`,
					method: 'get'
				})
				this.courseList = res.data
			},
			goDetails() {
				uni.navigateTo({
					url: '/pages/index/Details'
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		background: #f4f5f6;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 10px;
	}

	.container {
		width: 100%;
		background: #f4f5f6;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.f-box {
		width: 95%;
		margin: 10px auto;
		box-sizing: border-box;
		padding: 10px;
		background: #fff;
		border-radius: 10px;
	}

	.f-top {
		width: 100%;
		box-sizing: border-box;
		padding-bottom: 10px;
		border-bottom: 1px solid #EEEEEE;
		font-weight: bold;
		font-size: 14px;
		color: #FF9A1A;
	}

	.f_title {
		font-weight: 800;
		font-size: 14px;
		color: #333333;
		margin: 10px 0px;
	}

	.wrap-box {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.icon-lv {
		background: #E6F5F0;
		border-radius: 2px 2px 2px 2px;

		box-sizing: border-box;
		padding: 5px;
		font-weight: 400;
		font-size: 10px;
		font-size: 10px;
		color: #4AA76F;
		margin-right: 10px;
	}

	.icon-huang {
		background: #FFEDD4;
		border-radius: 2px 2px 2px 2px;

		box-sizing: border-box;
		padding: 5px;
		font-weight: 400;
		font-size: 10px;
		font-size: 10px;
		color: #EDA23A;
	}

	.f-ds {
		display: flex;
		align-items: center;
		margin: 10px 0px;
	}

	.hui- {
		font-weight: 400;
		font-size: 12px;
		color: #737C90;
		margin-right: 10px;
	}

	.hei- {
		font-weight: 400;
		font-size: 12px;
		color: #333333;
	}
</style>