@jx3box/jx3box-common-ui 6.6.6 → 6.6.9

package/src/header/user.vue

@@ -1,73 +1,188 @@
 <template>
     <div class="c-header-user" id="c-header-user">
         <template v-if="isLogin">
-            <!-- user msg -->
+            <!-- 消息中心 -->
             <div class="c-header-msg" id="c-header-msg">
-                <el-tooltip effect="dark" content="我的消息" placement="bottom">
+                <el-tooltip effect="dark" content="消息中心" placement="bottom">
                     <a class="u-msg" :href="url.msg">
                         <i class="u-icon u-icon-msg">
                             <i class="u-pop" style="display: none" v-show="pop"></i>
-                            <img svg-inline src="../../assets/img/header/msg.svg" />
+                            <img svg-inline src="../../assets/img/header/bell.svg" />
                         </i>
                     </a>
                 </el-tooltip>
             </div>
 
-            <!-- user panel -->
+            <!-- 创作中心 -->
             <div class="c-header-panel" id="c-header-panel">
-                <el-tooltip effect="dark" content="发布中心" placement="bottom">
+                <el-tooltip effect="dark" content="创作中心" placement="bottom">
                     <a class="u-post" :href="url.publish">
-                        <img class="u-add" svg-inline src="../../assets/img/header/add.svg" />
+                        <img class="u-add" svg-inline src="../../assets/img/header/edit.svg" />
                     </a>
                 </el-tooltip>
             </div>
 
+            <!-- 我的资产 -->
+            <div class="c-header-panel c-header-assets" @mouseenter="onAssetsHover" @mouseleave="onAssetsBlur">
+                <a class="u-asset" href="/dashboard/boxcoin">
+                    <img class="u-coin" svg-inline src="../../assets/img/header/coin.svg" />
+                </a>
+
+                <div class="u-assets" v-show="showAssets">
+                    <div class="u-detail">
+                        <span class="u-item">
+                            <!-- <span class="u-item-primary>" -->
+                            <span class="u-label"><i class="el-icon-user"></i> 等级</span>
+                            <span class="u-value" :style="levelStyle">Lv.{{ level }}</span>
+                            <!-- </span> -->
+                            <!-- <span class="u-item-extend"><a href="/notice/28917" target="_blank">[权益]</a></span> -->
+                        </span>
+                        <span class="u-item">
+                            <span class="u-item-primary"
+                                ><span class="u-label"><i class="el-icon-coin"></i> 盒币</span>
+                                <span class="u-value">{{ asset.box_coin }}</span></span
+                            >
+                            <span class="u-item-extend"
+                                ><a href="/dashboard/boxcoin" target="_blank">[兑换通宝]</a></span
+                            >
+                        </span>
+                        <span class="u-item">
+                            <span class="u-item-primary"
+                                ><span class="u-label"><i class="el-icon-wallet"></i> 金箔</span
+                                ><span class="u-value">{{ asset.cny }}</span></span
+                            >
+                            <span class="u-item-extend"
+                                ><a href="/vip/cny" target="_blank">[充值]</a>
+                                <a href="/dashboard/cny" target="_blank">[提现]</a></span
+                            >
+                        </span>
+                        <span class="u-item">
+                            <span class="u-item-primary"
+                                ><span class="u-label"><i class="el-icon-sugar"></i> 银铛</span>
+                                <span class="u-value">{{ asset.points }}</span></span
+                            >
+                            <span class="u-item-extend"
+                                ><a href="/vip/mall" target="_blank">[兑礼]</a
+                                ><a href="/vip/lottery" target="_blank">[抽奖]</a></span
+                            >
+                        </span>
+                        <span class="u-item">
+                            <span class="u-item-primary"
+                                ><span class="u-label"><i class="el-icon-bank-card"></i> 卡密</span>
+                                <span class="u-value">{{ asset.ext_info ? asset.ext_info.keycode : 0 }}</span></span
+                            >
+                            <span class="u-item-extend"><a href="/dashboard/card" target="_blank">[查看]</a></span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- vip -->
+            <div class="c-header-panel" id="c-header-vip">
+                <el-tooltip effect="dark" content="会员中心" placement="bottom">
+                    <a class="u-post" href="/vip/premium">
+                        <img class="u-add" svg-inline src="../../assets/img/header/vip.svg" />
+                    </a>
+                </el-tooltip>
+            </div>
+
+            <!-- manage -->
+            <div
+                class="c-header-panel c-header-manage"
+                id="c-header-manage"
+                v-if="isEditor"
+                @mouseenter="showManage = true"
+                @mouseleave="showManage = false"
+            >
+                <span class="u-post">
+                    <img class="u-add" svg-inline src="../../assets/img/header/manage.svg" />
+                </span>
+                <ul class="u-menu" v-show="showManage">
+                    <li v-if="isAdmin">
+                        <a href="/admin">站点配置</a>
+                    </li>
+                    <li v-if="isEditor">
+                        <a href="https://os.jx3box.com/admin">管理平台</a>
+                    </li>
+                </ul>
+            </div>
+
             <!-- user info -->
             <div class="c-header-info">
                 <div class="c-header-profile" id="c-header-profile" @click="showmenu">
                     <img class="u-avatar" :src="user.avatar" />
