@jx3box/jx3box-ui 0.0.1

package/src/author/AuthorFans.vue

@@ -0,0 +1,170 @@
+<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.summary.toString() + '盒币'"
+                placement="top"
+                v-for="item in list"
+                :key="item.pay_user_id"
+            >
+                <a class="u-fan" :href="authorLink(item.user_id)"
+                    ><el-avatar class="u-avatar" shape="circle" :size="20" :src="showAvatar(item.user_info.avatar)"
+                        ><i class="el-icon-s-custom"></i></el-avatar
+                ></a>
+            </el-tooltip>
+        </div>
+        <div class="f-bottom">
+            粉丝数: <span class="u-count">{{ fans_count }}</span
+            ><template v-if="boxcoin_count">，累计收到盒币打赏: <span class="u-count">{{ boxcoin_count }}</span></template>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getFansList, getSummary } 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,
+
+            fans_count: 0,
+            boxcoin_count: 0,
+        };
+    },
+    methods: {
+        getData() {
+            if (!~~this.uid) return;
+            getSummary(this.uid).then((res) => {
+                this.fans_count = res.data.data?.fans_count || 0;
+                this.boxcoin_count = res.data.data?.boxcoin_count || 0;
+            });
+
+            getFansList(this.uid, this.fansLimit).then((res) => {
+                this.list = res.data.data.list || [];
+            });
+        },
+        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,205 @@
+<template>
+    <div class="c-author-follow">
+        <el-button
+            v-if="!isFollow"
+            class="u-btn"
+            :class="{ 'is-follow': isFollow, 'u-fans-box': isSelf }"
+            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" :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>

package/src/author/AuthorGift.vue

@@ -0,0 +1,286 @@
+<template>
+    <div class="c-author-gift">
+        <el-button
+            class="u-btn"
+            icon="Present"
+            @click="openGiftDialog"
+            :disabled="isSelf || !status"
+            :title="btnTitle"
+            plain
+            >赠礼</el-button
+        >
+
+        <el-dialog
+            title="赠礼"
+            v-model="visible"
+            :append-to-body="true"
+            class="c-author-gift-dialog"
+            v-if="status"
+        >
+            <div class="u-content">
+                <div class="u-left">
+                    <em class="u-label">🌟 金箔</em>
+                    <b>{{ left }}</b>
+                    <a class="u-charge" :href="chargeLink" target="_blank">[充值]</a>
+                </div>
+                <div class="u-list">
+                    <em class="u-label">❤️ 赠送</em>
+                    <div class="u-points">
+                        <el-radio-group v-model="count">
+                            <el-radio :label="item" v-for="item in fitPoints" :key="item" border>
+                                <b>{{ item }}</b
+                                >金箔
+                            </el-radio>
+                        </el-radio-group>
+                    </div>
+                </div>
+                <div class="u-msg">
+                    <em class="u-label">📝 寄语</em>
+                    <div class="u-input">
+                        <el-input
+                            v-model="remark"
+                            placeholder="请输入寄语（必填）"
+                            :minlength="2"
+                            :maxlength="30"
+                            show-word-limit
+                        ></el-input>
+                    </div>
+                </div>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="visible = false">取 消</el-button>
+                    <el-button type="primary" @click="submit" :disabled="!ready || loading" :loading="loading"
+                        >确 定</el-button
+                    >
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+import { sendCny, checkCnyStatus, checkGiftStatus } from "../../service/thx";
+export default {
+    name: "AuthorGift",
+    props: ["uid"],
+    components: {},
+    data: function () {
+        return {
+            loading: false,
+            visible: false,
+            fitPoints: [50, 100, 250, 520, 666, 888, 1314, 2288, 3344, 6666, 8888, 28888, 36888, 68888],
+
+            left: 0, //剩余量
+            status: true, //默认可打赏
+            chargeLink: "/vip/cny?redirect=" + location.href,
+
+            count: 0, //打赏数量
+            remark: "辛苦，感谢！",
+        };
+    },
+    computed: {
+        user() {
+            return User.getInfo();
+        },
+        isSelf() {
+            return this.uid == this.user.uid;
+        },
+        ready: function () {
+            // 不能赠送给自己
+            // 余额足够
+            // 打赏额度不能为空
+            // 必须填写赠言
+            return !this.isSelf && this.left && this.left >= this.count && this.count && this.remark;
+        },
+        btnTitle: function () {
+            if (this.isSelf) {
+                return "不能给自己赠送礼物";
+            } else if (!this.status) {
+                return "作者没有开启接受礼物";
+            }
+            return "";
+        },
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function (val) {
+                val && this.load();
+            },
+        },
+    },
+    methods: {
+        openGiftDialog: function () {
+            if (!User.isLogin()) {
+                User.toLogin();
+                return;
+            } else {
+                this.visible = true;
+            }
+        },
+        submit: async function () {
+            this.loading = true;
+            sendCny(this.user.uid, this.uid, this.count, this.remark).then((res) => {
+                console.info("[AUTHOR.CNY]发起交易");
+                // 消费凭证ID
+                const id = res.data.data.id;
+
+                console.info("[AUTHOR.CNY]开始轮询交易结果");
+                // 状态轮询
+                const loading = this.$loading({
+                    lock: true,
+                    text: "正在处理中",
+                    spinner: "el-icon-loading",
+                    background: "rgba(255, 255, 255, 0.8)",
+                });
+
+                let n = 0;
+                const timer = setInterval(async () => {
+                    console.info(`[AUTHOR.CNY]第${n + 1}次轮询开始`);
+                    await checkCnyStatus(id)
+                        .then((res) => {
+                            // 状态
+                            let status = res.data.data.finish;
+
+                            // 交易成功
+                            if (status) {
+                                console.info(`[AUTHOR.CNY]交易成功`);
+                                //关闭轮询
+                                loading.close();
+                                clearInterval(timer);
+                                // 关闭加载状态 & 消息提醒
+                                this.visible = false;
+                                this.loading = false;
+                                this.$message({
+                                    message: "赠送成功",
+                                    type: "success",
+                                });
+
+                                // 结算与重置
+                                this.left = this.left - this.count;
+                                this.count = 100;
+                                this.remark = "辛苦，感谢！";
+                            } else {
+                                console.info(`[AUTHOR.CNY]重新轮询`);
+                            }
+                        })
+                        .finally(() => {
+                            n += 1;
+                            console.info(`[AUTHOR.CNY]第${n}次轮询结束`);
+                        });
+
+                    // 最多尝试3次
+                    if (n > 5) {
+                        console.info(`[AUTHOR.CNY]${n}次轮询未果，退出轮询`);
+                        //关闭轮询
+                        loading.close();
+                        clearInterval(timer);
+                        // 关闭加载状态 & 消息提醒
+                        this.visible = false;
+                        this.loading = false;
+                        this.$message("交易繁忙，请稍后再试");
+                    }
+                }, 1000);
+            });
+        },
+        load: function () {
+            // 加载用户是否接受赠送与当前用户余额，仅当打开时执行一次
+            User.isLogin() &&
+                checkGiftStatus(this.uid).then((res) => {
+                    this.left = res.data.data.cny || 0; // 当前登录用户的余额
+                    this.status = res.data.data.targetUserCanReceiveCNY; // 目标用户是否接受充电
+                });
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style scoped lang="less">
+.c-author-gift {
+    .u-btn {
+        // @color: #f9afd4;
+        // background-color: #fff;
+        // color: darken(@color, 10%);
+        // border-color: darken(@color, 10%);
+
+        &:hover {
+            background-color: @light-pink;
+            color: #fff;
+            border-color: darken(@light-pink, 2%);
+        }
+
+        &.is-disabled {
+            color: #c0c4cc;
+            cursor: not-allowed;
+            background-image: none;
+            background-color: #fff;
+            border-color: #ebeef5;
+        }
+    }
+}
+.c-author-gift-dialog {
+    .fz(14px,2);
+
+    .el-dialog__body {
+        padding-top: 10px;
+        padding-bottom: 0;
+    }
+
+    .u-left {
+        display: flex;
+        align-items: center;
+        .fz(14px,24px);
+        .u-label {
+            .mr(10px);
+        }
+        b {
+            // color:#49c10f;
+            // color:@color-link;
+            color: #fba524;
+            .fz(20px,1);
+            .dbi;
+            .y;
+            vertical-align: text-bottom;
+        }
+        .u-charge {
+            .ml(8px);
+        }
+        .el-progress {
+            margin: 10px;
+        }
+    }
+    .u-list {
+        .mt(10px);
+    }
+    .u-points {
+        padding: 10px;
+        .el-radio {
+            .ml(0) !important;
+            .mb(10px);
+            .w(140px);
+            b {
+                color: #e81224;
+                .mr(5px);
+            }
+        }
+        .el-input-number {
+            .ml(0) !important;
+            .mb(10px);
+            .w(140px);
+        }
+    }
+
+    .u-label {
+        font-style: normal;
+        background-color: @bg-gray;
+        padding: 5px 10px;
+    }
+    .u-input {
+        padding: 10px 0 10px 10px;
+    }
+}
+</style>