Skip to content

C
CFFP-HB
Commit ccc16cb2 by kyle
Options

封装课程组件

parent 8de0ea8d
Showing with 141 additions and 92 deletions
components/courseItem.vue 0 → 100644
<template>
<view class="itemContent">
<view class="thumbnailBox">
<img :src="thumbnailPath" alt="">
</view>
<view class="courseDetailBox">
<h4>{{title}}</h4>
<view class="summaryBox">
<text>{{summaryBox}}</text>
</view>
<view class="dataBox">
<strong>￥{{dataList.coursePrice}}</strong>
<text>{{dataList.salesNumber}}人购买</text>
</view>
<view class="tagListBox">
<view class="tagItem" v-for="tagItem in tagConcat(tagList.v1,tagList.v2)">{{tagItem}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"courseItem",
props:{
thumbnailPath:{
type:String
},
title:{
type:String
},
summaryBox:{
type:String
},
tagList:{
type:Object
},
dataList:{
type:Object
}
},
data() {
return {
};
},
methods:{
tagConcat(v1,v2){
if(v2.indexOf(',') > 0 && v1.indexOf(',') > 0){
return [].concat(v2.split(',').split(','),v1.split(','))
}else if(v1.indexOf(',') > 0){
return [].concat(v2,v1.split(','))
}else if(v2.indexOf(',') > 0){
return [].concat(v2.split(','),v1)
}else{
return [].concat(v2,v1)
}
}
}
}
</script>
<style lang="scss">
.itemContent{
display: flex;
.thumbnailBox{
width: 200rpx;
height: 200rpx;
background-color: #888;
margin-right: 26rpx;
img{
max-width: 100%;
height: auto;
}
}
.courseDetailBox{
width: 100%;
color: #333;
h4{
font-size: 32rpx;
}
.summaryBox{
font-size: 24rpx;
margin: 10rpx 0;
text{
margin-right: 20rpx;
}
}
.dataBox{
strong{
color: #F15A1F;
font-size: 30rpx;
margin-right: 20rpx;
}
text{
font-size: 28rpx;
}
}
.tagListBox{
display: flex;
flex-wrap: wrap;
.tagItem{
color: #20279B;
font-size: 28rpx;
border-radius: 20rpx;
border-top-left-radius: 0;
border-bottom-right-radius: 0;
padding: 10rpx 18rpx;
border: 1px solid #20279B;
margin-right: 20rpx;
white-space: nowrap;
margin-bottom: 10rpx;
}
}
}
}
</style>
\ No newline at end of file
pages.json
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
"navigationBarTitleText": "CFFP" "navigationBarTitleText": "CFFP"
} }
},{ },{
"path": "components/courselist/courselist", "path": "pages/courselist/courselist",
"style": { "style": {
"topWindow": false, "topWindow": false,
"navigationBarTitleText": "CFFP" "navigationBarTitleText": "CFFP"
......
components/courselist/courselist.vue → pages/courselist/courselist.vue
<template> <template>
<view> <view>
<h4 v-if="cffpCourseInfos.length<=0" class="noLists">暂无课程列表</h4> <h4 v-if="cffpCourseInfos.length<=0" class="noListTip">暂无课程列表</h4>
<ul v-if="cffpCourseInfos.length>0"> <ul v-if="cffpCourseInfos.length>0">
<li v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)"> <li v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
<view class="thumbnailBox"> <course-item :thumbnailPath="item.displayImage" :title="item.fileTitle" :summaryBox="item.fileSynopsis" :dataList="{coursePrice:item.coursePrice,salesNumber:item.salesNumber}" :tagList="{v1:item.fileLecturerRanks,v2:item.fileLecturerName}"></course-item>
<img :src="item.displayImage" alt="">
</view>
<view class="courseDetailBox">
<h4>{{item.fileTitle}}</h4>
<view class="summaryBox">
<text>{{item.fileSynopsis}}</text>
</view>
<view class="dataBox">
<strong>￥{{item.coursePrice}}</strong>
<text>{{item.salesNumber}}人购买</text>
</view>
<view class="tagListBox">
<view class="tagItem">{{item.fileLecturerName}}</view>
<view class="tagItem">{{item.fileLecturerRanks}}</view>
</view>
</view>
</li> </li>
</ul> </ul>
</view> </view>
...@@ -27,6 +11,7 @@ ...@@ -27,6 +11,7 @@
<script> <script>
import api from "../../api/api"; import api from "../../api/api";
import courseItem from "@/components/courseItem.vue";
export default{ export default{
props:['tagIds'], props:['tagIds'],
...@@ -37,6 +22,7 @@ ...@@ -37,6 +22,7 @@
}, },
name:'courselist', name:'courselist',
components:{ components:{
courseItem
}, },
onLoad(){ onLoad(){
this.courseList(); this.courseList();
...@@ -60,6 +46,13 @@ ...@@ -60,6 +46,13 @@
}) })
} }
}) })
},
tagConcat(val,v2){
if(val.indexOf(',') > 0){
return [].concat(v2,val.split(','))
}else{
return [].concat(v2,val)
}
} }
}, },
mounted() { mounted() {
...@@ -84,58 +77,5 @@ ...@@ -84,58 +77,5 @@
margin-bottom: 10rpx; margin-bottom: 10rpx;
padding: 10rpx; padding: 10rpx;
} }
.noLists{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
}
.thumbnailBox{
width: 200rpx;
height: 200rpx;
background-color: #888;
margin-right: 26rpx;
img{
max-width: 100%;
height: auto;
}
}
.courseDetailBox{
width: 100%;
color: #333;
h4{
font-size: 32rpx;
}
.summaryBox{
font-size: 24rpx;
margin: 10rpx 0;
text{
margin-right: 20rpx;
}
}
.dataBox{
strong{
color: #F15A1F;
font-size: 30rpx;
margin-right: 20rpx;
}
text{
font-size: 28rpx;
}
}
.tagListBox{
display: flex;
.tagItem{
color: #20279B;
font-size: 28rpx;
border-radius: 20rpx;
border-top-left-radius: 0;
border-bottom-right-radius: 0;
padding: 10rpx 18rpx;
border: 1px solid #20279B;
margin-right: 20rpx;
}
}
}
</style> </style>
\ No newline at end of file
pages/index/index.vue
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
</template> </template>
<script> <script>
import courselist from '../../components/courselist/courselist.vue'; import courselist from '@/pages/courselist/courselist.vue';
import api from "../../api/api"; import api from "../../api/api";
import tabBar from '../../components/tabBar/tabBar.vue'; import tabBar from '../../components/tabBar/tabBar.vue';
export default { export default {
...@@ -292,6 +292,7 @@ ...@@ -292,6 +292,7 @@
.course_content{ .course_content{
background: #fff; background: #fff;
position: relative; position: relative;
padding-bottom: 100rpx;
.tag{ .tag{
padding: 20rpx; padding: 20rpx;
display: flex; display: flex;
......
pages/myLearning/myLearning.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</view> </view>
<view class="processBox"> <view class="processBox">
<view class="sliderBox"> <view class="sliderBox">
<slider :value="subItem.progressBar" show-value block-size="14" disabled activeColor="#20269B"/> <slider :value="subItem.progressBar " show-value block-size="14" disabled activeColor="#20269B"/>
</view> </view>
<view>%</view> <view>%</view>
</view> </view>
......
pages/myShare/myShare.vue
...@@ -42,23 +42,7 @@ ...@@ -42,23 +42,7 @@
<view class="shareOrderInfoItem" v-for="item in userShareCourses" :key="item.fileId"> <view class="shareOrderInfoItem" v-for="item in userShareCourses" :key="item.fileId">
<view class="timeBox">{{item.shareDate}}</view> <view class="timeBox">{{item.shareDate}}</view>
<view class="courseInfoContent"> <view class="courseInfoContent">
<view class="thumbnailBox"> <course-item :thumbnailPath="item.displayImage" :title="item.fileTitle" :summaryBox="item.fileSynopsis" :dataList="{coursePrice:item.coursePrice,salesNumber:item.salesNumber}" :tagList="{v1:item.fileLecturerRanks,v2:item.fileLecturerName}"></course-item>
<img :src="item.displayImage" alt="">
</view>
<view class="courseDetailBox">
<h4>{{item.fileTitle}}</h4>
<view class="summaryBox">
<text>{{item.fileSynopsis}}</text>
</view>
<view class="dataBox">
<strong>￥{{item.coursePrice}}</strong>
<text>{{item.salesNumber}}人购买</text>
</view>
<view class="tagListBox">
<view class="tagItem">{{item.fileLecturerName}}</view>
<view class="tagItem">{{item.fileLecturerRanks}}</view>
</view>
</view>
</view> </view>
<view class="countsContent" @click="goDetail(item.fileId)"> <view class="countsContent" @click="goDetail(item.fileId)">
<view> <view>
...@@ -85,7 +69,11 @@ ...@@ -85,7 +69,11 @@
<script> <script>
import api from "@/api/api"; import api from "@/api/api";
import courseItem from "@/components/courseItem.vue";
export default { export default {
components:{
courseItem
},
data() { data() {
return { return {
queryDate:`${new Date().getFullYear()}-${new Date().getMonth() + 1}`, queryDate:`${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment