@jx3box/jx3box-common-ui 5.9.5 → 5.9.6

package/assets/css/author.less

@@ -190,6 +190,10 @@
             color: #555;
         }
     }
+
+    .u-follow-box {
+        .mb(10px);
+    }
 }
 
 .c-sidebar-left .c-author {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "5.9.5",
+  "version": "5.9.6",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {
@@ -33,7 +33,7 @@
     "@jx3box/jx3box-comment-ui": "^1.7.0",
     "@jx3box/jx3box-common": "^7.3.5",
     "@jx3box/jx3box-data": "^1.10.2",
-    "@jx3box/jx3box-editor": "^1.3.8",
+    "@jx3box/jx3box-editor": "^1.4.0",
     "axios": "^0.26.1",
     "dayjs": "^1.11.0",
     "element-ui": "^2.13.2",

package/service/follow.js

@@ -0,0 +1,52 @@
+import { $next } from "@jx3box/jx3box-common/js/https"
+
+/**
+ * 关注用户
+ * @param {*} userId 用户id
+ */
+function follow(userId) {
+    return $next().post(`/api/my-userlist/follow/${userId}`)
+}
+
+/**
+ * 取消关注用户
+ * @param {*} userId 用户id
+ */
+function unfollow(userId) {
+    return $next().delete(`/api/my-userlist/follow/${userId}`)
+}
+
+/**
+ * 获取我的关注列表
+ * @param {*} param 参数
+ * @param {*} param.pageIndex 页码
+ * @param {*} param.pageSize 每页数量
+ * @param {*} param.user_id 用户id
+ * @param {*} param.display_name 用户昵称
+ */
+function getMyFollowList(params) {
+    return $next().get(`/api/my-userlist/follow`, {
+        params
+    })
+}
+
+/**
+ * 获取我的粉丝列表
+ * @param {*} param 参数
+ * @param {*} param.pageIndex 页码
+ * @param {*} param.pageSize 每页数量
+ * @param {*} param.user_id 用户id
+ * @param {*} param.display_name 用户昵称
+ */
+function getMyFansList(params) {
+    return $next().get(`/api/my-userlist/follow-me`, {
+        params
+    })
+}
+
+export {
+    follow,
+    unfollow,
+    getMyFollowList,
+    getMyFansList
+}

package/src/Author.vue

@@ -27,6 +27,7 @@
             </div>
         </div>
         <div class="u-bio">{{ data.user_bio }}</div>
+        <AuthorFollow v-if="isLogin" 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" />
@@ -80,16 +81,18 @@
 </template>
 
 <script>
-const liveStatusMap = ["等待开播", "直播中", "直播结束"];
-import Avatar from "./author/Avatar.vue";
-import Authorposts from "./author/Authorposts.vue";
+// 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 AuthorFollow from "./author/AuthorFollow.vue";
 export default {
     name: "Author",
     props: ["uid"],
@@ -149,6 +152,9 @@ export default {
         level: function() {
             return User.getLevel(this.data?.experience);
         },
+        isLogin: function() {
+            return User.isLogin();
+        },
     },
     methods: {
         loadData: function() {
@@ -215,7 +221,8 @@ export default {
     components: {
         Avatar,
         Authorposts,
-        medal
+        medal,
+        AuthorFollow,
     },
 };
 </script>

package/src/author/AuthorFollow.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="u-follow">
+        <el-button
+            :class="{ 'is-follow': isFollow }"
+            size="mini"
+            :icon="btnIcon"
+            @click="follow"
+            :type="btnType"
+            v-if="!isFollow"
+        >
+            {{ btnText }} {{ formatFansNum(fansNum) }}
+        </el-button>
+        <el-popover
+            v-else
+            placement="bottom"
+            trigger="hover"
+            popper-class="u-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>
+            <el-button class="u-unfollow-btn" size="mini" :type="btnType" slot="reference">{{ btnText }} {{ formatFansNum(fansNum) }}</el-button>
+        </el-popover>
+        <el-button size="mini" icon="el-icon-message" disabled>私信</el-button>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+import { follow, unfollow, getMyFollowList } from "../../service/follow";
+export default {
+    name: "AuthorFollow",
+    props: {
+        uid: {
+            type: Number,
+            default: 0,
+        },
+    },
+    data() {
+        return {
+            isFollow: false,
+            fansNum: 0,
+        };
+    },
+    computed: {
+        btnText() {
+            return this.isFollow ? "已关注" : "关注";
+        },
+        btnIcon() {
+            return this.isFollow ? "" : "el-icon-plus";
+        },
+        btnType() {
+            return this.isFollow ? "info" : "warning"
+        },
+        actions() {
+            return [
+                {
+                    label: "取消关注",
+                    action: () => {
+                        this.unfollow();
+                    },
+                },
+            ];
+        }
+    },
+    mounted () {
+        this.loadMyFollow();
+    },
+    methods: {
+        // 格式化粉丝数
+        formatFansNum(num) {
+            if (num < 10000) {
+                return num;
+            } else {
+                return (num / 10000).toFixed(1) + "万";
+            }
+        },
+        // 关注
+        follow() {
+            follow(this.uid)
+                .then((res) => {
+                    this.$message.success("关注成功");
+                    this.isFollow = true;
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        // 取消关注
+        unfollow() {
+            this.$confirm('确定不再关注此人？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                unfollow(this.uid)
+                    .then((res) => {
+                        this.$message.success("取关成功");
+                        this.isFollow = false;
+                    })
+                    .catch((err) => {
+                        console.log(err);
+                    });
+            });
+            console.log(1)
+        },
+        // 获取是否已关注
+        loadMyFollow() {
+            const params = {
+                pageIndex: 1,
+                pageSize: 10,
+                user_id: this.uid,
+            };
+            getMyFollowList(params)
+                .then((res) => {
+                    if (res.data.data.list.length > 0) {
+                        this.isFollow = true;
+                    } else {
+                        this.isFollow = false;
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        // TODO: 获取粉丝数
+    },
+};
+</script>
+
+<style lang="less">
+.u-follow {
+}
+.u-unfollow-btn {
+    margin-right: 10px;
+}
+.u-follow-popover {
+    min-width: 100px;
+    padding: 0;
+    margin: 0;
+    .u-action-list {
+        .u-action-item {
+            text-align: center;
+            cursor: pointer;
+            padding: 12px 15px;
+            &:hover {
+                background: rgb(248,248,251);
+            }
+        }
+    }
+}
+</style>