GterForumWeB/src/components/DetailReply.vue

<template>
    <div>
        <!-- 弹窗-讨论-单行 -->
        <div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionSingle'"
            bindtap="{{ openDiscussionSingleState ? 'handlePopCancel' : '' }}">
            <div class="discussion-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
                catchtap="return false">
                <div class="discussion-header flexacenter" v-if="twoCommentData">
                    <image class="discussion-avatar" mode="widthFix" src="{{ twoCommentData.avatar }}"></image>
                    <div class="discussion-text">{{ twoCommentData.content }}</div>
                    <image class="discussion-icom" catchtap="clearTwoCommentData"
                        style="height:13px;transform: translate(0);top:0;" mode="widthFix" src="../../img/u1428.png">
                    </image>
                </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" focus="{{ true }}"
                            placeholder="{{ twoCommentData ? '写回复…' : '想问啥，大胆问…' }}" model:value="{{ commentContent }}" />
                        <image class="discussion-single-input-icom" bindtap="setValue" data-key="popState"
                            data-value="discussionMulti" mode="widthFix" src="../../img/u1448.png"></image>
                    </div>
                    <div class="discussion-single-btn flexcenter" bindtap="postComment" data-content="{{ commentContent }}">
                        发布
                    </div>
                </div>
            </div>

        </div>

        <!-- 弹窗-讨论-多行 -->
        <div class="pop-box flexflex flexcolumn" wx:if="{{ popState == 'discussionMulti' }}" bindtap="handlePopCancel"
            catchtouchmove="return false">
            <div class="discussion-multi-box pop-box-box flexflex flexcolumn" style="border-radius: 30rpx 30rpx 0 0;"
                catchtap="return false">
                <div class="discussion-header flexacenter" v-if="twoCommentData">
                    <image class="discussion-avatar":src="twoCommentData.avatar"></image>
                    <div class="discussion-text">{{ twoCommentData.content }}</div>
                    <image class="discussion-icom" catchtap="clearTwoCommentData" mode="widthFix" src="../../img/u1428.png">
                    </image>
                </div>
                <div class="discussion-multi-content flexflex flex1">
                    <textarea v-if="discussionMultiState" class="discussion-multi-textarea flex1" type="text"
                        maxlength="500" v-model="commentContent" @blur="setValue('discussionMultiState', false, 'boolean')"
                        :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"></textarea>
                    <div v-else @click="setValue('discussionMultiState', true, 'boolean')"
                        class="discussion-multi-textarea flex1"
                        :style="{ color: !commentContent ? 'rgba(118,118,118,1)' : '' }">{{ commentContent ?
                            commentContent : (twoCommentData ? '写回复…' : '想问啥，大胆问…') }}</div>
                    <!-- <editor id="discussion-multi-textarea" class="discussion-multi-textarea flex1" bindinput="onDiscussionTextareaChange"  bindready="onDiscussionTextareaReady" placeholder="{{ twoCommentData ? '写回复…' : '想问啥，大胆问…' }}"></editor> -->
                    <image class="discussion-multi-icom" catchtap="openDiscussionSingle" mode="widthFix"
                        src="../../img/u1431.png"></image>
                    <div class="discussion-multi-sum">{{ 500 - commentContent.length }}</div>
                </div>
                <div class="discussion-multi-bottom flexflex flexacenter">
                    <div class="discussion-multi-btn flexcenter" @click="postComment(commentContent)">
                        发布</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DetailReply',
    data() {
        return {
            commentContent: ""
        };
    },

    mounted() {
        console.log("gjklgjklg");
    },

    methods: {

    },
};
</script>

<style lang="scss" scoped>
.discussion-single-box {
    height: 72rpx;
    justify-content: space-between;
    padding: 26rpx 0;
}

.discussion-single-btn {
    width: 105rpx;
    height: 72rpx;
    font-size: 27rpx;
    color: #000;
    border-radius: 12rpx;
    margin-right: 24rpx;
    background-color: rgba(80, 227, 194, 1);
}

.discussion-single-content {
    height: 72rpx;
    font-size: 27rpx;
    border-radius: 12rpx;
    background-color: rgba(242, 242, 242, 1);
    margin-left: 24rpx;
    margin-right: 24rpx;
    padding-left: 18rpx;
}

.discussion-single-input-icom {
    width: 42rpx;
    height: 42rpx;
    padding: 15rpx;
}

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

.discussion-header {
    padding-top: 24rpx;
    padding-left: 24rpx;
    position: relative;


    .discussion-icom {
        width: 27rpx;
        height: 27rpx;
        padding: 24rpx;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 5;
    }

    .discussion-text {
        font-size: 24rpx;
        color: #7f7f7f;
        margin-left: 18rpx;
        width: 615rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 文字超出部分省略号显示 */
        white-space: nowrap;
        /* 不换行 */
    }

    .discussion-avatar {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
    }

}

.discussion-multi-box {
    .discussion-header {
        padding-bottom: 24rpx;
        border-bottom: 1rpx solid #dbdcdd;
    }

    .discussion-multi-content {
        position: relative;
        height: 663rpx;
        box-sizing: border-box;

    }

    .discussion-multi-textarea {
        font-size: 30rpx;
        padding: 24rpx;
        /* height: 663rpx; */
        box-sizing: border-box;
        height: 50vh;

        overflow: auto;

        word-break: break-word;
        line-height: 36rpx;
    }

    .discussion-multi-icom {
        width: 36rpx;
        height: 36rpx;
        padding: 24rpx;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 88;
    }

    .discussion-multi-sum {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 24rpx;
        font-size: 21rpx;
        color: #aaaaaa;
    }

    .discussion-multi-bottom {
        height: 96rpx;
        border-top: 1rpx solid #dbdcdd;
        justify-content: flex-end;
        padding-right: 24rpx;
    }

    .discussion-multi-btn {
        background-color: rgba(80, 227, 194, 1);
        border-radius: 12rpx;
        width: 105rpx;
        height: 66rpx;
        margin: 15rpx 0;
        font-size: 27rpx;
    }

}
</style>