发现页管理

app/scripts/actions/exploreAction.js

@@ -0,0 +1,118 @@
+import Request from 'superagent'
+
+export const RECEIVE_BANNER = 'RECEIVE_BANNER'
+export const RECEIVE_THEME = 'RECEIVE_THEME'
+export const RECEIVE_THEME_MORE = 'RECEIVE_THEME_MORE'
+
+export const EP_ADD_BANNER = 'EP_ADD_BANNER'
+export const EP_DELETE_BANNER = 'EP_DELETE_BANNER'
+export const EP_ADD_THEME = 'EP_ADD_THEME'
+export const EP_DELETE_THEME = 'EP_DELETE_THEME'
+
+function receiveBanner(res) {
+    return {
+        type: RECEIVE_BANNER,
+        res
+    }
+}
+function receiveTheme(res) {
+    return {
+        type: RECEIVE_THEME,
+        res
+    }
+}
+function receiveThemeMore(res) {
+    return {
+        type: RECEIVE_THEME_MORE,
+        res
+    }
+}
+function _addBanner(res) {
+    return {
+        type: EP_ADD_BANNER,
+        res
+    }
+}
+function _deleteBanner(id) {
+    return {
+        type: EP_DELETE_BANNER,
+        id
+    }
+}
+function _addTheme(res) {
+    return {
+        type: EP_ADD_THEME,
+        res
+    }
+}
+function _deleteTheme(id) {
+    return {
+        type: EP_DELETE_THEME,
+        id
+    }
+}
+export function fetchBanner() {
+    return (dispatch) => {
+        return Request
+            .get(`/api/banners`)
+            .end(function(err,res){
+                dispatch(receiveBanner(res.body.banners))
+            })
+    }
+}
+const status = {
+    page:0,
+}
+export function fetchTheme(more) {
+    more ? ++status.page : (status.page = 0)
+    return (dispatch) => {
+        return Request
+            .get(`/api/themes`)
+            .query({page:status.page})
+            .end(function(err,res){
+                more ? dispatch(receiveThemeMore(res.body.themes)) : dispatch(receiveTheme(res.body.themes))
+            })
+    }
+}
+
+export function addBanner() {
+    return (dispatch) => {
+        return Request
+            .post(`/api/recommend?place=banner`)
+            .end((err,res) => {
+                dispatch(_addBanner(res.body))
+            })
+    }
+}
+
+export function deleteBanner(id) {
+    return (dispatch) => {
+        return Request
+            .del(`/api/recommend/${id}`)
+            .end((err,res) => {
+                dispatch(_deleteBanner(id))
+            })
+
+    }
+}
+
+export function addTheme() {
+    return (dispatch) => {
+        return Request
+            .post(`/api/recommend?place=theme`)
+            .end((err,res) => {
+                dispatch(_addTheme(res.body))
+            })
+    }
+}
+
+export function deleteTheme(id) {
+    return (dispatch) => {
+        return Request
+            .del(`/api/recommend/${id}`)
+            .end((err,res) => {
+                dispatch(_deleteTheme(id))
+            })
+
+    }
+}

app/scripts/components/ExplorePage/ExplorePage.jsx

