jiangximiniprogramSchool/pages/recordEntry/operate/mySchedule/mould/mould.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="模板"></topNavbar>
		<view class="pad">
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="tit_row">
					<view class="tit">{{item.templateName}}</view>
					<view class="manage" @click="$goPage('/pages/recordEntry/operate/mySchedule/mouldEdit/mouldEdit?id='+item.id)">管理</view>
				</view>
				<view class="ul">
					<view class="li lab">
						<view class="text">时间段</view>
						<view class="text">最多人数</view>
					</view>
					<view class="li" v-for="(item2,index2) in item.detailVO" :key="index">
						<view class="text">{{ item2.startTime}} <text>-</text> {{item2.endTime}}</view>
						<view class="text">{{ item2.personCount }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="btn_footer">
			<view class="btnBorder" @click="$goPage('/pages/recordEntry/operate/mySchedule/mouldEdit/mouldAdd' )">新增模版</view>
		</view>
	</view>
</template>

<script>
	import { scheduleTemplatePage } from '@/config/api.js'
	export default {
		data() {
			return {
				list: [],
				total: 20,
				params: {
					pageNo: 1,
					pageSize: 20
				}
			}
		},
		onLoad() {
			this.params.coachId = this.vuex_coachId
			this.scheduleTemplatePageFn()
			
		},
		methods: {
			
			async scheduleTemplatePageFn() {
				const {data: res} = await scheduleTemplatePage(this.params)
				this.params.pageNo ++
				this.list.push(...res.list)
				this.total = res.total
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 0 28rpx;
		margin-bottom: 24rpx;
		.tit_row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #E8E9EC;
			height: 96rpx;
			font-weight: 500;
			.manage {
				color: $themC;
			}
		}
		.ul {
			padding-bottom: 20rpx;
			.li {
				padding: 12rpx;
				display: flex;
				color: #333;
				&.lab {
					color: #ADADAD;
				}
				.text {
					flex: 1;
					text-align: center;
				}
			}
		}
	}
	.btn_footer {
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
		.btnBorder {
			width: 396rpx;
		}
	}
</style>