@jx3box/jx3box-common-ui 5.5.23 → 5.5.24

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "5.5.23",
+    "version": "5.5.24",
     "description": "JX3BOX UI",
     "main": "index.js",
     "scripts": {
@@ -31,10 +31,10 @@
     ],
     "dependencies": {
         "@jx3box/jx3box-comment-ui": "^1.6.8",
-        "@jx3box/jx3box-common": "^7.0.19",
+        "@jx3box/jx3box-common": "^7.0.21",
         "@jx3box/jx3box-data": "^1.8.3",
-        "@jx3box/jx3box-editor": "^1.2.4",
-        "axios": "^0.19.2",
+        "@jx3box/jx3box-editor": "^1.2.6",
+        "axios": "^0.26.1",
         "element-ui": "^2.13.2",
         "jquery": "^3.5.1",
         "lodash": "^4.17.15",

package/readme.md

@@ -1,5 +1,4 @@
 # JX3BOX UI
-手动更新cdn `https://oss.jx3box.com/static/`
 
 通用 UI 组件
 

package/src/interact/Contributors.vue

@@ -0,0 +1,110 @@
+<template>
+    <section class="m-contributor">
+        <div class="m-author">
+            <el-radio
+                v-for="(item, i) in authors"
+                v-model="value"
+                :label="String(item.user_id)"
+                :key="i"
+                @change="handleAuthorChange"
+            >
+                <img
+                    class="u-pic"
+                    :src="showAvatar(item.user_avatar)"
+                    :alt="item.display_name"
+                />
+                <span class="u-txt" :title="item.display_name">
+                    {{ item.display_name }}
+                </span>
+            </el-radio>
+        </div>
+    </section>
+</template>
+
+<script>
+import { showAvatar } from "@jx3box/jx3box-common/js/utils";
+export default {
+    name: "Contributors",
+    props: {
+        authors: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+            value: "",
+        };
+    },
+    watch: {
+        authors: {
+            deep: true,
+            immediate: true,
+            handler(val) {
+                if (val && val.length) this.value = String(val[0]?.user_id)
+            }
+        },
+        value: {
+            immediate: true,
+            handler(val) {
+                val && this.$emit('chosen', this.value)
+            }
+        }
+    },
+    methods: {
+        handleAuthorChange() {},
+        showAvatar,
+    },
+};
+</script>
+
+<style lang="less">
+.m-contributor {
+    padding: 10px 10px 0 10px;
+    .m-author {
+        .u-pic {
+            .db;
+            .size(48px);
+            background-color: @bg-black;
+            .r(4px);
+            transition: 0.1s ease-in;
+            // .tm(0.4);
+            box-sizing: border-box;
+
+            &:hover {
+                .tm(1);
+            }
+        }
+        .u-txt {
+            .db;
+            .x;
+            .fz(12px, 2);
+            white-space: nowrap;
+            overflow: hidden;
+            .w(48px);
+        }
+
+        .el-radio {
+            .ml(0);
+            .mr(15px);
+        }
+        .el-radio__input {
+            .none;
+        }
+        .el-radio__label {
+            .db;
+            padding-left: 0;
+        }
+
+        .is-checked {
+            .u-pic {
+                border: 3px solid @primary;
+                .tm(1);
+            }
+            .u-txt {
+                .bold;
+            }
+        }
+    }
+}
+</style>

package/src/interact/boxcoin_admin.vue

@@ -18,6 +18,7 @@
                 </div>
                 <div class="u-list">
                     <em class="u-label">❤️ 品鉴</em>
+                    <Contributors v-if="authors && authors.length" :authors="authors" @chosen="handleChosen" />
                     <div class="u-points">
                         <el-radio-group v-model="count">
                             <el-radio :label="item" v-for="item in points" :key="item" border>
@@ -50,10 +51,13 @@
 <script>
 import { grantBoxcoin } from "../../service/thx.js";
 import User from "@jx3box/jx3box-common/js/user";
