<template>
	<view class="box flex flex-column align-items">
		<view class="center flex flex-column align-items" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
			<view class="centerBox flex align-items">
				<image :src="item.headimage" mode="" style="width: 280rpx;height: 200rpx;"></image>
				<view class="right flex flex-column" style="align-items: self-start;">
					<span class="title white-space w-400">{{item.title}}</span>
					<span class="time hui w-400 white-space">收藏时间:2024.11.112024.11.112024.11.11</span>
					<span class="minge hui w-400 white-space">课程名额:{{ Number(item.sign_num + item.virtual_num)}}/{{item.limit_num}}</span>
					<span class="price hui w-400 white-space" v-if="item.feel == 0">课程价格:￥{{item.price}}</span>
					<span class="price hui w-400 white-space" v-if="item.feel == 1">课程价格:￥{{item.price}}</span>
				</view>
			</view>
			<span class="line-row"></span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				page:1,
				limit:10,
				order:'normal'
				
			};
		},
		onShow() {
			this.page = 1
			this.list = []
			this.getList()
		},
		methods:{
			getList(){
				uni.$u.http.get('/api/school/classes/classes_list', {
					params:{
						page:this.page,
						limit:this.limit,
						order:this.order,
						collect:1
					}
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data.list.data
					}
				}).catch(error => {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					})
				})
			},
			// 跳转详情
			toDetail(id){
				uni.navigateTo({
					url: "/pages/center/detail?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.w-100 {
		width: 100%;
	}
	.w-400{
		width: 400rpx;
	}

	.flex {
		display: flex;
	}

	.justify-center {
		justify-content: center;
	}

	.space-between {
		justify-content: space-between;
	}

	.align-items {
		align-items: center;
	}

	.flex-column {
		flex-flow: column;
	}

	.justify-start {
		justify-content: start;
	}

	.mar-top-30 {
		margin-top: 30rpx;
	}
	.hui{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #7A7A7A;
	}
	.white-space {
		overflow: hidden;
		/* 确保超出容器的文本被隐藏 */
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		text-overflow: ellipsis;
	}
	.box{
		width: 750rpx;
		height: 100vh;
		background-color: #F1F2F8;
		.center{
			width: 690rpx;
			margin-top: 30rpx;
			.centerBox{
				width: 100%;
			}
			.right{
				margin-left: 32rpx;
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 32rpx;
					color: #343434;
					margin-bottom: 32rpx;
				}
				.minge{
					margin: 8rpx 0 0 0 ;
				}
			}
			.line-row{
				margin-top: 52rpx;
				width: 400rpx;
				height: 1rpx;
				background: #D9D9D9;
			}
		}
	}
</style>
