用户中心

Author: ihoey

app/components/BuyAndStore/index.jsx

@@ -1,21 +1,37 @@
 import React from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 
+import './style.less';
+
 class BuyAndStore extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
     }
 
-
     render() {
-        console.log(this.props);        
         return (
-            <div>12</div>
+            <div className="buy-store-container clear-fix">
+                <div className="item-container float-left">
+                    {
+                        // 是否已经收藏了
+                        this.props.isStore
+                            ? <button className="selected" onClick={this.storeClickHandle.bind(this)}>已收藏</button>
+                            : <button onClick={this.storeClickHandle.bind(this)}>收藏</button>
+                    }
+                </div>
+                <div className="item-container float-right">
+                    <button onClick={this.buyClickHandle.bind(this)}>购买</button>
+                </div>
+            </div>
         );
     }
+    buyClickHandle() {
+        this.props.buyHandle();
+    }
+    storeClickHandle() {
+        this.props.storeHandle();
+    }
 }
 
-// 使用 require.ensure 异步加载，还不支持 ES6 的 export 
-// export default BuyAndStore
-module.exports = BuyAndStore;
+export default BuyAndStore;

app/components/BuyAndStore/style.less

@@ -0,0 +1,21 @@
+.buy-store-container {
+    border-top: 1px solid #f1f1f1;
+    background-color: #fff;
+    padding: 10px 0;
+    .item-container {
+        width: 50%;
+        text-align: center;
+        button {
+            font-size: 16px;
+            width: 100px;
+            background-color: #f1f1f1;
+            color: #666;
+            border: 1px solid #666;
+            padding: 5px 0;
+        }
+        button.selected {
+            color: rgb(233, 32, 61);
+            border: 1px solid rgb(233, 32, 61);
+        }
+    }
+}

app/components/Header/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
+import { hashHistory } from 'react-router';
 
 import './style.less';
 
@@ -20,7 +21,12 @@ class Header extends React.Component {
         );
     }
     clickHandle() {
-        window.history.back();
+        const backRouter = this.props.backRouter;
+        if (backRouter) {
+            hashHistory.push(backRouter);
+        } else {
+            window.history.back();
+        }
     }
 }
 

app/components/OrderList/Item/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+import './style.less';
+
+class Item extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+    }
+    render() {
+        const data = this.props.data;
+        return (
+            <div className="clear-fix order-item-container">
+                <div className="order-item-img float-left">
+                    <img src={data.img} />
+                </div>
+                <div className="order-item-comment float-right">
+                    <button>评价</button>
+                </div>
+                <div className="order-item-content">
+                    <span>商户：{data.title}</span>
+                    <span>数量：{data.count}</span>
+                    <span>价格：￥{data.price}</span>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Item;

app/components/OrderList/Item/style.less

@@ -0,0 +1,35 @@
+.order-item-container {
+    padding: 10px 0;
+    border-bottom: 1px solid #f1f1f1;
+    .order-item-img {
+        width: 120px;
+        height: 90px;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .order-item-comment {
+        width: 100px;
+        text-align: right;
+        button {
+            width: 80px;
+            text-align: center;
+            background-color: rgb(233, 32, 61);
+            color: #fff;
+            padding: 5px 0;
+            margin-top: 25px;
+            border: 0;
+            font-size: 16px;
+        }
+    }
+    .order-item-content {
+        margin: 0 130px;
+        span {
+            color: #666;
+            display: block;
+            text-align: left;
+            line-height: 1.5;
+        }
+    }
+}

app/components/OrderList/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+import Item from './Item';
+
+class OrderList extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+    }
+
+    render() {
+        const data = this.props.data;
+        return (
+            <div>
+                {
+                    data.map((e, i) => {
+                        return <Item key={i} data={e} />;
+                    })
+                }
+            </div>
+        );
+    }
+}
+
+module.exports = OrderList;

app/components/UserInfo/index.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+import './style.less';
+
+class UserInfo extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+    }
+
+    render() {
+        return (
+            <div className="userinfo-container">
+                <p>
+                    <i className="icon-user"></i>
+                    &nbsp;
+                    <span>{this.props.username}</span>
+                </p>
+                <p>
+                    <i className="icon-map-marker"></i>
+                    &nbsp;
+                    <span>{this.props.city}</span>
+                </p>
+            </div>
+        );
+    }
+}
+
+module.exports = UserInfo;

app/components/UserInfo/style.less

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

app/containers/Detail/subpage/buy.jsx

@@ -49,20 +49,34 @@ class Buy extends React.Component {
         hashHistory.push('/User/');
     }
 
-    // 收藏时间
+    // 收藏事件
     storeHandle() {
         const loginFlag = this.loginCheck();
         if (!loginFlag) {
             return;
         }
 
+        const id = this.props.id;
+        const storeActions = this.props.storeActions;
+        if (this.state.isStore) {
+            //已经收藏,需要取消收藏
+            storeActions.rm({ id: id });
+        } else {
+            //没有收藏,收藏
+            storeActions.add({ id: id });
+        }
+
+        //修改状态
+        this.setState({
+            isStore: !this.state.isStore
+        });
     }
 
     // 验证登录
     loginCheck() {
         const id = this.props.id;
         const userinfo = this.props.userinfo;
-        if (userinfo.username) {
+        if (!userinfo.username) {
             // 跳转到登陆页
             hashHistory.push(`/Login/${encodeURIComponent(`/detail/${id}`)}`);
             return false;

app/containers/User/index.jsx

@@ -1,13 +1,48 @@
-import React, { Component } from 'react';
+import React from 'react';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import { connect } from 'react-redux';
+import { hashHistory } from 'react-router';
+import Header from '../../components/Header';
+import UserInfo from '../../components/UserInfo';
+import OrderList from './subpage/OrderList';
+
+class User extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
+    }
 
-class User extends Component {
     render() {
+        const userinfo = this.props.userinfo;
         return (
             <div>
-                user
+                <Header title="用户中心" backRouter="/"></Header>
+                <UserInfo username={userinfo.username} city={userinfo.cityName} />
+                <OrderList username={userinfo.username} />
             </div>
         );
     }
+    componentDidMount() {
+        // 如果未登录，跳转到登录页面
+        if (!this.props.userinfo.username) {
+            hashHistory.push('/Login');
+        }
+    }
 }
 
-export default User;
+// -------------------redux react 绑定--------------------
+
+function mapStateToProps(state) {
+    return {
+        userinfo: state.userinfo
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+    };
+}
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(User);