[+] 前端增加登陆注册注销提示信息

client/src/component/ImageItem.vue

@@ -8,7 +8,6 @@
                 class="fa fa-upload" 
                 v-if="!uploading && !uploaded"
                 @click="onUploadButtonClick"
-                :flag="flag"
                 >
             </span>
             <span 
@@ -18,13 +17,11 @@
             </span>
             <span 
                 @click="onShowImageURL"
-                :img-url="imgUrl"
                 class="fa fa-info-circle" 
                 v-if="!uploading && uploaded"
                 >
             </span>
             <span 
-                :flag="flag"
                 class="fa fa-trash" 
                 v-if="!uploading"
                 @click="onRemoveButtonClick"
@@ -171,24 +168,38 @@
                 require: true
 
             },
-            onUploadButtonClick: {
+            onRemoveButtonClickListener: {
                 type: Function,
-                default: function(e){
-                    console.log("upload");
+                default: function(flag){
+                    console.log(flag);
                 }
             },
-            onRemoveButtonClick: {
+            onShowImageURLClickListener: {
                 type: Function,
-                default: function(e){
-                    console.log("remove");
+                default: function(url){
+                    console.log(url);
                 }
             },
-            onShowImageURL: {
+            onUploadButtonClickClickListener: {
                 type: Function,
-                default: function(e){
-                    console.log("show");
+                default: function(flag){
+                    console.log(flag);
                 }
-            }
+            },
+        },
+        methods: {
+
+            onShowImageURL(e){
+                this.$props.onShowImageURLClickListener(this.$props.imgUrl);
+            },
+            onRemoveButtonClick(e){
+                this.$props.onRemoveButtonClickListener(this.$props.flag);
+                    
+            },
+            onUploadButtonClick(e){
+                this.$props.onUploadButtonClickClickListener(this.$props.flag);
+                    
+            },
         }
         
     }

client/src/component/Tips.vue

@@ -0,0 +1,96 @@
+<template>
+    <div :class="{ 'tips': true, 'tips-active': showTips }">
+        <div 
+            :class="{
+                'tips-content': true,
+                'tips-content-info': tipsType == 0,
+                'tips-content-check': tipsType == 1,
+                'tips-content-warning': tipsType == 2,
+            }">
+            <span 
+                :class="{
+                    'fa': true,
+                    'fa-info': tipsType == 0,
+                    'fa-check': tipsType == 1,
+                    'fa-warning': tipsType == 2
+                }">
+            </span>
+            {{ tipsContent }}
+        </div>
+    </div>
+</template>
+<style>
+    .tips{
+        z-index: 999;
+
+        position: fixed;
+        left: 0;
+        bottom: -48px;
+        width: 100%;
+        height: 48px;
+        display: flex;
+        justify-content: center;
+
+        transition: bottom 0.3s;
+    }
+
+    .tips-active{
+        bottom: 0;
+    }
+
+    .tips-content{
+        height: 100%;
+
+        color: white;
+
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        -ms-box-sizing: border-box;
+
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+
+        display: flex;
+        align-items: center;
+        
+        padding-left: 32px;
+        padding-right: 32px;
+
+        background-color: #2c3e50;
+    }
+    .tips-content-info{
+        background-color: #2c3e50;
+    }
+    .tips-content-check{
+        background-color: lightseagreen;
+    }
+    .tips-content-warning{
+        background-color: orangered;
+    }
+
+    .tips-content span{
+        margin-right: 8px;
+    }
+
+</style>
+<script>
+    export default {
+        props: {
+            showTips: {
+                type: Boolean,
+                default: false
+            },
+            tipsContent: {
+                type: String,
+                default: 'tips'
+            },
+            tipsType: {
+                type: Number,
+                default: 0
+            }
+        }
+    }
+</script>
+
+

client/src/store/index.js

@@ -3,13 +3,15 @@ import Vuex from 'vuex';
 
 import img from './modules/img.js';
 import user from './modules/user.js';
+import tip from './modules/tip.js';
 
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
     modules: {
         img,
-        user
+        user,
+        tip
     }
 });
 

client/src/store/modules/tip.js

@@ -0,0 +1,36 @@
+import axios from 'axios';
+
+import * as api from '../../api.js';
+import * as types from '../types.js';
+
+const store = {
+
+    state: {
+        content: '',
+        show: false,
+        type: 0
+    },
+    getters: {
+
+    },
+    mutations: {
+
+        [types.MUTATION_TIP_SHOWTIPS](state, payload){
+            state.content = payload.content;
+            state.type = payload.type;
+            state.show = true;
+            setTimeout(() => {
+                state.show = false;
+            }, 2000);
+        },
+
+    },
+    actions: {
+
+
+    }
+
+
+}
+
+export default store;

client/src/store/types.js

@@ -19,4 +19,6 @@ export const MUTATION_IMG_REMOVEOWNIMG = 'MUTATION_IMG_REMOVEOWNIMG';
 export const ACTION_IMG_TOUPLOADIMG = 'ACTION_IMG_TOUPLOADIMG';
 export const ACTION_IMG_TOUPLOADALLIMG = 'ACTION_IMG_TOUPLOADALLIMG';
 export const ACTION_IMG_GETLIST = 'ACTION_IMG_GETLIST';
