|
|
@@ -1,17 +1,24 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
<view style="position: fixed;width: 100%;z-index: 999;background: #FFFFFF;" id="top">
|
|
|
- <view class="video_box">
|
|
|
- <image
|
|
|
- src="https://cdn.uviewui.com/uview/swiper/3.jpg"
|
|
|
- style="width: 100%;height: 460rpx;"
|
|
|
- ></image>
|
|
|
- <image v-if="!startStatus" class="video_play" src="/static/play.png" @click="startVideo"></image>
|
|
|
+ <view class="video_box" v-if="!startStatus">
|
|
|
+ <image src="https://cdn.uviewui.com/uview/swiper/3.jpg" style="width: 100%;height: 460rpx;"></image>
|
|
|
+ <image class="video_play" src="/static/play.png" @click="startVideo"></image>
|
|
|
</view>
|
|
|
- <view >
|
|
|
+ <view v-else class="video_box" style="width: 100%;height: 460rpx;">
|
|
|
+ <polyv-player
|
|
|
+ id="playerVideo"
|
|
|
+ playerId="playerVideo"
|
|
|
+ height="460rpx"
|
|
|
+ :vid="vid"
|
|
|
+ :showSettingBtn="true"
|
|
|
+ :enablePlayGesture="true"
|
|
|
+ ></polyv-player>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
<u-row>
|
|
|
- <u-col span="10" >
|
|
|
- <view class="video_t1">{{detail.courseName}}</view>
|
|
|
+ <u-col span="10">
|
|
|
+ <view class="video_t1">{{ detail.courseName }}</view>
|
|
|
</u-col>
|
|
|
<u-col span="2">
|
|
|
<view class="video_t1_t">
|
|
|
@@ -23,43 +30,34 @@
|
|
|
</view>
|
|
|
<u-line color="#D6D6DB" />
|
|
|
<view>
|
|
|
- <view style="width: 240px;margin: 0 auto;"><u-tabs :list="list" item-width="150" font-size="24" bar-width="80" :current="current" @change="change" active-color="#007AFF"></u-tabs></view>
|
|
|
+ <view style="width: 240px;margin: 0 auto;">
|
|
|
+ <u-tabs :list="list" item-width="150" font-size="24" bar-width="80" :current="current" @change="change" active-color="#007AFF"></u-tabs>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<u-line color="#D6D6DB" />
|
|
|
-
|
|
|
</view>
|
|
|
- <view class="box" >
|
|
|
+ <view class="box">
|
|
|
<!--目录 -->
|
|
|
- <view v-show="current==0">
|
|
|
+ <view v-show="current == 0">
|
|
|
<view class="menuBox" v-for="(item, index) in menuList">
|
|
|
<!--模块 -->
|
|
|
- <view v-if="item.type==1">
|
|
|
- <courseModule :menuItem="item"></courseModule>
|
|
|
- </view>
|
|
|
+ <view v-if="item.type == 1"><courseModule :menuItem="item"></courseModule></view>
|
|
|
<!--章 -->
|
|
|
- <view v-if="item.type==2">
|
|
|
- <courseChapter :menuItem="item"></courseChapter>
|
|
|
- </view>
|
|
|
+ <view v-if="item.type == 2"><courseChapter :menuItem="item"></courseChapter></view>
|
|
|
<!--节 -->
|
|
|
- <view v-if="item.type==3">
|
|
|
- <courseSection :menuItem="item"></courseSection>
|
|
|
- </view>
|
|
|
+ <view v-if="item.type == 3"><courseSection :menuItem="item"></courseSection></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!--笔记 -->
|
|
|
- <view v-show="current==1">
|
|
|
- <view class="inputBottom" >
|
|
|
- <view style="width: 10%;">
|
|
|
- <image src="/static/icon/note3.png" style="width: 39rpx;height: 39rpx;margin:0 29rpx;"></image>
|
|
|
- </view>
|
|
|
+ <view v-show="current == 1">
|
|
|
+ <view class="inputBottom">
|
|
|
+ <view style="width: 10%;"><image src="/static/icon/note3.png" style="width: 39rpx;height: 39rpx;margin:0 29rpx;"></image></view>
|
|
|
<view style="width: 73%;height: 88rpx;margin-bottom: 15rpx;">
|
|
|
- <u-input height="78" fixed="true" :placeholder="placeholder" type="textarea" :custom-style="inputStyle" v-model="value" />
|
|
|
- </view>
|
|
|
- <view style="color: #007AFF;font-size: 30rpx;font-weight: bold;width: 15%;text-align: center;">
|
|
|
- 提交
|
|
|
+ <u-input height="78" fixed="true" :placeholder="placeholder" type="textarea" :custom-style="inputStyle" v-model="value" />
|
|
|
</view>
|
|
|
+ <view style="color: #007AFF;font-size: 30rpx;font-weight: bold;width: 15%;text-align: center;">提交</view>
|
|
|
</view>
|
|
|
- <view v-for="(item, index) in menuList">
|
|
|
+ <view v-for="(item, index) in menuList">
|
|
|
<view class="dateBox">2021年10月30日</view>
|
|
|
<view class="noteBox">
|
|
|
<view class="tBox">
|
|
|
@@ -68,37 +66,27 @@
|
|
|
</view>
|
|
|
<view class="tBox2">
|
|
|
<view class="title" style="width: 39rpx;height: 39rpx;margin:0 29rpx;">00:20</view>
|
|
|
- <view class="t2Content leftPadding">
|
|
|
- 这是一段用户记录的笔记本文，当内容过长时
|
|
|
- 需要换行，完整显示文字内容。
|
|
|
- </view>
|
|
|
+ <view class="t2Content leftPadding">这是一段用户记录的笔记本文，当内容过长时 需要换行，完整显示文字内容。</view>
|
|
|
</view>
|
|
|
<view class="tBox">
|
|
|
<image src="/static/icon/note2.png" style="width: 39rpx;height: 39rpx;margin:0 29rpx;"></image>
|
|
|
<view class="title leftPadding">施工承发包模式-施工合同与物资采购合同</view>
|
|
|
</view>
|
|
|
- <view style="margin-left: 97rpx;" class="t2Content leftPadding">
|
|
|
- 这是一段用户记录的笔记本文，当内容过长时
|
|
|
- 需要换行，完整显示文字内容。
|
|
|
- </view>
|
|
|
+ <view style="margin-left: 97rpx;" class="t2Content leftPadding">这是一段用户记录的笔记本文，当内容过长时 需要换行，完整显示文字内容。</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!--答疑 -->
|
|
|
- <view v-show="current==2">
|
|
|
+ <view v-show="current == 2">
|
|
|
<view class="inputBottom">
|
|
|
<view style="width: 73%;height: 88rpx;margin-bottom: 15rpx;margin-left: 10% ;">
|
|
|
- <u-input height="78" fixed="true" placeholder="您可以在这里输入答疑内容" type="textarea" :custom-style="inputStyle" v-model="value" />
|
|
|
- </view>
|
|
|
- <view style="color: #007AFF;font-size: 30rpx;font-weight: bold;width: 15%;text-align: center;">
|
|
|
- 提交
|
|
|
+ <u-input height="78" fixed="true" placeholder="您可以在这里输入答疑内容" type="textarea" :custom-style="inputStyle" v-model="value" />
|
|
|
</view>
|
|
|
+ <view style="color: #007AFF;font-size: 30rpx;font-weight: bold;width: 15%;text-align: center;">提交</view>
|
|
|
</view>
|
|
|
- <view v-for="(item, index) in menuList" style="background-color: #FFFFFF;">
|
|
|
- <view class="chat_box" >
|
|
|
- <view>
|
|
|
- <image src="https://file-dev.xyyxt.net/oss/images/avatar/20210623/1624414559368_44562477.png" style="width: 64rpx;height: 64rpx;"></image>
|
|
|
- </view>
|
|
|
+ <view v-for="(item, index) in menuList" style="background-color: #FFFFFF;">
|
|
|
+ <view class="chat_box">
|
|
|
+ <view><image src="https://file-dev.xyyxt.net/oss/images/avatar/20210623/1624414559368_44562477.png" style="width: 64rpx;height: 64rpx;"></image></view>
|
|
|
<view style="margin-left: 15rpx;">
|
|
|
<view class="chat1">倪虹洁</view>
|
|
|
<view class="chat2">2021/10/31 09:36:23</view>
|
|
|
@@ -113,6 +101,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import eventHub from '@/common/eventHub.js';
|
|
|
import courseModule from '@/pages2/components/course/courseModule.vue';
|
|
|
import courseChapter from '@/pages2/components/course/courseChapter.vue';
|
|
|
import courseSection from '@/pages2/components/course/courseSection.vue';
|
|
|
@@ -125,10 +114,11 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- detail:{},
|
|
|
- courseId:0,
|
|
|
- placeholder:"您可以在这里输入笔记内容\n还可以点击左侧图标为笔记加上时间标记",
|
|
|
- inputStyle:{
|
|
|
+ startStatus: false,
|
|
|
+ detail: {},
|
|
|
+ courseId: 0,
|
|
|
+ placeholder: '您可以在这里输入笔记内容\n还可以点击左侧图标为笔记加上时间标记',
|
|
|
+ inputStyle: {
|
|
|
background: 'rgba(244, 244, 244, 0.98)',
|
|
|
borderRadius: '24rpx',
|
|
|
padding: '8rpx',
|
|
|
@@ -146,78 +136,82 @@ export default {
|
|
|
name: '答疑'
|
|
|
}
|
|
|
],
|
|
|
- menuList:[
|
|
|
+ menuList: [
|
|
|
+ {
|
|
|
+ list: [
|
|
|
+ {
|
|
|
+ showChildren: false,
|
|
|
+ children: [1, 2, 3]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ showChildren: false,
|
|
|
+ children: [1]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ showChildren: false,
|
|
|
+ children: [1, 2]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ type: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 2,
|
|
|
+ showChildren: false,
|
|
|
+ list: [{}, {}, {}]
|
|
|
+ },
|
|
|
{
|
|
|
- list:[{
|
|
|
- showChildren:false,
|
|
|
- children:[1,2,3]
|
|
|
- },{
|
|
|
- showChildren:false,
|
|
|
- children:[1]
|
|
|
- },{
|
|
|
- showChildren:false,
|
|
|
- children:[1,2]
|
|
|
- }],
|
|
|
- type:1
|
|
|
- },{
|
|
|
- type:2,
|
|
|
- showChildren:false,
|
|
|
- list:[{
|
|
|
-
|
|
|
- },{
|
|
|
-
|
|
|
- },{
|
|
|
-
|
|
|
- }],
|
|
|
- },{
|
|
|
- type:3,
|
|
|
- list:[{},{}]
|
|
|
+ type: 3,
|
|
|
+ list: [{}, {}]
|
|
|
}
|
|
|
],
|
|
|
- current:0,
|
|
|
- menuList:[]
|
|
|
+ current: 0,
|
|
|
+ vid:'',
|
|
|
};
|
|
|
},
|
|
|
- onUnload() {
|
|
|
-
|
|
|
- },
|
|
|
+ onUnload() {},
|
|
|
computed: { ...mapGetters(['userInfo']) },
|
|
|
onLoad(option) {
|
|
|
- this.courseId = option.id
|
|
|
- this.courseDetail()
|
|
|
- this.getMenuList()
|
|
|
- console.log(this.courseId,66)
|
|
|
+ this.courseId = option.id;
|
|
|
+ this.courseDetail();
|
|
|
+ this.getMenuList();
|
|
|
},
|
|
|
- onShow() {
|
|
|
-
|
|
|
+ onShow() {},
|
|
|
+ mounted() {
|
|
|
+ eventHub.$on('getSection', item => {
|
|
|
+ this.vid = item
|
|
|
+ this.startStatus = true
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
+ startVideo() {
|
|
|
+ this.startStatus = true;
|
|
|
+ },
|
|
|
getMenuList() {
|
|
|
- let self = this
|
|
|
- this.$api.menuList({courseId:this.courseId}).then(res => {
|
|
|
- if(res.data.code==200){
|
|
|
- for(let i=0;i<res.data.rows.length;i++){
|
|
|
- let item = res.data.rows[i]
|
|
|
- item.down = true
|
|
|
- item.id = item.menuId
|
|
|
- item.name = item.menuName
|
|
|
+ let self = this;
|
|
|
+ this.$api.menuList({ courseId: this.courseId }).then(res => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ for (let i = 0; i < res.data.rows.length; i++) {
|
|
|
+ let item = res.data.rows[i];
|
|
|
+ item.down = true;
|
|
|
+ item.id = item.menuId;
|
|
|
+ item.name = item.menuName;
|
|
|
}
|
|
|
- self.menuList = res.data.rows
|
|
|
+ self.menuList = res.data.rows;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
courseDetail() {
|
|
|
- let self = this
|
|
|
+ let self = this;
|
|
|
this.$api.courseDetail(this.courseId).then(res => {
|
|
|
- if(res.data.code==200){
|
|
|
- self.detail = res.data.data
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ self.detail = res.data.data;
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- open(item){
|
|
|
- item.showChildren = !item.showChildren
|
|
|
+ open(item) {
|
|
|
+ item.showChildren = !item.showChildren;
|
|
|
},
|
|
|
- change(index){
|
|
|
+ change(index) {
|
|
|
this.current = index;
|
|
|
}
|
|
|
}
|
|
|
@@ -225,112 +219,112 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scope>
|
|
|
- .chat_box{
|
|
|
- display: flex;
|
|
|
- padding: 20rpx;
|
|
|
- }
|
|
|
- .chat3{
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #666666;
|
|
|
- margin-top: 10rpx;
|
|
|
- }
|
|
|
- .chat2{
|
|
|
- font-size: 20rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- margin-top: 10rpx;
|
|
|
- }
|
|
|
- .chat1{
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .leftPadding{
|
|
|
- margin-left: 8rpx;
|
|
|
- }
|
|
|
- .t2Content{
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #333333;
|
|
|
- line-height: 48rpx;
|
|
|
- }
|
|
|
- .tBox2{
|
|
|
- display: flex;
|
|
|
- padding-top: 10rpx;
|
|
|
- }
|
|
|
- .tBox{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding-top: 10rpx;
|
|
|
- }
|
|
|
- .title{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
-
|
|
|
- page{
|
|
|
- padding-top: 10px;
|
|
|
- padding-top: constant(safe-area-inset-top);
|
|
|
- padding-top: env(safe-area-inset-top);
|
|
|
- }
|
|
|
- .inputBottom{
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- background: #FFFFFF;
|
|
|
- height: 98rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .noteBox{
|
|
|
- width: 100%;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 10rpx;
|
|
|
- }
|
|
|
- .dateBox{
|
|
|
- width: 216rpx;
|
|
|
- height: 48rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 24rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #666666;
|
|
|
- text-align: center;
|
|
|
- line-height: 48rpx;
|
|
|
- margin: 20rpx 0;
|
|
|
- }
|
|
|
- .t_content1{
|
|
|
- color: #007AFF;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- .tag1{
|
|
|
- border: 2rpx solid #007AFF;
|
|
|
- border-radius: 8rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- color: #007AFF;
|
|
|
- padding: 5rpx;
|
|
|
- }
|
|
|
- .b_title{
|
|
|
- color: #333333;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- page {
|
|
|
- background: #EAEEF1;
|
|
|
- }
|
|
|
- .menuBox{
|
|
|
- width: 100%;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 20rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
+.chat_box {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx;
|
|
|
+}
|
|
|
+.chat3 {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+.chat2 {
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+.chat1 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+.leftPadding {
|
|
|
+ margin-left: 8rpx;
|
|
|
+}
|
|
|
+.t2Content {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 48rpx;
|
|
|
+}
|
|
|
+.tBox2 {
|
|
|
+ display: flex;
|
|
|
+ padding-top: 10rpx;
|
|
|
+}
|
|
|
+.tBox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 10rpx;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+
|
|
|
+page {
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-top: constant(safe-area-inset-top);
|
|
|
+ padding-top: env(safe-area-inset-top);
|
|
|
+}
|
|
|
+.inputBottom {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ height: 98rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.noteBox {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+}
|
|
|
+.dateBox {
|
|
|
+ width: 216rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48rpx;
|
|
|
+ margin: 20rpx 0;
|
|
|
+}
|
|
|
+.t_content1 {
|
|
|
+ color: #007aff;
|
|
|
+ margin-left: 10rpx;
|
|
|
+}
|
|
|
+.tag1 {
|
|
|
+ border: 2rpx solid #007aff;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #007aff;
|
|
|
+ padding: 5rpx;
|
|
|
+}
|
|
|
+.b_title {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+page {
|
|
|
+ background: #eaeef1;
|
|
|
+}
|
|
|
+.menuBox {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
.btnspric {
|
|
|
border-top: 1rpx solid #eee;
|
|
|
display: flex;
|
|
|
@@ -621,17 +615,15 @@ export default {
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #333333;
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
-.video_t1_t{
|
|
|
+.video_t1_t {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
height: 80rpx;
|
|
|
color: #333333;
|
|
|
text-align: center;
|
|
|
align-items: center;
|
|
|
- border-left: solid 1px #D6D6DB;
|
|
|
+ border-left: solid 1px #d6d6db;
|
|
|
}
|
|
|
.video_play {
|
|
|
position: absolute;
|
|
|
@@ -649,5 +641,4 @@ export default {
|
|
|
.rotoct {
|
|
|
transform: rotate(90deg);
|
|
|
}
|
|
|
-
|
|
|
</style>
|
