146 lines
2.8 KiB
Vue
146 lines
2.8 KiB
Vue
<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>
|