@jx3box/jx3box-ui 0.0.1

package/src/interact/BoxcoinUser.vue

@@ -0,0 +1,194 @@
+<template>
+    <div class="w-boxcoin-user" v-if="allowBoxcoin">
+        <el-tooltip effect="dark" content="投币" placement="top-start" v-if="canGift">
+            <div class="w-boxcoin-block" @click="openBoxcoinPop">
+                <img class="u-icon" svg-inline :src="iconPath" />
+                <span class="u-count" v-if="boxcoin">{{ boxcoin }}</span>
+            </div>
+        </el-tooltip>
+        <el-tooltip effect="dark" content="您当前等级不够，不能够进行投币。" placement="top" v-else>
+             <div class="w-boxcoin-block disabled">
+                <img class="u-icon" svg-inline :src="iconPath" />
+                <span class="u-count" v-if="boxcoin">{{boxcoin}}</span>
+            </div>
+        </el-tooltip>
+        <el-dialog
+            title="投币打赏"
+            v-model="visible"
+            class="w-boxcoin-pop"
+            append-to-body
+            :close-on-click-modal="false"
+        >
+            <div class="w-boxcoin-user-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>
+                    <Contributors v-if="authors && authors.length" :authors="authors" @chosen="handleChosen" />
+                    <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 label="custom" border>自定义</el-radio>
+                            <el-input
+                                v-model="amount"
+                                v-show="count === 'custom'"
+                                placeholder="输入自定义数量"
+                            ></el-input>
+                        </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">确 定</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { rewardBoxcoin } from "../../service/thx.js";
+import User from "@jx3box/jx3box-common/js/user";
+import Contributors from "./Contributors.vue";
+import { debounce } from "lodash";
+import JX3BOX  from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "BoxcoinUser",
+    props: ["boxcoin", "postType", "postId", "userId", "own", "points", "authors", "client","category","canGift"],
+    components: {
+        Contributors,
+    },
+    data: function () {
+        return {
+            visible: false,
+
+            count: 0,
+            remark: "辛苦了，谢谢大大！",
+            amount: "",
+
+            left: this.own,
+
+            chargeLink: "/vip/boxcoin?redirect=" + location.href,
+
+            chosen: "", // 被选中的人
+        };
+    },
+    computed: {
+        ready: function () {
+            const count = this.count === "custom" ? this.amount : this.count;
+            return this.isNotSelf && this.isEnough && count && this.remark;
+        },
+        isNotSelf: function () {
+            return this.userId != User.getInfo().uid;
+        },
+        isEnough: function () {
+            const count = this.count === "custom" ? this.amount : this.count;
+            return this.left && this.left >= count;
+        },
+        allowBoxcoin: function () {
+            return this.postType && this.postId && (this.userId || (this.authors && this.authors.length));
+        },
+        hostClient: function () {
+            return location.href.includes("origin") ? "origin" : "std";
+        },
+        fitPoints: function () {
+            return this.points; //.filter(item => item <= this.left)
+        },
+        iconPath() {
+            return JX3BOX.__cdn + "design/vector/icon/reward.svg"
+        },
+    },
+    watch: {
+        own: function (val) {
+            this.left = val;
+        },
+    },
+    methods: {
+        openBoxcoinPop: function () {
+            if (User.isLogin()) {
+                this.likeImg = require("../../assets/img/widget/like4ing.gif");
+                this.visible = true;
+
+                debounce(() => {
+                    this.likeImg = require("../../assets/img/widget/like4.png");
+                }, 2800)();
+            } else {
+                User.toLogin();
+            }
+        },
+        // 选择要打赏的对象
+        handleChosen(userId) {
+            this.chosen = userId;
+        },
+        submit: function () {
+            const count = this.count === "custom" ? this.amount : this.count;
+            rewardBoxcoin(this.postType, this.postId, this.chosen || this.userId, count, {
+                remark: this.remark,
+                client: this.client || this.hostClient,
+                redirect: this.category ? `/${this.category}/${this.postId}` : undefined
+            })
+                .then((res) => {
+                    this.$message({
+                        message: "操作成功",
+                        type: "success",
+                    });
+                    return res.data.data;
+                })
+                .then((data) => {
+                    // 1.扣除额度
+                    this.left -= this.count;
+                    // 2. 将新增emit出去
+                    this.$emit("updateRecord", data);
+                })
+                .finally(() => {
+                    this.visible = false;
+                });
+        },
+        init: function () {},
+    },
+    created: function () {},
+    mounted: function () {},
+};
+</script>
+
+<style scoped lang="less">
+.w-boxcoin-user {
+    .dbi;
+    .x(left);
+    .u-icon {
+        .size(26px);
+        .y;
+        .pr;
+    }
+    .u-count {
+        color: #888;
+        .ml(10px);
+        .pr;
+        top: 4px;
+    }
+    .u-charge {
+        .underline(@color-link);
+        .ml(10px);
+    }
+}
+</style>

package/src/interact/Contributors.vue