-                    <span class="u-dropdown"></span>
-                    <ul class="u-menu" v-show="!fold">
-                        <li>
-                            <a class="u-me" :href="url.homepage">
-                                <b>{{ showUserName(user.name) }}</b>
-                                <img
-                                    v-if="isSuperAuthor"
-                                    :src="super_author_icon"
-                                    class="u-superauthor-profile"
-                                    alt="superauthor"
-                                    title="签约作者"
-                                />
-                                <em>(UID : {{ user.uid }})</em>
-                            </a>
-                        </li>
-                        <li>
-                            <a class="u-vip" href="/vip/premium?from=header_usermenu" target="_blank">
-                                <i class="i-icon-vip" :class="{ on: isVIP || isPRO }">{{ vipType }}</i>
-                                <span class="u-vip-type">
-                                    <template v-if="isVIP || isPRO">
-                                        {{ vipTypeTxt }}
-                                        <span class="u-vip-left">({{ vipLeftDays }}天)</span>
-                                    </template>
-                                    <template v-else>升级账号类型</template>
-                                </span>
-                                <!-- <span class="u-expire" v-if="expire_date">(有效期至:{{expire_date}})</span> -->
-                            </a>
-                        </li>
-                        <hr />
-                        <template v-for="(item, i) in panel">
-                            <li :key="'panel-' + i" v-if="isEditor || !item.onlyAdmin">
-                                <a :href="item.link">{{ item.label }}</a>
+                    <template v-if="isPhone">
+                        <ul class="u-menu" v-show="!fold">
+                            <li>
+                                <a href="/dashboard">个人中心</a>
+                            </li>
+                            <li>
+                                <a :href="url.msg">消息中心</a>
+                            </li>
+                            <li>
+                                <a :href="url.publish">发布中心</a>
+                            </li>
+                            <li v-if="isAdmin">
+                                <a href="/admin">站点配置</a>
                             </li>
-                        </template>
-                        <hr />
-                        <li>
-                            <a :href="url.profile">设置</a>
-                        </li>
-                        <li>
-                            <a @click="logout()">登出</a>
-                        </li>
-                    </ul>
+                            <li v-if="isEditor">
+                                <a href="https://os.jx3box.com/admin">管理平台</a>
+                            </li>
+                            <hr>
+                            <li>
+                                <a @click="logout">退出登录</a>
+                            </li>
+                        </ul>
+                    </template>
+                    <template v-else>
+                        <div class="m-info" v-show="!fold">
+                            <div class="u-profile">
+                                <b :title="user.name">{{ showUserName(user.name) }}</b>
+                                <div class="u-id">
+                                    <span>魔盒UID：{{ user.uid }}</span>
+                                    <i class="el-icon-document-copy u-copy" @click.stop="copyText(user.uid)"></i>
+                                </div>
+                                <div class="m-vip">
+                                    <a href="/dashboard/cooperation">
+                                        <img
+                                            :src="super_author_icon"
+                                            class="u-superauthor-profile"
+                                            alt="superauthor"
+                                            title="签约作者"
+                                            :class="{ off: !isSuperAuthor }"
+                                    /></a>
+
+                                    <a
+                                        class="u-vip"
+                                        href="/vip/premium?from=header_usermenu"
+                                        target="_blank"
+                                        title="专业版"
+                                    >
+                                        <i class="i-icon-vip" :class="{ on: isPRO }">{{ vipType }}</i>
+                                    </a>
+                                </div>
+                            </div>
+
+                            <el-button-group class="u-actions">
+                                <a class="el-button el-button--default" :href="url.profile">资料设置</a>
+                                <a class="el-button el-button--default" :href="url.homepage">个人主页</a>
+                                <a class="el-button el-button--default" href="/dashboard/frame">主题风格</a>
+                            </el-button-group>
+
+                            <div class="m-other">
+                                <a href="/dashboard/fav" class="u-item"> 我的收藏 </a>
+                                <a href="/team/role/manage" class="u-item"> 我的角色 </a>
+                                <a href="/dashboard/purchases" class="u-item"> 付费购买的资源 </a>
+                                <a href="/vip/mall" class="u-item"> 积分商城兑好礼 </a>
+                                <hr />
+                                <a href="/dashboard/feedback" class="u-item"> 反馈中心 </a>
+                                <hr />
+                                <div class="u-logout">
+                                    <el-button @click="logout">退出登录</el-button>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
                 </div>
             </div>
         </template>
