96 lines
2.2 KiB
Vue
96 lines
2.2 KiB
Vue
<template>
|
||
<view>
|
||
<template v-for="(vo,keys) in list">
|
||
<view class="xilu_list_item" @tap="courseDetail(vo.id,vo.course_type)">
|
||
<image :src="vo.course.xilufitness_urls.thumb_image" mode="aspectFill" class="xilu_list_item_cover">
|
||
</image>
|
||
<view class="pt10 plr20">
|
||
<view class="m-ellipsis fs30 fw500 colf lh42">{{vo.course.title || ''}}</view>
|
||
<view class="mt10 fs24 col2 lh32">{{vo.start_at}}～{{vo.end_at}}</view>
|
||
<view class="m-ellipsis mt10 fs24 col9 lh32">{{vo.course.lable_list.join('|')}}</view>
|
||
<view class="flex-box mt10">
|
||
<view class="flex-grow-1 m-ellipsis"><text
|
||
class="col2 fs34 fw500 lh34 pr10">¥{{vo.course_price || 0.00}}</text><text
|
||
class="tdl fs20 col9 lh34" v-if="vo.market_price > 0">¥{{vo.market_price}}</text></view>
|
||
<view class="fs20 col2" v-if="vo.is_plan == 1">{{vo.order_count || 0}}<text
|
||
class="col9">/{{vo.sign_count}}人</text></view>
|
||
<view class="fs20 col2" v-else-if="vo.is_plan == 2">可排队</view>
|
||
<view class="fs20 col9" v-else-if="vo.is_plan == 3">已开始</view>
|
||
<view class="fs20 col9" v-else-if="vo.is_plan == 4">已售罄</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "course-list",
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
props: {
|
||
list: [Array]
|
||
},
|
||
methods: {
|
||
//课程详情
|
||
courseDetail(id, is_type) {
|
||
this.$api.navigate('../../pages/group_lessons_info/group_lessons_info?id=' + id + '&is_type=' + is_type)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.xilu {
|
||
&_list_item:nth-of-type(2n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&_list_item {
|
||
width: 340rpx;
|
||
height: 545rpx;
|
||
background: #292B2C;
|
||
border-radius: 20rpx;
|
||
margin-top: 20rpx;
|
||
margin-right: 20rpx;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
|
||
&_cover {
|
||
width: 100%;
|
||
height: 340rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
&_box1 {
|
||
width: 700rpx;
|
||
background: #404243;
|
||
border-radius: 20rpx;
|
||
padding: 0 20rpx;
|
||
|
||
&_item {
|
||
padding-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
|
||
}
|
||
|
||
&_item+&_item {
|
||
border-top: 1px solid #666;
|
||
}
|
||
|
||
&_cover {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 20rpx;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
</style> |