init: UserBaseFront (frontend)

2026-08-10 14:41:13 +08:00
commit eea881b616
174 changed files with 32833 additions and 0 deletions
@@ -0,0 +1,106 @@
+<template>
+    <div class="improt-wrap">
+        <slot></slot>
+        <div class="upload-panel">
+            <Upload type="drag" :on-success="onSuccess" :on-remove="onRemove" :on-error="onError"
+                :before-upload="handleUploadBefore" :headers="headers" :data="uploadData" :action="uploadUrl"
+                :with-credentials="true" :max-size="maxSize" :multiple="multiple">
+                <div class="upload-box">
+                    <Icon type="ios-paper" size="52" style="color: #6281eb"></Icon>
+                    <h4>点击或将文件拖拽到这里上传</h4>
+                    <div class="info">文件大小不超过{{ $utils.getFileSize(maxSize) }}</div>
+                </div>
+                <Alert v-if="!!errorMsg" type="error" show-icon><span v-html="errorMsg"></span></Alert>
+            </Upload>
+        </div>
+        <!-- <slot name="footer"></slot> -->
+    </div>
+</template>
+
+<script>
+export default {
+    model: {
+        event: "update:fileList",
+        prop: "fileList",
+    },
+    props: {
+        fileList: {
+            type: Array,
+            default: [],
+        },
+        uploadUrl: String,
+        uploadData: Object,
+        headers: Object,
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            maxSize: 200 * 1024 * 1024,
+            errorMsg: null,
+        };
+    },
+    methods: {
+        handleUploadBefore(file) {
+            var _this = this;
+            if (file.size > _this.maxSize) {
+                _this.$Message.error({
+                    content: "请上传小于" + _this.$utils.getFileSize(_this.maxSize) + "的文件！",
+                    duration: 3,
+                });
+            }
+        },
+        onSuccess(res, file) {
+            if (res.code == 0) {
+                this.errorMsg = null;
+                const { uid } = file;
+                this.fileList.push({ ...res.data, uid });
+                this.$emit("update:fileList", this.fileList);
+            } else {
+                let msg = res.data.error;
+                this.errorMsg = msg;
+            }
+        },
+        onRemove(file, fileList) {
+            const { uid } = file;
+            const findIndex = this.fileList.findIndex(item => item.uid === uid);
+            this.fileList.splice(findIndex, 1);
+            this.$emit("update:fileList", this.fileList);
+            console.log(file, fileList);
+        },
+        onError(err, file) {
+            this.errorMsg = JSON.stringify(err);
+            console.log(err, file);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.improt-wrap {
+    padding: 0 12px;
+
+    .form-item {
+        margin-bottom: 10px;
+    }
+}
+
+.upload-panel {
+    .upload-box {
+        background: #f7f8fc;
+        padding: 30px 0;
+
+        h4 {
+            color: #505c7e;
+            margin: 3px 0;
+        }
+    }
+
+    .info {
+        font-size: 13px;
+        color: #666;
+    }
+}
+</style>