@jx3box/jx3box-common-ui 6.2.1 → 6.2.3

package/assets/css/author.less

@@ -59,7 +59,7 @@
         animation-delay: 0.2s;
     }
 
-    .u-fans{
+    .u-interact{
         .mt(5px);
         display: flex;
     }

package/index.js

@@ -31,6 +31,7 @@ import zlpBy from "./src/filters/zlpBy.vue";
 import Thx from './src/single/Thx.vue'
 import WikiPanel from './src/wiki/WikiPanel.vue'
 
+import Fans from './src/fans/fans.vue'
 const components = {
     Header,
     Breadcrumb,
@@ -64,7 +65,8 @@ const components = {
     clientBy,
     zlpBy,
 
-    WikiPanel
+    WikiPanel,
+    Fans
 }
 
 const install = function (Vue, Option) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "6.2.1",
+  "version": "6.2.3",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {

package/service/author.js

@@ -68,6 +68,9 @@ function userSignIn(){
     return $pay({ mute: true }).get(`/api/personal/task/everyday/sign-in`)
 }
 
+function getFansList(userid,limit) {
+    return $pay().get(`/api/cny/consume/user-charge/rank/of/${userid}?limit=0`,);
+}
 export {
     getUserInfo,
     getUserPosts,
@@ -78,4 +81,5 @@ export {
     getSuperAuthor,
     getMyInfo,
     userSignIn,
+    getFansList
 };

package/src/App.vue

@@ -15,7 +15,7 @@
 
         <LeftSidebar :open="true">
             <LeftSideToggle :mobileOnly="true" />
-            <Author :author="author" :uid="7" />
+            <Author :author="author" :uid="28338" />
         </LeftSidebar>
 
         <Main :withoutLeft="false" :withoutRight="false">
@@ -172,7 +172,6 @@ import AuthorMedal from "./medal/medal.vue";
 import WikiPanel from "./wiki/WikiPanel.vue";
 import WikiRevisions from "./wiki/WikiRevisions.vue";
 import WikiComments from "./wiki/WikiComments.vue";
-
 import axios from "axios";
 import { __server } from "@jx3box/jx3box-common/data/jx3box.json";
 import { wiki } from "@jx3box/jx3box-common/js/wiki";
@@ -226,7 +225,7 @@ export default {
         WikiRevisions,
         WikiComments,
 
-        UserPop
+        UserPop,
     },
     data: function () {
         return {

package/src/Author.vue

@@ -2,7 +2,7 @@
     <div class="c-author">
         <AuthorInfo :uid="uid" @ready="installModules" />
         <template v-if="data">
-            <div class="u-fans">
+            <div class="u-interact">
                 <AuthorFollow style="margin-right: 8px;" :uid="uid" />
                 <AuthorGift :uid="uid" />
             </div>
@@ -10,6 +10,7 @@
             <AuthorLink class="u-links" :uid="uid" :data="data" />
             <AuthorMedals class="u-trophy" :uid="uid" />
             <AuthorTeams class="u-teams" :uid="uid" />
+            <AuthorFans class="u-fans" :uid="uid" />
             <slot></slot>
             <AuthorPosts class="u-posts" :uid="uid" />
         </template>
@@ -22,6 +23,7 @@ import AuthorLink from "./author/AuthorLink.vue";
 import AuthorFollow from "./author/AuthorFollow.vue";
 // import AuthorMsg from "./author/AuthorMsg.vue";
 import AuthorGift from "./author/AuthorGift.vue";
+import AuthorFans from "./author/AuthorFans.vue";
 import AuthorMedals from "./author/AuthorMedals.vue";
 import AuthorTeams from "./author/AuthorTeams.vue";
 import AuthorPosts from "./author/AuthorPosts.vue";
@@ -47,6 +49,7 @@ export default {
         AuthorMedals,
         AuthorTeams,
         AuthorPosts,
+        AuthorFans,
     },
 };
 </script>

package/src/author/AuthorFans.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="c-author-fans" v-if="list && list.length">
+        <!--<div class="f-main-box">
+            <div class="f-left">
+                <div class="f-l-box"><div class="f-l-title">粉丝团</div></div>
+            </div>
+            <div class="f-right">
+                <div class="f-r-box"><div class="f-r-num">共{{list.length}}人</div></div>
+                <div class="f-r-line f-r-w-80 f-r-mb"></div>
+                <div class="f-r-line f-r-w-70 f-r-mb"></div>
+                <div class="f-r-line f-r-w-30 f-r-mb"></div>
+                <div class="f-r-line f-r-w-20 f-r-mb"></div>
+                <div class="f-r-line f-r-w-30 f-r-mb"></div>
+                <div class="f-r-line f-r-w-70 f-r-mb"></div>
+                <div class="f-r-line f-r-w-80"></div>
+            </div>
+        </div> -->
+        <div class="u-label">
+            <i class="el-icon-star-off"></i>
+            <span>粉丝榜</span>
+        </div>
+        <div class="f-avatar">
+            <el-row :gutter="10">
+                <el-col :span="4" v-for="(item, index) in list" :key="item.pay_user_id">
+                    <el-tooltip
+                        class="item"
+                        effect="dark"
+                        :content="item.money.toString()"
+                        placement="top"
+                        v-if="index < 5"
+                    >
+                        <el-avatar class="u-avatar" shape="circle" :size="30"
+                            ><i class="el-icon-s-custom"></i
+                        ></el-avatar>
+                    </el-tooltip>
+                </el-col>
+                <el-col :span="4" v-if="list.length > 5">
+                    <el-avatar class="u-avatar" shape="circle" :size="30">
+                        <span class="f-avatar-num" v-if="list.length > 99">···</span>
+                        <span class="f-avatar-num" v-else>+{{ list.length - 5 }}</span>
+                    </el-avatar>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="f-bottom">本赛季共 {{ list.length }} 人为TA赠礼</div>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+import { getFansList } from "../../service/author";
+export default {
+    name: "Fans",
+    components: {},
+    data() {
+        return {
+            list: [],
+        };
+    },
+    mounted() {
+        this.getData();
+    },
+    methods: {
+        getData() {
+            getFansList(User.getInfo().uid).then((res) => {
+                let data = res.data.data.list;
+                console.log(data)
+                if (data) {
+                    this.list = data || [];
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.c-author-fans {
+    box-sizing: border-box;
+    // padding: 10px;
+    // background: #ffffff;
+    font-family: "Microsoft YaHei";
+    font-style: normal;
+    // .h(133px);
+    .f-main-box {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        .f-left {
+            .w(65.3%);
+            .f-l-box {
+                .w(100%);
+                .h(50px);
+                background: #ff7cab;
+                border-radius: 5px 0px 0px 5px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex: none;
+                .f-l-title {
+                    .w(48px);
+                    .h(21px);
+                    .fz(16px, 21px);
+                    font-weight: 700;
+                    color: #ffffff;
+                }
+            }
+        }
+        .f-right {
+            position: relative;
+            .w(34.7%);
+            .f-r-box {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex: none;
+                .h(50px);
+                .w(100%);
+                z-index: 2;
+                position: absolute;
+                .f-r-num {
+                    font-weight: 700;
+                    .fz(10px, 13px);
+                    .w(100%);
+                    color: rgba(0, 0, 0, 0.5);
+                    padding-left: 37.5%;
+                }
+            }
+            .f-r-line {
+                .h(5px);
+                background: #ff7cab;
+                border-radius: 0px 5px 5px 0px;
+            }
+            .f-r-mb {
+                .mb(2.5px);
+            }
+            .f-r-w-80 {
+                .w(100%);
+            }
+            .f-r-w-70 {
+                .w(87.5%);
+            }
+            .f-r-w-30 {
+                .w(37.5%);
+            }
+            .f-r-w-20 {
+                .w(25%);
+            }
+        }
+    }
+    .f-avatar {
+        .mt(10px);
+        height: 30px;
+        .f-avatar-num {
+            .fz(10px);
+            color: #434343;
+            font-weight: 700;
+        }
+    }
+    .u-avatar{
+        background-color:#d9d9d9;
+    }
+    .f-bottom {
+        .mt(10px);
+        .fz(12px, 14px);
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.5);
+    }
+}
+</style>

package/src/author/AuthorFollow.vue

@@ -26,7 +26,7 @@
                     {{ item.label }}
                 </div>
             </div>
-            <el-button class="u-btn" size="mini" :type="btnType" slot="reference"
+            <el-button class="u-trigger" size="mini" :type="btnType" slot="reference"
                 >{{ btnText }}
                 <!-- TODO:后续在粉丝榜中展示粉丝数 -->
                 <!-- <span class="u-follow-count">{{ formatFansNum(fansNum) }}</span> -->
@@ -153,8 +153,23 @@ export default {
 </script>
 
 <style lang="less">
+.c-author-follow {
+    .u-btn {
+        cursor: default;
+        &:hover {
+            cursor: pointer;
+            background: #ecf5ff;
+        }
+    }
+    /*.u-trigger {
+        &:hover {
+            cursor: default;
+            background: unset;
+        }
+    }*/
+}
 .c-author-follow-popover {
-    .u-follow-popover {
+    //.u-follow-popover {
         &.el-popover {
             min-width: 100px;
             padding: 0;
@@ -170,7 +185,7 @@ export default {
                 }
             }
         }
-    }
+    //}
     .u-follow-count {
         margin-left: 5px;
     }

package/src/author/AuthorGift.vue

@@ -7,6 +7,7 @@
             @click="openGiftDialog"
             :disabled="isSelf || !status"
             :title="btnTitle"
+            plain
             >赠礼</el-button
         >
 
@@ -201,14 +202,15 @@ export default {
 .c-author-gift {
     .u-btn {
         @color: #f9afd4;
-        background-color: @color;
-        color: #fff;
-        border-color: darken(@color, 2%);
+
+        background-color: #fff;
+        color: darken(@color, 10%);
+        border-color: darken(@color, 10%);
 
         &:hover {
-            background-color: #fff;
-            color: darken(@color, 10%);
-            border-color: darken(@color, 10%);
+            background-color: @color;
+            color: #fff;
+            border-color: darken(@color, 2%);
         }
 
         &.is-disabled {