+import Contributors from '@/interact/Contributors.vue';
 export default {
     name: "BoxcoinAdmin",
-    props: ["postType", "postId", "userId", "own", "points"],
-    components: {},
+    props: ["postType", "postId", "userId", "own", "points", 'authors'],
+    components: {
+        Contributors
+    },
     data: function () {
         return {
             visible: false,
@@ -61,7 +65,9 @@ export default {
             count: 0,
             remark: "辛苦，感谢！",
 
-            left : this.own
+            left : this.own,
+
+            chosen: '', // 被选中的人
         };
     },
     computed: {
@@ -90,8 +96,12 @@ export default {
         openBoxcoinPop: function () {
             this.visible = true;
         },
+        // 选择要打赏的对象
+        handleChosen(userId) {
+            this.chosen = userId
+        },
         submit: function () {
-            grantBoxcoin(this.postType, this.postId, this.userId, this.count, {
+            grantBoxcoin(this.postType, this.postId, this.chosen || this.userId, this.count, {
                 remark: this.remark,
                 client : this.client
             })

package/src/interact/boxcoin_records.vue

@@ -7,7 +7,7 @@
                         <i class="el-icon-trophy"></i>
                     </span>
                     <span class="u-meta u-user">参与打赏</span>
-                    <span class="u-meta u-user" v-if="mode== 'wiki'">收益作者</span>
+                    <span class="u-meta u-user">收益作者</span>
                     <span class="u-meta u-count">盒币</span>
                     <span class="u-meta u-remark">寄语</span>
                     <time class="u-meta u-time"></time>
@@ -30,7 +30,6 @@
                         <span>{{item.ext_operate_user_info.display_name}}</span>
                     </a>
                     <a  
-                        v-if="mode== 'wiki'"
                         class="u-meta u-user"
                         :href="authorLink(item.user_id)"
                         target="_blank"

package/src/interact/boxcoin_user.vue

@@ -15,6 +15,7 @@
                 </div>
                 <div class="u-list">
                     <em class="u-label">❤️ 打赏</em>
+                    <Contributors v-if="authors && authors.length" :authors="authors" @chosen="handleChosen" />
                     <div class="u-points">
                         <el-radio-group v-model="count">
                             <el-radio :label="item" v-for="item in points" :key="item" border>
@@ -47,10 +48,13 @@
 <script>
 import { rewardBoxcoin } from "../../service/thx.js";
 import User from "@jx3box/jx3box-common/js/user";
+import Contributors from '@/interact/Contributors.vue';
 export default {
     name: "BoxcoinUser",
-    props: ["boxcoin", "postType", "postId", "userId", "own", "points"],
-    components: {},
+    props: ["boxcoin", "postType", "postId", "userId", "own", "points", "authors"],
+    components: {
+        Contributors
+    },
     data: function () {
         return {
             visible: false,
@@ -61,6 +65,8 @@ export default {
             left : this.own,
 
             chargeLink: "/vip/boxcoin?redirect=" + location.href,
+
+            chosen: '', // 被选中的人
         };
     },
     computed: {
@@ -93,8 +99,12 @@ export default {
                 User.toLogin();
             }
         },
+        // 选择要打赏的对象
+        handleChosen(userId) {
+            this.chosen = userId
+        },
         submit: function () {
-            rewardBoxcoin(this.postType, this.postId, this.userId, this.count, {
+            rewardBoxcoin(this.postType, this.postId, this.chosen || this.userId, this.count, {
                 remark: this.remark,
                 client : this.client
             })

package/src/single/Creators.vue

@@ -84,6 +84,23 @@ export default {
             getPostAuthors(this.id).then((res) => {
                 this.super_author = res.data?.data.super_author;
                 this.other_authors = res.data?.data.other_authors;
+
+                const super_author = {
+                    user_id: this.super_author.ID,
+                    display_name: this.super_author.display_name,
+                    user_avatar: this.super_author.user_avatar,
+                }
+
+                const other_authors = this.other_authors?.map(item => {
+                    return {
+                        user_id: item.post_author_info?.ID,
+                        display_name: item.post_author_info?.display_name,
+                        user_avatar: item.post_author_info?.user_avatar,
+                    }
+                })
+
+                // 将联合创作者传出去
+                this.$emit('load-authors', { super_author, other_authors })
             });
         },
         showAvatar: function (val) {

package/src/single/Thx.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="w-thx">
         <div class="w-thx-panel">
-            <boxcoin-admin :postId="postId" :postType="postType" v-if="hasRight && adminBoxcoinEnable && boxcoin_enable" :userId="userId" :own="admin_left" :points="admin_points" @updateRecord="updateRecord" />
+            <boxcoin-admin :postId="postId" :postType="postType" v-if="hasRight && adminBoxcoinEnable && boxcoin_enable" :userId="userId" :own="admin_left" :points="admin_points" :authors="authors" @updateRecord="updateRecord" />
             <Like :postId="postId" :postType="postType"></Like>
             <fav :postId="postId" :postType="postType"></fav>
-            <boxcoin-user :postId="postId" :postType="postType" :boxcoin="boxcoin" :userId="userId" :own="user_left" :points="user_points" v-if="userBoxcoinEnable && boxcoin_enable" @updateRecord="updateRecord" />
+            <boxcoin-user :postId="postId" :postType="postType" :boxcoin="boxcoin" :userId="userId" :own="user_left" :points="user_points" :authors="authors" v-if="userBoxcoinEnable && boxcoin_enable" @updateRecord="updateRecord" />
             <Share :postId="postId" :postType="postType" />
         </div>
         <div class="w-thx-records">
@@ -28,7 +28,7 @@ import User from '@jx3box/jx3box-common/js/user'
 import {getPostBoxcoinConfig,getBoxcoinStatus} from '../../service/thx'
 export default {
     name: "Thx",
-    props: ["postId", "postType","userId","adminBoxcoinEnable","userBoxcoinEnable",'mode'],
+    props: ["postId", "postType","userId","adminBoxcoinEnable","userBoxcoinEnable",'mode', 'authors'],
     components: {
         Like,
         Share,

package/src/single/cms-single.vue

@@ -8,7 +8,7 @@
         <!-- 文章前 -->
         <div class="m-single-prepend">
             <!-- 联合创作者 -->
-            <Creators class="m-single-creators" :postId="id" :postType="post_type" />
+            <Creators class="m-single-creators" :postId="id" :postType="post_type" @load-authors="loadAuthors" />
             <!-- 文集小册 -->
             <Collection class="m-single-collection" :id="collection_id" :defaultVisible="collection_collapse" @collectionUpdate="updateCollection"/>
             <slot name="single-prepend"></slot>
@@ -33,7 +33,7 @@
             <slot name="single-append"></slot>
 
             <!-- 打赏 -->
-            <Thx class="m-single-thx" :postId="id" :postType="post_type" :userId="author_id" :adminBoxcoinEnable="true" :userBoxcoinEnable="true"/>
+            <Thx class="m-single-thx" :postId="id" :postType="post_type" :userId="author_id" :adminBoxcoinEnable="true" :userBoxcoinEnable="true" :authors="authors" />
 
             <!-- 评论 -->
             <div class="m-single-comment">
@@ -74,7 +74,11 @@ export default {
     data: function() {
         return {
             collection_data : '',
-            directory : false
+            directory : false,
+
+            // 创作者
+            other_authors: [],
+            super_author: "",
         };
     },
     computed: {
@@ -119,6 +123,13 @@ export default {
                 collection_data : this.collection_data,
                 directory : this.directory
             }
+        },
+        authors: function (){
+            if (this.other_authors && this.other_authors.length) {
+                return [this.super_author, ...this.other_authors]
+            }
+
+            return []
         }
     },
     methods : {
@@ -127,6 +138,10 @@ export default {
         },
         updateDirectory : function (val){
             this.directory = val
+        },
+        loadAuthors({super_author, other_authors}) {
+            this.super_author = super_author;
+            this.other_authors = other_authors
         }
     },
     watch : {