router has question in search

mock/home/homeCategory.js

@@ -0,0 +1,152 @@
+module.exports = [
+ {
+ name: '景点',
+ className: 'jingdian',
+ link: '/search/'
+ },
+ {
+ name: 'KTV',
+ className: 'ktv',
+ link: '/search/ktv'
+ },
+ {
+ name: '购物',
+ className: 'gouwu',
+ link: '/search/gouwu'
+ },
+ {
+ name: '生活服务',
+ className: 'shenghuofuwu',
+ link: '/search/shenghuofuwu'
+ },
+ {
+ name: '健身运动',
+ className: 'jianshenyundong',
+ link: '/search/jianshenyundong'
+ },
+ {
+ name: '美发',
+ className: 'meifa',
+ link: '/search/meifa'
+ },
+ {
+ name: '亲子',
+ className: 'qinzi',
+ link: '/search/qinzi'
+ },
+ {
+ name: '小吃快餐',
+ className: 'xiaochikuaican',
+ link: '/search/xiaochikuaican'
+ },
+ {
+ name: '自助餐',
+ className: 'zizhucan',
+ link: '/search/zizhucan'
+ },
+ {
+ name: '酒吧',
+ className: 'jiuba',
+ link: '/search/jiuba'
+ },
+ {
+ name: '美食',
+ className: 'meishi',
+ link: '/search/meishi'
+ },
+ {
+ name: '电影',
+ className: 'dianying',
+ link: '/search/dianying'
+ },
+ {
+ name: '酒店',
+ className: 'jiudian',
+ link: '/search/jiudian'
+ },
+ {
+ name: '休闲娱乐',
+ className: 'xuixianyule',
+ link: '/search/xuixianyule'
+ },
+ {
+ name: '外卖',
+ className: 'waimai',
+ link: '/search/waimai'
+ },
+ {
+ name: '火锅',
+ className: 'huoguo',
+ link: '/search/huoguo'
+ },
+ {
+ name: '丽人',
+ className: 'liren',
+ link: '/search/liren'
+ },
+ {
+ name: '度假出行',
+ className: 'dujiachuxing',
+ link: '/search/dujiachuxing'
+ },
+ {
+ name: '足疗按摩',
+ className: 'zuliaoanmo',
+ link: '/search/zuliaoanmo'
+ },
+ {
+ name: '周边游',
+ className: 'zhoubianyou',
+ link: '/search/zhoubianyou'
+ },
+ {
+ name: '日本菜',
+ className: 'ribencai',
+ link: '/search/ribencai'
+ },
+ {
+ name: 'SPA',
+ className: 'SPA',
+ link: '/search/SPA'
+ },
+ {
+ name: '结婚',
+ className: 'jiehun',
+ link: '/search/jiehun'
+ },
+ {
+ name: '学习培训',
+ className: 'xuexipeixun',
+ link: '/search/xuexipeixun'
+ },
+ {
+ name: '西餐',
+ className: 'xican',
+ link: '/search/xican'
+ },
+ {
+ name: '火车票',
+ className: 'huochejipiao',
+ link: '/search/huochejipiao'
+ },
+ {
+ name: '烧烤',
+ className: 'shaokao',
+ link: '/search/shaokao'
+ },
+ {
+ name: '嫁妆',
+ className: 'jiazhuang',
+ link: '/search/jiazhuang'
+ },
+ {
+ name: '宠物',
+ className: 'chongwu',
+ link: '/search/chongwu'
+ },
+ {
+ name: '全部分类',
+ className: 'quanbufenlei',
+ link: '/search/quanbufenlei'
+ },
+];

mock/server.js

@@ -4,6 +4,13 @@ const koaBody = require('koa-body')();
 
 const app = new Koa();
 
+// 首页 —— 轮播图数据
+const homeCateGory = require('./home/homeCategory');
+
+router.get('/api/homeCategory', (ctx, next) => {
+ ctx.body = homeCateGory;
+});
+
 // 首页 —— 广告（超值特惠） 
 const homeAdData = require('./home/ad');
 

src/components/Category/index.js

@@ -1,15 +1,17 @@
-import React, { PureComponent } from 'react';
-import ReactSwipe from 'react-swipe';
-
+import React, { PureComponent } from 'react';
+import { Link } from 'react-router-dom';
+import ReactSwipe from 'react-swipe'; // 引入轮组组件
+import { getHomeCategoryData } from '~fetch/home/home'; // 获取轮播图数据
 import './style.scss';
 
 class Category extends PureComponent {
  constructor(props) {
  super(props);
  this.state = {
+ data: [],
  index: 0
- }
- }
+ };
+ };
 
  render() {
  const option = {
@@ -20,49 +22,55 @@ class Category extends PureComponent {
  })
  }.bind(this)
  };
