|
|
@@ -30,7 +30,28 @@
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="time">
|
|
|
- {{ pz.time }}
|
|
|
+ <div>{{ pz.time }}</div>
|
|
|
+ <div @click="addHf(pz)">回复</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 回复区域 -->
|
|
|
+ <div v-for="(rep, repIndex) in replyList" :key="rep.id">
|
|
|
+ <div v-if="rep.pid == pz.id" class="replyCss">
|
|
|
+ <div class="replyTop">
|
|
|
+ <div>{{ rep.username }} <van-icon name="play" /> {{ pz.username }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="pzContent cont navAndImg" @click="checkImg(getImgList(rep.content))" v-html="rep.content"></div>
|
|
|
+ <div class="time" style="padding: 0 0 10px 0;">
|
|
|
+ <div>{{ rep.time }}</div>
|
|
|
+ <div class="pzDelete" @click="deletePz(rep.id)" v-if="rep.userid == userId">
|
|
|
+ <img
|
|
|
+ style="height: 20px;"
|
|
|
+ src="https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/删除1716449608309.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -38,9 +59,21 @@
|
|
|
<img src="@/assets/images/course/noPz.png" alt="" />
|
|
|
</div>
|
|
|
|
|
|
- <!-- <div class="commentInput" @click="setPanelVisible(true)">
|
|
|
- <div class="input">点击发一条评课内容</div>
|
|
|
- </div> -->
|
|
|
+ <!-- 回复弹出框 -->
|
|
|
+ <van-popup v-model="show" @close="closeRep" closeable round class="repPopup">
|
|
|
+ <div style="font-size: 18px;">回复</div>
|
|
|
+ <div class="cp-box">
|
|
|
+ <div class="cp-conent">
|
|
|
+ <!-- <div style="height: 120px;"> -->
|
|
|
+ <van-field v-model="repText" rows="5" type="textarea" placeholder="请输入..." />
|
|
|
+ <!-- </div> -->
|
|
|
+ <div style="margin-top: 10px;">
|
|
|
+ <image-component @getImage="getImage" :imgList.sync="imgList"></image-component>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-button size="small" type="info" @click="repAddHf">确定</van-button>
|
|
|
+ </van-popup>
|
|
|
<commentPanel
|
|
|
@setPanelVisible="setPanelVisible"
|
|
|
:panelVisible="panelVisible"
|
|
|
@@ -52,8 +85,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import ImageComponent from './ImageComponent.vue'
|
|
|
+import AudioComponent from './AudioComponent.vue'
|
|
|
import commentPanel from './commentPanel.vue'
|
|
|
-import { getCoursePz, deletePz } from '@/api/course'
|
|
|
+import { getCoursePz, deletePz, repHf } from '@/api/course'
|
|
|
import { mapGetters } from 'vuex'
|
|
|
export default {
|
|
|
props: {
|
|
|
@@ -64,6 +99,9 @@ export default {
|
|
|
panelVisible: {
|
|
|
type: Boolean
|
|
|
},
|
|
|
+ repCon: {
|
|
|
+ type: Boolean
|
|
|
+ },
|
|
|
courseType: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
@@ -74,11 +112,20 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
|
- commentPanel
|
|
|
+ commentPanel,
|
|
|
+ AudioComponent,
|
|
|
+ ImageComponent
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- pzList: []
|
|
|
+ pzList: [],
|
|
|
+ replyList: [],
|
|
|
+ show: false,
|
|
|
+ repText: '',
|
|
|
+ info: [],
|
|
|
+ userId: this.$store.state.user.userinfo.userid,
|
|
|
+ type: 1,
|
|
|
+ imgList: []
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -104,9 +151,70 @@ export default {
|
|
|
},
|
|
|
panelVisible(newValue, oldValue) {
|
|
|
this.getData()
|
|
|
+ },
|
|
|
+ show(newValue, oldValue) {
|
|
|
+ this.$emit('update:repCon', newValue)
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ closeRep() {
|
|
|
+ this.repText = ''
|
|
|
+ this.imgList = []
|
|
|
+ },
|
|
|
+ // setType(type) {
|
|
|
+ // this.type = type
|
|
|
+ // },
|
|
|
+ getImage(imgList) {
|
|
|
+ this.imgList = imgList
|
|
|
+ this.$forceUpdate()
|
|
|
+ },
|
|
|
+ repAddHf() {
|
|
|
+ let a = ''
|
|
|
+ if (this.repText == '' && this.imgList.length == 0) {
|
|
|
+ this.$message.error('回复不能为空！')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.imgList.length) {
|
|
|
+ var img = ''
|
|
|
+ for (var i = 0; i < this.imgList.length; i++) {
|
|
|
+ img += "<img src='" + this.imgList[i] + "' />"
|
|
|
+ }
|
|
|
+ a = this.repText.replaceAll(/%/g, '%25') + img
|
|
|
+ // console.log('a', a)
|
|
|
+ }
|
|
|
+ // return
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ cid: this.info.courseId,
|
|
|
+ uid: this.userId,
|
|
|
+ s: this.info.stage, //阶段
|
|
|
+ t: this.info.task, //任务
|
|
|
+ type: '1', //1文本 2录音 3 图片
|
|
|
+ ct: 2, //1批注2评论
|
|
|
+ pid: this.info.id, //回复的哪条评论的id
|
|
|
+ c: !!a ? a : this.repText //回复内容
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ // return console.log('params', params)
|
|
|
+ repHf(params)
|
|
|
+ .then(res => {
|
|
|
+ console.log('发评论', res)
|
|
|
+ this.show = false
|
|
|
+ this.repText = ''
|
|
|
+ this.imgList = []
|
|
|
+ this.getData()
|
|
|
+ // this.pzList = res[0]
|
|
|
+ // this.replyList = res[1]
|
|
|
+ // console.log(' this.pzList', res)
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addHf(val) {
|
|
|
+ this.show = true
|
|
|
+ this.info = val
|
|
|
+ },
|
|
|
setPanelVisible(bool) {
|
|
|
this.$emit('update:panelVisible', bool)
|
|
|
},
|
|
|
@@ -156,12 +264,14 @@ export default {
|
|
|
getData() {
|
|
|
const params = {
|
|
|
cid: this.courseid,
|
|
|
- s: this.courseType,
|
|
|
- t: this.taskCount
|
|
|
+ s: this.courseType, //阶段
|
|
|
+ t: this.taskCount //任务
|
|
|
}
|
|
|
getCoursePz(params)
|
|
|
.then(res => {
|
|
|
this.pzList = res[0]
|
|
|
+ this.replyList = res[1]
|
|
|
+ console.log(' this.pzList', res)
|
|
|
})
|
|
|
.catch(err => {
|
|
|
console.log(err)
|
|
|
@@ -178,6 +288,82 @@ export default {
|
|
|
.cb-container {
|
|
|
width: 100%;
|
|
|
padding-bottom: 1.6rem;
|
|
|
+ .cp-box {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 1.5rem);
|
|
|
+ /deep/ .van-cell {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ .type-nav {
|
|
|
+ height: 60px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 0.3rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .type-nav-box {
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0.5;
|
|
|
+ transition: all 0.5s;
|
|
|
+
|
|
|
+ + .type-nav-box {
|
|
|
+ margin-left: 0.3rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ > img {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cp-conent {
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ overflow: auto;
|
|
|
+ font-size: 14px;
|
|
|
+ width: 100%;
|
|
|
+ // /deep/ .van-field__control {
|
|
|
+ // // height: 60px !important;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .cp-audio {
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .replyCss {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 16px;
|
|
|
+ min-height: 100px;
|
|
|
+ .replyTop {
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .replyCon {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .repPopup {
|
|
|
+ width: 60%;
|
|
|
+ padding: 20px;
|
|
|
+ padding-top: 15px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ /deep/ .van-overlay {
|
|
|
+ z-index: 20 !important;
|
|
|
+ }
|
|
|
.commentInput {
|
|
|
background: #fff;
|
|
|
box-shadow: 0 -1px 3px 1px #dedede82;
|
|
|
@@ -271,7 +457,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
/deep/.navAndImg img {
|
|
|
- width: 100%;
|
|
|
+ min-width: auto;
|
|
|
+ max-width: 60%;
|
|
|
}
|
|
|
|
|
|
.pzContent audio {
|
|
|
@@ -304,9 +491,13 @@ export default {
|
|
|
.pzList .time {
|
|
|
text-align: right;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 0 10px 10px 0px;
|
|
|
+ padding: 0 10px 10px 10px;
|
|
|
color: #949494;
|
|
|
font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 1px #ccc solid;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
11wqe1