crm-xcx/pages-video/comment/list.vue

<template>
    <view class="video-comment-list-page">
        <van-sticky v-if="!id">
            <view @click="goSearch">
                <van-search :value="key_word" shape="round" placeholder="评论内容" disabled />
            </view>
            <view class="tabs-box">
                <text :class="source===3?'active':''" @click="handleTypeChange(3)">线上路演</text>
                <text :class="source===2?'active':''" @click="handleTypeChange(2)">视频社区</text>
            </view>
        </van-sticky>
        <view class="list-wrap">
            <view class="question-item" v-for="(item,index) in list" :key="item.CommunityQuestionCommentId">
                <view class="cont">
                    <veiw class="item-title">{{item.Content}}</veiw>
                    <view class="row">视频分类：{{source===3?'线上路演':'视频社区'}}</view>
                    <view class="row">视频标题：{{item.QuestionContent}}</view>
                    <view class="row">所属{{source===3?'品种':'标签'}}：{{item.TagName}}</view>
                    <view class="row">评论人：{{item.UserName}}</view>
                    <view class="row">客户信息：{{item.CompanyName}} <text v-if="item.CompanyProductStatus">({{item.CompanyProductStatus}})</text> </view>
                    <view class="row">评论时间：{{item.CreateTime | formatTime}}</view>
                </view>
                <view class="action-bot flex">
                    <text class="red-color" @click="delHandle(item,index)">删除</text>
                </view>
            </view>
        </view>
        <van-empty description="暂无数据" :image="require('@/static/empty.png')" v-if="finished&&list.length===0"/>
    </view>
</template>

<script>
import {apiCommentList,apiDelComment} from '@/api/question/index'
export default {
    data() {
        return {
            id:0,
            key_word:'',
            page:1,
            pageSize:20,
            list:[],
            finished:false,
            source:3
        }
    },
    onLoad(options){
        this.id=options.id||0
        this.source=Number(options.source)||3
        this.getList()

        // 搜索返回 
         uni.$on('videoCommentUpdate',({key_word})=>{
            this.key_word = key_word;
            this.page = 1;
            this.list=[]
            this.finished=false
            this.getList()
         })
    },
    onUnload() {
         uni.$off('videoCommentUpdate')
    },
    onPullDownRefresh() {
      	this.page=1
      	this.finished=false
      	this.list=[]
        this.key_word = ''
      	this.getList()
      	setTimeout(()=>{
      		uni.stopPullDownRefresh()
      	},1500)
    },
    onReachBottom() {
      	if(this.finished) return
      	this.page++
      	this.getList()
    },
    methods: {
        async getList(){
            const res=await apiCommentList({
                Keyword:this.key_word,
                CurrentIndex:this.page,
                PageSize:this.pageSize,
                Source:this.source,
                HotStatus:-1,
                CommunityQuestionCommentId:Number(this.id)
            })
            if(res.code===200){
                this.finished=res.data.Paging.IsEnd
                this.list=[...this.list,...res.data.List]
            }
        },

        /* 删除 */
        delHandle(item,index) {
            wx.showModal({
               title: "",
               content: `评论删除后不可恢复，确认删除吗`,
               confirmColor: "#EE3636",
               cancelColor: '#333',
               success: async (res) => {
                  if(res.cancel) return
                  
                  const { CommunityQuestionCommentId } = item;
                  const { code } = await apiDelComment({ CommunityQuestionCommentId: CommunityQuestionCommentId });
                  if( code !== 200 ) return
                  
                  wx.showToast({title: '删除成功'})
                  this.list.splice(index,1)
               }
            })
        },

        /* 搜索 */
        goSearch() {
            uni.navigateTo({
               url: `/pages-approve/search/index?type=videoComment`,
            })
        },

        handleTypeChange(e){
            this.source=e 
            // this.key_word = '';
            this.page = 1;
            this.list=[]
            this.finished=false
            this.getList()
        }
    },
}
</script>

<style lang="scss" scoped>
.red-color {
   color: #D63535;
}
.list-wrap{
    padding: 40rpx 20rpx;
}
.flex {
   display: flex;
   align-items: center;
}
.question-item {
   background: #fff;
   padding: 20rpx 0 0;
   border-radius: 8rpx;
   font-size: 28rpx;
   margin-bottom: 20rpx;
   color: #666;
   .cont {
      padding: 0 20rpx;
   }
   .item-title {
      color: #333;
      font-size: 32rpx;
   }
   .row {
      margin: 15rpx 0;
   }
   .item-bottom {
      justify-content: space-between;
      .select-wrapper {
         width: 250rpx;
         border: 1px solid #F1F2F6;
         padding: 0 40rpx 0 20rpx;
         position: relative;
         .ipt {
            height: 80rpx;
            line-height: 80rpx;
         }
      }
   }
   .action-bot {
      border-top: 1px solid #EAEAEA;
      margin-top: 30rpx;
      text {
         padding: 24rpx 0;
         flex: 1;
         text-align: center;
         border-right: 1px solid #EAEAEA;
         &:last-child { border: none; }
      }
   }
}

.tabs-box{
    background-color: #fff;
    padding: 10px 12px 0 12px;
    text{
        display: inline-block;
        margin-right: 60rpx;
        padding-bottom: 13rpx;
        &.active{
            border-bottom: 2px solid #3385FF;
        }
    }
}
</style>