@jx3box/jx3box-common-ui 5.7.3 → 5.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-common-ui",
-  "version": "5.7.3",
+  "version": "5.7.6",
   "description": "JX3BOX UI",
   "main": "index.js",
   "scripts": {

package/service/cms.js

@@ -4,4 +4,8 @@ function getPostAuthors(post_id) {
     return $cms({mute:true}).get(`/api/cms/post/${post_id}/authors`);
 }
 
-export { getPostAuthors };
+function uploadImage(formData){
+    return $cms().post(`/api/cms/upload/avatar`, formData);
+}
+
+export { getPostAuthors, uploadImage };

package/src/App.vue

@@ -62,6 +62,9 @@
                     <tagBy :data="['PVE', 'PVX']" :type="tag" />
                     <clientBy type="" />
                     <zlpBy />
+
+                    <hr />
+                    <uploadImage v-model="upload" info="非必选。首页海报尺寸1100*300（推荐2200*600支持高分屏），最大20M。"></uploadImage>
                 </el-tab-pane>
                 <el-tab-pane label="百科组件" name="wiki"
                     ><WikiPanel :wiki-post="wikiPost">
@@ -142,6 +145,8 @@ import tagBy from "./filters/tagBy.vue";
 import clientBy from "./filters/clientBy.vue";
 import zlpBy from "./filters/zlpBy.vue";
 
+import uploadImage from './upload/upload_banner.vue'
+
 import WikiPanel from "./wiki/WikiPanel.vue";
 import WikiRevisions from "./wiki/WikiRevisions.vue";
 import WikiComments from "./wiki/WikiComments.vue";
@@ -193,6 +198,8 @@ export default {
         clientBy,
         zlpBy,
 
+        uploadImage,
+
         WikiPanel,
         WikiRevisions,
         WikiComments,
@@ -212,6 +219,8 @@ export default {
             visible: false,
 
             avatar_size : 60,
+
+            upload: '',
         };
     },
     created: function() {

package/src/upload/upload_banner.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="c-upload-banner">
+        <el-alert class="u-tip" :title="info" type="info" show-icon></el-alert>
+        <div v-if="data" class="u-upload" :style="uploadStyle">
+            <img :src="preview" />
+            <i class="u-upload-mask"></i>
+            <i class="u-upload-delete el-icon-delete" title="移除" @click="remove"></i>
+        </div>
+        <div v-else class="u-upload el-upload el-upload--picture-card" @click="select">
+            <i class="el-icon-plus"></i>
+        </div>
+        <input
+            class="u-upload-input"
+            type="file"
+            @change="upload"
+            ref="uploadInput"
+            accept=".jpg, .jpeg, .png, .gif, .bmp,.webp"
+        />
+    </div>
+</template>
+
+<script>
+import { getThumbnail } from "@jx3box/jx3box-common/js/utils";
+import { uploadImage } from "../../service/cms.js";
+export default {
+    name: "upload-banner",
+    props: {
+        content: {
+            type: String,
+            default: "",
+        },
+        info: {
+            type: String,
+            default: "用于展示tips",
+        },
+        size: {
+            type: [Array, Number],
+            default: 148,
+        },
+        maxSize: {
+            type: Number,
+            default: 10,
+        },
+    },
+    data() {
+        return {
+            data: this.content || "",
+        };
+    },
+    model: {
+        prop: "content",
+        event: "input",
+    },
+    watch: {
+        content(val) {
+            this.data = val;
+        },
+        data(val) {
+            this.$emit("input", val);
+        },
+    },
+    computed: {
+        fileInput: function () {
+            return this.$refs.uploadInput;
+        },
+        preview() {
+            let size = Array.isArray(this.size) ? this.size : [this.size, this.size];
+            return getThumbnail(this.data, size, true);
+        },
+        uploadStyle() {
+            let size = Array.isArray(this.size) ? this.size : [this.size, this.size];
+            return {
+                width: size[0] + "px",
+                height: size[1] + "px",
+            };
+        },
+    },
+    methods: {
+        select() {
+            this.fileInput.dispatchEvent(
+                new MouseEvent("click", {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window,
+                })
+            );
+        },
+        upload() {
+            const file = this.fileInput.files[0];
+            if (!file) return;
+            if (file.size > this.maxSize * 1024 * 1024) {
+                this.$message.error("图片大小不能超过" + this.maxSize + "M");
+                return;
+            }
+            const formData = new FormData();
+            formData.append("avatar", file);
+            uploadImage(formData).then((res) => {
+                this.data = res.data.data[0];
+                this.$message({
+                    message: "上传成功",
+                    type: "success",
+                });
+            });
+        },
+        remove() {
+            this.data = "";
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-upload-banner {
+    .u-tip {
+        padding: 5px 15px;
+    }
+    .u-upload {
+        .pr;
+        .size(148px);
+        .mt(10px);
+        img {
+            .size(100%);
+            .y(bottom);
+        }
+        .u-upload-mask {
+            .none;
+            .pa;
+            .lt(0);
+            .size(100%);
+            background-color: rgba(0, 0, 0, 0.6);
+        }
+        .u-upload-delete {
+            .pa;
+            .lt(50%);
+            .size(24px);
+            .fz(24px);
+            padding: 40px;
+            transform: translate(-50%, -50%);
+            color: #fff;
+            .pointer;
+            .none;
+        }
+        &:hover {
+            .u-upload-mask,
+            .u-upload-delete {
+                .db;
+            }
+        }
+    }
+    .u-upload-input {
+        .none;
+    }
+}
+</style>