@@ -0,0 +1,149 @@
+import React,{ Component } from 'react'
+import {
+	Row, Col, Button, ButtonToolbar
+} from 'react-bootstrap'
+import { Link } from 'react-router'
+import If from '../../widgets/if'
+
+
+export default class ExplorePage extends Component{
+	constructor(props) {
+	  	super(props)
+	  	this.state = {}
+	  	this.addBanner = this._addBanner.bind(this)
+	  	this.deleteBanner = this._deleteBanner.bind(this)
+	  	this.addTheme = this._addTheme.bind(this)
+	  	this.deleteTheme = this._deleteTheme.bind(this)
+	  	this.fetchMoreThemes = () => this.props.fetchTheme(true)
+	}
+	componentWillMount() {
+		this.props.fetchBanner()
+		this.props.fetchTheme()
+	}
+	_addBanner() {
+		if (confirm('创建一个新Banner？')) {
+			this.props.addBanner()
+		}
+	}
+	_deleteBanner(id) {
+		if (confirm('删除这个Banner?')) {
+			this.props.deleteBanner(id)
+		}
+	}
+	_addTheme() {
+		if (confirm('创建一个新主题？')) {
+			this.props.addTheme()
+		}
+	}
+	_deleteTheme(id) {
+		if (confirm('删除这个主题?')) {
+			this.props.deleteTheme(id)
+		}
+	}
+	render() {
+		return(
+			<div className="content">
+				<Row className="content-header">
+		          <h1>
+		            Banner管理 { " " }
+		            <Button
+		              bsStyle='success'
+		              bsSize="small"
+		              onClick={this.addBanner}>创建新Banner</Button>
+		          </h1>
+		        </Row>
+		        <br></br>
+		        <If test={this.props.bannerList}>
+		          <Row>
+		            {this.props.bannerList.map((banner) => {
+		              return (
+		                <Col key={'b_'+banner.id} sm={6}>
+		                  <div className="box">
+		                    <div className="box-header with-border">
+		                      <h3 className="box-title">
+		                        {banner.title}
+		                      </h3>
+		                      <div className="box-tools pull-right">
+		                        <Link
+		                          to={`/recommend/${banner.id}/edit`}
+		                          className="btn btn-box-tool" >
+		                          <i className="fa fa-edit">
+		                          </i>
+		                        </Link>
+		                        <button
+		                          className="btn btn-box-tool"
+		                          onClick={() => this.deleteBanner(banner.id)}>
+		                          <i className="fa fa-times">
+		                          </i>
+		                        </button>
+		                      </div>
+		                    </div>
+		                    <div className="box-body">
+		                      <img
+		                        className="img-responsive"
+		                        src={banner.image} />
+		                    </div>
+		                  </div>
+		                </Col>
+		              )
+		            })}
+		          </Row>
+		        </If>
+		        <br></br>
+		        <Row className="content-header">
+		          <h1>
+		            主题管理 { " " }
+		            <Button
+		              bsStyle='success'
+		              bsSize="small"
+		              onClick={this.addTheme}>创建新主题</Button>
+		          </h1>
+		        </Row>
+		        <br></br>
+		        <If test={this.props.themeList}>
+		          <Row>
+		            {this.props.themeList.map((theme) => {
+		              return (
+		                <Col key={'b_'+theme.id} sm={6}>
+		                  <div className="box">
+		                    <div className="box-header with-border">
+		                      <h3 className="box-title">
+		                        {theme.title}
+		                      </h3>
+		                      <div className="box-tools pull-right">
+		                        <Link
+		                          to={`/recommend/${theme.id}/edit`}
+		                          className="btn btn-box-tool" >
+		                          <i className="fa fa-edit">
+		                          </i>
+		                        </Link>
+		                        <button
+		                          className="btn btn-box-tool"
+		                          onClick={ () => this.deleteTheme(theme.id) }>
+		                          <i className="fa fa-times">
+		                          </i>
+		                        </button>
+		                      </div>
+		                    </div>
+		                    <div className="box-body">
+		                      <img
+		                        className="img-responsive"
+		                        src={theme.image} />
+		                    </div>
+		                  </div>
+		                </Col>
+		              )
+		            })}
+		          </Row>
+		        </If>
+		        <Row>
+		          <div
+		            className="load-more-btn"
+		            onClick={this.fetchMoreThemes}>
+		            Load More
+		          </div>
+		        </Row>
+			</div>
+		)
+	}
+}

app/scripts/components/ExplorePage/index.js

