Browse Source

change position of upload button.

Tongyanqun 1 year ago
parent
commit
fdb87ad792

+ 74 - 28
app/src/components/AppHeader.vue

@@ -114,35 +114,34 @@
                 <v-icon>search</v-icon>
             </v-btn>
 
+            <v-dialog v-model="dialog" persistent transition="dialog-bottom-transition" width="300">
+                <v-card>
+                    <v-toolbar flat dense dark color="primary">
+                        上传书籍
+                        <v-spacer></v-spacer>
+                        <v-btn color="" text @click="dialog = false">关闭</v-btn>
+                    </v-toolbar>
+                    <v-card-title></v-card-title>
+                    <v-card-text>
+                        <p>受限于服务器能力,请勿上传100M的大文件书籍。</p>
+                        <v-form ref="form" @submit="do_upload">
+                            <v-file-input v-model="ebooks" label="请选择要上传的电子书"></v-file-input>
+                        </v-form>
+                    </v-card-text>
+                    <v-card-actions>
+                        <v-spacer></v-spacer>
+                        <v-btn :loading="loading" color="primary" @click="do_upload">上传</v-btn>
+                        <v-spacer></v-spacer>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+
             <template v-if="err === 'ok'">
                 <template v-if="user.is_login">
-                    <v-menu offset-y right :close-on-content-click="false" v-if="messages.length > 0">
-                        <template v-slot:activator="{ on }">
-                            <v-btn v-on="on" icon>
-                                <v-icon>notifications</v-icon>
-                            </v-btn>
-                        </template>
-                        <v-list three-line dense width="400">
-                            <v-list-item v-for="(msg, idx) in messages" :key="msg.id">
-                                <v-list-item-avatar>
-                                    <v-icon large color="green" v-if="msg.status === 'success'">mdi-information</v-icon>
-                                    <v-icon large color="red" v-else>mdi-alert</v-icon>
-                                </v-list-item-avatar>
-
-                                <v-list-item-content>
-                                    <p class="body-2">
-                                        {{ msg.data.message }}
-                                        <br/>
-                                        <span>{{ msg.create_time }}</span>
-                                    </p>
-                                </v-list-item-content>
-
-                                <v-list-item-action>
-                                    <v-btn @click.prevent="hidemsg(idx, msg.id)">好的</v-btn>
-                                </v-list-item-action>
-                            </v-list-item>
-                        </v-list>
-                    </v-menu>
+                    <v-btn v-if="can_upload" variant="plain" icon large style="margin-right: 10px;"
+                           @click="dialog = !dialog">
+                        <v-icon>mdi-upload</v-icon>
+                    </v-btn>
 
                     <v-menu offset-y right>
                         <template v-slot:activator="{ on }">
