修改菜单选&加载loading提示

giscafer · Mar 5, 2017 · 83e1653 · 83e1653
1 parent 48fa40c
commit 83e1653
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 50 deletions.
diff --git a/build-site/src/actions/goods.js b/build-site/src/actions/goods.js
@@ -3,33 +3,41 @@ import goodService from '../service/goodService'
 
 // Action Type
 const FETCH_GOOD = 'FETCH_GOOD'
+const RECEIVE_GOOD = 'RECEIVE_GOOD'
 const ADD_GOOD = 'ADD_GOOD'
 const DEL_GOOD = 'DEL_GOOD'
 
 // Action Creator
 
 if(!sessionStorage) sessionStorage=window;
 
+const receiveGood=(type,goods) =>({
+    type:RECEIVE_GOOD,
+    payload: { goods, qryType: type ,isFetching:false}
+
+})
+
 const fetchGood = (type, dispatch) => {
+    dispatch({
+        type: FETCH_GOOD,
+        payload: { goods:[], qryType: type ,isFetching:true}
+    })
     goodService.query(type, (goods) => {
         sessionStorage[type] = JSON.stringify(goods);
-        dispatch({
-            type: FETCH_GOOD,
-            payload: { goods, qryType: type }
-        })
+        dispatch(receiveGood(type,goods))
+
     })
 }
+
+
 // 设计一次查询所有商品时，前端sessionStorage保存，查询其他类别不走请求
 const queryList = type => dispatch => {
     if (!sessionStorage[type]) {
         fetchGood(type, dispatch)
     } else {
         let goods=sessionStorage[type] && JSON.parse(sessionStorage[type]);
         if (goods && goods.length) {
-            dispatch({
-                type: FETCH_GOOD,
-                payload: { goods, qryType: type }
-            })
+            dispatch(receiveGood(type,goods))
         }
     }
 }
@@ -46,5 +54,6 @@ export default {
 // 故在此直接给出处理逻辑
 // ================================
 export const ACTION_HANDLERS = {
-    [FETCH_GOOD]: (goods, {payload}) => payload
+    [FETCH_GOOD]: (goods, {payload}) => payload,
+    [RECEIVE_GOOD]: (goods, {payload}) => payload
 }
diff --git a/build-site/src/components/common/CircleLoading.js b/build-site/src/components/common/CircleLoading.js
@@ -0,0 +1,21 @@
+/**
+ * Created by giscafer on 2017/3/5.
+ */
+
+import React from 'react';
+import getSize from '../../utils/getSize'
+
+// const {windowH,windowW} = getSize()
+const style = {
+    display:'block',
+    color:'red',
+    width:'100%',
+    textAlign:'center',
+    margin:'30px auto'
+
+}
+const CircleLoading = () => (
+    <p style={style}>加载中……</p>
+);
+
+export default CircleLoading;
diff --git a/build-site/src/components/common/header/Header.css b/build-site/src/components/common/header/Header.css
@@ -53,6 +53,7 @@ a {
 }
 
 .navbar-nav {
+    position: relative;
     display: inline-block;
     margin: 0;
     padding: 0;
@@ -80,8 +81,9 @@ a {
 .navbar-nav li span {
     cursor: pointer;
 }
+
 .navbar-nav li.selected {
-    height:50px;
+    height: 50px;
     background-color: #5e5e5e;
     padding: 0 10px;
     border-bottom: 2px solid #fff;
@@ -90,9 +92,11 @@ a {
 .navbar-nav li span:hover {
     color: #fff;
 }
-#bs-navbar span.btn{
+
+#bs-navbar span.btn {
     display: none;
 }
+
 /**
  * 响应式
  */
@@ -101,31 +105,37 @@ a {
         font-size: 1.2em;
         color: #1d976c
     }
-    #bs-navbar .navbar-nav{
-       position: relative;
-       z-index: 1000;
-       display: none;
+
+    #bs-navbar .navbar-nav {
+        display: none;
+        position: relative;
+        z-index: 1000;
+        width: 100%;
     }
+
     /*#bs-navbar span:hover ~ ul{*/
-        /*display: block;*/
+    /*display: block;*/
     /*}*/
     #bs-navbar .navbar-nav li {
         clear: both;
         border-top: 1px solid #ddd;
         background-color: #2d3e4d;
-        width:100%;
-        margin:0;
+        width: 100%;
+        margin: 0;
     }
-    #bs-navbar span.btn{
-        display:inline;
+
+    #bs-navbar span.btn {
+        display: inline;
         line-height: 50px;
     }
-    .menu-btn:hover ~ #bs-navbar .navbar-nav{
+
+    .menu-btn:hover ~ #bs-navbar .navbar-nav {
         display: block;
     }