@@ -84,12 +199,13 @@
 <script>
 import User from "@jx3box/jx3box-common/js/user";
 import { showDate } from "@jx3box/jx3box-common/js/moment";
-import { __Links, __Root, __imgPath, __OriginRoot } from "@jx3box/jx3box-common/data/jx3box.json";
+import { __Links, __Root, __imgPath, __OriginRoot, __userLevelColor } from "@jx3box/jx3box-common/data/jx3box.json";
 import panel from "../../assets/data/panel.json";
 import { getMsg, getMenu } from "../../service/header";
 import { getMyInfo, userSignIn } from "../../service/author";
 import dayjs from "dayjs";
 import isToday from "dayjs/plugin/isToday";
+import { copyText } from "../../assets/js/utils";
 dayjs.extend(isToday);
 export default {
     props: [],
@@ -126,6 +242,12 @@ export default {
                 was_pro: 0,
             },
 
+            // assets
+            showAssets: false,
+
+            // manage
+            showManage: false,
+
             // 链接
             login_url: __Links.account.login + "?redirect=" + location.href,
             register_url: __Links.account.register + "?redirect=" + location.href,
@@ -140,7 +262,7 @@ export default {
             return User._isPRO(this.asset) || false;
         },
         vipType: function () {
-            return this.isPRO ? "PRO" : "PRE";
+            return "PRO";
         },
         vipTypeTxt: function () {
             return this.isPRO ? "专业版" : "高级版";
@@ -169,6 +291,17 @@ export default {
         siteRoot: function () {
             return location.host.includes("origin") ? __OriginRoot : __Root;
         },
+        level: function () {
+            return User.getLevel(this.asset.experience);
+        },
+        levelStyle: function () {
+            return {
+                color: __userLevelColor[this.level],
+            };
+        },
+        isPhone: function () {
+            return window.innerWidth < 768;
+        },
     },
     watch: {
         fold(val) {
@@ -278,6 +411,13 @@ export default {
                 this.isSuperAuthor = !!res.sign;
             });
         },
+        onAssetsHover: function () {
+            this.showAssets = true;
+        },
+        onAssetsBlur: function () {
+            this.showAssets = false;
+        },
+        copyText,
 
         // 初始化
         init: function () {

package/src/interact/batchReward.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="w-boxcoin-user">
+    <el-button @click="openBoxcoinPop" type="primary" size="mini">批量打赏</el-button>
+    <el-dialog title="投币打赏" :visible.sync="visible" custom-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-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">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { batchReward } from "../../service/thx.js";
+import User from "@jx3box/jx3box-common/js/user";
+import Contributors from "./Contributors.vue";
+export default {
+  name: "BatchReward",
+  props: ["boxcoin", "postType", "items", "own", "points", "authors", "client"],
+  components: {
+    Contributors,
+  },
+  data: function () {
+    return {
+      visible: false,
+
+      count: 0,
+      remark: "辛苦了，谢谢大大！",
+
+      left: this.own,
+
+      chargeLink: "/vip/boxcoin?redirect=" + location.href,
+
+      chosen: "", // 被选中的人
+    };
+  },
+  computed: {
+    ready: function () {
+      return this.isEnough && this.count && this.remark;
+    },
+    isEnough: function () {
+      return this.left && this.left >= this.count;
+    },
+    allowBoxcoin: function () {
+      return this.postType && (this.authors && this.authors.length);
+    },
+    hostClient: function () {
+      return location.href.includes("origin") ? "origin" : "std";
+    },
+    fitPoints: function () {
+      return this.points;
+    },
+  },
+  watch: {
+    own: function (val) {
+      this.left = val;
+    },
+  },
+  methods: {
+    openBoxcoinPop: function () {
+      if (!(this.items && this.items.length)) return this.$message({ message: `请选择需要打赏的作品`, type: "warning", });
+      if (User.isLogin()) {
+        this.visible = true;
+      } else {
+        User.toLogin();
+      }
+    },
+    // 选择要打赏的对象
+    handleChosen (userId) {
+      this.chosen = userId;
+    },
+    submit: function () {
+      batchReward(this.postType, this.count, { items: this.items, remark: this.remark, client: this.client || this.hostClient, })
+        .then((res) => {
+          return res.data.data;
+        })
+        .then((data) => {
+          // 1.扣除额度
+          data.success.map(item => {
+            this.$message({
+              message: `作品${this.items[item.index].article_id}打赏成功`,
+              type: "success",
+            });
+            this.left -= this.count;
+          })
+          data.fail.map(item => {
+            this.$message({
+              message: `作品${this.items[item.index].article_id}打赏失败,原因：${item.msg}`,
+              type: "error",
+            });
+          })
+        })
+        .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;
+    top: -2px;
+  }
+
+  .u-count {
+    color: #888;
+    .ml(10px);
+  }
+
+  .u-charge {
+    .underline(@color-link);
+    .ml(10px);
+  }
+}
+</style>

package/src/single/Thx.vue

@@ -1,50 +1,35 @@
 <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"
-                @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"
-            />
-        </div>
-        <div class="w-thx-copyright">
-            &copy;
-            所有原创作品，著作权归作者所有，所有未经授权的非署名转载或抄袭将有权追究法律责任，所有法律事务由专聘律师代理。<br />
-            签约作者独家特约稿件，及所有魔盒官方评分作品用户一经兑现则视为有偿付费稿件，所有商业稿件的转载引用需同时征得魔盒平台授权。
-        </div>
+        <template v-if="type === 'batchReward'">
+            <!-- 批量打赏 -->
+            <batch-reward :postType="postType" :items="postId" :boxcoin="boxcoin" :own="user_left" :points="user_points"
+                :authors="authors" :client="client" v-if="userBoxcoinEnable && boxcoin_enable"
+                @updateRecord="updateRecord" />
+        </template>
+        <template v-else>
+            <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"
+                    @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" />
+            </div>
+            <div class="w-thx-copyright">
+                &copy;
+                所有原创作品，著作权归作者所有，所有未经授权的非署名转载或抄袭将有权追究法律责任，所有法律事务由专聘律师代理。<br />
+                签约作者独家特约稿件，及所有魔盒官方评分作品用户一经兑现则视为有偿付费稿件，所有商业稿件的转载引用需同时征得魔盒平台授权。
+            </div>
+        </template>
+
     </div>
 </template>
 
@@ -52,6 +37,7 @@
 import Like from "../interact/Like2.vue";
 import Share from "../interact/Share2.vue";
 import Fav from "../interact/Fav2.vue";
+import BatchReward from "../interact/batchReward.vue";
 import BoxcoinRecords from "../interact/boxcoin_records.vue";
 import BoxcoinAdmin from "../interact/boxcoin_admin.vue";
 import BoxcoinUser from "../interact/boxcoin_user.vue";
@@ -60,6 +46,7 @@ import { getPostBoxcoinConfig, getBoxcoinStatus } from "../../service/thx";
 export default {
     name: "Thx",
     props: [
+        "type",
         "postId",
         "postType",
         "postTitle",
@@ -74,6 +61,7 @@ export default {
         Like,
         Share,
         Fav,
+        "batch-reward": BatchReward,
         "boxcoin-records": BoxcoinRecords,
         "boxcoin-admin": BoxcoinAdmin,
         "boxcoin-user": BoxcoinUser,
@@ -144,7 +132,7 @@ export default {
             this.cacheRecord = data;
         },
     },
-    created: function () {},
+    created: function () { },
 };
 </script>