JiangxiMiniProgram/pages/mineEntry/myForecastName/myForecastName.vue

<template>
	<view class="pageBgImg ">
		<topNavbar title="我的预报名"></topNavbar>
		<view class="bg" v-if="list.length">
			<view class="ul">
				<view class="card" v-for="(item,index) in list" :key="index" @click="itemClickFn(item)">
					<!-- 状态：0-预报名，1-已报名（待支付）2-已支付,3-已学完 -->
					<view class="tps">{{ item.applyStatus==0?'点击进入报名':'预报名成功，待支付'}}</view>
					<view class="name">{{item.schoolName}}</view>
					<view class="className">班型：{{item.className}}</view>
					<view class="flexB">
						<view class="date">
							{{$u.timeFormat(item.createDate, 'yyyy-mm-dd hh:MM:ss')}}
						</view>
						<view class="deleteBtn" @click.stop="deleteFn(item)">
							删除
						</view>
					</view>
				</view>
			</view>
		</view>
		<nodata v-else></nodata>
		<u-loadmore :status="status" style="margin-top: 32rpx;" v-if="list.length>5" icon-type="circle" />
	</view>
</template>

<script>
	import { trainingApplyList } from "@/config/api.js"
	export default {
		data() {
			return {
				params: {
					pageIndex: 1,
					pageSize: 20,
				},
				list: [
					{applyStatus: 0, schoolName: '翔力驾校'}
				],
				status: 'loadmore',
			}
		},
		onLoad() {
			this.trainingApplyListFn()
		},
		methods: {
			async trainingApplyListFn() {
				const {data: res} = await trainingApplyList({studentId: this.studentId})
				this.list = res
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageBgImg {
		width: 100%;

		.tps {
			width: 100%;
			// height: 56rpx;
			// line-height: 56rpx;
			color: $themC;
			padding: 0 20rpx;
			text-align: right;
			// background-color: #f7f7fb;
			font-size: 26rpx;
		}

		.ul {
			width: 100%;
			padding: 0 30rpx;
			.card{
				width: 100%;
				padding: 20rpx;
				border-bottom: 1px solid #ededed;

				&:last-child {
					border: none;
				}

				.name {
					font-size: 32rpx;
					font-weight: 700;
					padding-top: 20rpx;
				}
				.className {
					font-size: 28rpx;
					color: #666;
					padding: 10rpx 0;
				}
				.flexB {
					display: flex;
					justify-content: space-between;
					.date {
						font-size: 24rpx;
						color: #999;
					}

					.deleteBtn {
						color: $themC;
						border-radius: 8rpx;
						width: 120rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						border: 1px solid $themC
					}
				}
			}
		}
	}
</style>