universal-wechat-uniapp-241007/pages_order/components/list/comment/commentList.vue

<template>
    <view class="commemt">
        <view class="comment-list">
            <commentItem v-for="(item, index) in list" :key="index" :parentId="item.id" :sourceType="params.type"
                :sourceId="params.orderId" :item="item" />
        </view>

        <view class="submit-box">
            <view class="top">
                <button class="share" open-type="share">
                    <uv-icon color="#00cf05" size="50rpx" name="weixin-fill"></uv-icon>
                </button>

                <input type="text" disabled @click="openCommentPublish" 
                :placeholder="'评论给' + params.name || '他'" />
            </view>
        </view>

        <!-- 评论发布组件 -->
        <commentPublish ref="commentPublish" :params="params" :placeholder="'评论给' + params.name || '他'" @success="handleCommentSuccess" />
    </view>
</template>

<script>
import commentItem from './commentItem.vue'
import commentPublish from './commentPublish.vue'

export default {
    components: {
        commentItem,
        commentPublish,
    },
    props: ['list', 'params'],
    data() {
        return {}
    },
    methods: {
        // 打开评论发布弹窗
        openCommentPublish() {
            this.$refs.commentPublish.open()
        },

        // 评论发布成功回调
        handleCommentSuccess() {
            this.$emit('getData')
        }
    }
}
</script>

<style scoped lang="scss">
.commemt {
    padding-bottom: env(safe-area-inset-bottom);
}

.comment-list {
    margin-top: 20rpx;
    padding-bottom: 150rpx;
}

.submit-box {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    box-shadow: 0 0 6rpx 6rpx #00000011;
    padding-bottom: env(safe-area-inset-bottom);

    .top {
        align-items: center;
        display: flex;
        justify-content: center;

        input {
            background-color: #f3f3f3;
            width: 460rpx;
            height: 40rpx;
            border-radius: 40rpx;
            margin: 20rpx;
            padding: 20rpx 30rpx;
            font-size: 28rpx;
        }
    }
}
</style>