@@ -0,0 +1,111 @@
+<template>
+    <section class="m-contributor">
+        <div class="m-author">
+            <el-radio
+                v-for="(item, i) in authors"
+                v-model="value"
+                :label="String(item.user_id)"
+                :key="i"
+                @change="handleAuthorChange"
+            >
+                <img
+                    class="u-pic"
+                    :src="showAvatar(item.user_avatar)"
+                    :alt="item.display_name"
+                />
+                <span class="u-txt" :title="item.display_name">
+                    {{ item.display_name }}
+                </span>
+            </el-radio>
+        </div>
+    </section>
+</template>
+
+<script>
+import * as utilModule from "@jx3box/jx3box-common/js/utils";
+const { showAvatar } = utilModule;
+export default {
+    name: "ContributorsComp",
+    props: {
+        authors: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+            value: "",
+        };
+    },
+    watch: {
+        authors: {
+            deep: true,
+            immediate: true,
+            handler(val) {
+                if (val && val.length) this.value = String(val[0]?.user_id)
+            }
+        },
+        value: {
+            immediate: true,
+            handler(val) {
+                val && this.$emit('chosen', this.value)
+            }
+        }
+    },
+    methods: {
+        handleAuthorChange() {},
+        showAvatar,
+    },
+};
+</script>
+
+<style lang="less">
+.m-contributor {
+    padding: 10px 10px 0 10px;
+    .m-author {
+        .u-pic {
+            .db;
+            .size(48px);
+            background-color: @bg-black;
+            .r(4px);
+            transition: 0.1s ease-in;
+            // .tm(0.4);
+            box-sizing: border-box;
+
+            &:hover {
+                .tm(1);
+            }
+        }
+        .u-txt {
+            .db;
+            .x;
+            .fz(12px, 2);
+            white-space: nowrap;
+            overflow: hidden;
+            .w(48px);
+        }
+
+        .el-radio {
+            .ml(0);
+            .mr(15px);
+        }
+        .el-radio__input {
+            .none;
+        }
+        .el-radio__label {
+            .db;
+            padding-left: 0;
+        }
+
+        .is-checked {
+            .u-pic {
+                border: 3px solid @primary;
+                .tm(1);
+            }
+            .u-txt {
+                .bold;
+            }
+        }
+    }
+}
+</style>

