@jx3box/jx3box-vue3-ui 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-vue3-ui",
-    "version": "0.0.6",
+    "version": "0.0.8",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/src/App.vue

@@ -16,7 +16,7 @@
         </breadcrumb>
         <LeftSidebar :open="true" :uid="8">
             <LeftSideToggle :mobileOnly="true" />
-            <!-- <Author :author="author" :uid="37" /> -->
+            <Author :uid="8" />
         </LeftSidebar>
 
         <Main :withoutLeft="false" :withoutRight="false">
@@ -37,19 +37,13 @@
 </template>
 
 <script>
+import Author from './Author.vue';
 import SimpleThxVue from "./single/SimpleThx.vue";
 export default {
     name: "App",
     components: {
-        // Main,
-        // Header,
-        // Footer,
-        // Breadcrumb,
-        // LeftSidebar,
-        // LeftSideToggle,
-        // RightSidebar,
-        // Bottom,
         SimpleThxVue,
+        Author,
     },
 };
 </script>

package/src/Author.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="c-author">
+        <AuthorInfo :uid="uid" @ready="installModules" />
+        <template v-if="data">
+            <div class="u-interact">
+                <AuthorFollow style="margin-right: 8px;" :uid="uid" />
+                <AuthorGift :uid="uid" />
+            </div>
+            <!-- <AuthorMsg :uid="uid" /> -->
+            <AuthorLink class="u-block u-links" :uid="uid" :data="data" />
+            <AuthorMedals class="u-block u-trophy" :uid="uid" />
+            <AuthorTeams class="u-block u-teams" :uid="uid" />
+            <AuthorFans class="u-block u-fans" :uid="uid" />
+            <slot></slot>
+            <AuthorPosts class="u-block u-posts" :uid="uid" />
+        </template>
+    </div>
+</template>
+
+<script>
+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 AuthorFans from "./author/AuthorFans.vue";
+import AuthorMedals from "./author/AuthorMedals.vue";
+import AuthorTeams from "./author/AuthorTeams.vue";
+import AuthorPosts from "./author/AuthorPosts.vue";
+export default {
+    name: "AuthorComp",
+    props: ["uid"],
+    data: function () {
+        return {
+            data: "",
+        };
+    },
+    methods: {
+        installModules: function (data) {
+            this.data = data;
+        },
+    },
+    components: {
+        AuthorInfo,
+        AuthorLink,
+        AuthorFollow,
+        // AuthorMsg,
+        AuthorGift,
+        AuthorMedals,
+        AuthorTeams,
+        AuthorPosts,
+        AuthorFans,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/author.less";
+</style>

package/src/author/AuthorFans.vue

@@ -0,0 +1,163 @@
+<template>
+    <div class="c-author-fans" v-if="list && list.length">
+        <div class="u-label">
+            <img svg-inline src="../../assets/img/leftsidebar/fans.svg" />
+            <span>粉丝榜</span>
+        </div>
+        <div class="f-avatar">
+            <el-tooltip
+                class="item"
+                effect="dark"
+                :content="'累计打赏' + item.money.toString() + '金箔'"
+                placement="top"
+                v-for="item in list"
+                :key="item.pay_user_id"
+            >
+                <a class="u-fan" :href="authorLink(item.pay_user_id)"
+                    ><el-avatar class="u-avatar" shape="circle" :size="20" :src="showAvatar(item.pay_user.avatar)"
+                        ><el-icon><Avatar/></el-icon></el-avatar
+                ></a>
+            </el-tooltip>
+            <el-avatar class="u-avatar u-more" shape="circle" :size="20" v-if="total > MAX_LENGTH">
+                <span class="f-avatar-num" v-if="total > 99">···</span>
+                <span class="f-avatar-num" v-else>+{{ total - MAX_LENGTH }}</span>
+            </el-avatar>
+        </div>
+        <div class="f-bottom">本赛季共 {{ total }} 人为TA赠礼</div>
+    </div>
+</template>
+
+<script>
+import { getFansList } from "../../service/author";
+import { showAvatar, authorLink } from "@jx3box/jx3box-common/js/utils";
+export default {
+    name: "AuthorFans",
+    props: {
+        uid: {
+            type: Number,
+            default: 0,
+        },
+    },
+    data() {
+        return {
+            list: [],
+            total: 0,
+            MAX_LENGTH : 8,
+        };
+    },
+    methods: {
+        getData() {
+            getFansList(this.uid).then((res) => {
+                this.list = res.data.data.list?.slice(0,this.MAX_LENGTH) || [];
+                this.total = res.data.data.totalUser || 0;
+            });
+        },
+        showAvatar,
+        authorLink,
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function () {
+                this.getData();
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.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 {
+        height: 30px;
+        .f-avatar-num {
+            .fz(12px);
+            color: #888;
+            font-weight: 700;
+        }
+        .u-fan{
+            .mr(5px);
+        }
+    }
+    .f-bottom {
+        .mt(5px);
+        .fz(12px, 14px);
+        font-weight: 400;
+        color: #888;
+        // transform: scale(0.8);
+        // transform-origin: 0 0;
+    }
+}
+</style>

package/src/author/AuthorFollow.vue

@@ -0,0 +1,208 @@
+<template>
+    <div class="c-author-follow">
+        <el-button
+            v-if="!isFollow"
+            class="u-btn"
+            :class="{ 'is-follow': isFollow, 'u-fans-box': isSelf }"
+            size="small"
+            plain
+            icon="Plus"
+            @click="follow"
+            :loading="loading"
+            :disabled="isSelf"
+            >{{ btnText }}</el-button
+        >
+        <el-popover
+            v-else
+            placement="bottom"
+            trigger="hover"
+            popper-class="c-author-follow-popover"
+            :visible-arrow="true"
+        >
+            <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>
+            <template #reference>
+                <el-button class="u-trigger" size="small" :type="btnType" plain icon="Check">{{
+                    btnText
+                }}</el-button>
+            </template>
+        </el-popover>
+    </div>
+</template>
+
+<script>
+import { follow, unfollow, getFansCount } from "../../service/follow";
+import User from "@jx3box/jx3box-common/js/user";
+export default {
+    name: "AuthorFollow",
+    props: {
+        uid: {
+            type: Number,
+            default: 0,
+        },
+    },
+    data() {
+        return {
+            isFollow: false,
+            fansNum: 0,
+            loading: false,
+        };
+    },
+    computed: {
+        btnText() {
+            return this.isFollow ? "已粉" : "关注";
+        },
+        btnType() {
+            return this.isFollow ? "info" : "warning";
+        },
+        actions() {
+            return [
+                {
+                    label: "发送私信",
+                    action: () => {
+                        window.open("/dashboard/letter?receiver=" + this.uid);
+                    },
+                },
+                {
+                    label: "取消关注",
+                    action: () => {
+                        this.unfollow();
+                    },
+                },
+            ];
+        },
+        isSelf() {
+            return this.uid == this.user.uid;
+        },
+        user() {
+            return User.getInfo();
+        },
+        isLogin: function () {
+            return User.isLogin();
+        },
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler(val) {
+                val && this.loadFans();
+            },
+        },
+    },
+    methods: {
+        // 格式化粉丝数
+        formatFansNum(num) {
+            if (num < 10000) {
+                return num === 0 ? "" : num;
+            } else {
+                return (num / 10000).toFixed(1) + "万";
+            }
+        },
+        // 关注
+        follow() {
+            if (!this.isLogin) {
+                User.toLogin();
+                return;
+            }
+            follow(this.uid)
+                .then(() => {
+                    this.$message.success("关注成功");
+                    this.isFollow = true;
+                    this.loadFans();
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        // 取消关注
+        unfollow() {
+            this.$confirm("确定不再关注此人？", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+            }).then(() => {
+                unfollow(this.uid)
+                    .then(() => {
+                        this.$message.success("取关成功");
+                        this.isFollow = false;
+                        this.loadFans();
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            });
+        },
+        loadFans() {
+            this.loading = true;
+            getFansCount(this.uid)
+                .then((res) => {
+                    this.fansNum = res.data.data.follower_count || 0;
+                    this.isFollow = res.data.data.is_followed;
+                })
+                .catch((err) => {
+                    console.log(err);
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-author-follow {
+    .u-btn.el-button {
+        cursor: default;
+        &:hover {
+            cursor: pointer;
+            background-color: @light-pink ;
+            color: #fff ;
+            border-color: darken(@light-pink, 2%) ;
+        }
+    }
+
+    .u-fans-box {
+        cursor: not-allowed;
+        &:hover {
+            cursor: not-allowed;
+        }
+    }
+    .u-trigger {
+        &:hover {
+            cursor: default;
+        }
+    }
+}
+.c-author-follow-popover {
+    //.u-follow-popover {
+    &.el-popover {
+        min-width: 100px;
+        padding: 0;
+        margin-top: 5px;
+        .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;
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .el-message-box {
+        max-width: 60%;
+    }
+}
+</style>