hz/learning-system-mobile
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git synced 2025-12-11 03:46:47 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
df9605a5847a438bec3c6406fee65f8c5ab028c1
learning-system-mobile/pages/study/courseStudy.vue

913 lines
29 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<!--新的课程学习页面，没有中间的详细页面了，课程点过来就是这个，用户未报名就直接报名-->
<view>
<watermark></watermark>
<u-toast ref="messager"></u-toast>
<page-title :showBack="true">{{courseInfo.name}}</page-title>
<view class="playbox"><!--内容播放区域-->
<view style="min-height: 400upx;">
内容插入区域
</view>
</view>
<view class="contentbox">
<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 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 v-if="totalContent>1" class="desrow">
<view style="font-size: 32upx;color: #333333;">目录</view>
<view v-if="totalContent>2" @click="showAllCatalog" style="font-size: 28upx;color: #666666;">全部&gt;</view>
</view>
<view v-if="totalContent>1"><!--单个内容时，不显示内容名称-->
<view v-if="totalContent==2">
<view v-if="courseInfo.type==10">
<view class="citembox1">
<view v-for="(con,conIdx) in contentList" :key="conIdx" class="citembox1-item">
<view class="citem">
<view class="citem-body">{{con.contentName}} </view>
</view>
</view>
</view>
</view>
<view v-else><!--有目录的，但是只有两项内容-->
<view class="citembox1">
<view v-for="(con,conIdx) in scrollList" :key="conIdx" class="citembox1-item">
<view class="citem">
<view class="citem-body">{{con.contentName}} </view>
</view>
</view>
</view>
</view>
</view>
<view v-else >
<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>
<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>
<!--交互-->
<view class="cinfo-btns">
<view class="cinfo-btn" @click="openScore()">
<view><image src="/static/images/course/c_comment.png" style="width: 80upx;height: 80upx;"></image> </view>
<view>评价</view>
</view>
<view class="cinfo-btn" @click="addFavorite()">
<view>
<image v-if="isFavorite" src="/static/images/course/c_favorite_2.png" style="width: 80upx;height: 80upx;">
<image v-else src="/static/images/course/c_favorite.png" style="width: 80upx;height: 80upx;">
</view>
<view>收藏</view>
</view>
<view class="cinfo-btn" @click="openShare()">
<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 ref="fiexdbar" :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 v-if="courseInfo.type>10" 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>
</view>
</view>
<view v-else class="catalog">
<view >
<view v-for="(con,conIdx) in cata.contentList" :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>
</view>
<view style="height: 50px;"></view>
</view>
</view>
</view>
<!--推荐课程-->
<view v-if="tabIndex==1" style="padding: 30upx;background-color: #fff;">
<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="center" @close="closeScore" @open="openScore">
<view style="text-align: center;padding: 50upx 100upx;">
<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>
<script>
import apiCoursePortal from '@/api/modules/coursePortal.js'
import apiCourseStudy from '@/api/modules/courseStudy.js'
import apiVideoStudy from "@/api/modules/videoStudy.js";
import apiCourseGrade from "@/api/modules/courseGrade.js";
import apiCourseFile from "@/api/modules/courseFile.js";
import apiUser from '@/api/system/user.js'
import apiResOwner from '@/api/modules/resowner.js'
import apiPraises from "@/api/modules/praises.js";
import apiTrample from "@/api/modules/trample.js";
import apiFavorites from '@/api/modules/favorites.js'
import {getContentType} from "@/utils/tools.js";
import studyUtil from '@/utils/study.js';
import {toScore} from '@/utils/tools.js';
import {mapGetters} from 'vuex'
export default {
data(){
return{
loading:false,//加载中
courseId:'',//当前课程的id
studyId: '',//当前学习的id
initContentId:'',//初始化的内容id
courseInfo:{id:'',name:''},//课程信息
teachers:[],//课程老师列表
recommendCourses:[],//推荐课程列表
catalogShow:false,//是否显示目录
totalContent:0,//课程内容数量
hasSection:false,//是否有目录
tabIndex:1,//显示的tab内容
scoreInfo:{dlgShow:false, score:5, has:false},//评分控制项
isPraise:false,//是否已点赞
isTrample:false,//是否已踩
isFavorite:false,//是否已收藏
isFollow:false,//是否已关注
isPlaying:false,
onplay:false,
touchNum : 0,
playerBoxShow:false,
toScore:toScore,
summarylogShow: false,
scrollItemWidth:this.$width,
treePopupWidth:'400px',
fileBaseUrl:this.$config.fileUrl,
getConType:getContentType,
curSection:{},//当前所在的章
curContent:{
studyItemId:'',
status:1
},//当前的内容
conLink:{openType:1,url:''},//外连接内容
curriculumData:{url:'',isDrag:true,completeSetup:1,setupTage:0,second:0},// 课件内容
authorInfo:{aid:'',name:'',code:'',orgInfo:''},
sectionList:[],
contentList:[],
videoScore:3,
videoPlayer:null,
videoPlayingTime:0,
speedListShow:false,
speedList:["2.0", "1.5", "1.25", "1.0", "0.75", "0.5"],
videoSpeed: 1.0, // 当前倍速:
interactRuning:false,
scrollInfo:{
scrollLeft: 0,
scrollWidth: 0
},
handleTimeout:null,
isAppendTime:true,
appendStartTime: null, //记录追加的开始时间
appendHandle:null,
appentId:'',//当前追加的学习时长的id
appentInterval:30000,//追加学习时间的间隔 30秒加一次
preTime:-1
}
},
computed: {
...mapGetters(['userInfo']),
catalogTree(){
let treeList=[];
let $this=this;
$this.sectionList.forEach(sec=>{
let treeNode={section:sec,children:[]}
sec.status = 1;
let finishCount = 0;
$this.contentList.forEach(c=>{
if (c.csectionId == sec.id) {
if (c.status > 1) {
sec.status = 2;
if(c.status == 9){
finishCount++;
}
}
treeNode.children.push(c);
}
});
if (finishCount == treeNode.children.length) {
sec.status = 9;
}
treeList.push(treeNode);
})
return treeList;
},
scrollList(){
let list=[];
this.catalogTree.forEach((cata)=>{
cata.children.forEach((child,childIdx)=>{
if(childIdx==0){
child.cataName=cata.section.name;
child.cataStatus=cata.section.status;
}else{
child.cataName='';
}
list.push(child)
})
});
return list;
},
},
onLoad(options) {
//this.$watermark.set(this.userInfo.name+ this.userInfo.loginName);
this.scrollItemWidth=(this.$width-100)/2;//横向滚动的内容块宽度
this.treePopupWidth=(this.$width-100)+'px'; //右边出来的抽屉宽度控制
if(options.contentId){
this.initContentId=options.contentId;
}
this.courseId=options.id;
this.courseInfo.id=options.id;
this.loadDetail();//加载课程数据
this.loadReCourses();//加载推荐课程
this.loadIsData();//加载关注，收藏，评价等信息
},
onShow(){
uni.setNavigationBarTitle({ title:'\u200E' })
//实时渲染当前的播放状态
},
onReady() {
this.videoPlayer=uni.createVideoContext("myVideo", this);
},
methods:{
loadDetail(){
let $this=this;
uni.showLoading({title:'加载中...'})
apiCourseStudy.studyIndex(this.courseId).then(rs=>{
if(rs.status != 200) {
uni.hideLoading();
$this.$refs.messager.show({message:rs.message,type:'error'});
return;
}
if(rs.result.contents.length==0){
$this.$refs.messager.show({message:'课程内容已删除或课程已不再使用',type:'error'});
return;
}
if(!rs.result.course.enabled){
$this.$refs.messager.show({message:'十分抱歉，此课程已停用，如需使用，请联系管理员。',type:'error'});
return;
}
$this.courseInfo=rs.result.course;
//处理老师数据
$this.teachers=rs.result.teachers;
if(rs.result.teachers && rs.result.teachers.length > 0) {
let userIds = [];
let ctoUsers = [];
rs.result.teachers.forEach(item => {
// item.aid='';
item.name= '';
item.orgInfo= '';
item.avatar= '';
item.code= '';
item.sex=null;
userIds.push(item.teacherId);
ctoUsers.push({ aid: item.teacherId, name: item.teacherName });
});
this.toUsers = ctoUsers;//关注老师，关注多个考试
this.loadAuthorInfo(rs.result.teachers, userIds);
}
let showConId=this.initContentId;
if(rs.result.course.type >10){
rs.result.sections.forEach(sec=>{
sec.status=1;//加入状态表未开始
rs.result.contents.forEach(c=>{
c.status=1;//初始化状态 ，未开始
c.studyItemId='';//初始化字段，学习条目id
c.lastStudyTime=0;
if(showConId!='' && c.id==showConId){
$this.curContent=c;
$this.curSection=sec;
}
});
})
}else if(rs.result.course.type==10){
let indexNum=0;
let delIndexs=[];
rs.result.contents.forEach((c,cidx) => {
c.status = 0; //
c.studyItemId = '';
c.lastStudyTime = 0;
if(c.sortIndex==1){
c.contentName=rs.result.course.name;
indexNum++;
if(indexNum>1){
delIndexs.push(cidx);
}
}else if(c.sortIndex==2){
c.contentName='作业';
}else if(c.sortIndex==3){
c.contentName='考试';
}else if(c.sortIndex==4){
c.contentName='评估';
}
});
if(delIndexs.length>0){
delIndexs.forEach(delIdx=>{
rs.result.contents.splice(delIdx,1);
})
}
}
this.contentList=rs.result.contents;//内容列表
this.totalContent=rs.result.contents.length;//一共有向个可以播放的内容
this.sectionList=rs.result.sections;
//设置正在学习的章节
if(showConId==''){
this.curContent=this.contentList[0];
this.curSection=this.sectionList[0];
//要不要在这里处理？
if(this.curContent.contentType==10 || this.curContent.contentType==20){
if(this.contentList[0].content.startsWith('\{')){
this.curriculumData=JSON.parse(this.contentList[0].content);
}else{
this.curriculumData.url=this.contentList[0].content;
}
}
}
uni.hideLoading();
});
apiCoursePortal.detail(this.courseId).then(rs=>{
setTimeout(function(){uni.hideLoading()},1000);
if(rs.status==200){
// uni.setNavigationBarTitle({ title:rs.result.course.name })
this.courseInfo=rs.result.course;
//老师信息
this.teachers=rs.result.teachers;
if(rs.result.teachers && rs.result.teachers.length > 0) {
let userIds = [];
rs.result.teachers.forEach(item => {
item.name= '';
item.orgInfo= '';
item.avatar= '';
item.code= '';
item.sex=null;
userIds.push(item.teacherId);
});
this.loadAuthorInfo(rs.result.teachers, userIds);
}
this.loadUserInfo(this.courseInfo.sysCreateAid);
//设置必须的字段
let showConId=this.initContentId;
rs.result.sections.forEach(sec=>{
sec.status=1;//加入状态表未开始
rs.result.contents.forEach(c=>{
c.status=1;//初始化状态 ，未开始
c.studyItemId='';//初始化字段，学习条目id
c.lastStudyTime=0;
if(showConId!='' && c.id==showConId){
$this.curContent=c;
$this.curSection=sec;
}
});
})
this.contentList=rs.result.contents;
this.totalContent=rs.result.contents.length;
this.sectionList=rs.result.sections;
//设置正在学习的章节
if(showConId==''){
this.curContent=this.contentList[0];
this.curSection=this.sectionList[0];
//要不要在这里处理？
if(this.curContent.contentType==10 || this.curContent.contentType==20){
if(this.contentList[0].content.startsWith('\{')){
this.curriculumData=JSON.parse(this.contentList[0].content);
}else{
this.curriculumData.url=this.contentList[0].content;
}
}
}
}else{
this.$refs.messager.show({message:rs.message,type:'error'});
}
})
},
loadReCourses(){
let dto={
sysType1:this.courseInfo.sysType1,
sysType2:this.courseInfo.sysType2,
sysType3:this.courseInfo.sysType3
}
apiCourseStudy.courseRecommends(dto).then(rs=>{
if(rs.status==200){
this.recommendCourses=rs.result;
}
})
},
loadAuthorInfo(list, ids) {
//加载作者信息，头像，机构信息
if (ids.length == 0) {
return;
}
apiUser.getByIds(ids).then(res => {
if (res.status == 200) {
list.forEach((item, index) => {
res.result.some(author => {
if (author.aid == item.teacherId) {
// item.authorInfo = author;
// item.aid=author;
item.name= author.name;
item.orgInfo= author.orgInfo;
item.avatar= author.avatar;
item.code= author.code;
item.sex=author.sex;
if(author.avatar != '') {
item.avatar=this.$config.fileUrl + author.avatar;
}
return true;
}else{
return false;
}
});
});
} else {
//console.log('加载课程信息失败:'+res.error);
//this.$message.error(res.message);
}
});
},
loadUserInfo(uid){
apiUser.getByIds([uid]).then(res=>{
if(res.status==200){
this.authorInfo=res.result[0];
}
})
},
loadIsData(){
//加载是否关注，是否收藏，是否评价等
apiFavorites.has(1,this.courseId).then(rs=>{
if(rs.status==200 && rs.result){
this.isFavorite=true;
}else{
this.isFavorite=false;
}
})
apiCourseGrade.has(this.courseId).then(rs=>{
if(rs.status==200 && rs.result){
this.scoreInfo.has=true;
}
});
apiPraises.has(1,this.courseId).then(rs=>{
if(rs.status==200 && rs.result){
this.isPraise=true;
}
});
apiTrample.has(this.courseId).then(rs=>{
if(rs.status==200 && rs.result){
this.isTrample=true;
}
});
},
changeTab(idx){
this.tabIndex=idx;
},
showAllCatalog(){
this.catalogShow=true;
//定位目录
},
closeAllCatalog(){
this.catalogShow=false;
//定位目录
},
openScore(){
//显示评分弹窗
if(this.scoreInfo.has){
this.$refs.messager.show({message:'您已评过分',type:'error'});
return;
}
this.scoreInfo.dlgShow=true;
},
closeScore(){
this.scoreInfo.dlgShow=false;
},
addScore(){
if(this.scoreInfo.has){
this.$refs.messager.show({message:'您已评过分',type:'error'});
this.scoreInfo.dlgShow=false;
return;
}
let postData={
courseId:this.courseInfo.id,
studyId:this.studyId,
score:this.scoreInfo.score
}
if(this.scoreInfo.score>0){
apiCourseGrade.grade(postData).then(rs=>{
if(rs.status==200){
this.scoreInfo.dlgShow=false;
this.scoreInfo.has=true;
this.$refs.messager.show({message:'评分成功，谢谢您的评分',type:'success'});
}else{
this.$refs.messager.show({message:'评分分处理失败，请稍后再试',type:'error'});
}
});
}
},
openShare(){
//console.log(this.$refs.fiexdbar,'this.$refs.fiexdbar');
//因为开始是v-if控制的，所以这里获取不到，必须显示时才会获取到，所以需要单独的弄一个分享组件
this.$refs.fiexdbar.addShare();
},
shareSuccess(rs){
this.$refs.messager.show({message:'分享成功',type:'success'});
},
addFavorite(){
if(this.loading){
return;
}
this.loading=true;
uni.showLoading({title:'处理中...'})
//需要判断是否已点赞，已点赞的不再加
let postData={
objType:1,
objId:this.courseId,
title:this.courseInfo.name,
}
if(this.isFavorite) {// 已经收藏，再次点击取消收藏
apiFavorites.remove(1,this.courseId).then(res=>{
this.loading=false;
if(res.status==200){
this.isFavorite=false;
this.$refs.messager.show({message:'已取消收藏',type:'success'});
}else{
console.log('取消收藏失败：'+res.message);
}
uni.hideLoading();
})
} else {
apiFavorites.save(postData).then(res=>{
this.loading=false;
if(res.status==200 && res.result){
this.isFavorite=true;
this.$refs.messager.show({message:'已加入收藏',type:'success'});
//发送消息
//this.messageSave(this.data.id,this.data.name,this.userInfo.name,this.data.sysCreateBy,this.data.sysCreateAid,'收藏了我发布的');
}else{
this.$refs.messager.show({message:'收藏失败',type:'error'});
console.log('加入收藏失败：'+res.message);
}
uni.hideLoading();
})
}
},
praiseContent(){
//赞和踩只能是一个
if(this.isTrample){
this.$refs.messager.show({message:'已踩不能赞了',type:'error'});
return;
}
let postData={
objType:1,
objId:this.courseInfo.id,
title:this.courseInfo.name
}
if(this.interactRuning){
return;
}
this.interactRuning=true;
if(this.isPraise){
apiPraises.remove(1,this.courseInfo.id).then(rs=>{
this.interactRuning=false;
if(rs.status==200){
this.$refs.messager.show({message:'已取消点赞',type:'success'});
this.isPraise=false;
this.courseInfo.praises--;
}else{
this.$refs.messager.show({message:'取消点赞失败,请稍后再试',type:'success'});
}
})
}else{
apiPraises.save(postData).then(rs=>{
this.interactRuning=false;
if(rs.status==200){
this.$refs.messager.show({message:'点赞成功',type:'success'});
this.isPraise=true;
this.courseInfo.praises++;
}else{
this.$refs.messager.show({message:'点赞失败,请稍后再试',type:'success'});
}
})
}
},
treadContent(){
//赞和踩只能是一个
if(this.isPraise){
this.$refs.messager.show({message:'已赞不能踩了',type:'error'});
return;
}
if(this.interactRuning){
return;
}
this.interactRuning=true;
if(this.isTrample){
//取消
apiTrample.remove(this.courseInfo.id).then(rs=>{
this.interactRuning=false;
if(rs.status==200){
this.$refs.messager.show({message:'已取消踩',type:'success'});
this.isTrample=false;
this.courseInfo.trampleCount--;
}else{
this.$refs.messager.show({message:'取消踩失败,请稍后再试',type:'error'});
}
})
}else{
apiTrample.trample(this.courseInfo.id).then(rs=>{
this.interactRuning=false;
if(rs.status==200){
this.$refs.messager.show({message:'已踩',type:'success'});
this.isTrample=true;
this.courseInfo.trampleCount++;
}else{
this.$refs.messager.show({message:'踩失败,请稍后再试',type:'error'});
}
})
}
},
}
}
</script>
<style lang="scss" scoped>
body{
background-color: #fff;
}
.playbox{
padding: 34upx;
background-color: #000000;
}
.contentbox{
padding: 34upx;
background-color: #fff;
}
.tabrow{
display: flex;
border-bottom:1px solid #999999;
font-size: 28upx;
.tabrow-active{
font-size: 32upx;
color: #387DF7;
border-bottom: 4upx solid #007DFF;
}
.tabrow-item{
margin-right: 20upx;
line-height: 60upx;
text{
padding-bottom: 10upx;
}
}
}
.cinfo{
.cinfo-title{
color:#333333;
font-size: 32upx;
padding: 28upx 0upx;
}
.cinfo-tag1{
font-size: 22upx;
color: #6E7B84;
background: rgba($color: #387DF7, $alpha: 0.1);
border-radius: 16upx;
margin-left: 12upx;
margin-right: 12upx;
padding: 2upx 12upx;
}
.cinfo-tag2{
font-size: 22upx;
color: #D98135;
background: rgba($color: #FF7900, $alpha: 0.1);
border-radius: 16upx;
margin-right: 12upx;
padding: 4upx 12upx;
}
.desrow{
display: flex;
justify-content: space-between;
padding: 26upx 0upx;
.desrow-name{
color: #666666;
font-size: 28upx;
}
.score{
color:#FB7303;
margin-left: 10upx;
font-weight: 700; font-size: 32upx;
}
}
.cinfo-btns{
display: flex;
justify-content: center;
.cinfo-btn{
margin:30upx 60upx;
}
}
}
.citembox1{
display: flex;
.citembox1-item{
width: 50%;
}
}
.citem{
margin: 20upx;
.citem-title{
color: #333333;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
overflow: hidden;
}
.citem-body{
background-color: #F7F8F9;
color: #333333;
padding: 40upx;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.citem-active{
color: #387DF7;
border: 1px dotted #387DF7;
}
}
.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 View Git Blame Copy Permalink