|
|
@@ -1,60 +1,74 @@
|
|
|
<template>
|
|
|
- <div class="i_body_box">
|
|
|
+ <div class="i_body_box" v-loading="isLoading">
|
|
|
<div class="i_header">
|
|
|
<div class="i_header_box">
|
|
|
<div class="i_header_span">
|
|
|
- <span>25</span>
|
|
|
+ <span>{{ count1 }}</span>
|
|
|
<span>节</span>
|
|
|
</div>
|
|
|
<div class="i_header_content">评论课程数</div>
|
|
|
</div>
|
|
|
<div class="i_header_box">
|
|
|
<div class="i_header_span">
|
|
|
- <span>25</span>
|
|
|
+ <span>{{ count2 }}</span>
|
|
|
<span>条</span>
|
|
|
</div>
|
|
|
<div class="i_header_content">评论总数</div>
|
|
|
</div>
|
|
|
<div class="i_header_box">
|
|
|
<div class="i_header_span">
|
|
|
- <span>25</span>
|
|
|
+ <span>{{ count3 }}</span>
|
|
|
<span>字</span>
|
|
|
</div>
|
|
|
<div class="i_header_content">评论总字数</div>
|
|
|
</div>
|
|
|
<div class="i_header_box">
|
|
|
<div class="i_header_span">
|
|
|
- <span>25</span>
|
|
|
+ <span>{{ count4 }}</span>
|
|
|
<span>条</span>
|
|
|
</div>
|
|
|
<div class="i_header_content">评论录音数</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="i_body">
|
|
|
- <div class="i_course_box">
|
|
|
+ <div style="text-align: center;" v-if="!courseArray.length">暂无数据</div>
|
|
|
+ <div class="i_course_box" v-for="(item, index) in courseArray" :key="index">
|
|
|
<div class="i_course_header">
|
|
|
- <span :class="{ active: bool }" @click="bool = !bool"></span>
|
|
|
- <span>课程名称</span>
|
|
|
- <span>课程创建者</span>
|
|
|
- <span>课程分类</span>
|
|
|
+ <span :class="{ active: item.bool }" @click="checkBool(index)"></span>
|
|
|
+ <el-tooltip :content="item.title" placement="top" effect="dark">
|
|
|
+ <span>{{ item.title }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="item.name" placement="top" effect="dark">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip :content="item.type" placement="top" effect="dark">
|
|
|
+ <span>{{ item.type }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ <span style="margin-left: auto;text-align: right;" v-show="!item.bool">{{ item.array[0].time }}</span>
|
|
|
</div>
|
|
|
- <div class="i_course_content" v-show="bool">
|
|
|
- <div class="i_course_c_box">
|
|
|
- <div class="i_course_c_img"></div>
|
|
|
- <div class="i_course_c_body"></div>
|
|
|
+ <div class="i_course_content" v-show="item.bool">
|
|
|
+ <div class="i_course_c_box" v-for="(item2, index2) in item.array" :key="`${index}-${index2}`">
|
|
|
+ <div class="i_course_c_img" :class="{ hf: item2.ctype == 2, pl: item2.ctype == 1 }"></div>
|
|
|
+ <div class="i_course_c_body cont" @click="checkImg(getImgList(item2.content))" v-if="item2.type == 1"
|
|
|
+ v-html="item2.content"></div>
|
|
|
+ <div class="i_course_c_body" v-if="item2.type == 2">
|
|
|
+ <audio :src="item2.content" controls="controls" ref="audio" class="pzAudioClass">
|
|
|
+ Your browser does not support the audio element.
|
|
|
+ </audio>
|
|
|
+ </div>
|
|
|
<div class="i_course_c_type">
|
|
|
- <span>2023.11.12 17.09</span>
|
|
|
- <span>发表个人评论</span>
|
|
|
+ <span>{{ item2.time }}</span>
|
|
|
+ <span>{{ item2.ctype == 2 ? `回复了${item2.hfPerson}` : "发表个人评论" }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="i_course_c_box">
|
|
|
+ <!-- <div class="i_course_c_box">
|
|
|
<div class="i_course_c_img"></div>
|
|
|
<div class="i_course_c_body"></div>
|
|
|
<div class="i_course_c_type">
|
|
|
<span>2023.11.12 17.09</span>
|
|
|
<span>回复了刘雨桐</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -73,9 +87,98 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- bool: false
|
|
|
+ bool: false,
|
|
|
+ isLoading: false,
|
|
|
+ count1: 0,
|
|
|
+ count2: 0,
|
|
|
+ count3: 0,
|
|
|
+ count4: 0,
|
|
|
+ courseArray: []
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ getImgList() {
|
|
|
+ return function (val) {
|
|
|
+ let srcList = []; // 定义一个数组用来接收后面的img地址
|
|
|
+
|
|
|
+ val.replace(
|
|
|
+ /<img [^>]*src=['"]([^'"]+)[^>]*>/g,
|
|
|
+ function (match, capture) {
|
|
|
+ // 查找匹配的元素 match为整个img标签 capture为src中的内容
|
|
|
+ srcList.push(capture);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ return srcList;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ this.isLoading = true
|
|
|
+ let params = {
|
|
|
+ uid: this.userid,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectPostilByUid", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.isLoading = false
|
|
|
+ let array = res.data[0]
|
|
|
+ let countCourse = []
|
|
|
+ let wordCount = 0
|
|
|
+ let audioCount = 0
|
|
|
+ let courseArray = {}
|
|
|
+ array.forEach(element => {
|
|
|
+ if (!courseArray[element.courseId]) {
|
|
|
+ courseArray[element.courseId] = {
|
|
|
+ bool: false,
|
|
|
+ title: element.title,
|
|
|
+ type: element.type2,
|
|
|
+ name: element.creator,
|
|
|
+ array: []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ courseArray[element.courseId].array.push(element)
|
|
|
+ if (countCourse.indexOf(element.courseId) == -1) {
|
|
|
+ countCourse.push(element.courseId)
|
|
|
+ }
|
|
|
+ if (element.type == 1) {
|
|
|
+ wordCount += element.content.replace(/<[^>]+>/g, '').length;
|
|
|
+ }
|
|
|
+ if (element.type == 2) {
|
|
|
+ audioCount++
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.count1 = countCourse.length
|
|
|
+ this.count2 = array.length
|
|
|
+
|
|
|
+ this.count3 = wordCount
|
|
|
+ this.count4 = audioCount
|
|
|
+ this.courseArray = Object.values(courseArray)
|
|
|
+ console.log(courseArray);
|
|
|
+ console.log(this.courseArray);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.isLoading = false
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ checkBool(index) {
|
|
|
+ this.courseArray[index].bool = !this.courseArray[index].bool
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ checkImg(list) {
|
|
|
+ if (!list.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$hevueImgPreview({
|
|
|
+ multiple: true, // 开启多图预览模式
|
|
|
+ imgList: list, // 需要预览的多图数组
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -132,6 +235,7 @@ export default {
|
|
|
.i_body {
|
|
|
margin-top: 20px;
|
|
|
width: 100%;
|
|
|
+ padding-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.i_course_box {
|
|
|
@@ -142,6 +246,10 @@ export default {
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
+.i_course_box+.i_course_box {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
.i_course_header {
|
|
|
height: 50px;
|
|
|
display: flex;
|
|
|
@@ -152,6 +260,10 @@ export default {
|
|
|
|
|
|
.i_course_header>span {
|
|
|
margin: 0 20px 0 0;
|
|
|
+ width: 220px;
|
|
|
+ word-break: break-all;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.i_course_header>span:nth-child(1) {
|
|
|
@@ -190,10 +302,30 @@ export default {
|
|
|
width: 40px;
|
|
|
background: #3760af;
|
|
|
border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.i_course_c_img.hf::before,
|
|
|
+.i_course_c_img.pl::before {
|
|
|
+ content: '';
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.i_course_c_img.hf::before {
|
|
|
+ background-image: url(../../../../assets/icon/new/test_hf.png);
|
|
|
+}
|
|
|
+
|
|
|
+.i_course_c_img.pl::before {
|
|
|
+ background-image: url(../../../../assets/icon/new/test_pl.png);
|
|
|
}
|
|
|
|
|
|
.i_course_c_body {
|
|
|
- width: calc(100% - 40px - 120px - 20px);
|
|
|
+ width: calc(100% - 40px - 140px - 20px);
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
|
|
|
@@ -202,7 +334,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
align-items: flex-end;
|
|
|
height: 40px;
|
|
|
- width: 120px;
|
|
|
+ width: 140px;
|
|
|
font-size: 14px;
|
|
|
justify-content: space-between;
|
|
|
color: #7d7d7d;
|
|
|
@@ -214,4 +346,74 @@ export default {
|
|
|
word-break: break-all;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
-}</style>
|
|
|
+}
|
|
|
+
|
|
|
+.pzAudioClass {
|
|
|
+ /* margin: 15px 14px; */
|
|
|
+ background: #fff;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* table 样式 */
|
|
|
+.cont>>>table {
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ border-left: 1px solid #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+.cont>>>table td,
|
|
|
+.cont>>>table th {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ border-right: 1px solid #ccc;
|
|
|
+ /* padding: 20px 5px; */
|
|
|
+ padding: 5px 10px;
|
|
|
+ max-width: 0px;
|
|
|
+ height: 30px;
|
|
|
+ vertical-align: baseline;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.cont>>>table th {
|
|
|
+ border-bottom: 2px solid #ccc;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* blockquote 样式 */
|
|
|
+.cont>>>blockquote {
|
|
|
+ display: block;
|
|
|
+ border-left: 8px solid #d0e5f2;
|
|
|
+ padding: 5px 10px;
|
|
|
+ margin: 10px 0;
|
|
|
+ line-height: 1.4;
|
|
|
+ font-size: 100%;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+}
|
|
|
+
|
|
|
+/* code 样式 */
|
|
|
+.cont>>>code {
|
|
|
+ display: inline-block;
|
|
|
+ /* *display: inline; */
|
|
|
+ zoom: 1;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 3px 5px;
|
|
|
+ margin: 0 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.cont>>>pre code {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+/* ul ol 样式 */
|
|
|
+.cont>>>ul,
|
|
|
+ol {
|
|
|
+ margin: 10px 0 10px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.i_course_c_body>>>img {
|
|
|
+ max-width: 100%;
|
|
|
+}
|
|
|
+</style>
|
