hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-16 22:36:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

我都笔记组件提取

Browse Source
This commit is contained in:
zhaofang
2022-09-07 19:32:21 +08:00
parent 8d7e9d98d7
commit ae4dc87f21
7 changed files with 287 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
src/components/Course/myNote.vue Normal file
View File

@@ -0,0 +1,234 @@
<template>
<div class="my-note">
<div class="mynote">
<div class="mynote-tab">
<div @click="notetabType(1)" :class="notetab == 1 ? 'noteactive' : ' ' "> <a href="#">新增笔记</a> </div>
<div @click="notetabType(2)" :class="notetab == 2 ? 'noteactive' : ' '"> <a href="#">我的笔记</a> </div>
</div>
<!-- 新增笔记 -->
<div class="newcote-content" v-if="notetab == 1">
<div class="newcote-time" v-if="mynoteData.playTime != 0">
<img src="../../../public/images/coteplay.png" alt="">
8:40
<img src="../../../public/images/cotedetel.png" alt="">
</div>
<div class="newcote-text">
<el-input
type="textarea"
placeholder="好记性不如烂笔头，记录些什么吧～"
v-model="mynoteData.content"
maxlength="200"
:autosize="{ minRows: 4, maxRows: 8}"
show-word-limit>
</el-input>
</div>
</div>
<!-- 我的笔记 -->
<div class="mycote-content" v-if="notetab == 2">
<div v-if="noteList.length > 0">
<div style="border-bottom:1px solid #4444;padding-bottom:25px;" >
<span class="mycote-time">2022-06-21 21:35:12 <span class="sm">私密</span> <span class="more" icon="el-icon-more"></span> </span>
<div style="margin-top:20px" class="newcote-time">
<img src="../../../public/images/coteplay.png" alt="">
8:40
<img src="../../../public/images/cotedetel.png" alt="">
</div>
<div class="newcote-text">
在做策略写方案的时候，都经常错套。都要照着这个理论的要求来实施营销传播，写PPT时也要照着这个理论的框架来写。
我见划公司的，在做策略写方案的时候，都经常不管是什么行业、企业处在什么来实施营销传播，写PPT时也要照着这个理论的框架来写。
</div>
</div>
<h6 class="mycote-dibu">已经到底啦</h6>
</div>
<div class="my-nonote" v-else>
<img src="../../../public/images/no-note.png" alt=""/>
<h6 style="color: #666666;font-size: 14px;">你还没有记录此课程的笔记哦～</h6>
</div>
</div>
<div class="newcote-bottom" v-if="notetab == 1">
<span style="cursor: pointer;" @click="videoLocation"> <img src="../../../public/images/playtime.png" alt=""> 视频位置</span>
<el-radio v-model="mynoteData.openType" :label="1">公开</el-radio>
<el-radio v-model="mynoteData.openType" :label="2">私密</el-radio>
<el-button type="primary" size="small" :disabled="mynoteData.content == ''" @click="saveNote()">保存</el-button>
</div>
</div>
</div>
</template>
<script>
import apiNote from '@/api/modules/note.js';
import { mapGetters } from 'vuex';
import {formatDate,formatSeconds} from '@/utils/datetime.js';
import {testType,correctJudgment,numberToLetter} from '@/utils/tools.js';
export default {
props:{
data: {
type: Object,
default:()=>{}
},
},
name:'MyNote',
data() {
return {
radio:'1',
notetab:1,
mynoteData:{
type:1, //我发布的是1 我导入的是2
content:'',
playTime:'',
courseId:'',// 课程id
contentId:'',//课程内容id
courseName:'',// 课程名称
openType:1,// 1表不公开 9表完全公开
},
noteList:[],
};
},
computed: {
...mapGetters(['intTimeNote','userInfo']),
},
mounted() {
this.mynoteData.courseId = this.data.courseId;
this.mynoteData.contentId = this.data.id;
this.getMyNote();
},
watch:{
intTimeNote(val) {
this.mynoteData.playTime = val;
}
},
methods: {
getMyNote() {
apiNote.myCourse(this.mynoteData.courseId).then(res=>{
if(res.status == 200) {
}
})
},
videoLocation() {
this.$emit('videoLocation');
},
notetabType(num) {
this.notetab = num;
},
saveNote() {
apiNote.save(this.mynoteData).then(res=>{
})
}
}
}
</script>
<style scoped lang="scss">
.mynote{
// width: 100%;
margin: 35px 30px;
.newcote-time{
width: 120px;
height: 30px;
border-radius: 4px;
border: 1px solid #3379FB;
font-size: 14px;
font-weight: 400;
color: #387DF7;;
text-align: center;
line-height: 28px;
margin-bottom: 24px;
img{
vertical-align: middle;
margin: 0 5px;
}
}
.newcote-bottom{
span{
font-size: 14px;
color: #333333;
margin-right: 30px;
img{
width: 20px;
height: 24px;
vertical-align: middle;
}
}
}
.newcote-text{
// margin-top: 24px;
font-size: 14px;
color: #333333;
height: 100%;
::v-deep .el-textarea__inner{
background: #f5f5f5;
border: none;
padding: 0;
}
}
.newcote-content{
margin: 30px 0px;
box-sizing: border-box;
padding: 35px 30px;
height: 474px;
background-color: #F5F5F5 ;
}
.mycote-content{
margin: 30px 0px;
box-sizing: border-box;
padding: 35px 30px;
height: 474px;
background-color: #fff;
.my-nonote{
text-align: center;
margin-top: 100px;
img{
width: 198px;
height: 163px;
}
}
.mycote-time{
color: #666;
font-size: 14px;
padding-bottom: 20px;
.sm{
width: 50px;
height: 22px;
border-radius: 10px;
border: 1px solid #3379FB;
color: #3379FB;
font-size: 12px;
line-height: 50px;
margin-left: 20px;
padding: 3px 10px;
}
}
.mycote-dibu{
margin: 50px 38%;
color: #999999;
font-size: 14px;
}
}
.mynote-tab{
width: 180px;
margin-top: 17px;
display: flex;
div{
font-size: 16px;
color: #666666;
flex: 1;
}
.noteactive a{
font-weight: 600;
color: #333333;
padding-bottom: 7px;
border-bottom: 4px solid #387DF7;
}
}
}
</style>