Header组件修改完成，新增接口用户-订单列表 orderList

mock/orderList/orderList.js

@@ -0,0 +1,26 @@
+module.exports = [
+ {
+ id: Date.now(),
+ img: 'http:https://images2015.cnblogs.com/blog/138012/201610/138012-20161016201638030-473660627.png',
+ title: '汉堡大王',
+ count: 3,
+ price: '167',
+ commentState: 0
+ },
+ {
+ id: Date.now(),
+ img: 'http:https://images2015.cnblogs.com/blog/138012/201610/138012-20161016201708124-1116595594.png',
+ title: '麻辣香锅',
+ count: 1,
+ price: '188',
+ commentState: 0
+ },
+ {
+ id: Date.now(),
+ img: 'http:https://images2015.cnblogs.com/blog/138012/201610/138012-20161016201645858-1342445625.png',
+ title: '好吃自出餐',
+ count: 2,
+ price: '110',
+ commentState: 2
+ }
+]

mock/server.js

@@ -91,6 +91,12 @@ router.get('/api/detail/comment/:page/:id', (ctx, next) => {
 // ctx.body = JSON.stringify(ctx.request.body)
 // });
 
+// 用户主页-订单详情 
+const orderListData = require('./orderList/orderList');
+router.get('/api/orderList/:username', (ctx, next) => {
+ ctx.body = orderListData;
+});
+
 app.use(router.routes())
  .use(router.allowedMethods());
 

src/components/Header/index.js

@@ -1,27 +1,29 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import './style.scss';
 
-// 无状态组件可以直接使用函数形式创建
-const Header = props => {
- return (
- <div className="common-header">
- <span className="back-icon" onClick={clickHandle}>
- <i className="icon-chevron-left"></i>
- </span>
- <h1>{props.title}</h1>
- </div>
- );
-};
-
-const clickHandle = () => {
- // 返回上一页
- const backRouter = this.props.backRouter;
+class Header extends PureComponent {
+ render () {
+ return (
+ <div className="common-header">
+ <span className="back-icon" onClick={this.clickHandle}>
+ <i className="icon-chevron-left"></i>
+ </span>
+ <h1>{this.props.title}</h1>
+ </div>
+ );
+ }; 
+ clickHandle = () => {
+ const toHome = this.props.toHome;
+
+ if (toHome) {
+ toHome();
+ } else {
+ // 返回上一页
+ window.history.back();
+ }
+ };
 
- if (backRouter === undefined) {
- this.props.toBack(backRouter);
- } else {
- window.history.back(backRouter);
- }
 };
 
+
 export default Header;

src/components/UserInfo/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import './style.scss';
+
+// 无状态组件可以直接使用函数形式创建
+const UserInfo = props => {
+ const { cityName, username } = props.userinfo;
+
+ return (
+ <div className="userinfo-container">
+ <p>
+ <i className="icon-user"></i>
+ <span>{username}</span>
+ </p>
+ <p>
+ <i className="icon-map-marker"></i>
+ <span>{cityName}</span>
+ </p>
+ </div>
+ )
+};
+
+export default UserInfo;

src/components/UserInfo/style.scss

@@ -0,0 +1,11 @@
+.userinfo-container {
+ background-color: #fff;
+ padding: 10px;
+ p {
+ line-height: 1.5;
+ color: #666;
+ }
+ i {
+ margin-right: 5px;
+ }
+}

src/containers/Detail/subpage/Buy.js

@@ -1,8 +1,5 @@
 import React, { PureComponent } from 'react';
 import BuyAndStore from '~components/BuyAndStore';
-// import { bindActionCreators } from 'redux';
-
-// import { getInforData } from '~fetch/detail/detail';
 
 class Buy extends PureComponent {
  constructor(props) {

src/containers/User/index.js

@@ -2,13 +2,17 @@ import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 
 import Header from '~components/Header';
+import UserInfo from '~components/UserInfo';
+import OrderList from './subpage/OrderList';
 
 class User extends PureComponent {
  render() {
+ const userinfo = this.props.userinfo;
  return (
  <div>
- <Header title="用户主页" backRouter="/home" />
- <Header userinfo={this.props.userinfo} />
+ <Header title="用户主页" toHome={this.toHome} />
+ <UserInfo userinfo={userinfo} />
+ <OrderList username={userinfo.username} />
  </div>
  )
  };
@@ -19,6 +23,11 @@ class User extends PureComponent {
  this.props.history.push('/Login');
  }
  };
+
+ // 前往home页面
+ toHome = () => {
+ this.props.history.push('/');
+ };
 };
 
 // ==========================redux react 绑定==========================

src/containers/User/subpage/OrderList.js

@@ -0,0 +1,44 @@
+import React, { PureComponent } from 'react';
+
+import { getOrderListData } from '~fetch/user/orderList';
+
+class OrderList extends PureComponent {
+ constructor(props) {
+ super(props);
+ this.state = {
+ data: []
+ }
+ };
+
+ render() {
+ return (
+ <div>
+ 13
+ </div>
+ )
+ };
+
+ componentDidMount() {
+ const username = this.props.username;
+
+ const result = getOrderListData(username);
+
+ result.then(res => {
+ if (res.status === 200) {
+ return res.json();
+ }
+ }).then(json => {
+ const data = json;
+ this.setState({
+ data: data
+ });
+ }).catch(error => {
+ console.log(error)
+ })
+ };
+
+
+};
+
+export default OrderList;
+

src/fetch/user/orderList.js

@@ -0,0 +1,7 @@
+import get from '../get';
+
+export function getOrderListData(username) {
+ const result = get(`/api/orderList/${username}`);
+
+ return result;
+};