@@ -0,0 +1,25 @@
+import { connect } from 'react-redux'
+import ExplorePage from './ExplorePage'
+
+import { 
+	fetchBanner, addBanner, deleteBanner,
+	fetchTheme, addTheme, deleteTheme 
+} from '../../actions/exploreAction'
+const mapActionCreators = {
+    fetchBanner,
+    addBanner,
+    deleteBanner,
+    fetchTheme,
+    addTheme, 
+    deleteTheme, 
+}
+
+const mapStateToProps = (state) => {
+    const { bannerList, themeList }  = state.exploreReducer.toJS()
+    return {
+        bannerList,
+        themeList
+    }
+}
+
+export default connect(mapStateToProps, mapActionCreators)(ExplorePage)

app/scripts/reducers/exploreReducer.js

@@ -0,0 +1,47 @@
+import Immutable from 'immutable'
+import { 
+	RECEIVE_THEME, RECEIVE_THEME_MORE, RECEIVE_BANNER, 
+	EP_ADD_BANNER,
+	EP_DELETE_BANNER, 
+	EP_ADD_THEME,
+	EP_DELETE_THEME
+} from '../actions/exploreAction'
+
+export default (state = Immutable.fromJS({ themeList: [],bannerList:[] }),action)=>{
+    switch (action.type) {
+        case RECEIVE_BANNER:
+            return state.updateIn(['bannerList'],(bannerList) => {
+            	return bannerList.clear().concat(Immutable.fromJS(action.res))
+            })
+        case EP_ADD_BANNER:
+        	return state.updateIn(['bannerList'],(bannerList) => {
+        		return bannerList.unshift(Immutable.fromJS(action.res))
+        	})
+        case EP_DELETE_BANNER:
+        	return state.updateIn(['bannerList'],(bannerList) => {
+        		return bannerList.delete(bannerList.findKey((banner) => {
+        			return banner.get('id') === action.id
+        		}))
+        	})
+		case RECEIVE_THEME:
+            return state.updateIn(['themeList'],(themeList) => {
+            	return themeList.clear().concat(Immutable.fromJS(action.res))
+            })
+        case RECEIVE_THEME_MORE:
+        	return state.updateIn(['themeList'],(themeList) => {
+            	return themeList.concat(Immutable.fromJS(action.res))
+            })
+        case EP_ADD_THEME:
+        	return state.updateIn(['themeList'],(themeList) => {
+        		return themeList.unshift(Immutable.fromJS(action.res))
+        	})
+        case EP_DELETE_THEME:
+        	return state.updateIn(['themeList'],(themeList) => {
+        		return themeList.delete(themeList.findKey((theme) => {
+        			return theme.get('id') === action.id
+        		}))
+        	})
+        default:
+            return state
+    }
+}

app/scripts/routes.js

@@ -7,11 +7,12 @@ import UserDetail from './components/UserDetail/index'
 import Home from './components/Home/index'
 import RecommendHome from './components/RecommendHome/index'
 import TagList from './components/TagList/index'
+import ExplorePage from './components/ExplorePage/index'
 //old
 // import UserDetail from './components/userdetail'
 // import Home from './components/home';
 // import RecommendHome from './components/recommendhome';
-import ExplorePage from './components/explorepage';
+// import ExplorePage from './components/explorepage';
 import UserList from './components/userlist';
 import SkuList from './components/skulist';
 // import TagList from './components/taglist';

app/scripts/store.js

@@ -8,6 +8,7 @@ import userDetailReducer from './reducers/userDetailReducer'
 import statsReducer from './reducers/statsReducer'
 import recommendHomeReducer from './reducers/recommendHomeReducer'
 import tagReducer from './reducers/tagReducer'
+import exploreReducer from './reducers/exploreReducer'
 export const makeRootReducer = (asyncReducers) => {
 	return combineReducers({
 		// Add sync reducers here
@@ -17,6 +18,7 @@ export const makeRootReducer = (asyncReducers) => {
 		statsReducer,
 		recommendHomeReducer,
 		tagReducer,
+		exploreReducer,
 		router,
 		...asyncReducers
 	})