|
|
@@ -0,0 +1,355 @@
|
|
|
+<template>
|
|
|
+ <view class="video-comment-wrap">
|
|
|
+ <view class="flex action-wrap">
|
|
|
+ <view class="item" @click="handleSetLike(1)">
|
|
|
+ <image :src="info.op_type===1?like_act_img:like_img" mode="aspectFill"/>
|
|
|
+ <text>{{info.like_total>0?info.like_total:''}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item" @click="handleSetLike(2)" style="text-align:center">
|
|
|
+ <image :src="info.op_type===2?tease_act_img:tease_img" mode="aspectFill"/>
|
|
|
+ <text>{{info.tease_total>0?info.tease_total:''}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item" @click="showComment" style="text-align:right">
|
|
|
+ <image :src="comment_img" mode="aspectFill"/>
|
|
|
+ <text>{{info.comment_total>0?info.comment_total:''}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-commnet-box" v-if="info.comment_list.length>0">
|
|
|
+ <template class="item" v-for="(item,index) in info.comment_list" >
|
|
|
+ <image class="avatar" :src="item.qa_avatar_url" mode="aspectFill" lazy-load="false" :key="index"/>
|
|
|
+ <text :key="index">{{item.comment}}</text>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 评论弹窗 -->
|
|
|
+ <van-action-sheet
|
|
|
+ :show="isShowComment"
|
|
|
+ title="视频评论"
|
|
|
+ @close="closeCommentHandle"
|
|
|
+ @clickOverlay="isShowComment=false"
|
|
|
+ >
|
|
|
+ <view class="comment-cont" @touchmove.stop>
|
|
|
+ <view class="commment-top">
|
|
|
+ <text class="title">{{comment_obj.title}} {{comment_obj.total}}</text>
|
|
|
+ <view class="comment-top-right">
|
|
|
+ <text :class="select_comment_type === 1 && 'act'" @click="changeCommentTypeHandle(1)">全部</text>
|
|
|
+ <text :class="select_comment_type === 2 && 'act'" @click="changeCommentTypeHandle(2)">我的</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <scroll-view class="comment-list-cont" v-if="comment_obj.total" scroll-y>
|
|
|
+ <view class="comment-list-item" v-for="(item,index) in commentList" :key="item.community_question_comment_id">
|
|
|
+ <view class="flex comment">
|
|
|
+ <image class="avatar" :src="item.qa_avatar_url" mode="aspectFill" lazy-load="true"/>
|
|
|
+ <view style="display:flex;align-items:center">{{item.content}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="del" v-if="select_comment_type === 2" @click="delCommentHandle(item,index)">删除该评论</view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="nodata" v-else>
|
|
|
+ <image src="@/static/nodata.png"></image>
|
|
|
+ <view>暂无评论</view>
|
|
|
+ </view>
|
|
|
+ <view class="write-wrap" :style="{bottom: writeBottom+'px'}">
|
|
|
+ <textarea
|
|
|
+ v-model="comment_cont"
|
|
|
+ placeholder="发布一条友善的评论"
|
|
|
+ auto-height
|
|
|
+ :adjust-position="false"
|
|
|
+ :show-confirm-bar="false"
|
|
|
+ :cursor-spacing="20"
|
|
|
+ class="write-ipt"
|
|
|
+ @blur="setWritePosition(50)"
|
|
|
+ @focus="checkNickHandle"
|
|
|
+ />
|
|
|
+ <view class="confirm-btn" @click="publishMessageHandle">发布</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </van-action-sheet>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {apiSetLike,apiHotComment,apiMyComment,apiPublishComment,apiDelComment} from '@/api/question'
|
|
|
+export default {
|
|
|
+ props:{
|
|
|
+ videoInfo:null
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ info:this.videoInfo,
|
|
|
+ tease_img: require('@/static/question/tease.png'),
|
|
|
+ tease_act_img: require('@/static/question/tease_act.png'),
|
|
|
+ like_img: require('@/static/question/like.png'),
|
|
|
+ like_act_img: require('@/static/question/like_act.png'),
|
|
|
+ comment_img: require('@/static/question/comment.png'),
|
|
|
+
|
|
|
+ isShowComment: false,
|
|
|
+ comment_cont: '',
|
|
|
+ writeBottom: 50,
|
|
|
+ select_comment_type:1,//默认全部
|
|
|
+ comment_obj: {
|
|
|
+ title: '全部评论',
|
|
|
+ total: 0
|
|
|
+ },
|
|
|
+ comment_total: 0,
|
|
|
+ commentList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 关闭评论弹窗 */
|
|
|
+ closeCommentHandle() {
|
|
|
+ this.isShowComment = false;
|
|
|
+ this.comment_cont = '';
|
|
|
+ this.select_comment_type = 1;//默认全部
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 切换评论类型*/
|
|
|
+ changeCommentTypeHandle(type) {
|
|
|
+ if(type === this.select_comment_type) return
|
|
|
+ this.commentList = [];
|
|
|
+ this.select_comment_type = type;
|
|
|
+ this.getComment();
|
|
|
+ },
|
|
|
+
|
|
|
+ showComment(){
|
|
|
+ this.getComment()
|
|
|
+ this.isShowComment=true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取评论
|
|
|
+ async getComment(flag){
|
|
|
+ const params={
|
|
|
+ community_question_id:this.info.community_video_id,
|
|
|
+ curr_page: 1,
|
|
|
+ page_size: 10000,
|
|
|
+ source:2
|
|
|
+ }
|
|
|
+ const { code,data } = this.select_comment_type===1 ? await apiHotComment(params) : await apiMyComment(params);
|
|
|
+ if(code !== 200) return
|
|
|
+ this.commentList = data.list || [];
|
|
|
+ this.comment_obj = {
|
|
|
+ title: this.select_comment_type === 1 ? '全部评论' : '我的评论',
|
|
|
+ total: data.paging.totals
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果flag='refresh' 则获取一次全部留言 更新到列表上面去
|
|
|
+ if(flag==='refresh'){
|
|
|
+ const res=await apiHotComment(params)
|
|
|
+ const arr=res.data.list||[]
|
|
|
+ this.info.comment_list=arr.map(item=>{
|
|
|
+ return {
|
|
|
+ comment:item.content,
|
|
|
+ qa_avatar_url:item.qa_avatar_url
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.info.comment_total=arr.length
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //删除我的评论
|
|
|
+ delCommentHandle({community_question_comment_id},index){
|
|
|
+ wx.showModal({
|
|
|
+ title: "",
|
|
|
+ content: "评论删除后不可恢复，确认删除吗？",
|
|
|
+ confirmColor: "#EE3636",
|
|
|
+ cancelColor: '#333',
|
|
|
+ success: async(res) => {
|
|
|
+ if( res.cancel) return
|
|
|
+ const { code } = await apiDelComment({ community_question_comment_id });
|
|
|
+ if( code !== 200 ) return
|
|
|
+
|
|
|
+ this.commentList.splice(index,1)
|
|
|
+ this.comment_obj.total--
|
|
|
+
|
|
|
+ wx.showToast({title: '删除成功'});
|
|
|
+ this.getComment('refresh')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ setWritePosition(val=50) {
|
|
|
+ console.log(val)
|
|
|
+ this.writeBottom = val < 50 ? 50 : val-8;
|
|
|
+ },
|
|
|
+
|
|
|
+ checkNickHandle(e){
|
|
|
+ this.setWritePosition(e.detail.height);
|
|
|
+ },
|
|
|
+
|
|
|
+ //发布留言
|
|
|
+ async publishMessageHandle(){
|
|
|
+ if(!this.comment_cont) return wx.showToast({title: '请输入留言内容',icon: 'none'})
|
|
|
+ const { code } = await apiPublishComment({
|
|
|
+ content: this.comment_cont,
|
|
|
+ community_question_id: this.info.community_video_id,
|
|
|
+ source:2,
|
|
|
+ })
|
|
|
+ if(code===200){
|
|
|
+ wx.showToast({title: '发布成功'});
|
|
|
+ this.comment_cont = '';
|
|
|
+ this.getComment('refresh')
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //吐槽/点赞
|
|
|
+ async handleSetLike(type){
|
|
|
+ const res=await apiSetLike({
|
|
|
+ community_question_id:this.info.community_video_id,
|
|
|
+ op_type: type,
|
|
|
+ enable: type === 1 ? Number(this.info.op_type!==1) : Number(this.info.op_type!==2),
|
|
|
+ source:2
|
|
|
+ })
|
|
|
+ if(res.code===200){
|
|
|
+ const { enabled,op_type,like_total,tease_total } = res.data;
|
|
|
+ this.info.tease_total = tease_total;
|
|
|
+ this.info.like_total = like_total;
|
|
|
+ this.info.op_type = enabled === 0 ? 0 : op_type ;
|
|
|
+ uni.showToast({
|
|
|
+ title: enabled === 0 ? '取消成功' : op_type=== 1 ? '点赞成功' : '吐槽成功'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.video-comment-wrap{
|
|
|
+ .action-wrap{
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 56rpx;
|
|
|
+ .item{
|
|
|
+ min-width: 80rpx;
|
|
|
+ image{
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.list-commnet-box{
|
|
|
+ margin-top: 34rpx;
|
|
|
+ background-color: #F9F9F9;
|
|
|
+ padding: 20rpx;
|
|
|
+ // .item{
|
|
|
+ color: #666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ .avatar{
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 14rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ vertical-align: middle;
|
|
|
+ line-height: 56rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ // }
|
|
|
+}
|
|
|
+.comment-cont {
|
|
|
+ height: calc(100vh - 250rpx);
|
|
|
+ border-top: 4rpx solid #F4F4F4;
|
|
|
+ position: relative;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ overflow: hidden;
|
|
|
+ .commment-top {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .comment-top-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #F6F6F6;
|
|
|
+ border: 1px solid #F6F6F6;
|
|
|
+ color: #666;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ text {
|
|
|
+ padding: 0 12rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ &.act {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ color: #000;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .comment-list-cont {
|
|
|
+ height: calc(100vh - 550rpx);
|
|
|
+ overflow-y: auto;
|
|
|
+ position: relative;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ .comment-list-item {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .comment {
|
|
|
+ color: #666;
|
|
|
+ .avatar{
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ view{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .del {
|
|
|
+ color: #D80000;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ margin-left: 76rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .write-wrap {
|
|
|
+ padding: 0 24rpx;
|
|
|
+ border-top: 4rpx solid #F4F4F4;
|
|
|
+ position: absolute;
|
|
|
+ // bottom: 50px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 99;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-bottom: calc(5px + constant(safe-area-inset-bottom));
|
|
|
+ padding-bottom: calc(5px + env(safe-area-inset-bottom));
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .write-ipt {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .confirm-btn {
|
|
|
+ width: 100rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ color: #E3B377;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.nodata {
|
|
|
+ text-align: center;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+</style>
|
