@jx3box/jx3box-common-ui 6.1.4 → 6.1.5

package/src/author/AuthorPosts.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="c-author-posts" v-if="ready">
+        <div class="u-label">
+            <i class="el-icon-notebook-2"></i>
+            <span>作者最新作品</span>
+            <a :href="uid | authorLink" class="u-more" target="_blank">全部 &raquo;</a>
+        </div>
+
+        <ul class="u-list" v-if="data && data.length">
+            <li v-for="(item, i) in data" :key="i">
+                <a class="u-item" :href="url(item.ID, item.post_type)" target="_blank">
+                    <span
+                        ><i class="u-icon el-icon-arrow-right"></i>
+                        {{ item.post_title || item.post_type + "/无标题" }}</span
+                    >
+                </a>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import { authorLink, getLink } from "@jx3box/jx3box-common/js/utils";
+import { getUserPosts } from "../../service/author";
+export default {
+    name: "AuthorPosts",
+    props: ["uid"],
+    data: function () {
+        return {
+            data: [],
+        };
+    },
+    computed: {
+        ready: function () {
+            return this.uid && this.data && this.data.length;
+        },
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function (val) {
+                val && this.init();
+            },
+        },
+    },
+    methods: {
+        url: function (pid, type) {
+            return getLink(type, pid);
+        },
+        init: function () {
+            getUserPosts(this.uid)
+                .then((data) => {
+                    this.data = data.slice(0, 5);
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+    },
+    filters: {
+        authorLink,
+    },
+};
+</script>
+
+<style scoped lang="less">
+.c-author-posts {
+    // margin:0 10px;
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    li {
+        .db;
+    }
+    .u-item {
+        .db;
+        padding: 3px 10px 3px 5px;
+        .nobreak;
+        .fz(12px,2);
+        color: #666;
+        border-bottom: 1px solid transparent;
+        &:hover {
+            color: @pink;
+            // background-color:#fff;
+            border-bottom: 1px solid @border;
+        }
+    }
+    .u-icon {
+        .fz(12px);
+        .size(12px);
+        // .y;
+        color: #999;
+        // .mr(5px);
+    }
+
+    .u-label {
+        margin: 15px 0 10px 0;
+        padding: 0 5px 10px 5px;
+        i {
+            .mr(5px);
+            .y;
+        }
+        span {
+            .fz(13px);
+        }
+        border-bottom: 1px solid @border;
+
+        .pr;
+        .u-more {
+            .fz(12px);
+            .pa;
+            .rb(0,10px);
+            color: #999;
+            &:hover {
+                color: @pink;
+            }
+        }
+    }
+}
+</style>

package/src/author/AuthorTeams.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="c-author-teams" v-if="ready">
+        <div class="u-label">
+            <i class="el-icon-school"></i>
+            <span>所属团队</span>
+        </div>
+        <div class="u-teams">
+            <a class="u-team" v-for="(item, i) in teams" :key="i" :href="teamLink(item.team_id)" target="_blank">
+                <img class="u-team-logo" :src="showTeamLogo(item.team_logo)" />
+                <span class="u-team-name">{{ item.team_name }}@{{ item.team_server }}</span>
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
+import { getUserPublicTeams } from "../../service/author";
+
+export default {
+    name: "AuthorTeams",
+    props: ["uid"],
+    components: {},
+    data: function () {
+        return {
+            teams: [
+                // {
+                //     team_name : '诗画印象',
+                //     team_logo : 'https://oss.jx3box.com/2019/09/logo.png',
+                //     team_server : "蝶恋花"
+                // }
+            ],
+        };
+    },
+    computed: {
+        ready: function () {
+            return this.uid && this.teams && this.teams.length;
+        },
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function (val) {
+                val && this.loadTeams();
+            },
+        },
+    },
+    methods: {
+        loadTeams: function () {
+            getUserPublicTeams(this.uid).then((data) => {
+                this.teams = data && data.slice(0, 5);
+            });
+        },
+        teamLink: function (team_id) {
+            return getLink("org", team_id);
+        },
+        showTeamLogo: function (val) {
+            return getThumbnail(val, 96);
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style scoped lang="less">
+.c-author-teams {
+    .mt(10px);
+    .u-label{
+        i{
+            .y;
+        }
+    }
+    .u-team {
+        .db;
+        background-color: #f5f7fa;
+        .mb(6px);
+        &:hover {
+            // background-color: #e6f0fb;
+            .u-team-name{
+                color:@pink;
+            }
+        }
+        padding: 4px 4px;
+        .r(3px);
+    }
+    .u-team-logo {
+        .size(24px);
+        .y;
+        .mr(4px);
+        .r(4px);
+    }
+    .u-team-name {
+        .fz(12px);
+        color: #555;
+    }
+}
+</style>

package/src/interact/boxcoin_admin.vue

@@ -14,7 +14,7 @@
             <div class="w-boxcoin-admin-content">
                 <div class="u-left">
                     <em class="u-label">本月状态</em>
-                    <b>已用 {{this.used}} 剩余 {{this.left}} 总计 {{this.total}}</b>
+                    已用<b>{{this.used}}</b> 剩余<b>{{this.left}}</b> 总计<b>{{this.total}}</b>
                     <el-progress :percentage="100 - (this.used * 100 / this.total)" :stroke-width="15" :text-inside="true"></el-progress>
                 </div>
                 <div class="u-list">

package/src/medal/medal.vue

@@ -21,7 +21,6 @@ export default {
         }
     },
     methods: {
-
         medalLink({ rank_id, medal_type = 'rank' }) {
             return getMedalLink(rank_id, medal_type)
         }

package/src/single/Creators.vue

@@ -8,21 +8,21 @@
             target="_blank"
         >
             <img class="u-avatar" :src="showAvatar(super_author.user_avatar)" />
-            <span class="u-name">{{super_author.display_name}}</span>
+            <span class="u-name">{{ super_author.display_name }}</span>
             <i class="u-up">UP</i>
         </a>
         <div class="w-creators-authors" v-if="other_authors">
             <a
                 class="w-creators-author w-creators-item"
-                v-for="(item,i) in other_authors"
+                v-for="(item, i) in other_authors"
                 :key="i"
                 :href="authorLink(item.post_author_info.ID)"
                 target="_blank"
                 v-show="item.status"
             >
                 <img class="u-avatar" :src="showAvatar(item.post_author_info.user_avatar)" />
-                <span class="u-name">{{item.post_author_info.display_name}}</span>
-                <i class="u-label">{{formatLabel(item.label)}}</i>
+                <span class="u-name">{{ item.post_author_info.display_name }}</span>
+                <i class="u-label">{{ formatLabel(item.label) }}</i>
             </a>
         </div>
         <a class="w-creators-edit" :href="editLink" v-if="isCreator">
@@ -33,11 +33,7 @@
 
 <script>
 import { getPostAuthors } from "../../service/cms";
-import {
-    showAvatar,
-    authorLink,
-    editLink,
-} from "@jx3box/jx3box-common/js/utils";
+import { showAvatar, authorLink, editLink } from "@jx3box/jx3box-common/js/utils";
 import User from "@jx3box/jx3box-common/js/user";
 export default {
     name: "Creators",
@@ -89,27 +85,31 @@ export default {
                     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,
+                const other_authors = this.other_authors?.map((item) => {
+                    if (item.status) {
+                        return {
+                            user_id: item.post_author_info?.ID,
+                            display_name: item.post_author_info?.display_name,
+                            user_avatar: item.post_author_info?.user_avatar,
+                        };
                     }
-                })
+                }).filter((item) => {
+                    return !!item;
+                });
 
                 // 将联合创作者传出去
-                this.$emit('load-authors', { super_author, other_authors })
+                this.$emit("load-authors", { super_author, other_authors });
             });
         },
         showAvatar: function (val) {
             return showAvatar(val, 144);
         },
         authorLink,
-        formatLabel : function (str){
-            return str && str.slice(0,8)
-        }
+        formatLabel: function (str) {
+            return str && str.slice(0, 8);
+        },
     },
     created: function () {},
     mounted: function () {},
