@jx3box/jx3box-common-ui 6.1.2 → 6.1.5

package/src/author/AuthorGift.vue

@@ -0,0 +1,277 @@
+<template>
+    <div class="c-author-gift">
+        <el-button
+            class="u-btn"
+            size="mini"
+            icon="el-icon-present"
+            @click="openGiftDialog"
+            :disabled="isSelf || !status"
+            :title="btnTitle"
+            >赠礼</el-button
+        >
+
+        <el-dialog
+            title="赠礼"
+            :visible.sync="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>{{ this.left }}</b>
+                </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>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="visible = false">取 消</el-button>
+                <el-button type="primary" @click="submit" :disabled="!ready || loading" :loading="loading"
+                    >确 定</el-button
+                >
+            </span>
+        </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, //默认可打赏
+
+            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: @color;
+        color: #fff;
+        border-color: darken(@color, 2%);
+
+        &:hover {
+            background-color: #fff;
+            color: darken(@color, 10%);
+            border-color: darken(@color, 10%);
+        }
+
+        &.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 {
+        .fz(14px,24px);
+        .u-label {
+            .mr(10px);
+        }
+        b {
+            // color:#49c10f;
+            // color:@color-link;
+            color: #fba524;
+            .fz(20px,1);
+            .dbi;
+            .y;
+            vertical-align: text-bottom;
+        }
+        .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>

package/src/author/AuthorInfo.vue

@@ -0,0 +1,199 @@
+<template>
+    <div class="c-author-info">
+        <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 && 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>
+        </div>
+        <div class="u-bio">{{ data.user_bio }}</div>
+    </div>
+</template>
+
+<script>
+import { __server, __imgPath, __userLevel, __userLevelColor } from "@jx3box/jx3box-common/data/jx3box.json";
+import { authorLink } from "@jx3box/jx3box-common/js/utils";
+import User from "@jx3box/jx3box-common/js/user";
+import { getUserInfo } from "../../service/author";
+import Avatar from "./Avatar.vue";
+export default {
+    name: "AuthorInfo",
+    props: ["uid"],
+    components: {
+        Avatar,
+    },
+    data: function () {
+        return {
+            data: {},
+
+            isVIP: false,
+            super_author_icon: __imgPath + "image/user/" + "superauthor.svg",
+        };
+    },
+    computed: {
+        // level
+        level: function () {
+            return User.getLevel(this.data?.experience);
+        },
+
+        // vip
+        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;
+        },
+
+        // sign
+        isSuperAuthor: function () {
+            return this.data?.sign;
+        },
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function (val) {
+                val && this.loadData();
+            },
+        },
+    },
+    methods: {
+        loadData: function () {
+            return getUserInfo(this.uid).then((data) => {
+                if (data) {
+                    this.data = data;
+                    this.$emit("ready", this.data);
+                }
+            });
+        },
+        authorLink,
+        showLevelColor: function (level) {
+            return __userLevelColor[level];
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style scoped lang="less">
+.u-author {
+    .clearfix;
+    .db;
+    .mb(10px);
+    .pr;
+}
+.u-avatar {
+    .fl;
+    .mr(15px);
+    .size(68px);
+}
+.u-name {
+    .lh(2.2);
+    .bold;
+    color: @darkblue;
+    &:hover {
+        color: #f39;
+    }
+    .nobreak;
+}
+.u-info {
+    .pr;
+    top: -4px;
+    .h(68px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.u-bio {
+    .fz(12px, 2);
+    .break(3);
+    color: #888;
+    padding: 0 5px;
+}
+.u-extend {
+    display: flex;
+}
+.u-level {
+    padding: 2px 8px;
+    .fz(12px, 14px);
+    color: #fff;
+    background-color: #aaa;
+    border-radius: 2px;
+
+    &.lv-1 {
+        background-color: #32d3c4;
+    }
+    &.lv-2 {
+        background-color: #86c0fb;
+    }
+    &.lv-3 {
+        background-color: #33d9ff;
+    }
+    &.lv-4 {
+        background-color: #ffdb2a;
+    }
+    &.lv-5 {
+        background-color: #ffa739;
+    }
+    &.lv-6 {
+        background-color: #ff70b2;
+    }
+    &.lv-7 {
+        background-color: #ff3399;
+    }
+    &.lv-8 {
+        background-color: #f93c3c;
+    }
+}
+.u-vip {
+    .ml(5px);
+    .db;
+    .i-icon-vip {
+        .db;
+        vertical-align: baseline;
+        padding: 2px 6px;
+        .fz(12px, 14px);
+        font-style: normal;
+        border-radius: 2px;
+        background-color: #ddd;
+        color: #fff;
+        &.on {
+            background-color: #6f42c1;
+        }
+    }
+}
+.u-superauthor {
+    margin-left: 4px;
+    display: inline-block;
+    vertical-align: -2px;
+    img {
+        width: 16px;
+    }
+}
+</style>

package/src/author/AuthorLink.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="c-author-link">
+        <!-- <AuthorMsg :uid="uid"/> -->
+        <a
+            v-if="data.weibo_name"
+            class="u-link u-link__weibo"
+            :href="weiboLink(data.weibo_id)"
+            target="_blank"
+            :title="data.weibo_name"
+        >
+            <img :src="getIcon('weibo')" />
+        </a>
+        <a
+            v-if="data.github_name"
+            class="u-link u-link__github"
+            :href="githubLink(data.github_name)"
+            target="_blank"
+            :title="data.github_name"
+        >
+            <img :src="getIcon('github')" />
+        </a>
+        <a
+            v-if="data.tv_type && data.tv_id"
+            class="u-link u-link__tv"
+            :href="tv_link"
+            target="_blank"
+            :title="`房间号:${data.tv_id}`"
+        >
+            <img :src="getIcon(data.tv_type)" />
+        </a>
+    </div>
+</template>
+
+<script>
+import { tvLink } from "@jx3box/jx3box-common/js/utils";
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+// import AuthorMsg from "./AuthorMsg.vue";
+export default {
+    name: "AuthorLink",
+    props: ["data"],
+    components: {
+        // AuthorMsg
+    },
+    data: function () {
+        return {};
+    },
+    computed: {
+        tv_link: function () {
+            return tvLink(this.data.tv_type, this.data.tv_id) || "";
+        },
+    },
+    watch: {},
+    methods: {
+        weiboLink: function (val) {
+            return "https://weibo.com/" + val;
+        },
+        githubLink: function (val) {
+            return "https://github.com/" + val;
+        },
+        getIcon: function (val) {
+            return __imgPath + "image/author/" + val + ".svg";
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style scoped lang="less">
+.c-author-link {
+    padding:0 2px;
+    .u-link {
+        .mr(3px);
+    }
+    img,
+    svg {
+        .size(18px);
+    }
+}
+</style>

package/src/author/AuthorMedals.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="c-author-medals" v-if="ready">
+        <div class="u-label">
+            <i class="el-icon-trophy"></i>
+            <span>作者荣誉</span>
+        </div>
+        <div class="u-medals" v-if="medals && medals.length">
+            <a
+                :href="getMedalLink(item)"
+                target="_blank"
+                class="u-medal"
+                v-for="item in medals"
+                :key="item.id"
+                :title="item.medal_desc"
+            >
+                <img class="u-medal-img" :src="showIcon(item.medal)" />
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getMedalLink } from "@jx3box/jx3box-common/js/utils";
+import { getUserMedals } from "../../service/author";
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "AuthorMedals",
+    props: ["uid"],
+    components: {},
+    data: function () {
+        return {
+            medals: [],
+        };
+    },
+    computed: {
+        ready: function () {
+            return this.uid && this.medals && this.medals.length;
+        },
+    },
+    watch: {
+        uid: {
+            immediate: true,
+            handler: function (val) {
+                val && this.loadMedals();
+            },
+        },
+    },
+    methods: {
+        loadMedals: function () {
+            getUserMedals(this.uid).then((data) => {
+                this.medals = data || [];
+            });
+        },
+        showIcon(medal) {
+            return __imgPath + "image/medals/user/" + medal + ".gif";
+        },
+        getMedalLink(medal) {
+            return getMedalLink(medal.rank_id, (medal.medal_type = "rank"));
+        },
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style scoped lang="less">
+.c-author-medals {
+    .u-label {
+        i {
+            .y;
+        }
+    }
+    .u-medals {
+        padding:0 3px;
+        display: flex;
+        .u-medal {
+            cursor: pointer;
+            .mr(2px);
+            .u-medal-img {
+                width: 20px;
+                height: 20px;
+            }
+        }
+    }
+}
+</style>

package/src/author/AuthorMsg.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="c-author-msg">
+        <img src="../../assets/img/author/msg.svg" svg-inline title="短消息" />
+    </div>
+</template>
+
+<script>
+export default {
+    name: "AuthorMsg",
+    props: ["uid"],
+    components: {},
+    data: function () {
+        return {};
+    },
+    computed: {},
+    watch: {},
+    methods: {},
+    created: function () {},
+    mounted: function () {
+        // 需要判断是否接受私信
+    },
+};
+</script>
+
+<style scoped lang="less"></style>