diff --git a/mock/home/homeCategory.js b/mock/home/homeCategory.js new file mode 100644 index 0000000..f5e13bf --- /dev/null +++ b/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' + }, +]; \ No newline at end of file diff --git a/mock/server.js b/mock/server.js index f1e1270..7d4fb71 100644 --- a/mock/server.js +++ b/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'); diff --git a/src/components/Category/index.js b/src/components/Category/index.js index 01e7f10..7f147ea 100644 --- a/src/components/Category/index.js +++ b/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 (
    -
  • 景点
    • -
  • KTV
    • -
  • 购物
    • -
  • 生活服务
    • -
  • 健身运动
    • -
  • 美发
    • -
  • 亲子
    • -
  • 小吃快餐
    • -
  • 自助餐
    • -
  • 酒吧
    • + { + data.slice(0, 10).map((item, i) => { + return ( +
  • + + {item.name} + +
    • + ) + }) + }
    -
  • 美食
    • -
  • 电影
    • -
  • 酒店
    • -
  • 休闲娱乐
    • -
  • 外卖
    • -
  • 火锅
    • -
  • 丽人
    • -
  • 度假出行
    • -
  • 足疗按摩
    • -
  • 周边游
    • + { + data.slice(10, 20).map((item, i) => { + return ( +
  • + + {item.name} + +
    • + ) + }) + }
    -
  • 日本菜
    • -
  • SPA
    • -
  • 结婚
    • -
  • 学习培训
    • -
  • 西餐
    • -
  • 火车票
    • -
  • 烧烤
    • -
  • 嫁妆
    • -
  • 宠物
    • -
  • 全部分类
    • + { + data.slice(20, 30).map((item, i) => { + return ( +
  • + + {item.name} + +
    • + ) + }) + }
@@ -72,8 +80,22 @@ class Category extends PureComponent {
  • - ) - } + ); + }; + + componentDidMount() { + const result = getHomeCategoryData(); + + result.then(res => { + return res.json(); + }).then(json => { + const data = json; + + this.setState({ + data: data + }); + }); + }; } export default Category; diff --git a/src/components/Category/style.scss b/src/components/Category/style.scss index f036d78..da869eb 100644 --- a/src/components/Category/style.scss +++ b/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'); } diff --git a/src/components/CityList/index.js b/src/components/CityList/index.js index 32e5037..37037e6 100644 --- a/src/components/CityList/index.js +++ b/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 (

    热门城市

    - + { + this.state.data.length + ? + + :
    loading...
    + }
    ); }; @@ -46,7 +48,7 @@ class CityList extends PureComponent { this.setState({ data: data }); - }) + }); }; handleClick = newCity => { diff --git a/src/components/CurrentCity/index.js b/src/components/CurrentCity/index.js index e793ca6..81b1cae 100644 --- a/src/components/CurrentCity/index.js +++ b/src/components/CurrentCity/index.js @@ -1,15 +1,13 @@ -import React, { PureComponent } from 'react'; - +import React from 'react'; import './style.scss'; -class CurrentCity extends PureComponent { - render() { - return ( -
    -

    {this.props.cityName}

    -
    - ) - }; +// 无状态组件可以直接使用函数形式创建 +const CurrentCity = props => { + return ( +
    +

    {props.cityName}

    +
    + ); }; export default CurrentCity; diff --git a/src/components/Header/index.js b/src/components/Header/index.js index ccbe39f..995ef3f 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -1,23 +1,21 @@ -import React, { PureComponent } from 'react'; - +import React from 'react'; import './style.scss'; -class Header extends PureComponent { - render() { - return ( -
    - - - -

    {this.props.title}

    -
    - ) - }; +// 无状态组件可以直接使用函数形式创建 +const Header = props => { + return ( +
    + + + +

    {props.title}

    +
    + ); +}; - clickHandle = () => { - // 返回上一页 - window.history.back(); - } +const clickHandle = () => { + // 返回上一页 + window.history.back(); }; export default Header; diff --git a/src/components/HomeAd/index.js b/src/components/HomeAd/index.js index 707c8f3..9d88e42 100644 --- a/src/components/HomeAd/index.js +++ b/src/components/HomeAd/index.js @@ -1,7 +1,5 @@ import React from 'react'; - import { getImage } from '~static/js/common'; - import './style.scss'; // 无状态组件可以直接使用函数形式创建 @@ -25,9 +23,8 @@ const HomeAd = props => { } - ) -} - + ); +}; export default HomeAd; diff --git a/src/components/Homeheader/index.js b/src/components/Homeheader/index.js index 1ddedcf..065fc56 100644 --- a/src/components/Homeheader/index.js +++ b/src/components/Homeheader/index.js @@ -21,7 +21,7 @@ const Homeheader = props => { - ) -} + ); +}; export default Homeheader; diff --git a/src/components/List/Item/index.js b/src/components/List/Item/index.js index a69c888..3efc651 100644 --- a/src/components/List/Item/index.js +++ b/src/components/List/Item/index.js @@ -1,7 +1,5 @@ import React from 'react'; - import { getImage } from '~static/js/common'; - import './style.scss'; // 无状态组件可以直接使用函数形式创建 @@ -26,6 +24,6 @@ const Item = props => { ); -} +}; export default Item; diff --git a/src/components/List/index.js b/src/components/List/index.js index 1e0b454..43701d8 100644 --- a/src/components/List/index.js +++ b/src/components/List/index.js @@ -1,6 +1,5 @@ import React from 'react'; import Item from './Item'; - import './style.scss'; // 无状态组件可以直接使用函数形式创建 @@ -16,7 +15,7 @@ const List = props => { }) } - ) -} + ); +}; export default List; \ No newline at end of file diff --git a/src/components/LoadMore/index.js b/src/components/LoadMore/index.js index 78d41ac..2cd8b7e 100644 --- a/src/components/LoadMore/index.js +++ b/src/components/LoadMore/index.js @@ -1,5 +1,4 @@ import React, { PureComponent } from 'react'; - import './style.scss'; class LoadMore extends PureComponent { @@ -12,7 +11,7 @@ class LoadMore extends PureComponent { : 加载更多 } - ) + ); }; componentDidMount() { @@ -50,8 +49,6 @@ class LoadMore extends PureComponent { // 执行传递过来的loadMoreData函数 this.props.loadMoreFn(); }; -} - - +}; export default LoadMore; \ No newline at end of file diff --git a/src/containers/City/index.js b/src/containers/City/index.js index c576942..5e50525 100644 --- a/src/containers/City/index.js +++ b/src/containers/City/index.js @@ -23,8 +23,6 @@ class City extends PureComponent { changeCity = newCity => { // 将新选择的城市设置为当前城市 - - console.log(newCity) if (newCity == null) { return; }; diff --git a/src/containers/Home/subpage/Ad.js b/src/containers/Home/subpage/Ad.js index 8f07290..43633a6 100644 --- a/src/containers/Home/subpage/Ad.js +++ b/src/containers/Home/subpage/Ad.js @@ -9,7 +9,7 @@ class Ad extends PureComponent { this.state = { data: [] } - } + }; render() { return ( @@ -21,7 +21,7 @@ class Ad extends PureComponent { } ) - } + }; componentDidMount() { const result = getAdData(); @@ -29,16 +29,15 @@ class Ad extends PureComponent { result.then(res => { return res.json(); }).then(json => { - // console.log(json); const data = json; + if (data.length) { this.setState({ data: data }) - } - }) - } - -} + }; + }); + }; +}; export default Ad; diff --git a/src/fetch/home/home.js b/src/fetch/home/home.js index 3a524bc..4e332bd 100644 --- a/src/fetch/home/home.js +++ b/src/fetch/home/home.js @@ -1,19 +1,31 @@ import get from '../get'; +// 轮播数据 +export function getHomeCategoryData() { + const result = get('/api/homeCategory'); + + return result; +}; + +// 超值特惠 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; -} +}; + + diff --git a/src/router/routeMap.js b/src/router/routeMap.js index 02728d3..3bb08fe 100644 --- a/src/router/routeMap.js +++ b/src/router/routeMap.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; - import Home from '~containers/Home'; import City from '~containers/City'; import User from '~containers/User'; @@ -16,13 +15,13 @@ class RouteMap extends Component { - + - ) - } -} + ); + }; +}; export default RouteMap; \ No newline at end of file