@@ -166,7 +166,7 @@ export default {
         color: @color;
         margin-bottom: 2px;
         .nobreak;
-        max-width:120px;
+        max-width: 120px;
     }
     &:hover {
         .u-name {
@@ -177,7 +177,7 @@ export default {
         .dbi;
         .fz(12px,1);
         font-style: normal;
-        border:1px solid @pink;
+        border: 1px solid @pink;
         color: @pink;
         padding: 3px 10px;
         .r(2px);
@@ -185,12 +185,12 @@ export default {
     }
     .u-label {
         .nobreak;
-        max-width:120px;
+        max-width: 120px;
         .dbi;
         .fz(12px,1);
         font-style: normal;
-        border:1px solid @color-link;
-        color:@color-link;
+        border: 1px solid @color-link;
+        color: @color-link;
         padding: 3px 10px;
         .r(2px);
         .mt(5px);

package/src/single/Thx.vue

@@ -1,17 +1,48 @@
 <template>
     <div class="w-thx">
         <div class="w-thx-panel">
-            <boxcoin-admin :postId="postId" :postType="postType" v-if="hasRight && adminBoxcoinEnable && boxcoin_enable" :userId="userId" :max="admin_max" :min="admin_min" :own="admin_left" :total="admin_total" :points="admin_points" :authors="authors" @updateRecord="updateRecord" :client="client" />
+            <boxcoin-admin
+                :postId="postId"
+                :postType="postType"
+                v-if="hasRight && adminBoxcoinEnable && boxcoin_enable"
+                :userId="userId"
+                :max="admin_max"
+                :min="admin_min"
+                :own="admin_left"
+                :total="admin_total"
+                :points="admin_points"
+                :authors="authors"
+                @updateRecord="updateRecord"
+                :client="client"
+            />
             <Like :postId="postId" :postType="postType"></Like>
             <fav :postId="postId" :postType="postType" :postTitle="postTitle"></fav>
-            <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" :client="client" />
+            <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"
+                :client="client"
+            />
             <Share :postId="postId" :postType="postType" :client="client" />
         </div>
         <div class="w-thx-records">
-            <boxcoin-records :postId="postId" :postType="postType" :postClient="client" :cacheRecord="cacheRecord" :mode="mode"/>
+            <boxcoin-records
+                :postId="postId"
+                :postType="postType"
+                :postClient="client"
+                :cacheRecord="cacheRecord"
+                :mode="mode"
+            />
         </div>
         <div class="w-thx-copyright">
-            &copy; 所有原创作品，著作权归作者所有，所有未经授权的非署名转载或抄袭将有权追究法律责任，所有法律事务由专聘律师代理。<br>
+            &copy;
+            所有原创作品，著作权归作者所有，所有未经授权的非署名转载或抄袭将有权追究法律责任，所有法律事务由专聘律师代理。<br />
             签约作者独家特约稿件，及所有魔盒官方评分作品用户一经兑现则视为有偿付费稿件，所有商业稿件的转载引用需同时征得魔盒平台授权。
         </div>
     </div>
@@ -21,74 +52,96 @@
 import Like from "../interact/Like2.vue";
 import Share from "../interact/Share2.vue";
 import Fav from "../interact/Fav2.vue";
-import BoxcoinRecords from '../interact/boxcoin_records.vue';
-import BoxcoinAdmin from '../interact/boxcoin_admin.vue';
-import BoxcoinUser from '../interact/boxcoin_user.vue';
-import User from '@jx3box/jx3box-common/js/user'
-import {getPostBoxcoinConfig,getBoxcoinStatus} from '../../service/thx'
+import BoxcoinRecords from "../interact/boxcoin_records.vue";
+import BoxcoinAdmin from "../interact/boxcoin_admin.vue";
+import BoxcoinUser from "../interact/boxcoin_user.vue";
+import User from "@jx3box/jx3box-common/js/user";
+import { getPostBoxcoinConfig, getBoxcoinStatus } from "../../service/thx";
 export default {
     name: "Thx",
-    props: ["postId", "postType", "postTitle", "userId","adminBoxcoinEnable","userBoxcoinEnable",'mode', 'authors',"client"],
+    props: [
+        "postId",
+        "postType",
+        "postTitle",
+        "userId",
+        "adminBoxcoinEnable",
+        "userBoxcoinEnable",
+        "mode",
+        "authors",
+        "client",
+    ],
     components: {
         Like,
         Share,
         Fav,
-        'boxcoin-records':BoxcoinRecords,
-        'boxcoin-admin':BoxcoinAdmin,
-        'boxcoin-user':BoxcoinUser,
+        "boxcoin-records": BoxcoinRecords,
+        "boxcoin-admin": BoxcoinAdmin,
+        "boxcoin-user": BoxcoinUser,
     },
     data: function () {
         return {
-            boxcoin : 0,
-            hasRight : User.getInfo().group >= 32,
+            boxcoin: 0,
+            hasRight: User.getInfo().group >= 32,
             user: User.getInfo(),
 
-            admin_max : 0,
-            admin_min : 0,
-            admin_left : 0,
+            admin_max: 0,
+            admin_min: 0,
+            admin_left: 0,
             admin_total: 0,
-            admin_points : [100],
+            admin_points: [100],
 
-            user_left : 0,
-            user_points : [100],
+            user_left: 0,
+            user_points: [100],
 
             cacheRecord: null,
-            boxcoin_enable : 0
+            boxcoin_enable: 0,
         };
     },
     computed: {
-        post_keys : function (){
-            return [this.postId,this.postType]
-        }
+        post_keys: function () {
+            return [this.postId, this.postType];
+        },
     },
     watch: {
-        post_keys : {
-            immediate : true,
-            deep:true,
-            handler : function (){
-                this.postType && this.postId && this.loadBoxcoinConfig()
-            }
-        }
+        post_keys: {
+            immediate: true,
+            deep: true,
+            handler: function () {
+                this.postType && this.postId && this.loadBoxcoinConfig();
+            },
+        },
     },
     methods: {
-        loadBoxcoinConfig : function (){
-            User.isLogin() && getPostBoxcoinConfig(this.postType).then((res) => {
-                this.admin_max = res.data.data.limit.admin_max || 0;
-                this.admin_min = res.data.data.limit.admin_min || 0;
-                this.admin_points = res.data.data.limit.admin_points || [10, 1000];
-                this.admin_left = res.data.data.asManagerBoxCoinRemain || 0;
-                this.admin_total = res.data.data.asManagerBoxCoinTotal || 0;
+        loadBoxcoinConfig: function () {
+            User.isLogin() &&
+                getPostBoxcoinConfig(this.postType).then((res) => {
+                    this.admin_max = res.data.data.limit.admin_max || 0;
+                    this.admin_min = res.data.data.limit.admin_min || 0;
+                    this.admin_points = res.data.data.limit.admin_points || [10, 1000];
+                    this.admin_left = res.data.data.asManagerBoxCoinRemain || 0;
+                    this.admin_total = res.data.data.asManagerBoxCoinTotal || 0;
 
-                this.user_points = res.data.data.limit.user_points || [10, 1000];
-                this.user_left = res.data.data.asUserBoxCoinRemain || 0;
-            });
+                    this.user_points = res.data.data.limit.user_points || [10, 1000];
+                    // 根据多端展示剩余币
+                    // 作品是n端，接受n端币+all币，但转化为n端币
+                    if (this.client == "origin") {
+                        this.user_left = res.data.data.asUserBoxCoinRemainOrigin + res.data.data.asUserBoxCoinRemainAll;
+                    } else if (this.client == "std") {
+                        this.user_left = res.data.data.asUserBoxCoinRemainStd + res.data.data.asUserBoxCoinRemainAll;
+                    } else {
+                        this.user_left =
+                            res.data.data.asUserBoxCoinRemainAll +
+                            res.data.data.asUserBoxCoinRemainStd +
+                            res.data.data.asUserBoxCoinRemainOrigin;
+                    }
+                });
             getBoxcoinStatus().then((res) => {
-                this.boxcoin_enable = !!~~res.data.data.val
-            })
+                this.boxcoin_enable = !!~~res.data.data.val;
+            });
         },
         // 用户打赏
-        updateRecord: function (data){
-            this.cacheRecord = data
+        updateRecord: function (data) {
+            this.cacheRecord = data;
         },
     },
     created: function () {},