const ComponentWithDva = (props = {}) => {
const { store, initialProps, initialState } = props;
const ConnectedComponent = connect(...args)(Component);
return React.createElement(
Provider,
// in client side, it will init store with the initial state tranfer from server side
{ store: store && store.dispatch ? store : getOrCreateStore(initialState) },
// transfer next.js's props to the page
React.createElement(ConnectedComponent, initialProps),
);
};
extra="待审核">
提现金额: ￥{item.enchashment_amount.toFixed(2)}
<Brief>{item.system_create_time}</Brief>
</Item>
);
})
}
</List>
:
''
}
{
this.state.is_load && this.state.list.length === 0 ?
<div>
<img src={require('../../assets/svg/empty.svg')} className="empty-image" alt=""/>
<div className="empty-text">没有数据</div>
</div>
:
''
}
<WhiteSpace size="lg"/>
<div className={'loading-mask ' + (this.state.is_load ? 'loading-mask-hide' : '')}>
<div className="loading"><ActivityIndicator/></div>
</div>
</div>
);
}
}
export default connect(() => ({}))(EnchashmentIndex);
import { connect } from 'dva';
// import styles from './IndexPage.scss';
// import { Carousel, Icon } from 'antd';
class SearchPage extends React.PureComponent{
componentDidMount(){
}
render(){
return <div>
this is search page
</div>;
}
}
// IndexPage.propTypes = {
// };
const mapStateToProps = (state)=>{
return {
}
}
const mapDispatchToProps = (dispatch)=>{
return {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SearchPage);
onMenuClick={this.handleMenuClick}
onNoticeVisibleChange={this.handleNoticeVisibleChange}
{...this.props}
/>
) : (
<GlobalHeader
onCollapse={handleMenuCollapse}
onNoticeClear={this.handleNoticeClear}
onMenuClick={this.handleMenuClick}
onNoticeVisibleChange={this.handleNoticeVisibleChange}
{...this.props}
/>
)}
</Header>
) : null;
return (
<Animate component="" transitionName="fade">
{HeaderDom}
</Animate>
);
}
}
export default connect(({ user, global, setting, loading }) => ({
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects['global/fetchNotices'],
notices: global.notices,
setting,
}))(HeaderView);
<Pagination
className="ant-table-pagination"
total={total}
current={current}
pageSize={PAGE_SIZE}
onChange={pageChangeHandler}
/>
</div>
</div>
);
}
/**
* @todo 状态名称 到底大写还是小写？
*
* @param state
* @returns {{loading: (users|{john, tom}|User[]), list: users.list, total: users.total, page: users.page}}
*/
function mapStateToProps(state) {
// 此处的键名 跟../models/Comment 处的名空间一致 全局唯一
const { list, total, page } = state.comment;
return {
loading: state.loading.models.comment,
list,
total,
page,
};
}
export default connect(mapStateToProps)(Comment);
componentDidMount() {
document.title = 'TA的发货单';
document.body.scrollTop = 0;
this.setState({
is_load: true
});
}
componentWillUnmount() {
}
render() {
return (
<div>
<div>
<img src={require('../../assets/svg/empty.svg')} className="empty-image" alt=""/>
<div className="empty-text">没有数据</div>
</div>
<div className={'loading-mask ' + (this.state.is_load ? 'loading-mask-hide' : '')}>
<div className="loading"><ActivityIndicator/></div>
</div>
</div>
);
}
}
export default connect(() => ({}))(MemberDeliveryOrderIndex);
<FormItem hasFeedback>
{getFieldDecorator('password', {
rules: [
{
required: true
}
]
})(<Input type="password" onPressEnter={handleOk} placeholder="Password" />)}
</FormItem>
<Row>
<Button type="primary" onClick={handleOk} loading={loading.effects.login}>
Sign in
</Button>
<p>
<span>Username：admin</span>
<span>Password：admin</span>
</p>
</Row>
</form>
</div>
)
}
Login.propTypes = {
form: PropTypes.object,
dispatch: PropTypes.func,
loading: PropTypes.object
}
export default connect(({ loading }) => ({ loading }))(Form.create()(Login))
if(val)
{if(!this.props.global.toggleval)
this.props.dispatch({type: 'global/toggle'})}
if(!val)
{if(this.props.global.toggleval)
this.props.dispatch({type: 'global/toggle'})}
}
render() {
const {global} =this.props;
const toggle = global.toggleval;
return (
<Layout>
<header className="headerdiv">
<AppHeader/>
</header>
<Layout>
<Sider className="sidebarDiv" width={265} breakpoint="sm" collapsedWidth="0" onBreakpoint={(broken) => this.brokenFun(broken)} collapsed={toggle} onClick={this.sidebarFun}>
<AppSidebar {...this.props} />
</Sider>
<Content className="contentDiv">
<SubRoute {...this.props} />
</Content >
</Layout>
</Layout>
);
}
}
export default connect(({global, loading}) => ({
global, loading
}))(BasicLayout);
import React from 'react'
import { connect } from 'dva'
const Category = ({ customer }) => {
return (
<div>
<text>Category</text>
{JSON.stringify(customer)}
</div>
)
}
export default connect(({ app }) => app)(Category)
import React from 'react';
import {
connect
} from 'dva';
import ContentHeader from '~/src/components/_common/ContentHeader'
import Main from '../components/Category/Main'
function Category({
dispatch,
location
}) {
const navItem = [ '用户管理','Ray-Lam','分类'];
return (
<div className='flex-1 flex-box-v'>
<ContentHeader dispatch={dispatch} item={navItem} goBack={true}></ContentHeader>
<Main></Main>
</div>
);
}
function mapStateToProps() {
return {};
}
export default connect(mapStateToProps)(Category);
import styles from './main.less'
function App ({ children, location, dispatch, app, loading }) {
const { login, loginButtonLoading, logging, loginFail } = app
const loginProps = {
logging,
loginFail,
loading,
loginButtonLoading,
onOk (data) {
dispatch({ type: 'app/login', payload: data })
},
}
return (
<div>
<Login {...loginProps} />
</div>
)
}
App.propTypes = {
children: PropTypes.element.isRequired,
location: PropTypes.object,
dispatch: PropTypes.func,
app: PropTypes.object,
loading: PropTypes.bool,
}
export default connect(({ app, loading }) => ({ app, loading: loading.models.app }))(App)
// 1. Initialize
const app = dva();
// 2. Model
app.model({
namespace: 'count',
state: 0,
reducers: {
['count/add' ](count) { return count + 1 },
['count/minus'](count) { return count - 1 },
},
});
// 3. View
const App = connect(({ count }) => ({
count
}))(function(props) {
return (
<div>
<h2>{ props.count }</h2>
<button key="add" onClick={() => { props.dispatch({type: 'count/add'})}}>+</button>
<button key="minus" onClick={() => { props.dispatch({type: 'count/minus'})}}>-</button>
</div>
);
});
// 4. Router
app.router(
<Route path="/" component={App} />
);
import styles from './index.css';
function App(props) {
return (
<div className={styles.normal}>
<h2>
{props.text} @ {props.pathname}
</h2>
<div
onClick={() => {
router.goBack();
}}
>
Back
</div>
<div>
test: {props.a} | {props.b}
</div>
</div>
);
}
export default connect(state => {
return {
pathname: state.routing.location.pathname,
text: state.global.text,
a: state.a,
b: state.b,
};
})(App);
<Select placeholder="请选择仓库类型">
<Option value="private">私密</Option>
<Option value="public">公开</Option>
</Select>
)}
</Form.Item>
</Col>
</Row>
</Form>
</Card>
<Card title="成员管理" className={styles.card} bordered={false}>
{getFieldDecorator('members', {
initialValue: tableData,
})(<TableForm />)}
</Card>
<FooterToolbar style={{ width: this.state.width }}>
{getErrorInfo()}
<Button type="primary" onClick={validate} loading={submitting}>
提交
</Button>
</FooterToolbar>
</PageHeaderLayout>
);
}
}
export default connect(({ global, loading }) => ({
collapsed: global.collapsed,
submitting: loading.effects['form/submitAdvancedForm'],
}))(Form.create()(AdvancedForm));
<p style={{ fontSize: 14, color: 'rgba(0,0,0,0.4)' }}>{blogs.current.created_at}
<Link to="/blogs" className={classes.link}>
<Icon type="share-alt" className={classes.articleShareIcon} />
<Icon type="github" className={classes.articleShareIcon} />
</Link>
</p>
<img src="/assets/blogs/authorimg.jpg" className={classes.authorAvatar} alt="" />
</div>
{/*
<div
id="articlebody"
className={classes.articlebody}
dangerouslySetInnerHTML={{ __html: blogs.current.content }}
/>
*/}
<div id="articlebody" className={classes.articlebody}>
</div>
<div className={classes.floatPart}>
<div className={classes.floatPartInner} />
</div>
</div>
</div>
}
</div>
);
}
}
export default connect(({ blogs }) => ({ blogs }))(withStyles(styles)(Detail));
<div>
<div className="course-header">
<div className={ 'course-title ' + style.ecardTitle }>
一卡通消费总览
</div>
</div>
<div className={ style.head }>
<div className={ style.headLeft }>
<StuCard />
</div>
<div className={ style.headRow }>
<div className={ style.headBlock }>
<span className={ style.headTitle }>余额</span>
<span className={ style.headContent }>12.2</span>
</div>
<div className={ style.headBlock }>
<span className={ style.headTitle }>待领取</span>
<span className={ style.headContent }>100.0</span>
</div>
</div>
</div>
</div>
);
};
const mapStateToProps = ({ecard}) => {
return {...ecard};
};
export default connect(mapStateToProps)(Ecard);
import React from 'react';
import { connect } from 'dva';
import styles from './AdminMenu.css';
import AdminMenuComponent from '../components/AdminMenu/AdminMenu';
import MainLayout from '../components/MainLayout/MainLayout';
function AdminMenu({ location }) {
return (
<MainLayout location={location}>
<div className={styles.normal}>
<AdminMenuComponent />
</div>
</MainLayout>
);
}
export default connect()(AdminMenu);
<div>
<div className={classnames(styles.layout, {[styles.fold]: isNavbar ? false : siderFold}, {[styles.withnavbar]: isNavbar})}>
{!isNavbar ? <aside className={classnames(styles.sider, {[styles.light]: !darkTheme})}>
<Sider {...siderProps} />
</aside> : ''}
<div className={styles.main}>
<Header {...headerProps} />
<Bread location={location} />
<div className={styles.container}>
<div className={styles.content}>
{children}
</div>
</div>
<Footer />
</div>
</div>
</div>
)
}
App.propTypes = {
children: PropTypes.element.isRequired,
location: PropTypes.object,
dispatch: PropTypes.func,
user: PropTypes.object,
siderFold: PropTypes.bool,
darkTheme: PropTypes.bool
}
export default connect(({app}) => ({app}))(App)
console.log('props...', props, 'state...', state);
let {match, location, history} = props;
return {match, location, history};
}
getSnapshotBeforeUpdate(props, state){
console.log('snap props...', props, 'snap state...', state);
return null
}
render(){
return <h2>recommend</h2>
}
}
const mapStateToProps = (state)=>{
return {}
}
const mapDispatchToProps = (dispatch)=>{
return {
fetchList: (rid)=>{
dispatch({
type: 'series/getSeries',
payload: rid
})
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Recommend);
import React from 'react';
import {Route, NavLink} from 'dva/router';
import Subscribe from '../components/Subscribe';
import Hot from '../components/Hot';
import {connect} from 'dva';
const Index = () => {
return (
<div>
<header>
<NavLink to="/index/subscribe">订阅</NavLink>
<NavLink to="/index/hot">热点</NavLink>
</header>
<Route path="/index/subscribe" component={Subscribe}></Route>
<Route path="/index/hot" component={Hot}></Route>
</div>
);
};
Index.propTypes = {
};
export default connect((state)=>{
console.log('state...', state);
return {
}
})(Index);
<span style={{ fontSize: '0.64rem' }}>￥</span>{Number(this.state.trade_total_amount).toFixed(2)}
</div>
</div>}
/>
:
''
}
{
this.state.result === 'error' ?
<Result
img={<img src={require('../../assets/svg/notice.svg')} style={{ width: '1.2rem', height: '1.2rem' }} alt=""/>}
title="网络异常"
message="请与平台工作人员确认"
/>
:
''
}
<div style={{ margin: '100px 10px 0px 10px' }}>
<Button type="primary" onClick={this.handleIndex.bind(this)}>返回首页</Button>
</div>
<WhiteSpace size="lg"/>
<div style={{ margin: '0px 10px 0px 10px' }}>
<Button onClick={this.handleTrade.bind(this)}>查看订单</Button>
</div>
</div>
);
}
}
export default connect(() => ({}))(TradeConfirm);
this.setState({
CreateEngineImageGen() {
return <CreateEngineImage {...createEngineImageModalProps} />
},
})
}
return (
<div className="content-inner" >
<Row gutter={24}>
<Col lg={{ offset: 18, span: 6 }} md={{ offset: 16, span: 8 }} sm={24} xs={24} style={{ marginBottom: 16 }}>
<Filter {...engineImageFilterProps} />
</Col>
</Row>
<Button style={{ position: 'absolute', top: '-50px', right: '0px' }} size="large" type="primary" onClick={addEngineImage}>Deploy Engine Image</Button>
<EngineImageList {...engineImageListProps} />
<CreateEngineImage key={createEngineImageModalKey} {...createEngineImageModalProps} />
</div>
)
}
}
EngineImage.propTypes = {
engineimage: PropTypes.object,
loading: PropTypes.bool,
location: PropTypes.object,
dispatch: PropTypes.func,
}
export default connect(({ engineimage, loading }) => ({ engineimage, loading: loading.models.engineimage }))(EngineImage)
<Table
columns={columns}
dataSource={dataSource}
loading={loading}
rowKey={record => record.id}
pagination={false}
/>
<Pagination
className="ant-table-pagination"
total={total}
current={current}
pageSize={PAGE_SIZE}
onChange={pageChangeHandler}
/>
</div>
</div>
);
}
function mapStateToProps(state) {
const { list, total, page } = state.users;
return {
loading: state.loading.models.users,
list,
total,
page,
};
}
export default connect(mapStateToProps)(Users);
<LeftMenu
app={app}
dropDown={dropDown}
classes={classes}
handleClick={this.handleClick}
handleChangeTheme={this.handleChangeTheme}
/>
</Drawer>
</Hidden>
<main className={classes.content}>
<CirLoading loading={loading.global} />
<PageHeader title={app.pageHeader} />
{children}
</main>
</div>
<Footer />
</div>
</MuiThemeProvider>
);
}
}
}
ResponsiveDrawer.propTypes = {
};
export default withRouter(connect(
({ app, loading }) => ({ app, loading }
))(withStyles(styles, { withTheme: true })(ResponsiveDrawer)));
this.props.onCancel && this.props.onCancel()
}
onOk = () => {
this.props.dispatch({
type: 'app/changeBlur',
payload: false,
})
this.props.onOk && this.props.onOk()
}
render() {
return (
<Modal footer={[
<Button key="cancel" onClick={this.onCancel}>Cancel</Button>,
<Button key="ok" type="success" onClick={this.onOk}>
{this.props.okText ? this.props.okText : 'OK'}
</Button>,
]} {...this.props}></Modal>
)
}
}
ModalBlur.propTypes = {
visible: PropTypes.bool,
dispatch: PropTypes.func,
onCancel: PropTypes.func,
onOk: PropTypes.func,
okText: PropTypes.string,
}
export default connect(({ app }) => ({ app }))(ModalBlur)
</h1>
</Link>
</div>
<Divider />
<Link to={`/blogs/${item.id}`}>
<div className={classes.articleDesc}>
<div className={classes.articleDescWord}>
<p className={classes.description}>{item.description}</p>
<span style={{ fontSize: 12 }}>{item.created_at}</span>
</div>
<div className={classes.blogBg} style={{ backgroundImage: `url(${item.poster})` }} />
</div>
</Link>
</Card>
</TweenOne>
);
})}
</Grid>
</div>
</div>
</TweenOne>
</div>
</div>
</div>
);
}
}
export default connect(
({ app, front, loading }) => ({ app, front, loading }))(withStyles(styles)(Blogs));
</Content>
<Footer style={{ padding: 0 }}>
<GlobalFooter
copyright={
<Fragment>
Copyright <Icon type="copyright" /> Hyperledger Cello
</Fragment>
}
/>
</Footer>
</Layout>
</Layout>
);
return (
<DocumentTitle title={this.getPageTitle()}>
<ContainerQuery query={query}>
{params => <div className={classNames(params)}>{layout}</div>}
</ContainerQuery>
</DocumentTitle>
);
}
}
export default connect(({ user, global, loading }) => ({
currentUser: user.currentUser,
collapsed: global.collapsed,
fetchingNotices: loading.effects["global/fetchNotices"],
notices: global.notices,
}))(BasicLayout);
{top}
<MenuContext.Consumer>
{value => (
<PageHeader
wide={contentWidth === 'Fixed'}
home={<FormattedMessage id="menu.home" defaultMessage="Home" />}
{...value}
key="pageheader"
{...restProps}
linkElement={Link}
itemRender={item => {
if (item.locale) {
return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
}
return item.title;
}}
/>
)}
</MenuContext.Consumer>
{children ? (
<div className={styles.content}>
<GridContent>{children}</GridContent>
</div>
) : null}
</div>
);
export default connect(({ setting }) => ({
contentWidth: setting.contentWidth,
}))(PageHeaderWrapper);
}
})
};
const addressDelete = function(id){
console.log(id);
dispatch({
type:'addressList/delete',
payload:{
key:id
}
})
};
const tableProps={
dataSource:data,
loading:isLoading,
viewAdressDetail:viewAdressDetail,
addressDelete:addressDelete
}
return(
<MainLayout>
<AddressList {...tableProps}/>
</MainLayout>
)
}
function mapStateToProps({ addressList }) {
return {addressList};
}
export default connect(mapStateToProps)(IndexPage);
<div className="product-list-text">
{product_sku.product_name}
<div>{(product_sku.product_sku_amount / product_sku.product_sku_quantity).toFixed(2)}
× {product_sku.product_sku_quantity}</div>
</div>
</Item>
);
})
}
<Item>
<span style={{fontSize: '28px'}}>
共{trade.trade_product_quantity}件商品，合计：￥{trade.trade_product_amount}
</span>
</Item>
</List>
</div>
);
})
}
<WhiteSpace size="lg"/>
<div className={'loading-mask ' + (this.state.is_load ? 'loading-mask-hide' : '')}>
<div className="loading"><ActivityIndicator/></div>
</div>
</div>
</div>
);
}
}
export default connect(() => ({}))(MemberChildrenTradeIndex);