add spinnerClass

package.json

@@ -25,7 +25,7 @@
     "css-loader": "^0.25.0",
     "file-loader": "^0.9.0",
     "mockjs": "^1.0.1-beta3",
-    "node-sass": "^4.2.0",
+    "node-sass": "^4.5.0",
     "sass": "^0.5.0",
     "sass-loader": "^4.0.0",
     "style-loader": "^0.13.1",

src/components/book/book.vue

@@ -23,7 +23,7 @@
         <md-divider class="md-inset"></md-divider>
       </md-list-item>
     </md-list>
-    <md-spinner :md-size="60" md-indeterminate v-show='flag'></md-spinner>
+    <md-spinner :class="spinnerClass" :md-size="60" md-indeterminate v-show='flag'></md-spinner>
 </div>
 
 </template>
@@ -43,7 +43,9 @@ export default {
   	 }
   },
   computed:{
-
+    spinnerClass(){
+      return this.$store.getters.SPINNER_CLASS
+    }
   },
   mounted:function(){
     this.loadMore()

src/components/common/navbar.vue

@@ -51,7 +51,7 @@ export default {
   },
   computed: {
   	theme(){
-  		return this.$store.getters.theme
+  		return this.$store.getters.THEME_COLOR
   	},
   	activeRoute(){
   		return this.$store.state.activeRoute;

src/components/movie/movie_list_coming.vue

@@ -19,7 +19,7 @@
             <md-divider class="md-inset"></md-divider>
         </md-list-item>
     </md-list>
-    <md-spinner :md-size="60" md-indeterminate v-show='spinnerFlag'></md-spinner>
+    <md-spinner :class="spinnerClass" :md-size="60" md-indeterminate v-show='spinnerFlag'></md-spinner>
   </div> 
 </div>
 
@@ -37,6 +37,11 @@ export default {
       busy: false
     }
   },
+  computed:{
+    spinnerClass(){
+      return this.$store.getters.SPINNER_CLASS
+    }
+  },
   mounted:function(){
     this.scrContainer = this.$el;
     this.scrContent = this.$el.querySelector(".j-content")

src/components/movie/movie_list_hot.vue

@@ -19,7 +19,7 @@
          <md-divider class="md-inset"></md-divider>
      </md-list-item>
    </md-list>
-   <md-spinner :md-size="60" md-indeterminate v-show='spinnerFlag'></md-spinner>
+   <md-spinner :class="spinnerClass" :md-size="60" md-indeterminate v-show='spinnerFlag'></md-spinner>
  </div> 
 </div>
 
@@ -37,6 +37,11 @@ export default {
   		busy: false
   	}
   },
+  computed:{
+    spinnerClass(){
+      return this.$store.getters.SPINNER_CLASS
+    }
+  },
   mounted:function(){
   	this.scrContainer = this.$el;
     this.scrContent = this.$el.querySelector(".j-content")

src/components/movie/movie_list_top250.vue

@@ -19,7 +19,7 @@
             <md-divider class="md-inset"></md-divider>
         </md-list-item>
     </md-list>
-  	<md-spinner :md-size="60" md-indeterminate v-show='spinnerFlag'></md-spinner>
+  	<md-spinner :class="spinnerClass" :md-size="60" md-indeterminate v-show='spinnerFlag'></md-spinner>
   </div>
 </div>
 
@@ -37,6 +37,11 @@ export default {
   		busy: false
   	}
   },
+  computed:{
+    spinnerClass(){
+      return this.$store.getters.SPINNER_CLASS
+    }
+  },
   mounted:function(){
     this.scrContainer = this.$el;
     this.scrContent = this.$el.querySelector(".j-content")

src/components/music/music.vue

@@ -39,7 +39,7 @@
 	</md-list> 
 
 
-	<md-spinner class="md-theme-teal" :md-size="60" md-indeterminate v-show='spinnerFlag'></md-spinner>
+	<md-spinner :class="spinnerClass" :md-size="60" md-indeterminate v-show='spinnerFlag'></md-spinner>
 </div>
 
 </template>
@@ -67,7 +67,9 @@ export default {
 	};
   },
   computed:{
-
+    spinnerClass(){
+      return this.$store.getters.SPINNER_CLASS
+    }
   },
   mounted:function(){
   	axios.get(API_PROXY+'http://music.163.com/api/playlist/detail?id=98833242')

src/components/photo/photo.vue

@@ -8,7 +8,7 @@
         </div>
       </transition>
     </div>
-    <md-spinner :md-size="60" md-indeterminate v-show="spinnerFlag"></md-spinner>
+    <md-spinner :class="spinnerClass" :md-size="60" md-indeterminate v-show="spinnerFlag"></md-spinner>
   </div>
 </div>
 
@@ -28,6 +28,11 @@ export default {
       page:1
     }
   },
+  computed:{
+    spinnerClass(){
+      return this.$store.getters.SPINNER_CLASS
+    }
+  },
   mounted:function(){
     this.loadMore().then(function(){
       this.loadMore()

src/store/store.js

@@ -9,7 +9,7 @@ const store = new Vuex.Store({
 		activeRoute: 'movie'
 	},
 	getters: {
-		theme(state){
+		[types.THEME](state){
 			var mapTheme = {
 	  			"movie": 'blue',
 	  			'movie-detail': 'blue',
@@ -19,12 +19,12 @@ const store = new Vuex.Store({
 	  			'photo-detail': 'indigo'
 	  		}
 			return mapTheme[state.activeRoute]
+		},
+		[types.SPINNERCLASS](state,getters){
+			return "md-theme-"+getters[[types.THEME]]
 		}
 	},
 	mutations:{
-		[types.THEME_CHANGE](state,payload){
-			state.theme = payload.theme
-		},
 		[types.ROUTE_CHANGE](state,payload){
 			state.activeRoute = payload.activeRoute
 		},

src/store/types.js

@@ -1,8 +1,8 @@
 /*Getters Type*/
-
+export const THEME = 'THEME_COLOR'
+export const SPINNERCLASS = 'SPINNER_CLASS'
 /*Actions Type*/
 
 /*Mutations Type*/
-export const THEME_CHANGE = 'THEME_CHANGE'
 export const ROUTE_CHANGE = 'ROUTE_CHANGE'
 export const LOGIN_CHANGE = 'LOGIN_CHANGE'