@jx3box/jx3box-common-ui 6.6.5 → 6.6.8

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'">
+            <!-- 批量打赏 -->
+            <BatchReward :postType="postType" :items="items" :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",
@@ -69,11 +56,13 @@ export default {
         "mode",
         "authors",
         "client",
+        "items"
     ],
     components: {
         Like,
         Share,
         Fav,
+        BatchReward,
         "boxcoin-records": BoxcoinRecords,
         "boxcoin-admin": BoxcoinAdmin,
         "boxcoin-user": BoxcoinUser,
@@ -144,7 +133,7 @@ export default {
             this.cacheRecord = data;
         },
     },
-    created: function () {},
+    created: function () { },
 };
 </script>