@@ -1,116 +1,161 @@
< template >
< view class = "container commonPageBox commonDetailPage " >
< view class = "" >
<!-- 公共组件 - 每个页面必须引入 -- >
< public-module > < / public-module >
< template v-show = "!screenLoading" >
< z -nav -bar bgColor = "#333" fontColor = "#fff" title = "教学内容" > < / z-nav-bar >
<!-- < view class = "contentBox curriculum_box" : style = "`height:calc(100% - ${60 + statusBarHeight}px !important; -->
<view
class=" contentBox curriculum_box "
: style = "`height:calc(100% - ${60 + statusBarHeight}px !important; overflow-x: hidden; ${
: style = "`height:calc(100% - ${60 + statusBarHeight}px !important; width:100%; overflow-x: hidden; ${
isFullScreen ? 'background:#000' : ''
}`"
>
<!-- 加密视频 -- >
< view : style= "` background:#000` " >
< common-video
@changeScreen ="changeScree n"
@changeScreenLoading ="changeScreenLoading "
@hideNextVideo ="hideNextVideo "
@startNextVideoCountDown = " startNextVideoCountDown "
@unlockChangeVideo ="unlockChangeVideo"
v-if = "isfresh"
ref = "commonVideo"
:secondCountDown = "secondCountDown"
:videoTitle = "curriculumData.title"
:currentVideo = "currentVideo"
: noRecored = "noRecored"
:currentVideoList = "videoArray"
>
< view = "background:#000; position: fixed; top: 120rpx; left: 0; width: 100%; " >
< common-video @changeScreen ="changeScreen" @changeScreenLoading ="changeScreenLoading"
@hideNextVideo ="hideNextVideo" @startNextVideoCountDown ="startNextVideoCountDow n"
@unlockChangeVideo ="unlockChangeVideo" v-if = "isfresh " ref="commonVideo "
:secondCountDown = "secondCountDown" :videoTitle = "curriculumData.title "
:currentVideo = "currentVideo" :noRecored = "noRecored" :currentVideoList = "videoArray" >
< / common-video >
< view style = "height: 200px" v-else > < / view >
< / view >
< scroll -view
: style = "`height:calc(100% - 200px - 40rpx) ;`"
scroll -y = " true "
class = "scroll-Y"
style = "background-color: #fff"
>
< view
class = "PM_font"
style = "padding: 20rpx; font-size: 40rpx; color: #2979ff"
> 视频教学 < / v i e w
>
< ! - - < scroll -view : style = "`height:calc(100% - 200px - 40rpx) ;`" scroll -y = " true " class = "scroll-Y" style = "background-color: #fff" > -- >
< view class = "PM_font" style = "padding: 20rpx; font-size: 40rpx; color: #2979ff; margin-top: 320rpx;" > 视频教学 < / view >
< view class = "scroll-view-item" >
< view style = "padding: 20rpx; font-size: 26rpx" >
课程 ： { { options . navTitle } }
< / view >
< view
style = "padding: 20rpx; margin-bottom: 40rpx; font-size: 26rpx"
>
< view style = "padding: 20rpx; margin-bottom: 40rpx; font-size: 26rpx" >
章节 ： { { curriculumData . title } }
< / view >
< common-curriculum-video
v-if = "videoArray && videoArray.length > 0 "
:detailInfo = "curriculumData"
:currentVideo = "currentVideo"
:dataList = "videoArray"
@open ="changeVideo"
:changeVideoLock = "changeVideoLock"
>
< common-curriculum-video v-if = "videoArray && videoArray.length > 0" :detailInfo="curriculumData"
:currentVideo = "currentVideo" :dataList = "videoArray" @open ="changeVideo "
:changeVideoLock = "changeVideoLock" >
< / common-curriculum-video >
< / view >
< view
class = "PM_font "
style = "padding: 20rpx; font-size: 40rpx; color: #333"
> 文章简介 v i e w
< view class = "" style = "border-top: 2px solid #2979ff;" >
< view class = "coursePart flexbox" v-if = "tabList.length > 1" >
< view : class = "['item','flex_box',curTab == index ? 'active': '' ] "
v-for = "(item, index) in tabList" :key="index" @click="tabClick(item,index)" >
< view class = "" > < text > { { item . name } } < / text > view >
< / view
< / view >
< / view >
< view v-show = "curTab == 0" >
< ! - - < scroll -view : style = "`height:calc(100% - 200px - 40rpx) ;`" scroll -y = " true " class = "scroll-Y" style = "background-color: #fff" > -- >
< view class = "PM_font" style = "padding: 20rpx; font-size: 40rpx; color: #333" > 章节简介 < / view >
< view class = "scroll-view-item" >
< common-rich-detail : detailInfo = "{ ...curriculumData, title: '' }" >
< template # richHeadImg >
< image
v-if = "curriculumData.imgUrl"
@click ="previewImage(curriculumData.imgUrl)"
:src = "curriculumData.imgUrl"
mode = "widthFix"
class = "headImage"
> < / image >
< image v-if = "curriculumData.imgUrl" @click="previewImage(curriculumData.imgUrl)"
:src = "curriculumData.imgUrl" mode = "widthFix" class = "headImage" > < / image >
<!-- < image :src = "detailInfo.imgUrl" v-if = "detailInfo.imgUrl" mode="widthFix" class="headImage" > < / image > - - >
< / template >
< / common-rich-detail >
< / view >
< / scroll-view >
<!-- < / scroll-view > -- >
< p class = "aui-text-danger" style = "text-align: center" >
本课程版权归天津众妙之门科技有限公司所有 ， 翻版必究 !
< / p >
< / view >
< view v-show = "curTab == 1" style="padding: 20rpx;" >
< view class = "" >
< view class = "PM_font" style = "padding: 20rpx; font-size: 40rpx; color: #333" > 题目内容 < / view >
< view v-if = "curriculumData.questions != ''" class="" v-html="curriculumData.questions" >
< / view >
< view class = "" v-else >
< u -divider text = "暂无思考题" > < / u-divider >
< / view >
< / view >
{ { myAnswer } }
< view class = "answerBox" >
< view class = "PM_font" style = "padding: 20rpx; font-size: 40rpx; color: #333" > 答案提交 < / view >
< template >
< view class = "container" >
< view class = "page-body" >
< view class = 'wrapper' >
< view class = "editor-wrapper" >
< editor id = "editor" class = "ql-container" placeholder = "请输入您的答案..."
show -img -size show -img -toolbar show -img -resize
@statuschange ="onStatusChange" :read-only = "readOnly"
@ready ="onEditorReady" >
< / editor >
< / view >
< / view >
< / view >
< / view >
< / template >
< uni -forms :modelValue = "answerForm" :rules = "rules" ref = "form" >
<!-- < view class = "input_box" >
< uni-forms-item label = "" name = "content" label -width = " 0 " >
< text class = "input_tit" > < i > * < / i > 内容 : < span
style = "font-weight: normal; color: #999; font-size: 26rpx;" > ( 600 字以内 ) < / span > < / text >
< view class = "in" >
< view class = "uni-textarea" >
< textarea placeholder -style = " font -size : 26rpx " v-model = "form.content" maxlength="600"
auto -height placeholder = "请输入内容" / >
< / view >
< / view >
< / uni-forms-item >
< / view > -- >
< view class = "input_box" >
< text class = "input_tit" > 上传图片 : < / text >
< view class = "in" style = "border: none;" @click ="checkPermision" >
< u -upload :fileList = "fileList1" @afterRead ="addPic" @delete ="deletePic" multiple
:maxCount = "4" width = "40" height = "40" :previewFullImage = "true" >
< / u-upload >
<!-- < text style = "font-size: 24rpx; color: #999;" > 可上传4张问题截图 < / text > -- >
< / view >
<!-- < input type = "password" maxlength = "8" v-model = "confirmPassword" placeholder="请确认密码" / > -- >
< / view >
< view class = "input_box" >
< radio-group @change ="radioChange" class = "flex_box" >
< view class = "" style = "margin-right:20rpx ;" >
< radio value = "0" : checked = "0 == answerForm.display" / > 他人不可见 < / label >
< / view >
< view class = "" >
< radio value = "1" : checked = "1 == answerForm.display" / > 他人可见 < / label >
< / view >
< / radio-group >
< span
style = "color: #999; font-size: 28rpx; margin-top: 20rpx; display: block;" > （ 不勾选时 ， 班级管理员以外的人看不见提交的内容 ） < / span >
< / view >
< / uni-forms >
< view class = "btn_box" > < button @click ="onSubmit" > 提 交 < / button > < / view >
< / view >
< / view >
< / view >
< / template >
< view
style = "
< view style = "
background-color: red;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
"
v-show = "screenLoading"
>
" v-show = "screenLoading" >
< / view >
< / view >
< / template >
< script >
import permission from "@/js_sdk/wa-permission/permission.js"
import courseDescription from "@/pages/component/commonComponents/list" ;
import curriculumMp3 from "./mp3Detail.vue" ;
import price from "./price/index.vue" ;
import $http from "@/config/requestConfig.js" ;
import { mapState } from "vuex" ;
import {
mapState
} from "vuex" ;
export default {
components : {
courseDescription , //课程说明
@@ -119,6 +164,44 @@ export default {
} ,
data ( ) {
return {
answerForm : {
relationId : undefined ,
type : "1" , //类型0任务1课后题
display : "1" , //0不展示1展示
content : "" ,
img : "" ,
id : undefined
} ,
fileList1 : [ ] ,
tabList : [ {
name : '章节介绍' ,
id : '0'
} ,
{
name : '思考题' ,
id : '2'
}
] ,
rules : {
content : {
rules : [ {
required : true ,
errorMessage : '请输入回答内容' ,
}
]
} ,
} ,
activeStyle : {
color : '#333' ,
fontWeight : 'bold' ,
// transform: 'scale(1.2)',
backgroundColor : '#fff !important'
} ,
curTab : 0 ,
changeVideoLock : false , // 切换键锁
isFullScreen : false ,
screenLoading : false ,
@@ -158,8 +241,7 @@ export default {
playData : { } ,
taiHuClassInfo : { } ,
searchValue : "" ,
ordersTabs : [
{
ordersTabs : [ {
name : "视频教学" ,
type : "1" ,
@@ -189,26 +271,35 @@ export default {
detail : "sociology/course/getCourseCatalogueChapterDetail" ,
curriculumInfo : "app/phone.do?getCourseInfo" ,
} ,
readOnly : false ,
formats : { } ,
myAnswer : { } , // 我的思考题回答
} ;
} ,
onLoad ( options ) {
// #ifdef APP-PLUS
plus . screen . lockOrientation ( "default" ) ;
// #endif
this . answerForm . relationId = options . id
this . options = options ;
this . noRecored = options . noRecored
console . log ( 'this.noRecored=>' , this . noRecored )
this . screenLoading = false ;
this . currentCateIndex = this . options . videoIndex
? this . options . videoIndex
: 0 ;
this . currentCateIndex = this . options . videoIndex ?
this . options . videoIndex :
0 ;
// #ifdef APP-PLUS
plus . screen . unlockOrientation ( ) ; // 解除锁定屏幕方向
plus . screen . lockOrientation ( "portrait-primary" ) ;
this . getCourseDescriptionData ( ) ;
this . getMyQuestAnswer ( options . id )
uni . loadFontFace ( {
family : 'Pacifico' ,
source : 'url("https://sungd.github.io/Pacifico.ttf")'
} )
// this.getUserInfo()
// this.getCateList()
} ,
@@ -224,6 +315,9 @@ export default {
// this.showSearchList = false
// this.searchList = []
} ,
onPullDownRefresh ( ) {
uni . stopPullDownRefresh ( ) ;
} ,
onShow ( ) {
// #endif
} ,
@@ -231,6 +325,230 @@ export default {
... mapState ( [ "userInfo" ] ) ,
} ,
methods : {
getMyQuestAnswer ( chapterId ) {
$http . request ( {
url : "/common/class/getQuesReplyInfo" ,
method : "POST" ,
data : {
"relationId" : chapterId ,
"userId" : this . userInfo . id
} ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} )
. then ( res => {
if ( res . code == 0 && res . classTaskAndQuesReply != null ) {
this . myAnswer = res . classTaskAndQuesReply
this . answerForm = res . classTaskAndQuesReply
this . editorCtx = res . classTaskAndQuesReply . content
} else {
this . myAnswer = { }
this . answerForm = { }
this . editorCtx = ''
}
console . log ( '我的思考题提交情况' , res ) ;
} ) . catch ( e => {
console . log ( '我的思考题提交情况报错' , e ) ;
// uni.showToast({
// title: '操作失败',
// icon: 'error'
// })
} ) ;
} ,
async checkPermision ( ) {
var result = await permission . premissionCheck ( "CAMERA_EXTERNAL_STORAGE" )
if ( result != 1 ) {
return false
}
} ,
addPic ( e ) {
let that = this ;
console . log ( "添加图片" , that . fileList1 ) ;
for ( var i = 0 ; i < e . file . length ; i ++ ) {
console . log ( i , e . file [ i ] . url )
uni . uploadFile ( {
url : this . $baseUrl + "oss/fileoss" ,
filePath : e . file [ i ] . url ,
//files:e.file,
name : "file" ,
formData : { } ,
success : ( res ) => {
// console.log("添加图片", this.fileList1);
that . fileList1 . push ( {
url : JSON . parse ( res . data ) . url ,
} ) ;
console . log ( that . fileList1 , "that.uploadPicLIst" ) ;
} ,
fail : ( error ) => {
console . log ( "上传失败" , error ) ;
} ,
} ) ;
}
} ,
deletePic ( event ) {
this . fileList1 . splice ( event . index , 1 )
} ,
radioChange ( e ) {
if ( this . answerForm . display == e . detail . value ) { return }
this . answerForm . display = e . detail . value
} ,
async onSubmit ( ) {
let data = await this . getHtml ( ) ;
var _data = data . html . replace ( /<.*?>/g , "" )
if ( ! _data || _data == '' ) {
uni . showToast ( {
title : '请输入您的答案' ,
icon : 'none'
} )
return
}
this . answerForm . content = data . html
if ( this . fileList1 . length > 0 ) {
let _list = this . fileList1
_list = _list . map ( item => item . url )
// console.log('this.fileList1',_list);
this . answerForm . img = _list . join ( ',' )
} else {
this . answerForm . img = ''
}
var _url = ""
this . answerForm . id ? _url =
'common/class/editClassTaskAndQuesReply' : _url = 'common/class/addClassTaskAndQuesReply'
// this.form.id ? _url =
// 'common/class/editClassTaskReply' : _url = 'common/class/addClassTaskReply'
var data1 = {
"relationId" : this . answerForm . id ? undefined : this . curriculumData . id ,
"id" : this . answerForm . id ,
"type" : this . answerForm . type , //类型0任务1课后题
"display" : this . answerForm . display , //0不展示1展示
"content" : this . answerForm . content ,
"img" : this . answerForm . img
}
console . log ( 'data' , data1 ) ;
$http . request ( {
url : _url ,
method : "POST" ,
data : data1 ,
header : { //默认 无 说明：请求头
'Content-Type' : 'application/json'
} ,
} )
. then ( res => {
uni . showToast ( {
title : '操作成功！' ,
icon : 'success'
} )
this . fileList1 = [ ]
// this.closePup()
setTimeout ( ( ) => {
this . getMyQuestAnswer ( this . curriculumData . id )
// this.pPage = 0
// this.zuoyeList = []
// this.getTaskInfo()
// this.getZuoyeList()
} , 200 )
} ) . catch ( e => {
uni . showToast ( {
title : '操作失败' ,
icon : 'error'
} )
} ) ;
// console.log('data',data.html.replace(/<.*?>/g,""));
} ,
getHtml ( ) {
return new Promise ( ( resolve , reject ) => {
this . editorCtx . getContents ( {
success : ( res ) => {
resolve ( res ) ;
} ,
fail : ( error ) => {
reject ( err ) ;
} ,
} ) ;
} ) ;
} ,
readOnlyChange ( ) {
this . readOnly = ! this . readOnly
} ,
onEditorReady ( ) {
// #ifdef APP-PLUS || MP-WEIXIN || H5
uni . createSelectorQuery ( ) . select ( '#editor' ) . context ( ( res ) => {
this . editorCtx = res . context
if ( this . myAnswer . content == '' ) return
res . context . setContents ( {
html : this . myAnswer . content
} )
} ) . exec ( )
// #endif
} ,
undo ( ) {
this . editorCtx . undo ( )
} ,
redo ( ) {
this . editorCtx . redo ( )
} ,
// format(e) {
// let {
// name,
// value
// } = e.target.dataset
// if (!name) return
// // console.log('format', name, value)
// this.editorCtx.format(name, value)
// },
onStatusChange ( e ) {
const formats = e . detail
this . formats = formats
} ,
// clear() {
// uni.showModal({
// title: '清空编辑器',
// content: '确定清空编辑器全部内容？',
// success: res => {
// if (res.confirm) {
// this.editorCtx.clear({
// success: function(res) {
// console.log("clear success")
// }
// })
// }
// }
// })
// },
// removeFormat() {
// this.editorCtx.removeFormat()
// },
insertImage ( ) {
uni . chooseImage ( {
count : 1 ,
success : ( res ) => {
this . editorCtx . insertImage ( {
src : res . tempFilePaths [ 0 ] ,
alt : '图像' ,
success : function ( ) {
console . log ( 'insert image success' )
}
} )
}
} )
} ,
tabClick ( item , index ) {
if ( this . curTab == index ) {
return
}
this . curTab = index
if ( this . curTab == 1 ) {
uni . loadFontFace ( {
family : 'Pacifico' ,
source : 'url("https://sungd.github.io/Pacifico.ttf")'
} )
}
} ,
unlockChangeVideo ( ) {
this . changeVideoLock = false
} ,
@@ -406,14 +724,15 @@ export default {
( e ) => e . id == res . data . current
) ;
console . log (
"isHaveHistorySeekVideo at line 522: " ,
isHaveHistorySeekVideo
"获取课程章节详情 " ,
isHaveHistorySeekVideo , that . curriculumData
) ;
that . currentCateIndex =
isHaveHistorySeekVideo != - 1 ? isHaveHistorySeekVideo : 0 ;
if ( that . videoArray . length > 0 ) {
this . currentVideo = that . videoArray [ that . currentCateIndex ] ;
console . log ( '默认播放的index' , that . currentCateIndex , this . currentVideo . id , that . videoArray ) ;
console . log ( '默认播放的index' , that . currentCateIndex , this . currentVideo . id , that
. videoArray ) ;
this . initVideo ( ) ;
}
var videoArray = [ ] ;
@@ -603,7 +922,9 @@ export default {
transformData ( inputData ) {
const result = { } ;
inputData . forEach ( ( item ) => {
const { letter } = item ;
const {
letter
} = item ;
if ( ! result [ letter ] ) {
result [ letter ] = [ ] ;
}
@@ -773,6 +1094,52 @@ export default {
< style lang = "scss" scoped >
@ import "@/style/mixin.scss" ;
// .page-body {
// height: calc(100vh - var(--window-top) - var(--status-bar-height));
// }
// .wrapper {
// height: 100%;
// }
// .editor-wrapper {
// height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
// background: #fff;
// }
// .iconfont {
// display: inline-block;
// padding: 8px 8px;
// width: 24px;
// height: 24px;
// cursor: pointer;
// font-size: 20px;
// }
// .toolbar {
// box-sizing: border-box;
// border-bottom: 0;
// font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
// }
. ql - container {
box - sizing : border - box ;
// padding: 12px 15px;
width : 100 % ;
min - height : 30 vh ;
min - height : 300 rpx ;
font - size : 14 px ;
font - style : normal ! important ;
line - height : 1.5 ;
overflow - y : scroll ;
border : 1 px solid # eee
}
. ql - active {
color : # 06 c ;
}
. u - grid - list {
// height: 40rpx;
@@ -854,6 +1221,63 @@ export default {
}
}
. coursePart {
margin - top : 20 rpx ;
@ include ptop _bottm ( 10 px ) ;
border - radius : 20 rpx 20 rpx 0 0 ;
@ include pleft _right ( 10 px ) ;
align - items : flex - end ;
// @include mshadow(10px, 1);
margin - top : 20 rpx ;
padding : 0 20 rpx ;
padding - top : 20 rpx ;
// background-color: $themeColor;
. item {
justify - content : center ;
align - items : center ;
color : # fff ;
width : 100 % ;
text - align : center ;
padding : 16 rpx 0 ;
margin - right : 10 rpx ;
border - radius : 20 rpx 20 rpx 0 0 ;
border : 1 px solid # fff ;
border - bottom : none ;
background - color : rgba ( 0 , 0 , 0 , .4 ) ;
text {
font - size : 30 rpx ;
}
}
. item : last - child {
margin - right : 0 ;
}
. item . active {
// background-color: #fbfbff;
background - color : $themeColor ;
color : # fff ;
padding : 20 rpx 0 ! important ;
text {
font - size : 36 rpx ! important ;
}
}
}
. btn _box {
margin - top : 70 rpx ;
padding - bottom : 20 rpx ;
button {
font - size : 32 rpx ;
@ include theme ( 'btn_bg' ) color : # fff ;
height : 80 rpx ;
line - height : 80 rpx ;
border - radius : 50 rpx ;
}
}
. search _box {
margin : 0 auto ;
overflow : hidden ;
@@ -954,8 +1378,7 @@ export default {
// height: 400rpx !important;
}
. commonDetailPage {
}
. commonDetailPage { }
. curriulum _box {
margin - top : 20 rpx ;
@fawn-nine