@jx3box/jx3box-common-ui 6.2.0 → 6.2.2

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.0",
+  "version": "6.2.2",
   "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

@@ -16,6 +16,7 @@
         <LeftSidebar :open="true">
             <LeftSideToggle :mobileOnly="true" />
             <Author :author="author" :uid="7" />
+            <Fans></Fans>
         </LeftSidebar>
 
         <Main :withoutLeft="false" :withoutRight="false">
@@ -172,7 +173,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 +226,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,160 @@
+<template>
+    <div class="c-author-fans">
+        <!--       <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" v-if="list.length > 0">
+            <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 shape="circle" :size="30" style="background: #D9D9D9;"><i class="el-icon-s-custom"></i></el-avatar>
+                    </el-tooltip>
+                </el-col>
+                <el-col :span="4" v-if="list.length>5">
+                    <el-avatar shape="circle" :size="30" style="background: #D9D9D9;">
+                        <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;
+                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;
+        }
+    }
+    .f-bottom {
+        .h(13px);
+        .mt(10px);
+        .fz(10px, 13px);
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.5);
+    }
+}
+</style>

package/src/author/AuthorGift.vue

@@ -229,6 +229,8 @@ export default {
     }
 
     .u-left {
+        display: flex;
+        align-items: center;
         .fz(14px,24px);
         .u-label {
             .mr(10px);
@@ -242,6 +244,9 @@ export default {
             .y;
             vertical-align: text-bottom;
         }
+        .u-charge{
+            .ml(8px);
+        }
         .el-progress {
             margin: 10px;
         }