package/src/interact/Fav.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="w-fav2" :class="{ disabled: favorite }" @click="doFav">
+        <el-tooltip effect="dark" :content="favContent" placement="top-start">
+            <div class="w-fav2_content">
+                <img v-if="favorite" class="u-icon" svg-inline :src="unstarIcon" />
+                <img v-else class="u-icon" svg-inline :src="starIcon" />
+                <span class="u-count" v-if="!hiddenNum && total">{{ total }}</span>
+            </div>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+import { hasFav, addFav, delFav } from "../../service/fav";
+import JX3BOX  from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "FavoriteComp",
+    props: ["postType", "postId", "postTitle", "hiddenNum", "isOld"],
+    data: function () {
+        return {
+            login: User.isLogin(),
+            favorite: false,
+            total: 0,
+        };
+    },
+    computed: {
+        favContent() {
+            return this.favorite ? "已收藏" : "收藏";
+        },
+        starIcon() {
+            return this.isOld ? require("../../assets/img/widget/star.svg") : JX3BOX.__cdn + "design/vector/icon/collect.svg"
+        },
+        unstarIcon() {
+            return this.isOld ? require("../../assets/img/widget/unstar.svg") : JX3BOX.__cdn + "design/vector/icon/uncollect.svg"
+        },
+    },
+    methods: {
+        doFav: function () {
+            if (this.login) {
+                this.favorite ? this.delFav() : this.addFav();
+            } else {
+                User.toLogin();
+            }
+        },
+        hasFav: function () {
+            hasFav(this.postType, this.postId).then((res) => {
+                this.favorite = res.id || false;
+                this.total = res.totalFavorites || 0;
+            });
+        },
+        addFav: function () {
+            addFav(this.postType, this.postId, this.postTitle).then((res) => {
+                this.favorite = res.id;
+                this.total++;
+            });
+        },
+        delFav: function () {
+            delFav(this.favorite).then(() => {
+                this.favorite = false;
+                this.total && this.total--;
+            });
+        },
+    },
+    watch: {
+        postId: {
+            immediate: true,
+            handler() {
+                if (this.postType && this.postId) this.hasFav();
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.w-fav2 {
+    .pointer;
+    .dbi;
+    .u-icon {
+        .size(26px);
+        .y;
+        .pr;
+    }
+    .u-count {
+        color: #888;
+        .ml(10px);
+    }
+
+    .w-fav2_content {
+        .flex;
+        align-items: center;
+    }
+}
+</style>

package/src/interact/Like.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="w-like2" :class="{ disabled: !status }" @click="addLike" v-if="ready">
+        <el-tooltip effect="dark" content="点赞" placement="top-start">
+            <div>
+                <img class="u-icon" svg-inline :src="iconPath" />
+                <span class="u-count" v-if="count">{{ count }}</span>
+            </div>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import { postStat, getStat } from "@jx3box/jx3box-common/js/stat";
+import JX3BOX  from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "LikeComp",
+    props: ["postType", "postId"],
+    data: function () {
+        return {
+            status: true,
+            count: 0,
+        };
+    },
+    computed: {
+        ready() {
+            return this.postType && this.postId;
+        },
+        iconPath() {
+            return JX3BOX.__cdn + "design/vector/icon/like.svg"
+        },
+    },
+    methods: {
+        init: function () {
+            this.loadStat();
+        },
+        loadStat: function () {
+            getStat(this.postType, this.postId).then((res) => {
+                this.count = res.data.likes || 0;
+            });
+        },
+        // 点赞
+        addLike: function () {
+            if (!this.ready) return;
+            this.count++;
+            if (this.status) {
+                postStat(this.postType, this.postId, "likes");
+            }
+            this.status = false;
+        },
+    },
+    watch: {
+        postId: function () {
+            this.init();
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/interact/like2.less";
+</style>

package/src/interact/Rss.vue

@@ -0,0 +1,163 @@
+<template>
+    <div class="w-rss">
+        <el-tooltip effect="dark" :content="tooltipContent" placement="top-start">
+            <div @click="onRssClick">
+                <img v-if="subscribed" class="u-icon" svg-inline :src="rmSrc" />
+                <img v-else class="u-icon" svg-inline :src="addSrc" />
+                <span class="u-count" v-if="!hiddenNum && total > 0">{{ total }}</span>
+            </div>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import User from "@jx3box/jx3box-common/js/user";
+import {
+    getCommunityRss,
+    getWikiRss,
+    getPostRss,
+    subscribeCommunity,
+    subscribePost,
+    subscribeWiki,
+    unsubscribeWiki,
+    unsubscribeCommunity,
+    unsubscribePost,
+} from "@jx3box/jx3box-common/js/rss";
+const jx3box = require("@jx3box/jx3box-common/data/jx3box.json");
+
+export default {
+    name: "RssComponent",
+    props: {
+        type: {
+            type: String,
+            default: "", // community, cj, bps,
+        },
+        id: {
+            type: [String, Number],
+            default: "",
+        },
+        hiddenNum: {
+            type: Boolean,
+            default: false,
+        },
+        title: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            subscribed: false,
+            total: 0,
+        };
+    },
+    computed: {
+        tooltipContent() {
+            return this.subscribed ? "已订阅" : "加入订阅";
+        },
+        addSrc() {
+            return jx3box.__cdn + "design/vector/icon/rss.svg";
+        },
+        rmSrc() {
+            return jx3box.__cdn + "design/vector/icon/unrss.svg";
+        },
+        category({ type }) {
+            if (type.includes("community") || type.includes("bbs")) return "community";
+            if (jx3box.__postType[type]) return "posts";
+            if (jx3box.__wikiType[type]) return "wiki";
+            return "";
+        },
+        getRssFn({ category }) {
+            if (category === "community") return getCommunityRss;
+            if (category === "posts") return getPostRss;
+            if (category === "wiki") return getWikiRss;
+            return null;
+        },
+        subscribeFn({ category }) {
+            if (category === "community") return subscribeCommunity;
+            if (category === "posts") return subscribePost;
+            if (category === "wiki") return subscribeWiki;
+            return null;
+        },
+        unsubscribeFn({ category }) {
+            if (category === "community") return unsubscribeCommunity;
+            if (category === "posts") return unsubscribePost;
+            if (category === "wiki") return unsubscribeWiki;
+            return null;
+        },
+        params() {
+            return {
+                type: this.type,
+                id: this.id,
+                data: {
+                    title: this.title
+                }
+            }
+        },
+        isLogin() {
+            return User.isLogin();
+        },
+    },
+    watch: {
+        params: {
+            deep: true,
+            immediate: true,
+            handler(val) {
+                if (this.isLogin && val?.id) {
+                    this.checkSubscribed();
+                }
+            }
+        }
+    },
+    methods: {
+        onRssClick() {
+            console.log("onRssClick");
+            if (!this.isLogin) {
+                User.toLogin();
+                return;
+            }
+            if (this.subscribed) {
+                this.unsubscribe();
+            } else {
+                this.subscribe();
+            }
+        },
+        checkSubscribed() {
+            this.getRssFn && this.getRssFn(this.params).then((res) => {
+                this.subscribed = res.data.data.subscribed;
+                this.total = res.data.data.total;
+            });
+        },
+        subscribe() {
+            this.subscribeFn && this.subscribeFn(this.params).then(() => {
+                this.subscribed = true;
+                this.total++;
+            });
+        },
+        unsubscribe() {
+            this.unsubscribeFn && this.unsubscribeFn(this.params).then(() => {
+                this.subscribed = false;
+                this.total--;
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.w-rss {
+    .pointer;
+    .dbi;
+    .u-icon {
+        .size(26px);
+        .y;
+        .pr;
+    }
+    .u-count {
+        color: #888;
+        .ml(10px);
+        top: 2px;
+        .pr;
+    }
+}
+</style>