uni-app评论组件_uniapp评论组件

<template>
    <view class="comContainer">
        <h4>评论：</h4>
        <view class="readly" id="commentsBox">
            <view class="readly-item" v-for="(item, index) in commentsList" :key="index">
                <view class="nickName">{{ item.nickName }}</view>
                <view class="timeReply">
                    <view class="time">
                        <text>{{ item.createTime }}</text>
                    </view>
                    <view class="reply" v-if="userId == replyId">
                        <!-- v-if="userId==replyId" -->
                        <text @tap="handleReply(index)">回复</text>
                        <text @tap="handleDelReply(item.commentId)">删除</text>
                    </view>
                </view>
                <view class="content">{{ item.content }}</view>

                <view v-if="item.replyContent || replyNum == index" class="replyBox">
                    <view class="replyCon" v-if="showReply">回复：{{ item.replyContent }}</view>
                    <u--textarea class="replyInp" v-if="!showReply" v-model="replyVal" placeholder="回复..." autoHeight focus @confirm="keyReply(item.commentId)"></u--textarea>
                </view>
            </view>
        </view>
        <u--textarea v-model="inpVal" placeholder="请输入内容" height="140" count @confirm="handleConfirm"></u--textarea>
        <view class="confirmBtn" @tap="handleConfirm">提交</view>
    </view>
</template>

<script>
import config from '../../../utils/config.js';
export default {
    data() {
        return {
            inpVal: '',
            commentsList: [],
            showReply:true,
            replyVal:'',
            replyNum:0,
            replyContent:''
        };
    },
    props: ['topicId', 'replyId'],
    computed: {
        userId() {
            return uni.getStorageSync('loginResult').userId;
        }
    },
    methods: {
        handleConfirm() {
            const commentsBox = document.getElementById('commentsBox');
            const that = this;
            if (this.userId) {
                uni.request({
                    url: config.domain + '/p/comm',
                    data: {
                        topicId: that.topicId,
                        content: that.inpVal,
                        userId: that.userId,
                        replyId: that.replyId
                    },
                    header: {
                        'content-type': 'application/json'
                    },
                    method: 'POST',
                    success: res => {
                        that.getComments().then(()=>{
                            commentsBox.scrollTop = commentsBox.scrollHeight;
                        });
                        that.inpVal=''
                    }
                });
            } else {
                uni.showToast({
                    title: '请先登录',
                    icon: 'none',
                    duration: 2000
                });
            }
        },

        // 重新所有获取评论数据
        getComments() {
            const that = this;
            return new Promise(resolve=>{
                uni.request({
                    url: config.domain + '/p/comm/pageCommById',
                    data: {
                        topicId: that.topicId
                    },
                    header: {
                        'content-type': 'application/x-www-form-urlencoded'
                    },
                    method: 'GET',
                    success: res => {
                        that.commentsList = [...res.data.records];
                        resolve();
                    }
                });
            })
        },

        // 点击回复按钮
        handleReply(index){
            this.replyNum = index;
            this.showReply = false;
        },

         // 回复输入框中点enter
        keyReply(commentId){
            this.showReply = true;
            const that = this;
            uni.request({
                url: config.domain + '/p/comm',
                data: {
                    commentId:commentId,
                    replyContent: that.replyVal,
                    replySts:1
                },
                header: {
                    'content-type': 'application/json'
                },
                method: 'PUT',
                success: res => {
                    that.getComments();
                    that.replyVal='';
                }
            });
        },

        // 点击删除按钮
        handleDelReply(commentId){
            const that = this;
            uni.showModal({
                title: '提示',
                content: '确定删除这条评论吗？',
                cancelText: '取消', // 取消按钮的文字
                confirmText: '删除', // 确认按钮文字
                showCancel: true, // 是否显示取消按钮，默认为 true
                confirmColor: '#f55850',
                cancelColor: '#3a86b9',
                success: res => {
                    if (res.confirm) {
                        uni.request({
                            url: config.domain + '/p/comm',
                            data: [commentId],
                            header: {
                                'content-type': 'application/json'
                            },
                            method: 'DELETE',
                            success: res => {
                                console.log(res);
                                that.getComments();
                            }
                        });
                    } else {
                        console.log('else', res);
                    }
                }
            });
        }
    },
    mounted() {
        // console.log('replyId---->', this.replyId, 'topicId---->', this.topicId);
        const that = this;
        uni.request({
            url: config.domain + '/p/comm/pageCommById',
            data: {
                topicId: that.topicId
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            method: 'GET',
            success: res => {
                that.commentsList = [...res.data.records];
            }
        });
    }
};
</script>

<style lang="scss" scoped>
.comContainer {
    box-sizing: border-box;
    padding: 20rpx;
    width: 100%;
    height: 100%;
    background-color: #fff;
    .readly {
        box-sizing: border-box;
        width: 100%;
        height: 30vh;
        padding: 15rpx;
        border: 2px solid #f2f2ff;
        margin: 20rpx 0;
        overflow: auto;
        .readly-item {
            box-sizing: border-box;
            background-color: #f6f6f6;
            margin: 10rpx 0;
            padding: 10rpx;
            .nickName {
                width: 100%;
                height: 50rpx;
                font: 32rpx/50rpx '';
            }
            .timeReply {
                width: 100%;
                display: flex;
                justify-content: space-between;
                font: 24rpx/40rpx '';
                color: #666;
                .reply {
                    text {
                        font-size: 18rpx;
                        background-color: #ddd;
                        padding: 5rpx;
                        // border: 1px solid #999;
                        margin-right: 20rpx;
                        color: #666;
                    }
                }
            }
            .content {
                box-sizing: border-box;
                width: 100%;
                background-color: #fff;
                font: 28rpx/36rpx '';
                border-radius: 15rpx;
                padding: 10rpx;
                margin: 10rpx 0;
            }

            .replyBox {
                font: 28rpx/36rpx '';
                .replyCon {
                    box-sizing: border-box;
                    width: 100%;
                    text-align: right;
                    margin: 10rpx 0;
                    padding-right: 20rpx;
                }
                .replyInp {
                    border: 1px solid #3b77b3 !important;
                    box-shadow: -2rpx -2rpx 8rpx #aaa;
                    margin: 15rpx 0;
                }
            }
        }
    }
    .confirmBtn {
        width: 120rpx;
        height: 50rpx;
        background-color: #009fe9;
        border-radius: 10rpx;
        color: #fff;
        text-align: center;
        margin: 20rpx 0;
        box-shadow: 2rpx 2rpx 5rpx #cccccc;
    }
}
</style>