perf: update homework

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-comment-ui",
-    "version": "1.9.0",
+    "version": "1.9.1",
     "scripts": {
         "dev": "env DEV_SERVER=true vue-cli-service serve",
         "serve": "vue-cli-service serve",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <Comment id="68185" category="post" order="desc" />
+    <Comment id="80317" category="post" order="desc" />
     <!-- <Comment :id="30015" category="post" order="desc" /> -->
 </template>
 

src/Comment.vue

@@ -61,6 +61,7 @@
                         :user-href="item.userId | profileLink"
                         :username="item.displayName"
                         :homework="homework"
+                        :post-type="postType"
                         @deleteComment="deleteComment"
                         @setTopComment="setTopComment"
                         @setStarComment="setStarComment"
@@ -93,6 +94,7 @@
         </el-main>
 
         <homework v-model="showHomeWork" v-if="homework" :postType="postType" :postId="postData.postId" :client="postData.client" :userId="postData.userId"></homework>
+        <boxcoin-records v-model="showBoxCoin" v-if="homework" :postType="postType" :postId="postData.postId" :client="postData.client"></boxcoin-records>
     </el-container>
 </template>
 
@@ -104,6 +106,7 @@ import CommentAndReply from "./components/comment-and-reply.vue";
 import { GET, POST, DELETE, PUT } from "./service";
 import { getOrderMode, setOrderMode } from "./options";
 import Homework from "@jx3box/jx3box-common-ui/src/interact/Homework.vue";
+import boxcoinRecords from "./components/boxcoin-records.vue";
 import {bus} from "./utils";
 export default {
     name: "Comment",
@@ -137,7 +140,8 @@ export default {
         CommentAvatar,
         CommentAndReply,
         CommentInputForm,
-        Homework
+        Homework,
+        boxcoinRecords
     },
     data: function () {
         return {
@@ -164,7 +168,8 @@ export default {
                 postId: 0,
                 userId: 0,
                 client: location.href.includes("origin") ? "origin" : "std",
-            }
+            },
+            showBoxCoin: false,
         };
     },
     computed: {
@@ -340,6 +345,11 @@ export default {
             this.postData.userId = data.userId;
             this.showHomeWork = true;
         })
+
+        bus.on("boxcoin-click", data => {
+            this.postData.postId = data.id;
+            this.showBoxCoin = true;
+        })
     },
 };
 </script>

src/components/boxcoin-records.vue

@@ -0,0 +1,35 @@
+<template>
+    <el-dialog :visible="modelValue" @close="onClose" title="打赏记录" width="1002px">
+        <boxcoin-records :postType="postType" :postId="postId" :postClient="client" mode="normal"></boxcoin-records>
+    </el-dialog>
+</template>
+
+<script>
+import boxcoin_records from '@jx3box/jx3box-common-ui/src/interact/boxcoin_records.vue';
+import "@jx3box/jx3box-common-ui/assets/css/thx.less";
+export default {
+    name: "BoxcoinRecords",
+    components: {
+        'boxcoin-records': boxcoin_records,
+    },
+    props: {
+        postType: String,
+        postId: String,
+        client: String,
+        modelValue: Boolean,
+    },
+    model: {
+        prop: "modelValue",
+        event: "update:modelValue"
+    },
+    methods: {
+        onClose() {
+            this.$emit('update:modelValue', false);
+        }
+    }
+}
+</script>
+
+<style lang="less">
+// @import "@jx3box/jx3box-common-ui/assets/css/thx.less";
+</style>

src/components/comment-and-reply.vue

@@ -8,6 +8,10 @@
                 :href="userHref"
                 >{{ username || "人字榜800线无名小侠" }}</el-link
             >
+            <span class="u-boxcoin" v-if="total" @click="onBoxcoinClick">
+                <img class="u-boxcoin-img" src="../assets/img/like4.png" alt="">
+                卷面分：<span class="u-boxcoin-num">{{ total }}</span><i class="el-icon-coin"></i>
+            </span>
             <span class="u-mark u-top" v-if="item.is_top"
                 ><i class="el-icon-download"></i>置顶</span
             >
@@ -60,10 +64,10 @@
 <script>
 import ContentOfCommentAndReply from "./comment-and-reply-subcomponents-content.vue";
 import ReplyList from "./comment-and-reply-subcomponents-reply-list.vue";
-import { POST, DELETE, GET } from "../service";
+import { POST, DELETE, GET, getHistorySummary } from "../service";
 import {bus} from "../utils"
 export default {
-    props: ["item", "baseApi", "power", "user-href", "username", "homework"],
+    props: ["item", "baseApi", "power", "user-href", "username", "homework", "postType"],
     components: {
         ContentOfCommentAndReply,
         ReplyList
@@ -76,6 +80,11 @@ export default {
                 pageSize: 10,
                 pageTotal: 1,
                 total: 0
+            },
+
+            summary: {
+                fromManager: 0,
+                fromUser: 0
             }
         };
     },
@@ -90,6 +99,22 @@ export default {
     created() {
         this.replyList = this.item.reply || [];
     },
+    watch: {
+        item: {
+            deep: true,
+            immediate: true,
+            handler(val) {
+                if (val?.id) {
+                    this.loadHomeworkBoxcoin()
+                }
+            }
+        }
+    },
+    computed: {
+        total() {
+            return this.summary.fromManager + this.summary.fromUser;
+        }
+    },
     methods: {
         deleteComment() {
             this.$emit("deleteComment", this.item.id);
@@ -162,6 +187,15 @@ export default {
         },
         onHomework() {
             bus.emit("homework-click", this.item);
+        },
+        onBoxcoinClick() {
+            bus.emit("boxcoin-click", this.item);
+        },
+        loadHomeworkBoxcoin() {
+            if (!this.homework) return;
+            getHistorySummary(this.postType, this.item.id).then(res => {
+                this.summary = res.data.data;
+            })
         }
     }
 };
@@ -200,4 +234,26 @@ export default {
         background-color:#ff99cc;
     }
 }
+.c-comment-cmt__author {
+    .pr;
+
+    .u-boxcoin {
+        .pa;
+        right: 10px;
+        top: 0;
+        .fz(14px);
+        .flex;
+        align-items: center;
+        gap: 5px;
+        .pointer;
+    }
+
+    .u-boxcoin-img {
+        .size(14px);
+    }
+
+    .u-boxcoin-num{
+        color: #f0b400;
+    }
+}
 </style>

src/service.js

@@ -1,6 +1,7 @@
 //import { Notification } from 'element-ui';
 import { __Links, __next } from "@jx3box/jx3box-common/data/jx3box.json"
 import { Notification } from "element-ui"
+import { $pay } from "@jx3box/jx3box-common/js/https"
 
 
 export const GET = function (url, queryParams) {
@@ -12,7 +13,6 @@ export const GET = function (url, queryParams) {
         },
     }
     return __fetch(url, queryParams, options)
-
 }
 
 var postRecord = {}
@@ -151,4 +151,8 @@ function __fetch(url, queryParams, options) {
                 return resp.text()
         }
     })
+}
+
+export const getHistorySummary = (postType, postId) => {
+    return $pay().get(`/api/inspire/article/${postType}/${postId}/history/summary`)
 }

vue.config.js

@@ -15,6 +15,12 @@ module.exports = {
                     request.setHeader("origin", "");
                 }
             },
+            "/api": {
+                target: process.env["DEV_SERVER"] == "true" ? "http://localhost:8000" : "https://pay.jx3box.com",
+                onProxyReq: function (request) {
+                    request.setHeader("origin", "");
+                }
+            }
         }
     },
     chainWebpack: config => {