+
+ const data = this.state.data;
+
  return (
  <div className="home-category">
  <ReactSwipe className="carousel" swipeOptions={option}>
  <div className="carousel-item">
  <ul>
- <li className="jingdian">景点</li>
- <li className="ktv">KTV</li>
- <li className="gouwu">购物</li>
- <li className="shenghuofuwu">生活服务</li>
- <li className="jianshenyundong">健身运动</li>
- <li className="meifa">美发</li>
- <li className="qinzi">亲子</li>
- <li className="xiaochikuaican">小吃快餐</li>
- <li className="zizhucan">自助餐</li>
- <li className="jiuba">酒吧</li>
+ {
+ data.slice(0, 10).map((item, i) => {
+ return (
+ <li key={i}>
+ <Link to={item.link} className={item.className}>
+ {item.name}
+ </Link>
+ </li>
+ )
+ })
+ }
  </ul>
  </div>
  <div className="carousel-item">
  <ul>
- <li className="meishi">美食</li>
- <li className="dianying">电影</li>
- <li className="jiudian">酒店</li>
- <li className="xuixianyule">休闲娱乐</li>
- <li className="waimai">外卖</li>
- <li className="huoguo">火锅</li>
- <li className="liren">丽人</li>
- <li className="dujiachuxing">度假出行</li>
- <li className="zuliaoanmo">足疗按摩</li>
- <li className="zhoubianyou">周边游</li>
+ {
+ data.slice(10, 20).map((item, i) => {
+ return (
+ <li key={i}>
+ <Link to={item.link} className={item.className}>
+ {item.name}
+ </Link>
+ </li>
+ )
+ })
+ }
  </ul>
  </div>
  <div className="carousel-item">
  <ul>
- <li className="ribencai">日本菜</li>
- <li className="SPA">SPA</li>
- <li className="jiehun">结婚</li>
- <li className="xuexipeixun">学习培训</li>
- <li className="xican">西餐</li>
- <li className="huochejipiao">火车票</li>
- <li className="shaokao">烧烤</li>
- <li className="jiazhuang">嫁妆</li>
- <li className="chongwu">宠物</li>
- <li className="quanbufenlei">全部分类</li>
+ {
+ data.slice(20, 30).map((item, i) => {
+ return (
+ <li key={i}>
+ <Link to={item.link} className={item.className}>
+ {item.name}
+ </Link>
+ </li>
+ )
+ })
+ }
  </ul>
  </div>
  </ReactSwipe>
@@ -72,8 +80,22 @@ class Category extends PureComponent {
  <li className={this.state.index === 2 ? 'selected' : ''}></li>
  </ul>
  </div>
- )
- }
+ );
+ };
+
+ componentDidMount() {
+ const result = getHomeCategoryData();
+
+ result.then(res => {
+ return res.json();
+ }).then(json => {
+ const data = json;
+
+ this.setState({
+ data: data
+ });
+ });
+ };
 }
 
 export default Category;

src/components/Category/style.scss

@@ -24,20 +24,23 @@
  height: auto;
  display: flex;
  flex-wrap: wrap;
+ li {
+ width: 20%;
+ text-align: center;
+ }
  }
+
  a {
- color: #333;
- }
- li {
- width: 20%;
+ display: block;
+ width: 100%;
  padding-top: 50px;
+ font-size: 14px;
+ color: #666;
  background-repeat: no-repeat;
  background-size: 50px auto;
  background-position: top center;
- text-align: center;
- color: #666;
- font-size: 14px;
  }
+
  .jingdian {
  background-image: url('./images/138012-20161022224203170-1528315005.png');
  }

src/components/CityList/index.js

@@ -1,8 +1,5 @@
 import React, { PureComponent } from 'react';
-
-import { getHotCityListData } from '~fetch/home/home';
-
-
+import { getHotCityListData } from '~fetch/home/home'; // 获取热门城市数据
 import './style.scss';
 
 class CityList extends PureComponent {
@@ -19,17 +16,22 @@ class CityList extends PureComponent {
  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>
+ {
+ this.state.data.length
+ ?
+ <ul className="city-list">
+ {
+ cityList.map((item, i) => {
+ return (
+ <li key={i}>
+ <span onClick={() => { this.handleClick(item.cityName) }}>{item.cityName}</span>
+ </li>
+ );
+ })
+ }
+ </ul>
+ : <div>loading...</div>
+ }
  </div>
  );
  };
@@ -46,7 +48,7 @@ class CityList extends PureComponent {
  this.setState({
  data: data
  });
- })
+ });
  };
 
  handleClick = newCity => {