feat 评论皮肤

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-comment-ui",
-    "version": "1.9.4",
+    "version": "1.9.5",
     "scripts": {
         "dev": "env DEV_SERVER=true vue-cli-service serve",
         "serve": "vue-cli-service serve",
@@ -57,4 +57,4 @@
     "engines": {
         "node": ">= 14 < 17"
     }
-}
+}

src/components/comment-and-reply-subcomponents-reply-list.vue

@@ -44,13 +44,13 @@ export default {
     components: {
         ReplyItem,
     },
-    data: function() {
+    data: function () {
         return {
             showPager: false,
         };
     },
     filters: {
-        profileLink: function(uid) {
+        profileLink: function (uid) {
             return authorLink(uid);
         },
     },
@@ -88,6 +88,8 @@ export default {
     border-top: 1px dashed #eee;
 }
 .c-comment-reply {
+    padding-top: 5px;
+    background-size: cover;
     &:not(:last-of-type) {
         border-bottom: 1px dashed #eee;
         padding-bottom: 10px;

src/components/reply-list-item.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-row>
+    <el-row :style="decorationStyles">
         <!--用户头像-->
         <CommentAvatar
             :user-avatar="reply.avatar | showAvatar"
@@ -15,7 +15,7 @@
             :content="reply.content"
             :attachments="reply.attachments | stringToArray"
             :can-delete="power.can_del || power.uid == reply.userId"
-            :can-hide="(power.is_author == 1 || power.is_editor == 1)"
+            :can-hide="power.is_author == 1 || power.is_editor == 1"
             :can-reply="power.uid != reply.userId"
             :user-href="reply.replyForUID | profileLink"
             :reply-for-username="reply.replyForUsername"
@@ -44,6 +44,9 @@ import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
 import CommentContentSimple from "./reply-list-item-comment-content-simple.vue";
 import ReplyForReply from "./reply-list-item-reply-form.vue";
 import CommentAvatar from "./avatar.vue";
+import { $cms } from "@jx3box/jx3box-common/js/https";
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+const DECORATION_KEY = "decoration_comment_";
 export default {
     props: ["reply", "power"],
     components: {
@@ -52,25 +55,42 @@ export default {
         ReplyForReply,
     },
     backReplyList: [],
-    data: function() {
+    computed: {
+        uid() {
+            return this.reply.userId;
+        },
+        decorationStyles() {
+            return this.decoration
+                ? {
+                      backgroundImage: `url(${this.decoration})`,
+                      borderRadius: "8px",
+                  }
+                : null;
+        },
+    },
+    data: function () {
         return {
             showReplyForReplyFrom: false,
+            decoration: "",
         };
     },
     filters: {
-        profileLink: function(uid) {
+        profileLink: function (uid) {
             return authorLink(uid);
         },
-        stringToArray: function(str) {
+        stringToArray: function (str) {
             if (!str) {
                 return [];
             }
             return JSON.parse(str);
         },
-        showAvatar: function(val) {
-            return showAvatar(val,84)
+        showAvatar: function (val) {
+            return showAvatar(val, 84);
         },
     },
+    mounted() {
+        this.getDecoration();
+    },
     methods: {
         deleteReply(id) {
             this.$emit("deleteReply", id);
@@ -87,6 +107,48 @@ export default {
                 this.$emit("addReply", replyData);
             this.showReplyForReplyFrom = false;
         },
+        setDecoration(decoration) {
+            this.decoration =
+                __imgPath + `decoration/images/${decoration.val}/comment.png`;
+        },
+        getDecoration() {
+            let decoration_local = sessionStorage.getItem(
+                DECORATION_KEY + this.uid
+            );
+            if (decoration_local) {
+                //解析本地缓存
+                let decoration_parse = JSON.parse(decoration_local);
+                if (decoration_parse) {
+                    this.setDecoration(decoration_parse);
+                    return;
+                }
+            }
+            this.fetchDecoration({
+                using: 1,
+                user_id: this.uid,
+                type: "comment",
+            }).then((res) => {
+                let decorationList = res.data.data;
+                //筛选个人装扮
+                let decoration = decorationList.find(
+                    (item) => item.type == "comment"
+                );
+                if (decoration) {
+                    this.setDecoration(decoration);
+                    sessionStorage.setItem(
+                        DECORATION_KEY + this.uid,
+                        JSON.stringify(decoration)
+                    );
+                    return;
+                }
+            });
+        },
+        //获取装扮
+        fetchDecoration(params) {
+            return $cms().get(`/api/cms/user/decoration`, {
+                params: params,
+            });
+        },
     },
 };
 </script>