|
|
@@ -0,0 +1,312 @@
|
|
|
+<script setup>
|
|
|
+import likeIcon from '@/assets/question/like.png'
|
|
|
+import likeactIcon from '@/assets/question/like_act.png'
|
|
|
+import teaseIcon from '@/assets/question/tease.png'
|
|
|
+import teaseactIcon from '@/assets/question/tease_act.png'
|
|
|
+
|
|
|
+import {reactive,ref} from 'vue'
|
|
|
+import {apiSetLike,apiHotComment,apiMyComment,apiPublishComment,apiDelComment} from '@/api/question'
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
+
|
|
|
+const props=defineProps({
|
|
|
+ videoInfo:null
|
|
|
+})
|
|
|
+
|
|
|
+let info=ref(props.videoInfo)
|
|
|
+
|
|
|
+//点赞\吐槽
|
|
|
+const handleSetLike=async (type)=>{
|
|
|
+ const res=await apiSetLike({
|
|
|
+ community_question_id:info.value.community_video_id,
|
|
|
+ op_type: type,
|
|
|
+ enable: type === 1 ? Number(info.value.op_type!==1) : Number(info.value.op_type!==2),
|
|
|
+ source:2
|
|
|
+ })
|
|
|
+ if(res.code===200){
|
|
|
+ const { enabled,op_type,like_total,tease_total } = res.data;
|
|
|
+ info.value.tease_total = tease_total;
|
|
|
+ info.value.like_total = like_total;
|
|
|
+ info.value.op_type = enabled === 0 ? 0 : op_type ;
|
|
|
+ ElMessage({
|
|
|
+ message: enabled === 0 ? '取消成功' : op_type=== 1 ? '点赞成功' : '吐槽成功',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+let popData=reactive({
|
|
|
+ show:false,
|
|
|
+ msg:'',
|
|
|
+ list:[],
|
|
|
+ select_comment_type:1,
|
|
|
+ total:0,
|
|
|
+ myTotal:0,
|
|
|
+})
|
|
|
+//点击显示评论弹窗
|
|
|
+const handleShowPop=()=>{
|
|
|
+ popData.show=true
|
|
|
+ popData.select_comment_type=1
|
|
|
+ popData.msg=''
|
|
|
+ getComment()
|
|
|
+}
|
|
|
+
|
|
|
+//获取评论
|
|
|
+const getComment=async (flag)=>{
|
|
|
+ const params={
|
|
|
+ community_question_id:info.value.community_video_id,
|
|
|
+ curr_page: 1,
|
|
|
+ page_size: 10000,
|
|
|
+ source:2
|
|
|
+ }
|
|
|
+ const { code,data } = popData.select_comment_type===1 ? await apiHotComment(params) : await apiMyComment(params);
|
|
|
+ if(code !== 200) return
|
|
|
+ popData.list = data.list || [];
|
|
|
+ popData.total=data.hot_total
|
|
|
+ popData.myTotal=data.my_total
|
|
|
+
|
|
|
+ // 如果flag='refresh' 则获取一次全部留言 更新到列表上面去
|
|
|
+ if(flag==='refresh'){
|
|
|
+ let res={
|
|
|
+ data:{}
|
|
|
+ }
|
|
|
+ if(popData.select_comment_type===1){
|
|
|
+ res.data=data
|
|
|
+ }else{
|
|
|
+ res=await apiHotComment(params)
|
|
|
+ }
|
|
|
+ const arr=res.data.list||[]
|
|
|
+ info.value.comment_list=arr.map(item=>{
|
|
|
+ return {
|
|
|
+ comment:item.content,
|
|
|
+ qa_avatar_url:item.qa_avatar_url
|
|
|
+ }
|
|
|
+ })
|
|
|
+ info.value.comment_total=arr.length
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//切换评论类型
|
|
|
+const handleChangeCommentType=(type)=>{
|
|
|
+ popData.select_comment_type=type
|
|
|
+ getComment()
|
|
|
+}
|
|
|
+
|
|
|
+// 发布评论
|
|
|
+const handlePublish=async ()=>{
|
|
|
+ if(!popData.msg){
|
|
|
+ ElMessage({
|
|
|
+ message: '请输入留言内容',
|
|
|
+ type: 'warning',
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ const { code } = await apiPublishComment({
|
|
|
+ content: popData.msg,
|
|
|
+ community_question_id: info.value.community_video_id,
|
|
|
+ source:2,
|
|
|
+ })
|
|
|
+ if(code===200){
|
|
|
+ ElMessage({
|
|
|
+ message: '发布成功',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ popData.msg=''
|
|
|
+ getComment('refresh')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//删除评论
|
|
|
+const handleDelMyComment=(item)=>{
|
|
|
+ ElMessageBox({
|
|
|
+ title:`温馨提示`,
|
|
|
+ message:'评论删除后不可恢复，确认删除吗？',
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ center: true,
|
|
|
+ confirmButtonText:'确定',
|
|
|
+ confirmButtonClass:'self-elmessage-confirm-btn',
|
|
|
+ showCancelButton:true,
|
|
|
+ cancelButtonText:'取消',
|
|
|
+ cancelButtonClass:'self-elmessage-cancel-btn'
|
|
|
+ }).then(res=>{
|
|
|
+ apiDelComment({ community_question_comment_id:item.community_question_comment_id}).then(res=>{
|
|
|
+ if(res.code===200){
|
|
|
+ ElMessage({
|
|
|
+ message: '删除成功',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ getComment('refresh')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }).catch(()=>{})
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="video-comment-wrap">
|
|
|
+ <div class="flex action-wrap">
|
|
|
+ <div class="item" @click="handleSetLike(1)">
|
|
|
+ <img :src="info.op_type===1?likeactIcon:likeIcon" alt="">
|
|
|
+ <span>{{info.like_total>0?info.like_total:''}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item" @click="handleSetLike(2)">
|
|
|
+ <img :src="info.op_type===2?teaseactIcon:teaseIcon" alt="">
|
|
|
+ <span>{{info.tease_total>0?info.tease_total:''}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item" @click="handleShowPop">
|
|
|
+ <img src="@/assets/question/comment.png" alt="">
|
|
|
+ <span>{{info.comment_total>0?info.comment_total:''}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list-comment-wrap" v-if="info.comment_list.length>0">
|
|
|
+ <template v-for="(item,index) in info.comment_list" :key="index">
|
|
|
+ <img class="avatar" :src="item.qa_avatar_url" mode="aspectFill" lazy-load="false" />
|
|
|
+ <span>{{item.comment}}</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ v-model="popData.show"
|
|
|
+ width="50%"
|
|
|
+ title="评论"
|
|
|
+ draggable
|
|
|
+ >
|
|
|
+ <div class="write-wrap">
|
|
|
+ <el-input
|
|
|
+ v-model="popData.msg"
|
|
|
+ :rows="6"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="发布一条友善的评论"
|
|
|
+ />
|
|
|
+ <div class="clear-float" style="margin-top:20px">
|
|
|
+ <el-button type="info" text @click="popData.show=false">取消发布</el-button>
|
|
|
+ <div class="global-main-btn" style="float:right;width:140px" @click="handlePublish">发布</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="all-commnet-list-wrap">
|
|
|
+ <div class="type-box">
|
|
|
+ <span :class="popData.select_comment_type==1?'act':''" @click="handleChangeCommentType(1)">全部评论<span v-if="popData.total>0">（{{popData.total}}）</span></span>
|
|
|
+ <span :class="popData.select_comment_type==2?'act':''" @click="handleChangeCommentType(2)">我的评论<span v-if="popData.myTotal>0">（{{popData.myTotal}}）</span></span>
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li class="item" v-for="item in popData.list" :key="item.community_question_comment_id">
|
|
|
+ <div class="flex" style="align-items: center;">
|
|
|
+ <img :src="item.qa_avatar_url" alt="">
|
|
|
+ <div class="flex con">{{item.content}}</div>
|
|
|
+ </div>
|
|
|
+ <span class="del-btn" v-if="popData.select_comment_type==2" @click="handleDelMyComment(item)">删除</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="empty-box" v-if="popData.list.length==0">
|
|
|
+ <img :src="$store.state.globalImgUrls.chartEmpty" alt="">
|
|
|
+ <p>暂无评论</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.video-comment-wrap{
|
|
|
+ ::v-deep(.el-dialog__header){
|
|
|
+ border-bottom: 1px solid #E9E9E9;
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ ::v-deep(.el-dialog__body){
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ margin-top: 20px;
|
|
|
+ .action-wrap{
|
|
|
+ justify-content: space-between;
|
|
|
+ .item{
|
|
|
+ cursor: pointer;
|
|
|
+ img{
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #999;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-comment-wrap{
|
|
|
+ margin-top: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #666;
|
|
|
+ .avatar{
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ object-fit: cover;
|
|
|
+ margin-right: 8px;
|
|
|
+ vertical-align: middle;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .write-wrap{
|
|
|
+ padding: 30px;
|
|
|
+ border-bottom: 1px solid #E9E9E9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .all-commnet-list-wrap{
|
|
|
+ max-height: 40vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 30px;
|
|
|
+ .type-box{
|
|
|
+ span{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #999;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .act{
|
|
|
+ font-size: 18px;
|
|
|
+ color: #F3A52F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+
|
|
|
+ margin-bottom: 14px;
|
|
|
+ img{
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ object-fit: cover;
|
|
|
+ margin-right: 8px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .con{
|
|
|
+ align-items: center;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .del-btn{
|
|
|
+ color: #D63535;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 37px;
|
|
|
+ margin-top: 5px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .empty-box{
|
|
|
+ text-align: center;
|
|
|
+ color: #666;
|
|
|
+ img{
|
|
|
+ width: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
