From 14419a38fd15099ec1dd5386b642af4ecc3278fe Mon Sep 17 00:00:00 2001 From: heebooo <1807941596@qq.com> Date: Sun, 14 Jan 2018 01:40:42 +0800 Subject: [PATCH] add CityList component --- mock/home/hotCityList.js | 50 ++++++++++++++++++++++++++ mock/server.js | 15 +++++--- src/components/CityList/index.js | 58 ++++++++++++++++++++++++++++++ src/components/CityList/style.scss | 31 ++++++++++++++++ src/containers/City/index.js | 26 ++++++++++++++ src/fetch/home/home.js | 10 ++++-- src/index.js | 5 --- 7 files changed, 184 insertions(+), 11 deletions(-) create mode 100644 mock/home/hotCityList.js create mode 100644 src/components/CityList/index.js create mode 100644 src/components/CityList/style.scss diff --git a/mock/home/hotCityList.js b/mock/home/hotCityList.js new file mode 100644 index 0000000..e71b908 --- /dev/null +++ b/mock/home/hotCityList.js @@ -0,0 +1,50 @@ +module.exports = [ + { + cityName:　'北京', + cityId: 1, + }, + { + cityName:　'上海', + cityId: 2, + }, + { + cityName:　'杭州', + cityId: 3, + }, + { + cityName:　'广州', + cityId: 4, + }, + { + cityName:　'苏州', + cityId: 5, + }, + { + cityName:　'深圳', + cityId: 6, + }, + { + cityName:　'南京', + cityId: 7, + }, + { + cityName:　'天津', + cityId: 8, + }, + { + cityName:　'重庆', + cityId: 9, + }, + { + cityName:　'厦门', + cityId: 10, + }, + { + cityName:　'武汉', + cityId: 11, + }, + { + cityName:　'西安', + cityId: 12, + }, +]; \ No newline at end of file diff --git a/mock/server.js b/mock/server.js index 7fdfdae..f1e1270 100644 --- a/mock/server.js +++ b/mock/server.js @@ -5,13 +5,15 @@ const koaBody = require('koa-body')(); const app = new Koa(); // 首页 —— 广告（超值特惠） -const homeAdData = require('./home/ad.js'); +const homeAdData = require('./home/ad'); + router.get('/api/homead', (ctx, next) => { ctx.body = homeAdData; -}) +}); // 首页 —— 推荐雷彪（猜你喜欢） -const homeListData = require('./home/list.js'); +const homeListData = require('./home/list'); + router.get('/api/homelist/:city/:page', (ctx, next) => { // 参数 const params = ctx.params; @@ -22,8 +24,13 @@ router.get('/api/homelist/:city/:page', (ctx, next) => { console.log(`当前页数：${paramsPage}`); ctx.body = homeListData; -}) +}); +// 选择城市 - 热门城市 +const hotCityListData = require('./home/hotCityList'); +router.get('/api/hotCityList', ctx => { + ctx.body = hotCityListData; +}); // router.post('/api/post', koaBody, (ctx, next) => { // console.log(ctx.request.body); diff --git a/src/components/CityList/index.js b/src/components/CityList/index.js new file mode 100644 index 0000000..32e5037 --- /dev/null +++ b/src/components/CityList/index.js @@ -0,0 +1,58 @@ +import React, { PureComponent } from 'react'; + +import { getHotCityListData } from '~fetch/home/home'; + + +import './style.scss'; + +class CityList extends PureComponent { + constructor(props) { + super(props); + this.state = { + data: [] + }; + }; + + render() { + const cityList = this.state.data; + + return ( +
+

热门城市

+ +
+ ); + }; + + componentDidMount() { + const result = getHotCityListData(); + + result.then(res => { + return res.json(); + }).then(json => { + const data = json; + + // 存储热门城市信息 + this.setState({ + data: data + }); + }) + }; + + handleClick = newCity => { + this.props.changeFn(newCity); + }; + +}; + +export default CityList; diff --git a/src/components/CityList/style.scss b/src/components/CityList/style.scss new file mode 100644 index 0000000..fbf38b5 --- /dev/null +++ b/src/components/CityList/style.scss @@ -0,0 +1,31 @@ + +.city-list-container { + padding: 10px 15px 20px 15px; + background-color: #fff; + + h3 { + font-size: 16px; + } + + .city-list { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + li { + width: 33.3%; + line-height: 2; + font-size: 16px; + text-align: center; + + span { + display: inline-block; + width: 90%; + margin-top: 15px; + border: 1px solid #ccc; + } + } + } +} + + diff --git a/src/containers/City/index.js b/src/containers/City/index.js index 36805cb..c576942 100644 --- a/src/containers/City/index.js +++ b/src/containers/City/index.js @@ -3,8 +3,12 @@ import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import * as userInfoActionsFormOtherFile from '~actions/userinfo'; +import LocalStore from '~util/localStore'; +import { CITYNAME } from '~config/localStoreKey'; + import Header from '~components/Header'; import CurrentCity from '~components/CurrentCity'; +import CityList from '~components/CityList'; class City extends PureComponent { render() { @@ -12,9 +16,31 @@ class City extends PureComponent {
+
) }; + + changeCity = newCity => { + // 将新选择的城市设置为当前城市 + + console.log(newCity) + if (newCity == null) { + return; + }; + + // 1.修改redux + const userinfo = this.props.userinfo; + + userinfo.cityName = newCity; + this.props.userInfoActions.update(userinfo); + + // 2.修改localStorage + LocalStore.setItem(CITYNAME, newCity); + + // 3.跳转到首页 + this.props.history.push('/'); + }; }; // ==========================redux react 绑定========================== diff --git a/src/fetch/home/home.js b/src/fetch/home/home.js index f234eeb..3a524bc 100644 --- a/src/fetch/home/home.js +++ b/src/fetch/home/home.js @@ -4,10 +4,16 @@ export function getAdData() { const result = get('/api/homead'); return result; -} +}; export function getListData(city, page) { const result = get('/api/homelist/' + encodeURIComponent(city) + '/' + page); return result; -} \ No newline at end of file +}; + +export function getHotCityListData() { + const result = get('/api/hotCityList'); + + return result; +} diff --git a/src/index.js b/src/index.js index b0d7ba7..48d7319 100644 --- a/src/index.js +++ b/src/index.js @@ -5,11 +5,6 @@ import { Provider } from 'react-redux'; import configureStore from './store/store'; // 生成的store import App from './containers'; // 容器组件 -// import { getData, postData } from './fetch/data.js'; -// import './index.scss'; -// getData(); -// postData(); - let store = configureStore(); ReactDOM.render(