通用加载

package-lock.json

@@ -971,6 +971,86 @@
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
       "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw=="
     },
+    "@emotion/cache": {
+      "version": "10.0.9",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.9.tgz",
+      "integrity": "sha512-f7MblpE2xoimC4fCMZ9pivmsIn7hyWRIvY75owMDi8pdOSeh+w5tH3r4hBJv/LLrwiMM7cTQURqTPcYoL5pWnw==",
+      "requires": {
+        "@emotion/sheet": "0.9.2",
+        "@emotion/stylis": "0.8.3",
+        "@emotion/utils": "0.11.1",
+        "@emotion/weak-memoize": "0.2.2"
+      }
+    },
+    "@emotion/core": {
+      "version": "10.0.10",
+      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.10.tgz",
+      "integrity": "sha512-U1aE2cOWUscjc8ZJ3Cx32udOzLeRoJwGxBH93xQD850oQFpwPKZARzdUtdc9SByUOwzSFYxhDhrpXnV34FJmWg==",
+      "requires": {
+        "@emotion/cache": "^10.0.9",
+        "@emotion/css": "^10.0.9",
+        "@emotion/serialize": "^0.11.6",
+        "@emotion/sheet": "0.9.2",
+        "@emotion/utils": "0.11.1"
+      }
+    },
+    "@emotion/css": {
+      "version": "10.0.12",
+      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.12.tgz",
+      "integrity": "sha512-esET/v6AwYIw5YVo0e1L/bUik7bIMWyK32BudsC/PE5O1rLK3rjiLCOoMVv5GY6+ssuwWVzooGbz79hPvkkmsw==",
+      "requires": {
+        "@emotion/serialize": "^0.11.7",
+        "@emotion/utils": "0.11.1",
+        "babel-plugin-emotion": "^10.0.9"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.1.tgz",
+      "integrity": "sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA=="
+    },
+    "@emotion/memoize": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
+      "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
+    },
+    "@emotion/serialize": {
+      "version": "0.11.7",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.7.tgz",
+      "integrity": "sha512-GfzJIMue9eIEPFgBL340hBbjfki11vjYkfmY2LXoCDAFPuG6S+hkOlfinRXLnPVlXnKu7WWp587cVa6/xQriNQ==",
+      "requires": {
+        "@emotion/hash": "0.7.1",
+        "@emotion/memoize": "0.7.1",
+        "@emotion/unitless": "0.7.3",
+        "@emotion/utils": "0.11.1",
+        "csstype": "^2.5.7"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.2.tgz",
+      "integrity": "sha512-pVBLzIbC/QCHDKJF2E82V2H/W/B004mDFQZiyo/MSR+VC4pV5JLG0TF/zgQDFvP3fZL/5RTPGEmXlYJBMUuJ+A=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.3.tgz",
+      "integrity": "sha512-M3nMfJ6ndJMYloSIbYEBq6G3eqoYD41BpDOxreE8j0cb4fzz/5qvmqU9Mb2hzsXcCnIlGlWhS03PCzVGvTAe0Q=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz",
+      "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg=="
+    },
+    "@emotion/utils": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.1.tgz",
+      "integrity": "sha512-8M3VN0hetwhsJ8dH8VkVy7xo5/1VoBsDOk/T4SJOeXwTO1c4uIqVNx2qyecLFnnUWD5vvUqHQ1gASSeUN6zcTg=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz",
+      "integrity": "sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA=="
+    },
     "@loadable/component": {
       "version": "5.10.1",
       "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.10.1.tgz",
@@ -2290,6 +2370,30 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-emotion": {
+      "version": "10.0.13",
+      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.13.tgz",
+      "integrity": "sha512-w8yukWIYDw2ZUzBo7B9t5jh7wsM4NQWqvuZadW4MhVokgw5wsoBRJ59Sa1hMc3UZiatwb0iBNufmRQZVl77I5Q==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@emotion/hash": "0.7.1",
+        "@emotion/memoize": "0.7.1",
+        "@emotion/serialize": "^0.11.6",
+        "babel-plugin-macros": "^2.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^1.0.5",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
     "babel-plugin-import": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.11.0.tgz",
@@ -2340,6 +2444,11 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.1.tgz",
       "integrity": "sha512-vzZlo+yEB5YHqI6CRRTDojeT43J3Wf3C/MVkZW5UlbSeIIVUYRKtxaFT2L/VTv9mbIyatCW39+9g/SZolvwRUQ=="
     },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3256,6 +3365,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "change-emitter": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+    },
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -3707,6 +3821,17 @@
         "elliptic": "^6.0.0"
       }
     },
