mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-08 02:16:46 +08:00
提交图标
This commit is contained in:
daihh
@@ -10,85 +10,138 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="contentbox">
|
||||
<view class="tabrow">
|
||||
<view class="tabrow-item"><text class="tabrow-active">简介</text></view>
|
||||
<view class="tabrow-item"><text>评论</text></view>
|
||||
</view>
|
||||
<!--简介内容-->
|
||||
<view class="cinfo">
|
||||
<view class="cinfo-title">
|
||||
{{courseInfo.name}}
|
||||
<text class="cinfo-tag1">通用力</text>
|
||||
<text class="cinfo-tag2">职场技能</text>
|
||||
<view v-if="!catalogShow">
|
||||
<view class="tabrow">
|
||||
<view class="tabrow-item" @click="changeTab(1)"><text :class="{'tabrow-active':tabIndex==1}">简介</text></view>
|
||||
<view class="tabrow-item" @click="changeTab(2)"><text :class="{'tabrow-active':tabIndex==2}">评论</text></view>
|
||||
</view>
|
||||
<view class="desrow">
|
||||
<!--简介内容-->
|
||||
<view v-if="tabIndex==1" class="cinfo">
|
||||
<view class="cinfo-title">
|
||||
{{courseInfo.name}}
|
||||
<text class="cinfo-tag1">通用力</text>
|
||||
<text class="cinfo-tag2">职场技能</text>
|
||||
</view>
|
||||
<view class="desrow">
|
||||
<view>
|
||||
<text class="desrow-name">目标人群：</text><text>所有群体</text>
|
||||
</view>
|
||||
<view style="color: #999999;;">200+人学习</view>
|
||||
</view>
|
||||
<view class="desrow">
|
||||
<view>
|
||||
<text class="desrow-name">讲师：</text><text>李玉冰</text><text>(显示事件)</text>
|
||||
</view>
|
||||
<view style="color: #387DF7;;">+关注</view>
|
||||
</view>
|
||||
<view class="desrow">
|
||||
<view style="display: flex;">
|
||||
<text class="desrow-name">课程评分：</text>
|
||||
<u-rate :count="5" color="#FB7303" :size="16" v-model="scoreInfo.score"></u-rate>
|
||||
<text class="score">4.9</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="desrow">
|
||||
<view style="font-size: 32upx;color: #333333;">目录</view>
|
||||
<view @click="showAllCatalog" style="font-size: 28upx;color: #666666;">全部></view>
|
||||
</view>
|
||||
<view>
|
||||
<text class="desrow-name">目标人群：</text><text>所有群体</text>
|
||||
</view>
|
||||
<view style="color: #999999;;">200+人学习</view>
|
||||
</view>
|
||||
<view class="desrow">
|
||||
<view>
|
||||
<text class="desrow-name">讲师：</text><text>李玉冰</text><text>(显示事件)</text>
|
||||
</view>
|
||||
<view style="color: #387DF7;;">+关注</view>
|
||||
</view>
|
||||
<view class="desrow">
|
||||
<view style="display: flex;">
|
||||
<text class="desrow-name">课程评分：</text>
|
||||
<u-rate :count="5" color="#FB7303" :size="16" v-model="scoreInfo.score"></u-rate>
|
||||
<text class="score">4.9</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="desrow">
|
||||
<view style="font-size: 32upx;color: #333333;">目录</view>
|
||||
<view style="font-size: 28upx;color: #666666;">全部></view>
|
||||
</view>
|
||||
<view v-if="scrollItemWidth>0" class="main-cata-active">
|
||||
<scroll-view scroll-x :scroll-y="false" style="height:115px;white-space: nowrap;overflow: hidden;" :scroll-left="scrollInfo.scrollLeft" @scrolltoupper="scrollLeft" @scrolltolower="scrollRight" @scroll="scrollHandler">
|
||||
<!-- <view class="mycrollcontent" style="display: flex;justify-content:flex-start;"> -->
|
||||
<view v-for="(con,conIdx) in scrollList" :key="conIdx" style="display: inline-block;" :id="con.id" @click="playContent(con.cataName,con,conIdx,0)">
|
||||
<!---->
|
||||
<view :style="{width:scrollItemWidth+'px'}" class="scroll-item" :class="{'studying':curContent.id==con.id}">
|
||||
<view class="scroll-item-sec">{{con.cataName}}
|
||||
<!-- <text v-if="con.cataStatus && con.cataStatus==1" class="status-tag" :class="statusClass(con.cataStatus)">未开始</text>
|
||||
<text v-if="con.cataStatus && con.cataStatus==2" class="status-tag" :class="statusClass(con.cataStatus)">进行中</text>
|
||||
<text v-if="con.cataStatus && con.cataStatus==9" class="status-tag" :class="statusClass(con.cataStatus)">已完成</text> -->
|
||||
</view>
|
||||
<view class="scroll-item-con">
|
||||
<view class="scroll-item-name">
|
||||
{{con.contentName}}
|
||||
</view>
|
||||
<!-- <view class="scroll-item-type">
|
||||
<view class="square-border">
|
||||
<view :class="statusClass(con.status)">
|
||||
{{getConType(con.contentType)}}
|
||||
</view>
|
||||
<view v-if="scrollItemWidth>0" class="main-cata-active">
|
||||
<scroll-view scroll-x :scroll-y="false" style="height:115px;white-space: nowrap;overflow: hidden;" :scroll-left="scrollInfo.scrollLeft" @scrolltoupper="scrollLeft" @scrolltolower="scrollRight" @scroll="scrollHandler">
|
||||
<!-- <view class="mycrollcontent" style="display: flex;justify-content:flex-start;"> -->
|
||||
<view v-for="(con,conIdx) in scrollList" :key="conIdx" style="display: inline-block;" :id="con.id" @click="playContent(con.cataName,con,conIdx,0)">
|
||||
<!---->
|
||||
<view :style="{width:scrollItemWidth+'px'}" class="scroll-item" :class="{'studying':curContent.id==con.id}">
|
||||
<view class="scroll-item-sec">{{con.cataName}}
|
||||
<!-- <text v-if="con.cataStatus && con.cataStatus==1" class="status-tag" :class="statusClass(con.cataStatus)">未开始</text>
|
||||
<text v-if="con.cataStatus && con.cataStatus==2" class="status-tag" :class="statusClass(con.cataStatus)">进行中</text>
|
||||
<text v-if="con.cataStatus && con.cataStatus==9" class="status-tag" :class="statusClass(con.cataStatus)">已完成</text> -->
|
||||
</view>
|
||||
<text v-if="con.status==1" class="status-tag" :class="statusClass(con.status)">未开始</text>
|
||||
<text v-if="con.status==2" class="status-tag" :class="statusClass(con.status)">进行中</text>
|
||||
<text v-if="con.status==9" class="status-tag" :class="statusClass(con.status)">已完成</text>
|
||||
</view> -->
|
||||
<view class="scroll-item-con">
|
||||
<view class="scroll-item-name">
|
||||
{{con.contentName}}
|
||||
</view>
|
||||
<!-- <view class="scroll-item-type">
|
||||
<view class="square-border">
|
||||
<view :class="statusClass(con.status)">
|
||||
{{getConType(con.contentType)}}
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="con.status==1" class="status-tag" :class="statusClass(con.status)">未开始</text>
|
||||
<text v-if="con.status==2" class="status-tag" :class="statusClass(con.status)">进行中</text>
|
||||
<text v-if="con.status==9" class="status-tag" :class="statusClass(con.status)">已完成</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<!--交互-->
|
||||
<view class="cinfo-btns">
|
||||
<view class="cinfo-btn">
|
||||
<view><image src="/static/images/course/c_comment.png" style="width: 80upx;height: 80upx;"></image> </view>
|
||||
<view>评价</view>
|
||||
</view>
|
||||
<view class="cinfo-btn">
|
||||
<view>
|
||||
<image src="/static/images/course/c_favorite.png" style="width: 80upx;height: 80upx;">
|
||||
<!-- <image src="/static/images/course/c_favorite_2.png" style="width: 80upx;height: 80upx;"> -->
|
||||
</view>
|
||||
<view>收藏</view>
|
||||
</view>
|
||||
<view class="cinfo-btn">
|
||||
<view>
|
||||
<image src="/static/images/course/c_share.png" style="width: 80upx;height: 80upx;">
|
||||
</view>
|
||||
<view>转发</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--评论-->
|
||||
<view v-if="tabIndex==2" class="pinglun">
|
||||
<comments ref="comments" v-if="courseId && courseId!=''" :objType="1" :objId="courseId"></comments>
|
||||
<interact-fixed :type="1" :data="courseInfo" :users="teachers" :praises="false" :comments="false" @comment-success="refreshComments" @share-success="shareSuccess"></interact-fixed>
|
||||
</view>
|
||||
</view>
|
||||
<!--全部目录-->
|
||||
<view v-else >
|
||||
<view class="tabrow" style="justify-content: space-between;">
|
||||
<view class="tabrow-item"><text class="tabrow-active">目录</text></view>
|
||||
<view @click="closeAllCatalog"><text style="font-size: 32upx;">×</text></view>
|
||||
</view>
|
||||
<view class="catalogbox">
|
||||
<view class="catalog">
|
||||
<view v-for="(cata,catIdx) in catalogTree" :key="catIdx" style="border-bottom: 1px solid #ebebeb;margin-bottom: 50rpx;padding-bottom: 30upx;">
|
||||
<view class="catalog-sec" style="margin-bottom: 20rpx;">
|
||||
<view class="catalog-sec-name" >
|
||||
<!-- <text>{{catIdx+1}}, </text> -->
|
||||
<text class="text-ellipsis">{{cata.section.name}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text v-if="cata.section.status==1" class="status-tag tag-nostart" style="font-size: 14px;">未开始</text>
|
||||
<text v-if="cata.section.status==2" class="status-tag tag-studying" style="font-size: 14px;">进行中</text>
|
||||
<text v-if="cata.section.status==9" class="status-tag tag-finish" style="font-size: 14px;">已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
<view >
|
||||
<view v-for="(con,conIdx) in cata.children" :key="conIdx" class="catalog-con" @click="playContent(cata.section,con,conIdx,catIdx)">
|
||||
<view class="catalog-con-name" :class="{'studying':curContent.id==con.id}">
|
||||
<!-- <text>{{catIdx+1}}.{{conIdx+1}}, </text> -->
|
||||
<!-- <text class="square-border">{{getConType(con.contentType)}}</text> -->
|
||||
<text class="text-ellipsis" style="font-size: 14px;">{{con.contentName}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text v-if="con.status==1" class="status-tag tag-nostart" style="font-size: 14px;">未开始</text>
|
||||
<text v-if="con.status==2" class="status-tag tag-studying" style="font-size: 14px;">进行中</text>
|
||||
<text v-if="con.status==9" class="status-tag tag-finish" style="font-size: 14px;">已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!--交互-->
|
||||
<view class="cinfo-btns">
|
||||
<view class="cinfo-btn">
|
||||
<view>图标</view>
|
||||
<view>评价</view>
|
||||
</view>
|
||||
<view class="cinfo-btn">
|
||||
<view>图标</view>
|
||||
<view>收藏</view>
|
||||
</view>
|
||||
<view class="cinfo-btn">
|
||||
<view>图标</view>
|
||||
<view>转发</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 50px;"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -98,6 +151,32 @@
|
||||
<view style="color: #333333; font-size: 32upx;font-weight: 600;padding-bottom: 20upx;">课程推荐</view>
|
||||
<course-list :items="recommendCourses"></course-list>
|
||||
</view>
|
||||
<!--弹出窗口-->
|
||||
<!--课程简介-->
|
||||
<u-popup :show="summarylogShow" mode="right" @close="summaryCatalog" :safeAreaInsetTop="true" :closeable="true">
|
||||
<view class="summary-log" :style="`width: ${treePopupWidth};padding-top: 20px;`" style="height: 100vh; overflow: auto;">
|
||||
<!-- <view class=""> -->
|
||||
<view class="particulars">课程详情</view>
|
||||
<view class="matter">
|
||||
<u-parse v-if="courseInfo.summary" :content="courseInfo.summary"></u-parse>
|
||||
<text v-else>暂无</text>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 评分，赞和踩 -->
|
||||
<u-popup :show="scoreInfo.dlgShow" mode="top" @close="closeScore" @open="openScore">
|
||||
<view style="text-align: center;padding: 50upx;">
|
||||
<view style="text-align: center;">给课程打分</view>
|
||||
<view style="padding-top: 100upx;display: flex;justify-content: center;">
|
||||
<u-rate :count="5" :size="25" v-model="scoreInfo.score"></u-rate>
|
||||
</view>
|
||||
<view style="padding-top: 100upx;height: 100upx;">
|
||||
<u-button type="primary" @click="addScore()" text="提交评分"></u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -124,6 +203,9 @@
|
||||
courseInfo:{id:'',name:''},//课程信息
|
||||
teachers:[],//课程老师列表
|
||||
recommendCourses:[],//推荐课程列表
|
||||
catalogShow:false,//是否显示目录
|
||||
tabIndex:1,//显示的tab内容
|
||||
|
||||
isPlaying:false,
|
||||
onplay:false,
|
||||
touchNum : 0,
|
||||
@@ -448,6 +530,17 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
changeTab(idx){
|
||||
this.tabIndex=idx;
|
||||
},
|
||||
showAllCatalog(){
|
||||
this.catalogShow=true;
|
||||
//定位目录
|
||||
},
|
||||
closeAllCatalog(){
|
||||
this.catalogShow=false;
|
||||
//定位目录
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -526,4 +619,43 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.catalog{
|
||||
background: #FFFFFF;
|
||||
padding:20upx;
|
||||
.catalog-sec{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
// border-bottom: 2upx solid #FAFAFA;
|
||||
// padding:20upx;
|
||||
line-height: 40upx;
|
||||
.catalog-sec-name{
|
||||
max-width: 90%;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.catalog-con{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding:10upx;
|
||||
padding-right: 0;
|
||||
padding-left: 30rpx;
|
||||
line-height: 40upx;
|
||||
.square-border{
|
||||
display: inline-block;
|
||||
border:1px solid;
|
||||
padding: 4upx 6upx;
|
||||
font-size: 0.8em;
|
||||
margin: 0upx 8upx;
|
||||
}
|
||||
.catalog-con-name{
|
||||
padding-left: 0upx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user