add CityList component

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,
+ },
+];

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);

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 (
+ <div className="city-list-container">
+ <h3>热门城市</h3>
+ <ul className="city-list">
+ {
+ cityList.map((item, i) => {
+ return (
+ <li key={i}>
+ <span onClick={() => { this.handleClick(item.cityName)}}>{item.cityName}</span>
+ </li>
+ );
+ })
+ }
+ </ul>
+ </div>
+ );
+ };
+
+ 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;

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;
+ }
+ }
+ }
+}
+
+

src/containers/City/index.js

@@ -3,18 +3,44 @@ 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() {
  return (
  <div>
  <Header title="选择城市" />
  <CurrentCity cityName={this.props.userinfo.cityName} />
+ <CityList changeFn={this.changeCity} />
  </div>
  )
  };
+
+ 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 绑定==========================

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;
-}
+};
+
+export function getHotCityListData() {
+ const result = get('/api/hotCityList');
+
+ return result;
+}

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(