+
     #bs-navbar .navbar-nav li.selected {
         padding: 0;
-        border:none;
+        border: none;
     }
 }
 

diff --git a/build-site/src/components/common/header/Header.jsx b/build-site/src/components/common/header/Header.jsx
@@ -1,25 +1,35 @@
 import React from 'react'
-import  './Header.css'
-export default class Header extends React.Component{
+import getSize from '../../../utils/getSize';
+import  './Header.css';
+export default class Header extends React.Component {
 
-    constructor(){
+    constructor() {
         super()
         this.displayValue = 'none';
     }
 
     /**
      * 菜单绑定事件
      */
-    menuClickHandler() {
-        if(this.displayValue==='block'){
-            this.displayValue='none';
-        }else{
-            this.displayValue='block';
+    menuClickHandler(e) {
+        let block='inline-block';
+        const {windowW} = getSize();
+        if(windowW<800){
+            block='block';
         }
-        this.refs.myMenu.style.display=this.displayValue;
+
+        if (e && e.target && e.target.nodeName === 'SPAN' && block!=='block') {
+            return;
+        }
+        if (this.displayValue === block) {
+            this.displayValue = 'none';
+        } else {
+            this.displayValue = block;
+        }
+        this.refs.myMenu.style.display = this.displayValue;
     }
 
-    render(){
+    render() {
         let {onFilterClick, filterType}=this.props;
         return (
             <header className="navbar navbar-static-top">
@@ -29,21 +39,39 @@ export default class Header extends React.Component{
                             <li><a href="../" id="logo" title="百度前端技术学院demo">百度前端技术学院demo</a></li>
                         </ul>
                     </div>
-                    <div id="bs-navbar" className="navbar-collapse collapse" onClick={() =>this.menuClickHandler()}>
-                        <span className="btn" id="main-nav-toggle">菜单</span>
-                        <ul className="nav navbar-nav"  ref="myMenu">
+                    <div id="bs-navbar" className="navbar-collapse collapse">
+                        <span className="btn" id="main-nav-toggle" onClick={() => this.menuClickHandler()}>菜单</span>
+                        <ul className="nav navbar-nav" ref="myMenu">
                             <li className={ filterType === 'XIAOWEI' ? 'selected' : '' }><span
-                                onClick={() => onFilterClick('XIAOWEI')}>小薇学院</span></li>
+                                onClick={(e) => {
+                                    this.menuClickHandler(e);
+                                    onFilterClick('XIAOWEI')
+                                }}>小薇学院</span></li>
                             <li className={ filterType === 'BINBIN' ? 'selected' : '' }><span
-                                onClick={() => onFilterClick('BINBIN')}>斌斌学院</span></li>
+                                onClick={(e) => {
+                                    this.menuClickHandler(e);
+                                    onFilterClick('BINBIN')
+                                }}>斌斌学院</span></li>
                             <li className={ filterType === 'YAOYAO' ? 'selected' : '' }><span
-                                onClick={() => onFilterClick('YAOYAO')}>耀耀学院</span></li>
+                                onClick={() => {
+                                    this.menuClickHandler();
+                                    onFilterClick('YAOYAO')
+                                }}>耀耀学院</span></li>
                             <li className={ filterType === 'BUSINESS' ? 'selected' : '' }><span
-                                onClick={() => onFilterClick('BUSINESS')}>商业平台学院</span></li>
+                                onClick={() => {
+                                    this.menuClickHandler();
+                                    onFilterClick('BUSINESS')
+                                }}>商业平台学院</span></li>
                             <li className={ filterType === 'ECHARTSVR' ? 'selected' : '' }><span
-                                onClick={() => onFilterClick('ECHARTSVR')}>Echarts & WebVR</span></li>
+                                onClick={() => {
+                                    this.menuClickHandler();
+                                    onFilterClick('ECHARTSVR')
+                                }}>Echarts & WebVR</span></li>
                             <li className={ filterType === 'NUOMI' ? 'selected' : '' }><span
-                                onClick={() => onFilterClick('NUOMI')}>百度糯米学院</span></li>
+                                onClick={() => {
+                                    this.menuClickHandler();
+                                    onFilterClick('NUOMI')
+                                }}>百度糯米学院</span></li>
                         </ul>
                     </div>
                 </div>

diff --git a/build-site/src/components/goods/GoodList.css b/build-site/src/components/goods/GoodList.css
@@ -4,6 +4,23 @@
     margin-bottom: 80px;
     margin-top:250px;
 }
+@media screen and  (min-width: 1400px) {
+    .main-container {
+        min-width: 1170px;
+    }
+}
+
+@media screen and  (min-width: 1200px) {
+    .main-container {
+        min-width: 1170px;
+    }
+}
+
+@media screen and (min-width: 992px) {
+    .main-container {
+        min-width: 970px;
+    }
+}
 .good-column{
     display: -webkit-flex; /* Safari */
     display: flex;

diff --git a/build-site/src/components/goods/GoodList.jsx b/build-site/src/components/goods/GoodList.jsx
@@ -1,15 +1,18 @@
 import React from 'react'
 import Good from './Good';
+import CircleLoading from '../common/CircleLoading';
 import './GoodList.css';
 
-export default ({goods=[]})=>{
+export default ({goods = []}) => {
     return (
         <div className='good-column'>
-            {
-                goods.map((good,index)=>{
-                  return  <Good key={index}  good={good}/>
+            {goods.length === 0 && <CircleLoading />}
+            {goods.length !== 0 &&
+                goods.map((good, index) => {
+                    return <Good key={index} good={good}/>
                 })
             }
+
         </div>
     )
 }
diff --git a/build-site/src/stores/initState.js b/build-site/src/stores/initState.js
@@ -5,6 +5,7 @@
 export default {
     good:{
         goods:[],
-        goodType:''
+        goodType:'',
+        isFetching:false
     }
 }
diff --git a/build-site/src/utils/getSize.js b/build-site/src/utils/getSize.js
@@ -0,0 +1,14 @@
+/**
+ * Created by giscafer on 2017/3/5.
+ */
+const getSize = () => {
+    let windowW,windowH,contentH,contentW,scrollT;
+    windowH = window.innerHeight;
+    windowW = window.innerWidth;
+    scrollT = document.documentElement.scrollTop || document.body.scrollTop;
+    contentH = (document.documentElement.scrollHeight > document.body.scrollHeight) ? document.documentElement.scrollHeight : document.body.scrollHeight;
+    contentW = (document.documentElement.scrollWidth > document.body.scrollWidth) ? document.documentElement.scrollWidth : document.body.scrollWidth;
+    return {windowW,windowH,contentH,contentW,scrollT}
+}
+
+export default getSize;
diff --git a/斌斌学院/任务五：基础JavaScript练习（二）/index.html b/斌斌学院/任务五：基础JavaScript练习（二）/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>IFE JavaScript Task 02</title>
+    <title>任务五：基础JavaScript练习（二）</title>
     <link type="text/css" rel="stylesheet" href="../../public/css/style.css"/>
 </head>
 <style>
@@ -27,9 +27,9 @@
 </style>
 <body>
 <div class="nav">
-    <a href="https://raw.githubusercontent.com/giscafer/ife-course-demo/master/斌斌学院/任务四：基础JavaScript练习（一）/index.html"
+    <a href="https://raw.githubusercontent.com/giscafer/ife-course-demo/master/斌斌学院/任务五：基础JavaScript练习（二）/index.html"
        target="_blank">demo源码</a>
-    <a href="http://ife.baidu.com/course/detail/id/103">查看原题</a>
+    <a href="http://ife.baidu.com/course/detail/id/105">查看原题</a>
     <a href="http://ife.giscafer.com">返回demo演示站</a>
 </div>
 <div id="code-display">

diff --git a/斌斌学院/任务四：基础JavaScript练习（一）/index.html b/斌斌学院/任务四：基础JavaScript练习（一）/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>IFE JavaScript Task 02</title>
+    <title>任务四：基础JavaScript练习（一）</title>
     <link type="text/css" rel="stylesheet" href="../../public/css/style.css"/>
 </head>
 <style>
@@ -83,6 +83,9 @@ <h2>demo演示</h2>
         alert('移除右侧数字：'+temp.innerText);
         sequenceDom.removeChild(temp);
     }
+    /**
+     * 可以使用事件委托的方式绑定点击事件
+     */
     sequenceDom.addEventListener('click',function(e){
         console.log(e)
         if(e.target && e.target.nodeName==='SPAN'){