@@ -217,6 +216,10 @@
 <script>
 export default {
     data: () => ({
+        loading: false,
+        dialog: false,
+        ebooks: null,
+
         err: "",
         visit_admin_pages: false,
         sidebar: null,
@@ -313,7 +316,28 @@ export default {
         },
         get_login_from: function () {
             return "/login?from=" + this.$route.path
-        }
+        },
+        can_upload: function () {
+            const user = this.$store.state.user;
+            if (!user.is_login) {
+                return false;
+            }
+
+            if (!user.is_active) {
+                return false;
+            }
+
+            if (user.pems === undefined) {
+                return false;
+            }
+
+            // 未禁止即可以上传。
+            if (user.pems.indexOf("U") > -1) {
+                return false;
+            }
+
+            return true
+        },
     },
     mounted() {
         this.visit_admin_pages = this.$route.path.indexOf("/admin/") === 0;
@@ -331,6 +355,28 @@ export default {
         });
     },
     methods: {
+        do_upload: function () {
+            this.loading = true;
+            var data = new FormData();
+            data.append("ebook", this.ebooks);
+            this.$backend("/book/upload", {
+                method: 'POST',
+                body: data,
+            }).then(rsp => {
+                this.dialog = false;
+                if (rsp.err === 'ok') {
+                    this.$alert("success", "上传成功!", "/book/" + rsp.book_id);
+                    this.$router.push("/book/" + rsp.book_id)
+                } else if (rsp.err === 'samebook') {
+                    this.$alert("error", rsp.msg, "/book/" + rsp.book_id);
+                    this.$router.push("/book/" + rsp.book_id)
+                } else {
+                    this.$alert("error", rsp.msg, rsp.to);
+                }
+            }).finally(() => {
+                this.loading = false;
+            });
+        },
         chunk: function (arr, len) {
             var e = arr.length;
             var r = [];

+ 31 - 0
app/src/components/ScrollUp.vue

@@ -0,0 +1,31 @@
+<template>
+    <v-btn v-if="show_btn" bottom color="blue" dark fab fixed right @click="back_to_up">
+        <v-icon>mdi-upload</v-icon>
+    </v-btn>
+</template>
+
+<script>
+export default {
+    name: "scroll-up",
+    data: () => ({
+        show_btn: false,
+    }),
+    computed: {},
+    methods: {
+        back_to_up() {
+            window.scrollTo(0, 0);
+        },
+        on_scroll() {
+            this.show_btn =
+                ((window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop) > 200);
+        },
+    },
+    mounted() {
+        window.addEventListener("scroll", this.on_scroll, true);
+    },
+    destroyed() {
+        window.removeEventListener("scroll", this.on_scroll);
+    },
+}
+</script>
+

+ 0 - 100
app/src/components/Upload.vue

@@ -1,100 +0,0 @@
-<template>
-    <div>
-        <v-btn bottom color="pink" dark fab fixed right @click="dialog = !dialog">
-            <v-icon>mdi-upload</v-icon>
-        </v-btn>
-        <v-dialog v-model="can_upload" persistent transition="dialog-bottom-transition" width="300">
-            <v-card>
-                <v-toolbar flat dense dark color="primary">
-                    上传书籍
-                    <v-spacer></v-spacer>
-                    <v-btn color="" text @click="dialog = false">关闭</v-btn>
-                </v-toolbar>
-                <v-card-title></v-card-title>
-                <v-card-text>
-                    <p>受限于服务器能力,请勿上传100M的大文件书籍。</p>
-                    <v-form ref="form" @submit="do_upload">
-                        <v-file-input v-model="ebooks" label="请选择要上传的电子书"></v-file-input>
-                    </v-form>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn :loading="loading" color="primary" @click="do_upload">上传</v-btn>
-                    <v-spacer></v-spacer>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-    </div>
-</template>
-
-<script>
-export default {
-    data: () => ({
-        loading: false,
-        dialog: false,
-        ebooks: null,
-    }),
-    methods: {
-        do_upload: function () {
-            this.loading = true;
-            var data = new FormData();
-            data.append("ebook", this.ebooks);
-            this.$backend("/book/upload", {
-                method: 'POST',
-                body: data,
-            })
-                .then(rsp => {
-                    this.dialog = false;
-                    if (rsp.err === 'ok') {
-                        this.$alert("success", "上传成功!", "/book/" + rsp.book_id);
-                        this.$router.push("/book/" + rsp.book_id)
-                    } else if (rsp.err === 'samebook') {
-                        this.$alert("error", rsp.msg, "/book/" + rsp.book_id);
-                        this.$router.push("/book/" + rsp.book_id)
-                    } else {
-                        this.$alert("error", rsp.msg, rsp.to);
-                    }
-                })
-                .finally(() => {
-                    this.loading = false;
-                });
-        },
-    },
-    computed: {
-        can_upload: function () {
-            if (!this.dialog) {
-                return false
-            }
-
-            const user = this.$store.state.user;
-            if (!user.is_login) {
-                this.dialog = false
-                this.$alert("info", "请登录后操作。")
-                return false
-            }
-
-            if (!user.is_active) {
-                this.dialog = false
-                this.$alert("info", "请激活账号后操作。")
-                return false
-            }
-
-            if (user.pems === undefined) {
-                this.dialog = false
-                this.$alert("info", "没有权限上传书籍,请联系管理员申请。")
-                return false
-            }
-
-            // 未禁止即可以上传。
-            if (user.pems.indexOf("U") > -1) {
-                this.dialog = false
-                this.$alert("info", "没有权限上传书籍,请联系管理员申请。")
-                return false
-            }
-
-            return true
-        },
-    },
-}
-</script>
-

+ 6 - 3
app/src/layouts/default.vue

@@ -28,15 +28,18 @@
                 </v-card>
             </v-dialog>
         </v-main>
-        <upload v-if="$store.state.nav"></upload>
+        <client-only placeholder="Loading...">
+            <scroll-up/>
+        </client-only>
     </v-app>
+
 </template>
 
 <script>
 import AppHeader from "~/components/AppHeader.vue"
 import AppFooter from "~/components/AppFooter.vue"
 import Loading from "~/components/Loading.vue"
-import Upload from "~/components/Upload.vue"
+import ScrollUp from "~/components/ScrollUp.vue"
 
 export default {
     name: 'DefaultLayout',
@@ -44,7 +47,7 @@ export default {
         AppHeader,
         AppFooter,
         Loading,
-        Upload,
+        ScrollUp,
     },
     data: () => ({}),
     head() {