+    "create-emotion": {
+      "version": "10.0.9",
+      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.9.tgz",
+      "integrity": "sha512-sLKD4bIiTs8PpEqr5vlCoV5lsYE4QOBYEUWaD0R+VGRMCvBKHmYlvLJXsL99Kdc4YEFAFwipi2bbncnvv6UxRg==",
+      "requires": {
+        "@emotion/cache": "^10.0.9",
+        "@emotion/serialize": "^0.11.6",
+        "@emotion/sheet": "0.9.2",
+        "@emotion/utils": "0.11.1"
+      }
+    },
     "create-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -4081,6 +4206,11 @@
         "cssom": "0.3.x"
       }
     },
+    "csstype": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.5.tgz",
+      "integrity": "sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA=="
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -4558,6 +4688,15 @@
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
       "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
     },
+    "emotion": {
+      "version": "10.0.9",
+      "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.9.tgz",
+      "integrity": "sha512-IMFwwWlU2TDt7eh4v6dm58E8VHAYOitqRbVoazQdxIu9/0CAH4a3UrTMnZSlWQAo09MrRRlKfgQFHswnj40meQ==",
+      "requires": {
+        "babel-plugin-emotion": "^10.0.9",
+        "create-emotion": "^10.0.9"
+      }
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -5621,6 +5760,11 @@
         }
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
@@ -11839,6 +11983,16 @@
         "tiny-warning": "^1.0.0"
       }
     },
+    "react-spinners": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.5.4.tgz",
+      "integrity": "sha512-jo7BE8prvnZNL7xNrQL16geVXH6LmaWrhvvXnmUwz2MhFO14bhlAdCLuKCwqmUJ37kGphH0C2CJRThwkjfpVzw==",
+      "requires": {
+        "@emotion/core": "^10.0.4",
+        "prop-types": "^15.5.10",
+        "recompose": "0.27.1 - 0.30.0"
+      }
+    },
     "react-tween-state": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/react-tween-state/-/react-tween-state-0.1.5.tgz",
@@ -11909,6 +12063,26 @@
         "util.promisify": "^1.0.0"
       }
     },
+    "recompose": {
+      "version": "0.30.0",
+      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.30.0.tgz",
+      "integrity": "sha512-ZTrzzUDa9AqUIhRk4KmVFihH0rapdCSMFXjhHbNrjAWxBuUD/guYlyysMnuHjlZC/KRiOKRtB4jf96yYSkKE8w==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "change-emitter": "^0.1.2",
+        "fbjs": "^0.8.1",
+        "hoist-non-react-statics": "^2.3.1",
+        "react-lifecycles-compat": "^3.0.2",
+        "symbol-observable": "^1.0.4"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        }
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",

package.json

@@ -22,6 +22,7 @@
     "date-fns": "^1.30.1",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
+    "emotion": "^10.0.9",
     "eslint": "5.12.0",
     "eslint-config-react-app": "^3.0.8",
     "eslint-loader": "2.1.1",
@@ -61,6 +62,7 @@
     "react-mobile-swiper": "^1.1.4",
     "react-redux": "^7.0.2",
     "react-router-dom": "^5.0.1",
+    "react-spinners": "^0.5.4",
     "redux": "^4.0.1",
     "redux-immutable": "^4.0.0",
     "redux-logger": "^3.0.6",

src/common/Loading/index.js

-import React, { Component } from 'react'
-import { ActivityIndicator } from 'antd-mobile'
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom'
+import { HashLoader } from "react-spinners";
+import { css } from 'emotion'
 import './loading.scss'
 
-export default class componentName extends Component {
+const override = css({
+    display: 'block',
+    marginTop: '-100px'
+})
+
+const container = document.documentElement || document.body
+
+class Loading extends Component {
+
+    static defaultProps = {
+        isLoading: true,
+        text: '加载中'
+    }
+
     render() {
-        return (
+        const innerLoading =
             <div className="loading">
-                <ActivityIndicator></ActivityIndicator>
-                <span>加载中</span>
+                <div className="loading-wrapper">
+                    <HashLoader
+                        css={override}
+                        size={50}
+                        color={'#09f'}
+                    />
+                    <p>{this.props.text}</p>
+                </div>
             </div>
-        )
+
+        return (
+            this.props.isLoading ? ReactDOM.createPortal(innerLoading, container) : this.props.children
+        );
     }
 }
+
+export default Loading;
\ No newline at end of file

src/common/Loading/loading.scss

-.loading{
-    display: flex;
-    width:100%;
-    height:44px;
-    line-height: 44px;
-    justify-content: center;
-    align-items: center;
-    span{
-        margin-left:5px;
+.loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    .loading-wrapper {
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+        p {
+            font-size: 14px;
+            margin-top: 12px;
+            color: $active;
+        }
     }
 }
\ No newline at end of file