<template>
|
<view class="course-item" @click="openCourse">
|
<image class="picture" :src="item.thumb+'?x-oss-process=image/resize,m_fill,h_192,w_342'" mode="aspectFill"></image>
|
<view class="detail">
|
<view class="u-line-2 u-font-32 course-name">
|
{{item.title}}
|
</view>
|
<view class="u-line-1 u-font-20 course-desc">
|
{{item.short_description}}
|
</view>
|
<view class="course-price" v-if="!hasBuy">
|
<view class="u-font-26 tip">
|
单价:
|
</view>
|
<view class="u-font-26 tip-1">
|
￥
|
</view>
|
<view class="u-font-40 price">
|
{{Number(item.charge/100).toFixed(1)}}
|
</view>
|
<view class="u-font-34 price-discount" v-if="item.charge_original>0">
|
{{Number(item.charge_original/100).toFixed(1)}}
|
</view>
|
</view>
|
<view class="go-learn" v-else>
|
<view class="button">
|
立即学习
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "course-item",
|
props: ['item', 'hasBuy'],
|
data() {
|
return {
|
|
};
|
},
|
methods: {
|
openCourse() {
|
uni.vk.navigateTo('/uni_modules/uce-course/pages/detail/detail?_id=' + this.item._id, false);
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.course-item {
|
margin: 0 auto;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 252rpx;
|
width: 696rpx;
|
border-bottom: 2px solid #f5f5f5;
|
|
.picture {
|
width: 342rpx;
|
height: 192rpx;
|
}
|
|
.detail {
|
margin-left: 30rpx;
|
flex: 1;
|
position: relative;
|
overflow: hidden;
|
|
.course-name {
|
font-weight: bold;
|
color: #303030;
|
}
|
|
.course-desc {
|
margin-top: 8rpx;
|
font-weight: bold;
|
color: #C5C5C5;
|
}
|
|
.go-learn {
|
display: flex;
|
margin-top: 8rpx;
|
|
.button {
|
background: #1663FF;
|
color: #FFFFFF;
|
font-size: 26rpx;
|
text-align: center;
|
height: 60rpx;
|
line-height: 60rpx;
|
padding: 0 20rpx;
|
border-radius: 5rpx;
|
}
|
}
|
|
.course-price {
|
display: flex;
|
margin-top: 8rpx;
|
align-items: flex-end;
|
|
.tip {
|
color: #303030;
|
}
|
|
.tip-1 {
|
color: #FF724E;
|
}
|
|
.price {
|
color: #FF724E;
|
}
|
|
.price-discount {
|
color: #C5C5C5;
|
margin-left: 10rpx;
|
text-decoration: line-through;
|
}
|
}
|
}
|
}
|
</style>
|
