Skip to content

M
mr-julyedu
Commit c3c32002 by zhanghaozhe
Options

通用加载组件

parent 44cc5e30
Showing with 86 additions and 75 deletions
package-lock.json
...@@ -3821,17 +3821,6 @@ ...@@ -3821,17 +3821,6 @@
"elliptic": "^6.0.0" "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": { "create-hash": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz", "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
...@@ -4688,15 +4677,6 @@ ...@@ -4688,15 +4677,6 @@
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz", "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=" "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": { "encodeurl": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
......
package.json
...@@ -22,7 +22,6 @@ ...@@ -22,7 +22,6 @@
"date-fns": "^1.30.1", "date-fns": "^1.30.1",
"dotenv": "6.0.0", "dotenv": "6.0.0",
"dotenv-expand": "4.2.0", "dotenv-expand": "4.2.0",
"emotion": "^10.0.9",
"eslint": "5.12.0", "eslint": "5.12.0",
"eslint-config-react-app": "^3.0.8", "eslint-config-react-app": "^3.0.8",
"eslint-loader": "2.1.1", "eslint-loader": "2.1.1",
......
src/common/Loading/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import { HashLoader } from "react-spinners"; import { HashLoader } from "react-spinners";
import { css } from 'emotion'
import './loading.scss' import './loading.scss'
const override = css({
display: 'block',
marginTop: '-100px'
})
const container = document.documentElement || document.body const container = document.body
class Loading extends Component { class Loading extends Component {
static defaultProps = { static defaultProps = {
isLoading: true, text: '加载中',
text: '加载中' fake: 0
}
state = {
isLoading: true
}
componentDidUpdate(prevProps) {
let {isLoading, fake} = this.props
if (!isLoading) {
if(fake){
setTimeout(() => {
this.setState({
isLoading
})
}, fake)
}else {
if(prevProps.isLoading != isLoading){
this.setState({
isLoading
})
}
}
}
} }
render() { render() {
...@@ -23,7 +41,10 @@ class Loading extends Component { ...@@ -23,7 +41,10 @@ class Loading extends Component {
<div className="loading"> <div className="loading">
<div className="loading-wrapper"> <div className="loading-wrapper">
<HashLoader <HashLoader
css={override} css={{
display: 'block',
marginTop: '-100px'
}}
size={50} size={50}
color={'#09f'} color={'#09f'}
/> />
...@@ -32,7 +53,7 @@ class Loading extends Component { ...@@ -32,7 +53,7 @@ class Loading extends Component {
</div> </div>
return ( return (
this.props.isLoading ? ReactDOM.createPortal(innerLoading, container) : this.props.children this.state.isLoading ? ReactDOM.createPortal(innerLoading, container) : this.props.children
); );
} }
} }
......
src/components/search/index.js
...@@ -4,6 +4,7 @@ import Tag from '@common/Tag/index.js' ...@@ -4,6 +4,7 @@ import Tag from '@common/Tag/index.js'
import { http, api } from '@/utils' import { http, api } from '@/utils'
import './index.scss'; import './index.scss';
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import Loading from '@/common/Loading'
class Search extends PureComponent { class Search extends PureComponent {
...@@ -12,14 +13,16 @@ class Search extends PureComponent { ...@@ -12,14 +13,16 @@ class Search extends PureComponent {
searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [], searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
hot_words: [], hot_words: [],
searchList: [], searchList: [],
value: '' value: '',
isLoading: true
} }
async componentDidMount() { async componentDidMount() {
const res = await http.get(`${api['search-api']}/search_hot_word`) const res = await http.get(`${api['search-api']}/search_hot_word`)
if (res.data.errno === 0) { if (res.data.errno === 0) {
this.setState({ this.setState({
hot_words: res.data.data.info.hot_words hot_words: res.data.data.info.hot_words,
isLoading: false
}) })
} }
} }
...@@ -54,51 +57,53 @@ class Search extends PureComponent { ...@@ -54,51 +57,53 @@ class Search extends PureComponent {
handleChange={this.handleChange} handleChange={this.handleChange}
handleSearch={this.handleSearch} handleSearch={this.handleSearch}
/> />
<div className="search-main"> <Loading isLoading={this.state.isLoading}>
<div className="search-land"> <div className="search-main">
<div className='search-history'> <div className="search-land">
<span>最近搜索</span> <div className='search-history'>
<i className="iconfont iconiconfront-56" onClick={this.clearHistory}/> <span>最近搜索</span>
<i className="iconfont iconiconfront-56" onClick={this.clearHistory}/>
</div>
<div className="search-tag">
{
searchHistory.length > 0 ?
searchHistory.map((v, i) => {
return (
<Link
key={i}
to={`/search-result?word=${encodeURIComponent(v)}`}
>
<Tag>{v}</Tag>
</Link>
)
})
: <div style={{textAlign: 'center', padding: '20px'}}>暂无历史</div>
}
</div>
</div> </div>
<div className="search-tag"> <div className="search-land search-hot">
{ <label>
searchHistory.length > 0 ? <span>热门搜索</span>
searchHistory.map((v, i) => { </label>
return ( <div className="search-tag">
<Link {
key={i} this.state['hot_words'].length > 0 ?
to={`/search-result?word=${encodeURIComponent(v)}`} this.state['hot_words'].map((v, i) => {
> return (
<Tag>{v}</Tag> <Link key={i}
</Link> to={`/search-result?word=${encodeURIComponent(v)}`}
) onClick={this.storeHistory.bind(this, v)}
}) >
: <div style={{textAlign: 'center', padding: '20px'}}>暂无历史</div> <Tag>{v}</Tag>
} </Link>
)
})
: <div style={{textAlign: 'center', padding: '20px'}}>暂无热门</div>
}
</div>
</div> </div>
</div> </div>
<div className="search-land search-hot"> </Loading>
<label>
<span>热门搜索</span>
</label>
<div className="search-tag">
{
this.state['hot_words'].length > 0 ?
this.state['hot_words'].map((v, i) => {
return (
<Link key={i}
to={`/search-result?word=${encodeURIComponent(v)}`}
onClick={this.storeHistory.bind(this, v)}
>
<Tag>{v}</Tag>
</Link>
)
})
: <div style={{textAlign: 'center', padding: '20px'}}>暂无热门</div>
}
</div>
</div>
</div>
</div> </div>
) )
......
src/router/router-config.js
...@@ -19,6 +19,7 @@ import Passport from '@/components/passport'; ...@@ -19,6 +19,7 @@ import Passport from '@/components/passport';
import { Scholarship } from '@/components/scholarship/index'; import { Scholarship } from '@/components/scholarship/index';
import DrawDocument from '@/components/scholarship/DrawDocument/DrawDocument'; import DrawDocument from '@/components/scholarship/DrawDocument/DrawDocument';
import PayOrder from '@/components/order/payOrder/PayOrder' import PayOrder from '@/components/order/payOrder/PayOrder'
import Loading from '@/common/Loading'
const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons')) const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study')) const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
...@@ -137,5 +138,9 @@ export default [ ...@@ -137,5 +138,9 @@ export default [
component: ToGroup, component: ToGroup,
isPrivate: true isPrivate: true
}, },
{
path: '/loading',
component: Loading,
},
] ]
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment