@jx3box/jx3box-common-ui 6.1.4 → 6.1.7

package/src/Author.vue

@@ -1,225 +1,52 @@
 <template>
-    <div class="c-author" v-if="data">
-        <div class="u-author">
-            <Avatar class="u-avatar" :uid="uid" :url="data.user_avatar" :size="68" :frame="data.user_avatar_frame" />
-            <div class="u-info">
-                <a class="u-name" :href="authorLink(uid)" target="_blank">
-                    <span>{{ data.display_name.slice(0, 8) }}</span>
-                    <el-tooltip class="item" effect="dark" content="签约作者" placement="top" v-if="isSuperAuthor">
-                        <a class="u-superauthor" href="/dashboard/#/cooperation" target="_blank">
-                            <img :src="super_author_icon" alt="superauthor" />
-                        </a>
-                    </el-tooltip>
-                </a>
-                <div class="u-extend">
-                    <el-tooltip class="item" effect="dark" placement="top">
-                        <div slot="content">
-                            <span class="u-tips">经验值：{{ data.experience }}</span>
-                        </div>
-                        <span class="u-level" :class="'lv-' + level" :style={backgroundColor:showLevelColor(level)}>Lv.{{ level }}</span>
-                    </el-tooltip>
-                    <el-tooltip class="item" effect="dark" :content="vipTypeTitle" placement="top" v-if="isVip">
-                        <a class="u-vip" href="/vip/premium?from=sidebar_author" target="_blank">
-                            <i class="i-icon-vip on">{{ vipType }}</i>
-                        </a>
-                    </el-tooltip>
-                </div>
+    <div class="c-author">
+        <AuthorInfo :uid="uid" @ready="installModules" />
+        <template v-if="data">
+            <div class="u-fans">
+                <AuthorFollow style="margin-right: 8px;" :uid="uid" />
+                <AuthorGift :uid="uid" />
             </div>
-        </div>
-        <div class="u-bio">{{ data.user_bio }}</div>
-        <AuthorFollow class="u-follow-box" :uid="uid" />
-        <div class="u-link" v-if="hasLink">
-            <a v-if="data.weibo_name" class="u-weibo" :href="weiboLink(data.weibo_id)" target="_blank">
-                <img svg-inline src="../assets/img/author/weibo.svg" />
-                {{ data.weibo_name }}
-            </a>
-            <a v-if="data.github_name" class="u-github" :href="githubLink(data.github_name)" target="_blank">
-                <img svg-inline src="../assets/img/author/github.svg" />
-                {{ data.github_name }}
-            </a>
-            <div v-if="data.tuilan_id" class="u-tuilan" title="推栏ID">
-                <img src="../assets/img/author/tuilan.png" />
-                {{ data.tuilan_id }}
-            </div>
-            <a v-if="data.tv_type && data.tv_id" class="u-tv" :href="tv_link" target="_blank">
-                <img :src="tv_img" />
-                {{ data.tv_id }}
-                <span class="u-tv-living" v-if="tv_status">
-                    <div class="u-tv-living-icon">
-                        <div class="u-tv-living-icon-col first"></div>
-                        <div class="u-tv-living-icon-col"></div>
-                        <div class="u-tv-living-icon-col last"></div>
-                    </div>
-                </span>
-            </a>
-        </div>
-        <slot></slot>
-        <div class="u-trophy" v-if="hasTrophy">
-            <div class="u-label">
-                <i class="el-icon-trophy"></i>
-                <span>作者荣誉</span>
-            </div>
-            <div class="u-medals" v-if="medals && medals.length">
-                <!-- <span class="u-medal" v-for="(item, i) in medals" :key="i">
-                    <img :src="showMedalIcon(item.medal)" :title="showMedalDesc(item)" />
-                </span> -->
-                <medal :medals="medals" :showIcon="showMedalIcon"></medal>
-            </div>
-        </div>
-        <div class="u-teams" v-if="teams && teams.length">
-            <div class="u-label">
-                <i class="el-icon-school"></i>
-                <span>所属团队</span>
-            </div>
-            <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>
-        <Authorposts :uid="uid" />
+            <!-- <AuthorMsg :uid="uid" /> -->
+            <AuthorLink class="u-links" :uid="uid" :data="data" />
+            <AuthorMedals class="u-trophy" :uid="uid" />
+            <AuthorTeams class="u-teams" :uid="uid" />
+            <slot></slot>
+            <AuthorPosts class="u-posts" :uid="uid" />
+        </template>
     </div>
 </template>
 
 <script>
