@jx3box/jx3box-vue3-ui 0.1.0 → 0.1.2

package/package.json

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

package/src/interact/Share.vue

@@ -0,0 +1,161 @@
+<template>
+    <div class="w-share2">
+        <el-popover trigger="hover" placement="right" popper-class="u-share2-pop" width="auto">
+            <div class="u-share2-content">
+                <div class="u-share2-content-main">
+                    <div
+                        v-for="shareItem in shareList"
+                        class="u-share2-item"
+                        :key="shareItem.key"
+                        @click="share(shareItem.key)"
+                        title="分享"
+                    >
+                        <img class="u-share-icon" svg-inline :src="shareItem.img" :alt="shareItem.name">
+                        <div class="u-share2-name">{{ shareItem.name }}</div>
+                    </div>
+                    <!-- <p class="tip">将文章链接贴</p> -->
+                </div>
+                <div class="u-share2-wechat">
+                    <qrcode-vue
+                        class="u-pic"
+                        :value="url.href"
+                        :size="75"
+                        level="H"
+                    ></qrcode-vue>
+                    <span>微信扫一扫分享</span>
+                </div>
+            </div>
+
+            <template #reference>
+                <!-- <el-tooltip class="item" effect="dark" content="分享" placement="top"> -->
+                    <div v-if="simple">
+                        <img class="u-icon u-simple-icon" svg-inline src="../../assets/img/widget/share.svg" />
+                        <!-- <i class="el-icon-position"></i> -->
+                        <span class="u-text">分享</span>
+                    </div>
+                    <img
+                        v-else
+                        class="u-icon"
+                        svg-inline
+                        src="../../assets/img/widget/share2.svg"
+                    />
+                <!-- </el-tooltip> -->
+            </template>
+        </el-popover>
+    </div>
+</template>
+
+<script>
+import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
+import QrcodeVue from "qrcode.vue";
+export default {
+    name: "ShareComp",
+    props: ["postType", "postId", "meta", "simple"],
+    data: function () {
+        return {
+            apis: {
+                qzone: 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?',
+                qq: 'http://connect.qq.com/widget/shareqq/index.html?',
+                wechat: '',
+                weibo: 'https://service.weibo.com/share/share.php?',
+                tieba: 'http://tieba.baidu.com/f/commit/share/openShareApi?'
+            },
+            shareList: [
+                {
+                    name: '微博',
+                    key: 'weibo',
+                    img: require('../../assets/img/widget/weibo.svg'),
+                },
+                {
+                    name: 'QQ',
+                    key: 'qq',
+                    img: require('../../assets/img/widget/qq.svg'),
+                },
+                {
+                    name: 'QQ空间',
+                    key: 'qzone',
+                    img: require('../../assets/img/widget/qzone.svg'),
+                },
+                {
+                    name: '贴吧',
+                    key: 'tieba',
+                    img: require('../../assets/img/widget/tieba.svg'),
+                },
+                /* {
+                    name: '微信',
+                    key: 'wechat',
+                    img: require('../../assets/img/widget/weixin.svg'),
+                }, */
+            ]
+        };
+    },
+    computed: {
+        ready() {
+            return !!(this.postType && this.postId);
+        },
+        url() {
+            return document.location;
+        },
+        title() {
+            return this.meta?.title || document.title;
+        },
+        pic: function() {
+            return this.meta?.banner ||  __imgPath + `image/common/logo.png`;
+        },
+        urls: function() {
+            return  {
+                qzone: this.shareToQzone,
+                weibo: this.shareToWeibo,
+                tieba: this.shareToTieba,
+                qq: this.shareToQQ,
+            }
+        },
+    },
+    methods: {
+        init: function () {
+        },
+        shareToWeibo: function (){
+            return this.apis['weibo']
+                + `url=${this.url}`
+                + `&title=${this.title}`
+                + `&pic=${this.pic}`;
+        },
+        shareToQzone: function (){
+            return this.apis['qzone']
+                + `url=${this.url}`
+                + `&title=${this.title}`
+                + '&sharesource=qzone'
+                + `&summary=${this.meta?.summary || ''}`
+                + `&desc=${this.meta?.desc || ''}`
+                + `&pics=${this.pic}`;
+        },
+        shareToQQ: function (){
+            return this.apis['qq']
+                + `url=${this.url}`
+                + `&title=${this.title}`
+                + `&pics=${this.pic}`;
+        },
+        shareToTieba: function (){
+            return this.apis['tieba']
+                + `url=${this.url}`
+                + `&title=${this.title}`
+                + `&summary=${this.meta?.summary || ''}`
+                + `&desc=${this.meta?.desc || ''}`
+                + `&pic=${this.pic}`;
+        },
+        share: function (val){
+            window.open(this.urls[val](), "_blank")
+        }
+    },
+    mounted: function () {
+        this.init();
+    },
+    components: {
+        QrcodeVue
+    }
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/share2.less";
+</style>

package/src/single/SimpleThx.vue

@@ -42,7 +42,7 @@
             </el-tooltip>
         </div>
 
-        <el-drawer v-model="showDrawer" title="打赏记录">
+        <el-drawer v-model="showDrawer" title="打赏记录" append-to-body>
             <BoxcoinRecords
                 :postId="postId"
                 :postType="postType"

package/src/single/Thx.vue

@@ -0,0 +1,189 @@
+<template>
+    <div class="w-thx">
+        <div class="w-thx-panel">
+            <boxcoin-admin
+                :postId="postId"
+                :postType="postType"
+                v-if="hasRight && adminBoxcoinEnable && boxcoin_enable"
+                :userId="userId"
+                :max="admin_max"
+                :min="admin_min"
+                :own="admin_left"
+                :total="admin_total"
+                :points="admin_points"
+                :authors="authors"
+                @updateRecord="updateRecord"
+                :client="client"
+            />
+            <Like :postId="postId" :postType="postType"></Like>
+            <fav :postId="postId" :postType="postType" :postTitle="postTitle"></fav>
+            <boxcoin-user
+                :postId="postId"
+                :postType="postType"
+                :boxcoin="boxcoin"
+                :userId="userId"
+                :own="user_left"
+                :points="user_points"
+                :authors="authors"
+                v-if="userBoxcoinEnable && boxcoin_enable && allowGift"
+                @updateRecord="updateRecord"
+                :client="client"
+            />
+            <Share :postId="postId" :postType="postType" :client="client" />
+        </div>
+        <div class="w-thx-records">
+            <boxcoin-records :postId="postId" :postType="postType" :postClient="client" :cacheRecord="cacheRecord"
+                :mode="mode" @update:boxcoin="updateBoxcoin" />
+        </div>
+        <div class="w-thx-copyright">
+            &copy;
+            所有原创作品，著作权归作者所有，所有未经授权的非署名转载或抄袭将有权追究法律责任，所有法律事务由专聘律师代理。<br />
+            签约作者独家特约稿件，及所有魔盒官方评分作品用户一经兑现则视为有偿付费稿件，所有商业稿件的转载引用需同时征得魔盒平台授权。
+        </div>
+</div>
+</template>
+
+<script>
+import Like from "../interact/Like.vue";
+import Fav from "../interact/Fav.vue";
+import BoxcoinAdmin from "../interact/BoxcoinAdmin.vue";
+import BoxcoinUser from "../interact/BoxcoinUser.vue";
+import BoxcoinRecords from "../interact/BoxcoinRecords.vue";
+import Share from "../interact/Share.vue";
+
+import User from "@jx3box/jx3box-common/js/user";
+import { getBoxcoinStatus, getPostBoxcoinConfig } from "../../service/thx";
+
+export default {
+    name: "ThxComp",
+    components: {
+        Like,
+        Fav,
+        BoxcoinAdmin,
+        BoxcoinUser,
+        BoxcoinRecords,
+        Share,
+    },
+    props: {
+        type: {
+            type: String,
+            default: "normal",
+        },
+        postId: {
+            type: Number,
+            default: 0,
+        },
+        postType: {
+            type: String,
+            default: "",
+        },
+        postTitle: {
+            type: String,
+            default: "",
+        },
+        userId: {
+            type: Number,
+            default: 0,
+        },
+        authors: {
+            type: Array,
+            default: () => [],
+        },
+        mode: {
+            type: String,
+            default: "normal",
+        },
+        client: {
+            type: String,
+            default: "std",
+        },
+        allowGift: {
+            type: [Number, Boolean],
+            default: 1,
+        },
+        adminBoxcoinEnable: {
+            type: Boolean,
+            default: false,
+        },
+        userBoxcoinEnable: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function () {
+        return {
+            boxcoin: 0,
+            hasRight: User.getInfo().group >= 32,
+            user: User.getInfo(),
+
+            admin_max: 0,
+            admin_min: 0,
+            admin_left: 0,
+            admin_total: 0,
+            admin_points: [100],
+
+            user_left: 0,
+            user_points: [100],
+
+            cacheRecord: null,
+            boxcoin_enable: 0,
+
+            showDrawer: false,
+        };
+    },
+    computed: {
+        post_keys: function () {
+            return [this.postId, this.postType];
+        },
+    },
+    watch: {
+        post_keys: {
+            immediate: true,
+            deep: true,
+            handler: function () {
+                this.postType && this.postId && this.loadBoxcoinConfig();
+            },
+        },
+    },
+    methods: {
+        loadBoxcoinConfig: function () {
+            User.isLogin() &&
+                getPostBoxcoinConfig(this.postType).then((res) => {
+                    this.admin_max = res.data.data.limit.admin_max || 0;
+                    this.admin_min = res.data.data.limit.admin_min || 0;
+                    this.admin_points = res.data.data.limit.admin_points || [10, 1000];
+                    this.admin_left = res.data.data.asManagerBoxCoinRemain || 0;
+                    this.admin_total = res.data.data.asManagerBoxCoinTotal || 0;
+
+                    this.user_points = res.data.data.limit.user_points || [10, 1000];
+                    // 根据多端展示剩余币
+                    // 作品是n端，接受n端币+all币
+                    if (this.client == "origin") {
+                        this.user_left = res.data.data.asUserBoxCoinRemainOrigin + res.data.data.asUserBoxCoinRemainAll;
+                    } else if (this.client == "std") {
+                        this.user_left = res.data.data.asUserBoxCoinRemainStd + res.data.data.asUserBoxCoinRemainAll;
+                    } else {
+                        this.user_left =
+                            res.data.data.asUserBoxCoinRemainAll +
+                            res.data.data.asUserBoxCoinRemainStd +
+                            res.data.data.asUserBoxCoinRemainOrigin;
+                    }
+                });
+            getBoxcoinStatus().then((res) => {
+                this.boxcoin_enable = !!~~res.data.data.val;
+            });
+        },
+        // 用户打赏
+        updateRecord: function (data) {
+            this.cacheRecord = data;
+        },
+        updateBoxcoin: function (data) {
+            this.boxcoin = data;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/thx.less";
+</style>