-export const ACTION_IMG_REMOVEOWN = 'ACTION_IMG_REMOVEOWN';
+export const ACTION_IMG_REMOVEOWN = 'ACTION_IMG_REMOVEOWN';
+
+export const MUTATION_TIP_SHOWTIPS = 'MUTATION_TIP_SHOWTIPS';

client/src/view/App.vue

@@ -21,6 +21,10 @@
                 v-if="loginOrRegisterBoxActive"
                 />
         </transition>
+        <tips 
+            :showTips="showTips"
+            :tipsContent="tipsContent"
+            :tipsType="tipsType"/>
     </div>
 </template>
 <style>
@@ -55,6 +59,7 @@
 
     import RouterViewContainer from '../component/RouterViewContainer.vue';
     import LoginOrRegisterBox from '../component/LoginOrRegisterBox.vue';
+    import Tips from '../component/Tips.vue';
 
     export default {
         data(){
@@ -87,6 +92,15 @@
             registering(){
                 return this.$store.state.user.registering;
             },
+            showTips(){
+                return this.$store.state.tip.show;
+            },
+            tipsContent(){
+                return this.$store.state.tip.content;
+            },
+            tipsType(){
+                return this.$store.state.tip.type;
+            }
         },
         methods: {
             handleShowLoginOrRegisterBox(e){
@@ -99,42 +113,67 @@
                 this.$router.push("/");
                 this.$store.dispatch(types.ACTION_USER_TOLOGOUT);
 
+                this.$store.commit(types.MUTATION_TIP_SHOWTIPS, {
+                    type: 0,
+                    content: '已成功登出'
+                })
+
             },
             handleHideLoginOrRegisterBox(e){
                 this.$data.loginOrRegisterBoxActive = false;
 
             },
             handleLogin(uid, pwd){
 
+                let ctx = this;
+
                 if(uid != '' && pwd != ''){
-                    this.$store.dispatch(types.ACTION_USER_TOLOGIN, {
+                    ctx.$store.dispatch(types.ACTION_USER_TOLOGIN, {
                         uid,
                         pwd
                     }).then(() => {
 
-                        this.$data.loginOrRegisterBoxActive = false;
+                        ctx.$data.loginOrRegisterBoxActive = false;
 
+                        ctx.$store.commit(types.MUTATION_TIP_SHOWTIPS, {
+                            type: 1,
+                            content: '已成功登陆'
+                        })
 
                     }).catch(() => {
 
+                        ctx.$store.commit(types.MUTATION_TIP_SHOWTIPS, {
+                            type: 2,
+                            content: '登陆失败，密码错误或用户不存在'
+                        });
                     })
                 }
 
             },
             handleRegister(uid, pwd){
 
+                let ctx = this;
+
                 if(uid != '' && pwd != ''){
 
-                    this.$store.dispatch(types.ACTION_USER_TOREGISTER, {
+                    ctx.$store.dispatch(types.ACTION_USER_TOREGISTER, {
                         uid,
                         pwd
                     }).then(() => {
 
-                        this.$data.loginOrRegisterBoxActive = false;
+                        ctx.$data.loginOrRegisterBoxActive = false;
 
+                        ctx.$store.commit(types.MUTATION_TIP_SHOWTIPS, {
+                            type: 1,
+                            content: '注册成功'
+                        });
 
                     }).catch(() => {
 
+                        ctx.$store.commit(types.MUTATION_TIP_SHOWTIPS, {
+                            type: 2,
+                            content: '注册失败，用户已存在或服务器出了小差'
+                        });
                     })
                     
                 }
@@ -144,7 +183,8 @@
             MyHeader,
             MyFooter,
             RouterViewContainer,
-            LoginOrRegisterBox
+            LoginOrRegisterBox,
+            Tips
         },
         mounted: function() {
             this.$store.dispatch(types.ACTION_USER_CHECK);

client/src/view/Home.vue

@@ -19,10 +19,10 @@
                     :uploading="img.uploading"
                     :uploaded="img.uploaded"
                     :progress="img.progress"
-                    :onRemoveButtonClick="onImageItemRemove"
-                    :onUploadButtonClick="onImageItemUpload"
+                    :onRemoveButtonClickListener="handleRemoveImage"
+                    :onUploadButtonClickClickListener="handleUploadImage"
                     :img-url="img.url"
-                    :onShowImageURL="onImageItemInfo"
+                    :onShowImageURLClickListener="handleShowImageInfo"
                     />
             </div>
             <div v-if="imgListLength <= 0" class="upload-manager-tips">
@@ -316,19 +316,19 @@
             'canUploadAll'
         ]),
         methods: {
-            onImageItemRemove(e){
+            handleRemoveImage(flag){
 
                 this.$store.commit(types.MUTATION_IMG_REMOVEIMG, {
-                    flag: e.target.getAttribute("flag")
+                    flag
                 });
 
             },
-            onImageItemUpload(e){
+            handleUploadImage(flag){
 
                 let ctx = this;
 
                 ctx.$store.dispatch(types.ACTION_IMG_TOUPLOADIMG, {
-                    flag: e.target.getAttribute("flag"),
+                    flag: flag,
                     uid: ctx.$store.state.user.uid
                 });
 
@@ -381,8 +381,8 @@
                 }
 
             },
-            onImageItemInfo(e){
-                this.$data.msg = e.target.getAttribute("img-url");
+            handleShowImageInfo(url){
+                this.$data.msg = url;
             },
             copyMsg(e){