-// const liveStatusMap = ["等待开播", "直播中", "直播结束"];
-import { authorLink, tvLink, getLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
-import { __server, __imgPath,__userLevelColor } from "@jx3box/jx3box-common/data/jx3box.json";
-import { getUserInfo, getDouyu, getUserMedals, getUserPublicTeams } from "../service/author";
-import { user as medal_map } from "@jx3box/jx3box-common/data/medals.json";
-import User from "@jx3box/jx3box-common/js/user";
-import { __userLevel } from "@jx3box/jx3box-common/data/jx3box.json";
-// components
-import medal from './medal/medal.vue'
-import Avatar from "./author/Avatar.vue";
-import Authorposts from "./author/Authorposts.vue";
+import AuthorInfo from "./author/AuthorInfo.vue";
+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 AuthorMedals from "./author/AuthorMedals.vue";
+import AuthorTeams from "./author/AuthorTeams.vue";
+import AuthorPosts from "./author/AuthorPosts.vue";
 export default {
     name: "Author",
     props: ["uid"],
-    data: function() {
+    data: function () {
         return {
             data: "",
-            tv: "",
-            medals: [],
-            medal_map,
-            teams: [
-                // {
-                //     team_name : '诗画印象',
-                //     team_logo : 'https://oss.jx3box.com/2019/09/logo.png',
-                //     team_server : "蝶恋花"
-                // }
-            ],
-            isVIP: false,
         };
     },
-    computed: {
-        tv_type: function() {
-            return this.data && this.data.tv_type;
-        },
-        tv_id: function() {
-            return (this.data && this.data.tv_id) || 0;
-        },
-        tv_img: function() {
-            return __imgPath + "image/tv/" + this.tv_type + ".png";
-        },
-        tv_link: function() {
-            return tvLink(this.tv_type, this.tv_id) || "";
-        },
-        tv_status: function() {
-            return (this.tv && this.tv.show_status == 1) || false;
-        },
-        super_author_icon: function() {
-            return __imgPath + "image/user/" + "superauthor.svg";
-        },
-        hasLink: function() {
-            return this.data.weibo_name || this.data.github_name || this.data.tuilan_id || this.data.tv_id;
-        },
-        hasTrophy: function() {
-            return this.medals.length;
-        },
-        vipType: function() {
-            return this.data?.is_pro ? "PRO" : "PRE";
-        },
-        vipTypeTitle: function() {
-            return this.data?.is_pro ? "专业版会员" : "高级版会员";
-        },
-        isVip: function() {
-            return this.data?.is_pro || this.data?.is_pre;
-        },
-        isSuperAuthor: function() {
-            return this.data?.sign;
-        },
-        level: function() {
-            return User.getLevel(this.data?.experience);
-        },
-    },
     methods: {
-        loadData: function() {
-            return getUserInfo(this.uid)
-                .then((data) => {
-                    this.data = data;
-                })
-                .then(() => {
-                    this.loadMedals();
-                    this.loadTeams();
-                });
-        },
-        loadTV: function() {
-            if (this.tv_type == "douyu") {
-                if (!this.tv_id || isNaN(this.tv_id)) return;
-                getDouyu(this.tv_id).then((data) => {
-                    this.tv = data;
-                });
-            }
-        },
-        loadMedals: function() {
-            getUserMedals(this.uid).then((data) => {
-                this.medals = data;
-            });
-        },
-        loadTeams: function() {
-            getUserPublicTeams(this.uid).then((data) => {
-                this.teams = data && data.slice(0, 5);
-            });
-        },
-
-        // filters
-        showMedalIcon: function(val) {
-            return __imgPath + "image/medals/user/" + val + ".gif";
-        },
-        showMedalDesc: function(item) {
-            return item.medal_desc || medal_map[item.medal];
+        installModules: function (data) {
+            this.data = data;
         },
-        authorLink,
-        weiboLink: function(val) {
-            return "https://weibo.com/" + val;
-        },
-        githubLink: function(val) {
-            return "https://github.com/" + val;
-        },
-        teamLink: function(team_id) {
-            return getLink("org", team_id);
-        },
-        showTeamLogo: function(val) {
-            return getThumbnail(val, 96);
-        },
-        showLevelColor:function (level){
-            return __userLevelColor[level]
-        }
-    },
-    watch: {
-        uid: function() {
-            this.loadData();
-        },
-    },
-    mounted: function() {
-        this.uid && this.loadData();
     },
     components: {
-        Avatar,
-        Authorposts,
-        medal,
+        AuthorInfo,
+        AuthorLink,
         AuthorFollow,
+        // AuthorMsg,
+        AuthorGift,
+        AuthorMedals,
+        AuthorTeams,
+        AuthorPosts,
     },
 };
 </script>

package/src/author/AuthorFollow.vue

@@ -1,45 +1,37 @@
 <template>
-    <div class="u-follow">
-        <!-- <template v-if="isLogin">
-            <template v-if="isSelf">
-                <div class="u-fans-box">
-                    <span class="u-fans-label">关注</span>
-                    <span class="u-fans">{{ formatFansNum(fansNum) }}</span>
-                </div>
-            </template>
-            <template v-else>
-
-            </template>
-        </template>
-        <el-button class="u-fans-box" @click="follow" size="mini" v-else>
-            <span class="u-fans-label">关注</span>
-            <span class="u-fans">{{ formatFansNum(fansNum) }}</span>
-        </el-button> -->
+    <div class="c-author-follow">
         <el-button
             v-if="!isFollow"
+            class="u-btn"
             :class="{ 'is-follow': isFollow, 'u-fans-box': isSelf }"
             size="mini"
-            :icon="!isSelf && btnIcon"
+            plain
+            :icon="btnIcon"
             @click="follow"
-            :type="isSelf ? '' : btnType"
             :loading="loading"
             :disabled="isSelf"
         >
-            {{ btnText }}<span class="u-follow-count">{{ formatFansNum(fansNum) }}</span>
+            {{ btnText }}
+            <!-- <span class="u-follow-count">{{ formatFansNum(fansNum) }} </span> -->
         </el-button>
         <el-popover
             v-else
             placement="bottom"
             trigger="hover"
-            popper-class="u-follow-popover"
+            popper-class="c-author-follow-popover"
             :visible-arrow="false"
         >
             <div class="u-action-list">
-                <div class="u-action-item" v-for="item in actions" :key="item.label" @click.stop="item.action">{{ item.label }}</div>
+                <div class="u-action-item" v-for="item in actions" :key="item.label" @click.stop="item.action">
+                    {{ item.label }}
+                </div>
             </div>
-            <el-button class="u-unfollow-btn" size="mini" :type="btnType" slot="reference">{{ btnText }}<span class="u-follow-count">{{ formatFansNum(fansNum) }}</span></el-button>
+            <el-button class="u-btn" size="mini" :type="btnType" slot="reference"
+                >{{ btnText }}
+                <!-- TODO:后续在粉丝榜中展示粉丝数 -->
+                <!-- <span class="u-follow-count">{{ formatFansNum(fansNum) }}</span> -->
+            </el-button>
         </el-popover>
-        <el-button size="mini" icon="el-icon-message" disabled title="Lv4+可用">私信</el-button>
     </div>
 </template>
 
@@ -58,7 +50,7 @@ export default {
         return {
             isFollow: false,
             fansNum: 0,
-            loading: false
+            loading: false,
         };
     },
     computed: {
@@ -66,10 +58,10 @@ export default {
             return this.isFollow ? "已关注" : "关注";
         },
         btnIcon() {
-            return this.isSelf ? "" : (this.isFollow ? "" : "el-icon-plus");
+            return this.isSelf ? "" : this.isFollow ? "" : "el-icon-plus";
         },
         btnType() {
-            return this.isFollow ? "info" : "warning"
+            return this.isFollow ? "info" : "warning";
         },
         actions() {
             return [
@@ -87,7 +79,7 @@ export default {
         user() {
             return User.getInfo();
         },
-        isLogin: function() {
+        isLogin: function () {
             return User.isLogin();
         },
     },
@@ -97,7 +89,7 @@ export default {
             handler(val) {
                 val && this.loadFans();
             },
-        }
+        },
     },
     methods: {
         // 格式化粉丝数
@@ -126,10 +118,10 @@ export default {
         },
         // 取消关注
         unfollow() {
-            this.$confirm('确定不再关注此人？', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
+            this.$confirm("确定不再关注此人？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
             }).then(() => {
                 unfollow(this.uid)
                     .then((res) => {
@@ -151,49 +143,42 @@ export default {
                 })
                 .catch((err) => {
                     console.log(err);
-                }).finally(() => {
+                })
+                .finally(() => {
                     this.loading = false;
                 });
-        }
+        },
     },
 };
 </script>
 
 <style lang="less">
-.u-unfollow-btn {
-    &.el-button {
-        margin-right: 10px;
-    }
-}
-.u-follow-popover {
-    &.el-popover {
-        min-width: 100px;
-        padding: 0;
-        margin: 0;
-        .u-action-list {
-            .u-action-item {
-                text-align: center;
-                cursor: pointer;
-                padding: 8px 10px;
-                &:hover {
-                    background: rgb(248,248,251);
+.c-author-follow-popover {
+    .u-follow-popover {
+        &.el-popover {
+            min-width: 100px;
+            padding: 0;
+            margin: 0;
+            .u-action-list {
+                .u-action-item {
+                    text-align: center;
+                    cursor: pointer;
+                    padding: 8px 10px;
+                    &:hover {
+                        background: rgb(248, 248, 251);
+                    }
                 }
             }
         }
     }
-}
-.u-follow-count{
-    margin-left:5px;
+    .u-follow-count {
+        margin-left: 5px;
+    }
 }
 
-.u-fans-box {
-    cursor: default !important;
-    .u-fans-label {
-        color: #999;
-        margin-right: 5px;
-    }
-    .u-fans {
-        color: #333;
+@media screen and (max-width: @phone) {
+    .el-message-box {
+        max-width: 60%;
     }
 }
 </style>