@jx3box/jx3box-ui 0.0.1

package/src/comment/QuickReply.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="c-jx3box-reply">
+        <el-popover
+            :visible-arrow="true"
+            placement="top"
+            ref="quickReply"
+            trigger="click"
+            popper-class="c-jx3box-reply-pop"
+        >
+            <div class="c-jx3box-reply-pop__content">
+                <el-icon class="u-close" @click="closePop"><Close></Close></el-icon>
+                <div class="u-title">快捷回复</div>
+                <div class="m-reply-list">
+                    <div
+                        class="m-reply-list__item"
+                        v-for="(item, index) in replyTemplate"
+                        :key="index"
+                        @click="reply(item)"
+                    >
+                        {{ item }}
+                    </div>
+                </div>
+            </div>
+            <template #reference>
+                <img
+                    class="u-reference"
+                    width="24"
+                    height="24"
+                    src="../../assets/img/comment/comment.svg"
+                    alt="comment"
+                />
+            </template>
+        </el-popover>
+    </div>
+</template>
+
+<script>
+import replyTemplate from "../../assets/data/reply_template.json";
+export default {
+    name: "QuickReply",
+    data() {
+        return {
+            replyTemplate,
+        };
+    },
+    emits: ["reply"],
+    methods: {
+        // 关闭弹窗
+        closePop() {
+            if (this.$refs.quickReply) {
+                this.$refs.quickReply.doClose();
+            }
+        },
+        reply(item) {
+            this.$emit("reply", item);
+            this.closePop();
+        },
+    }
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/comment/quick-reply.less";
+</style>

package/src/comment/ReplyForReply.vue

@@ -0,0 +1,127 @@
+<template>
+    <el-form ref="form" class="c-comment-subbox">
+        <div class="u-subbox-label">
+            回复
+            <el-link type="primary" target="_blank" :href="userHref"
+                >＠{{ username }}</el-link
+            >
+            ：
+        </div>
+        <el-form-item>
+            <el-input
+                type="textarea"
+                v-model="content"
+                :id="'id' + inputId"
+                placeholder="输入回复..."
+            ></el-input>
+        </el-form-item>
+        <el-form-item>
+            <div class="c-comment-tools">
+                <el-icon class="u-upload-icon" @click="showUploader = !showUploader"><Picture /></el-icon>
+                <Emotion
+                   class="c-comment-emotion"
+                   @selected="handleEmotionSelected"
+                   type="pop"
+                   :max="6">
+                </Emotion>
+            </div>
+            <Uploader
+                v-if="showUploader"
+                ref="uploader"
+                @onFinish="attachmentUploadFinish"
+                @onError="attachmentUploadError"
+            />
+        </el-form-item>
+        <el-form-item>
+            <el-button
+                size="small"
+                type="primary"
+                @click="submitReply"
+                :disabled="disableSubmitBtn"
+                >提交</el-button
+            >
+            <el-button size="small" link @click="hideForm()"
+                >收起</el-button
+            >
+        </el-form-item>
+    </el-form>
+</template>
+
+<script>
+import Uploader from "./Upload.vue";
+import Emotion from "@jx3box/jx3box-emotion/src/Emotion2.vue";
+export default {
+    props: ["username", "userHref", "currentId"],
+    data: function () {
+        return {
+            content: "",
+            showUploader: false,
+            disableSubmitBtn: false,
+            inputId: "",
+        };
+    },
+    components: {
+        Uploader,
+        Emotion,
+    },
+    mounted() {
+        if (this.currentId) this.inputId = this.currentId;
+    },
+    methods: {
+        submitReply() {
+            this.disableSubmitBtn = true;
+            if (this.$refs.uploader) {
+                this.$refs.uploader.upload();
+            } else {
+                this.attachmentUploadFinish([]);
+            }
+        },
+        hideForm() {
+            this.$emit("hideForm");
+        },
+        attachmentUploadFinish(data) {
+            this.disableSubmitBtn = false;
+            this.$emit("doReply", {
+                content: this.content,
+                attachmentList: data,
+            });
+            this.content = "";
+            this.showUploader = false;
+        },
+        attachmentUploadError() {
+            this.disableSubmitBtn = false;
+        },
+        async handleEmotionSelected(emotion) {
+            const myField = document.querySelector(`#id${this.inputId}`);
+            const value = emotion.key;
+            if (myField.selectionStart || myField.selectionStart === 0) {
+                let startPos = myField.selectionStart;
+                let endPos = myField.selectionEnd;
+
+                this.content =
+                    myField.value.substring(0, startPos) +
+                    value +
+                    myField.value.substring(endPos, myField.value.length);
+
+                await this.$nextTick();
+
+                myField.focus();
+                myField.setSelectionRange(
+                    endPos + value.length,
+                    endPos + value.length
+                );
+            } else {
+                this.content = value;
+            }
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-comment {
+    .u-subbox-label {
+        margin-bottom: 10px;
+    }
+}
+</style>

package/src/comment/ReplyItem.vue

@@ -0,0 +1,92 @@
+<template>
+    <el-row>
+        <!--用户头像-->
+        <CommentAvatar
+            :user-avatar="showAvatar(reply.avatar)"
+            :user-href="profileLink(reply.userId)"
+            :username="reply.displayName"
+            :avatarFrame="reply.user_avatar_frame"
+            :avatarSize="36"
+        />
+        <!--评论主体内容-->
+        <CommentContentSimple
+            :comment-id="reply.id"
+            :date="reply.commentDate"
+            :content="reply.content"
+            :attachments="stringToArray(reply.attachments)"
+            :can-delete="power.can_del || power.uid == reply.userId"
+            :can-hide="power.is_author == 1 || power.is_editor == 1"
+            :can-reply="power.uid != reply.userId"
+            :user-href="profileLink(reply.replyForUID)"
+            :reply-for-username="reply.replyForUsername"
+            :reply-for-user-id="reply.replyForUID"
+            :is-like="reply.is_likes == 1"
+            :likes="~~reply.likes"
+            @delete="deleteReply"
+            @showReplyInput="showReplyForReplyFrom = !showReplyForReplyFrom"
+            @setLikeComment="setLikeComment"
+            @hide="hideReply"
+        />
+        <!--隐藏起来的回复评论的评论表单-->
+        <ReplyForReply
+            v-if="showReplyForReplyFrom"
+            :username="reply.displayName"
+            :user-href="profileLink(reply.userId)"
+            :current-id="reply.id"
+            @hideForm="showReplyForReplyFrom = false"
+            @doReply="doReply"
+        />
+    </el-row>
+</template>
+
+<script>
+import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
+import CommentContentSimple from "./CommentContentSimple.vue";
+import ReplyForReply from "./ReplyForReply.vue";
+import CommentAvatar from "./Avatar.vue";
+
+export default {
+    props: ["reply", "power"],
+    components: {
+        CommentAvatar,
+        CommentContentSimple,
+        ReplyForReply,
+    },
+    backReplyList: [],
+    data: function () {
+        return {
+            showReplyForReplyFrom: false,
+            decoration: "",
+        };
+    },
+    methods: {
+        profileLink: function (uid) {
+            return authorLink(uid);
+        },
+        stringToArray: function (str) {
+            if (!str) {
+                return [];
+            }
+            return JSON.parse(str);
+        },
+        showAvatar: function (val) {
+            return showAvatar(val, 84);
+        },
+        deleteReply(id) {
+            this.$emit("deleteReply", id);
+        },
+        hideReply(id) {
+            this.$emit("hide", id);
+        },
+        setLikeComment(setLike) {
+            this.$emit("setLikeComment", this.reply.id, setLike);
+        },
+        doReply(replyData) {
+            (replyData.replyForUID = this.reply.userId),
+                (replyData.replyForCommentId = this.reply.id),
+                this.$emit("addReply", replyData);
+            this.showReplyForReplyFrom = false;
+        },
+    },
+};
+</script>

package/src/comment/ReplyList.vue

@@ -0,0 +1,126 @@
+<template>
+    <div class="c-comment-replylist" v-if="data.length">
+        <reply-item
+            class="c-comment-reply"
+            v-for="reply in data"
+            :key="reply.id"
+            :reply="reply"
+            :power="power"
+            @deleteReply="deleteReply"
+            @addReply="addReply"
+            @setLikeComment="setLikeComment"
+            @hide="hideReply"
+        />
+        <!-- 分页 -->
+        <el-row v-if="data.length >= 3 || showPager">
+            <el-col :span="4">
+                <el-button link v-show="showPager" @click="showLess()">收起</el-button>
+                <el-button link v-show="!showPager" @click="showMore()">查看更多</el-button>
+            </el-col>
+            <el-col :span="20" class="c-comment-reply-pages">
+                <el-pagination
+                    v-show="showPager"
+                    size="small"
+                    @current-change="handleCurrentChange"
+                    :current-page="pager.index"
+                    :page-size="pager.pageSize"
+                    layout="total, prev, pager, next"
+                    :total="pager.total"
+                ></el-pagination>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script>
+import ReplyItem from "./ReplyItem.vue";
+export default {
+    props: ["data", "power", "pager"],
+    components: {
+        ReplyItem,
+    },
+    data: function () {
+        return {
+            showPager: false,
+        };
+    },
+    emits: ["goto", "resetReply", "deleteReply", "addNewReply", "setLikeComment", "hide"],
+    methods: {
+        showMore() {
+            this.showPager = true;
+            this.$emit("goto", 1);
+        },
+        showLess() {
+            this.showPager = false;
+            this.$emit("resetReply");
+        },
+        handleCurrentChange(gotoIndex) {
+            this.$emit("goto", gotoIndex);
+        },
+        deleteReply(id) {
+            this.$emit("deleteReply", id);
+        },
+        hideReply(id) {
+            this.$emit("hide", id);
+        },
+        setLikeComment(id, isLike) {
+            this.$emit("setLikeComment", id, isLike);
+        },
+        addReply(data) {
+            this.$emit("addNewReply", data);
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-comment-replylist {
+    padding: 10px 0 10px 68px;
+    border-top: 1px dashed #eee;
+}
+.c-comment-reply {
+    padding-top: 5px;
+    background-size: cover;
+    flex-direction: column;
+    &:not(:last-of-type) {
+        border-bottom: 1px dashed #eee;
+        padding-bottom: 10px;
+        margin-bottom: 10px;
+    }
+
+    .c-comment-avatar {
+        margin-right: 10px;
+        width: auto;
+    }
+    .u-avatar {
+        float: left;
+    }
+    .u-avatar-pic {
+        // width: 28px;
+        // height: 28px;
+        margin-right: 10px;
+    }
+
+    .u-name {
+        font-size: 12px;
+        line-height: 28px;
+        padding: 0 !important;
+        display: inline;
+        white-space: nowrap;
+    }
+
+    .u-reply {
+        padding: 5px;
+        line-height: 1.715;
+        .u-attachements {
+            margin-top: 10px;
+            .el-image {
+                margin-right: 20px;
+            }
+        }
+    }
+}
+.c-comment-reply-pages {
+    padding: 7px 0;
+}
+</style>

package/src/comment/Upload.vue

@@ -0,0 +1,108 @@
+<template>
+    <div>
+        <el-upload
+            action="https://cms.jx3box.com/api/cms/upload"
+            ref="upload"
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreview"
+            :auto-upload="false"
+            :file-list="fileList"
+            :limit="maxCount"
+            :accept="acceptedExtensions.reduce((acc, cur) => acc + `.${cur},`, '')"
+            multiple
+            with-credentials
+            :on-exceed="onExceed"
+            :on-change="onChange"
+            :on-success="onSuccess"
+            :on-error="onError"
+        >
+            <el-icon><Plus></Plus></el-icon>
+            <template #tip>
+                <div class="el-upload__tip">
+                    最多上传 {{ maxCount }} 张
+                    {{ acceptedExtensions.join(" / ").toUpperCase() }} 格式图片，单张图片不能超过
+                    {{ maxSize / 1024 / 1024 }} MB
+                </div>
+            </template>
+        </el-upload>
+        <el-dialog v-model="dialogVisible">
+            <img width="60%" :src="dialogImageUrl" alt />
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "CommentUploader",
+    data() {
+        return {
+            dialogImageUrl: "",
+            dialogVisible: false,
+            fileList: [],
+            successList: [],
+
+            acceptedExtensions: ["jpg", "jpeg", "png", "gif"],
+            maxCount: 5,
+            maxSize: 2 * 1024 * 1024,
+        };
+    },
+    emits: ["onFinish", "onError"],
+    methods: {
+        handlePictureCardPreview(file) {
+            this.dialogImageUrl = file.url;
+            this.dialogVisible = true;
+        },
+        onExceed() {
+            this.$notify({
+                title: "",
+                message: `最多上传 ${this.maxCount} 张图片！`,
+                type: "error",
+                duration: 3000,
+                position: "bottom-right",
+            });
+        },
+        onChange(file, fileList) {
+            if (file.status == "ready") {
+                if (file.size > this.maxSize) {
+                    this.$notify({
+                        title: "",
+                        message: `单张图片大小不能超过 ${this.maxSize / 1024 / 1024} MB！`,
+                        type: "error",
+                        duration: 3000,
+                        position: "bottom-right",
+                    });
+                    fileList.pop();
+                } else {
+                    this.fileList = fileList;
+                }
+            }
+        },
+        upload() {
+            if (this.fileList.length > 0) {
+                this.$refs.upload.submit();
+            } else {
+                this.$emit("onFinish", []);
+            }
+        },
+        onSuccess(response) {
+            this.successList = this.successList.concat(response.data);
+            if (this.successList.length == this.fileList.length) {
+                this.$emit("onFinish", this.successList || []);
+                this.fileList = [];
+                this.successList = [];
+            }
+        },
+        onError() {
+            this.$notify({
+                title: "",
+                message: "图片上传失败!",
+                type: "error",
+                duration: 3000,
+                position: "bottom-right",
+            });
+            this.$emit("onError");
+            this.fileList = [];
+        },
+    },
+};
+</script>