GterForumWeB/src/components/DetailReply.vue

<template>
    <div>
        <!-- 弹窗-讨论-单行 -->
        <div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionSingle'"
            @click="openDiscussionSingleState ? handlePopCancel() : ''">
            <div class="discussion-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
                @click.stop="">
                <div class="discussion-header flexacenter" v-if="twoCommentData">
                    <img class="discussion-avatar" :src="twoCommentData && twoCommentData.avatar" />
                    <div class="discussion-text one-line">{{ twoCommentData && twoCommentData.content }}</div>
                </div>
                <div class="discussion-single-box flexflex flex1">
                    <div class="discussion-single-content flexacenter flex1">
                        <input class="discussion-single-input flex1" cursor-spacing="5" type="text"
                            :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'" v-model="commentContent" />
                        <img class="discussion-single-input-icom" @click.stop="setValue()"
                            src="@/assets/img/detail/unfold.png" />
                    </div>
                    <div class="discussion-single-btn flexcenter" @click.stop="postComment(commentContent)">
                        发布
                    </div>
                </div>
            </div>
        </div>

        <!-- 弹窗-讨论-多行 -->
        <div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionMulti'" @click="handlePopCancel()">
            <div class="discussion-multi-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
                @click.stop="">
                <div class="discussion-header flexacenter" v-if="twoCommentData">
                    <img class="discussion-avatar" :src="twoCommentData.avatar" />
                    <div class="discussion-text one-line">{{ twoCommentData.content }}</div>
                </div>
                <div class="discussion-multi-content flexflex flex1">
                    <textarea class="discussion-multi-textarea flex1" type="text" maxlength="500" v-model="commentContent"
                        :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"></textarea>
                    <img class="discussion-multi-icom" @click.stop="openDiscussionSingle()"
                        src="@/assets/img/detail/pack.png" />
                    <div class="discussion-multi-sum">{{ 500 - commentContent.length }}</div>
                </div>
                <div class="discussion-multi-bottom flexflex flexacenter">
                    <div class="discussion-multi-btn flexcenter" @click.stop="postComment(commentContent)">
                        发布
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DetailReply',
    data() {
        return {
            commentContent: "",
            openDiscussionSingleState: true, // 弹出键盘动画
        };
    },
    props: ["twoCommentData", "popState"],

    mounted() {

        console.log("子组件");
    },

    methods: {

        // 提交回复
        postComment(commentContent) {
            this.$parent.postComment(commentContent)
        },

        // 关闭弹窗
        handlePopCancel() {
            console.log(this.$parent.popState, "this.$parent.popState");
            this.$parent.twoCommentData = null
            this.$parent.popState = ""

        },

        // 清空
        clearTwoCommentData() {
            this.$parent.twoCommentData = null
        },

        // 切换简单的切换数据
        setValue(key, value) {
            this.$parent.popState = "discussionMulti"
        },

        openDiscussionSingle() {
            this.$parent.popState = "discussionSingle"
            this.openDiscussionSingleState = false

            setTimeout(() => {
                this.openDiscussionSingleState = true
            }, 500);
        },


    },
};
</script>

<style lang="scss" scoped>
.pop-box-box {
    width: 100vw;
    background-color: #fff;
    border-radius: .64rem .64rem 0 0;
    position: relative;
}

.discussion-single-box {
    height: .96rem;
    justify-content: space-between;
    padding: .3467rem 0;
}

.discussion-single-btn {
    width: 1.4rem;
    height: .96rem;
    font-size: .36rem;
    color: #000;
    border-radius: .16rem;
    margin-right: .32rem;
    background-color: rgba(80, 227, 194, 1);
}

.discussion-single-content {
    height: .96rem;
    font-size: .36rem;
    border-radius: .16rem;
    background-color: rgba(242, 242, 242, 1);
    margin-left: .32rem;
    margin-right: .32rem;
    padding-left: .24rem;
}

.discussion-single-input-icom {
    width: .56rem;
    height: .56rem;
    padding: .2rem;
}

.discussion-single-input {
    height: 100%;
}

.discussion-header {
    padding-top: .32rem;
    padding-left: .32rem;
    position: relative;

    // .discussion-icom {
    //     width: .36rem;
    //     height: .36rem;
    //     padding: .32rem;
    //     position: absolute;
    //     top: 50%;
    //     right: 0;
    //     transform: translateY(-50%);
    //     z-index: 5;
    // }

    .discussion-text {
        font-size: .32rem;
        color: #7f7f7f;
        margin-left: .24rem;
        width: 8.2rem;
    }

    .discussion-avatar {
        width: .48rem;
        height: .48rem;
        border-radius: 50%;
    }

}

.discussion-multi-box {
    .discussion-header {
        padding-bottom: .32rem;
        border-bottom: .0133rem solid #dbdcdd;
    }

    .discussion-multi-content {
        position: relative;
        height: 8.84rem;
        box-sizing: border-box;

    }

    .discussion-multi-textarea {
        font-size: .4rem;
        padding: .32rem;
        box-sizing: border-box;
        height: 50vh;

        overflow: auto;

        word-break: break-word;
        line-height: .48rem;
    }

    .discussion-multi-icom {
        width: .48rem;
        height: .48rem;
        padding: .32rem;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 88;
    }

    .discussion-multi-sum {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: .32rem;
        font-size: .28rem;
        color: #aaaaaa;
    }

    .discussion-multi-bottom {
        height: 1.28rem;
        border-top: .0133rem solid #dbdcdd;
        justify-content: flex-end;
        padding-right: .32rem;
    }

    .discussion-multi-btn {
        background-color: rgba(80, 227, 194, 1);
        border-radius: .16rem;
        width: 1.4rem;
        height: .88rem;
        margin: .2rem 0;
        font-size: .36rem;
    }

}
</style>