新增了提交评论post请求,完成了用户主页-提交评论功能

HeeBooo · Feb 4, 2018 · 0f9bb2e · 0f9bb2e
1 parent 3a8a4c9
commit 0f9bb2e
Show file tree

Hide file tree

Showing 8 changed files with 196 additions and 55 deletions.
diff --git a/mock/server.js b/mock/server.js
@@ -86,17 +86,22 @@ router.get('/api/detail/comment/:page/:id', (ctx, next) => {
     ctx.body = detailCommentData;
 });
 
-// router.post('/api/post', koaBody, (ctx, next) => {
-//     console.log(ctx.request.body);
-//     ctx.body = JSON.stringify(ctx.request.body)
-// });
-
 // 用户主页-订单详情 
 const orderListData = require('./orderList/orderList');
 router.get('/api/orderList/:username', (ctx, next) => {
     ctx.body = orderListData;
 });
 
+// 用户主页-提交评价
+router.post('/api/submitComment', (ctx, next) => {
+    console.log('提交评论');
+    // 获取参数
+    ctx.body = {
+        errno: 0,
+        msg: 'ok'
+    }
+});
+
 app.use(router.routes())
     .use(router.allowedMethods());
 

diff --git a/src/actions/store.js b/src/actions/store.js
@@ -1,22 +1,16 @@
 import * as actionTypes from '~constants/store';
 
-export function update(data) {
-    return {
-        type: actionTypes.STORE_UPDATE,
-        data
-    };
-};
+export const update = data => ({
+    type: actionTypes.STORE_UPDATE,
+    data
+});
 
-export function add(item) {
-    return {
-        type: actionTypes.STORE_ADD,
-        data: item
-    };
-};
+export const add = item => ({
+    type: actionTypes.STORE_ADD,
+    data: item
+});
 
-export function rm(item) {
-    return {
-        type: actionTypes.STORE_RM,
-        data: item
-    };
-};
+export const rm = item => ({
+    type: actionTypes.STORE_RM,
+    data: item
+});
diff --git a/src/actions/userinfo.js b/src/actions/userinfo.js
@@ -1,8 +1,6 @@
 import * as actionTypes from '~constants/userinfo';
 
-export function update(data) {
-    return {
-        type: actionTypes.USERINFO_UPDATE,
-        data
-    }
-};
+export const update = data => ({
+    type: actionTypes.USERINFO_UPDATE,
+    data
+});
diff --git a/src/components/OrderList/Item/index.js b/src/components/OrderList/Item/index.js
@@ -1,26 +1,110 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { getImage } from '~static/js/common';
 import './style.scss';
 
 // 无状态组件可以直接使用函数形式创建
-const Item = props => {
-    const data = props.data;
-
-    return (
-        <div className="order-list-item">
-            <div className="item-img">
-                <img src={getImage(data.img)} alt="{data.title}" />
-            </div>
-            <div className="item-content">
-                <span>商户: {data.title}</span>
-                <span>数量: {data.count}</span>
-                <span>价格: ￥{data.price}</span>
-            </div>
-            <div className="item-comment">
-                <button>评价</button>
+class Item extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            commentState: 1, // 0未评价,1评价中,2已经评价
+            comment: '' // 评论的值
+        }
+    };
+    render() {
+        const data = this.props.data;
+        return (
+            <div className="order-list-item">
+                <div className="item-img">
+                    <img src={getImage(data.img)} alt="{data.title}" />
+                </div>
+                <div className="item-content">
+                    <span>商户: {data.title}</span>
+                    <span>数量: {data.count}</span>
+                    <span>价格: ￥{data.price}</span>
+                </div>
+                <div className="item-comment">
+                    {
+                        this.state.commentState === 0
+                            ? <button className="btn" onClick={this.showComment}>评价</button>
+                            :
+                            this.state.commentState === 1
+                                // 评价中
+                                ? ''
+                                // 已经评价
+                                : <button className="btn unseleted-btn">已评价</button>
+                    }
+                </div>
+                {
+                    this.state.commentState === 1
+                        ?
+                        <div className="comment-text-container">
+                            <textarea
+                                placeholder="请输入评价"
+                                onChange={this.textareaChange}
+                                value={this.state.comment}
+                            >
+                            </textarea>
+                            <button className="btn" onClick={this.submitHandle}>提交</button>
+                            <button className="btn unseleted-btn" onClick={this.hideComment}>取消</button>
+                        </div>
+                        : ''
+                }
             </div>
-        </div>
-    );
+        );
+    };
+
+    componentDidMount() {
+        // 更新评价状态
+        this.setState({
+            commentState: this.props.data.commentState
+        });
+    };
+
+    // 将状态改为1，显示评价框
+    showComment = () => {
+        this.setState({
+            commentState: 1
+        });
+    };
+
+    // 将状态改为0，隐藏评价框，清空值
+    hideComment = () => {
+        this.setState({
+            commentState: 0,
+            comment: ''
+        });
+    };
+
+    // 处理提交
+    submitHandle = () => {
+        const id = this.props.data.id;
+        const submitComment = this.props.submitComment;
+        const comment = this.state.comment;
+
+         // 如果输入的值是空格则不提交
+         if (!comment.trim()) {
+            return
+         }
+
+        // 提交评论内容
+        submitComment(id, comment, this.commentOk);
+    };
+
+    // 上传后清空值，将状态改为3已评价 
+    commentOk = () => {
+        this.setState({
+            commentState: 2,
+            comment: ''
+        });
+    };
+
+    // 约束textarea
+    textareaChange = e => {
+        this.setState({
+            comment: e.target.value
+        });
+    };
 };
 
 export default Item;
diff --git a/src/components/OrderList/Item/style.scss b/src/components/OrderList/Item/style.scss
@@ -2,6 +2,7 @@
 .order-list-item {
     display: flex;
     justify-content: flex-start;
+    flex-wrap: wrap;
     width: 100%;
     padding: 10px 0;
     border-bottom: 1px solid #f1f1f1;
@@ -30,7 +31,7 @@
         width: 100px;
         text-align: right;
         margin-left: auto;
-        button {
+        .btn {
             width: 80px;
             text-align: center;
             background-color: rgb(233, 32, 61);
@@ -39,7 +40,34 @@
             margin-top: 25px;
             border: 0;
             font-size: 16px;
+            &.unseleted-btn {
+                background-color: #999;
+            }
         }
     }
 
+    .comment-text-container {
+        width: 100%;
+        margin-top: 10px;
+        textarea {
+            width: 100%;
+            height: 80px;
+            padding: 5px;
+            border: 1px solid #f1f1f1;
+            resize: none;
+        }
+        .btn {
+            width: 80px;
+            margin-right: 4px;
+            padding: 5px 0;
+            text-align: center;
+            background-color: rgb(233, 32, 61);
+            color: #fff;
+            border: 0;
+            font-size: 16px;
+            &.unseleted-btn {
+                background-color: #999;
+            }
+        }
+    }
 }
diff --git a/src/components/OrderList/index.js b/src/components/OrderList/index.js
@@ -5,12 +5,11 @@ import Item from './Item';
 const OrderListComponent = props => {
     const data = props.data;
     return (
-        <div className="">
+        <div>
             {
                 data.map((item, index) => {
-                    console.log(item)
                     return (
-                        <Item key={index} data={item} />
+                        <Item key={index} data={item} submitComment={props.submitComment} />
                     );
                 })
             }

diff --git a/src/containers/User/subpage/OrderList.js b/src/containers/User/subpage/OrderList.js
@@ -1,14 +1,15 @@
 import React, { PureComponent } from 'react';
-import { getOrderListData } from '~fetch/user/orderList';
 import OrderListComponent from '~components/OrderList';
+import { getOrderListData, postComment } from '~fetch/user/orderList';
+
 import './style.scss';
 
 class OrderList extends PureComponent {
     constructor(props) {
         super(props);
         this.state = {
             data: []
-        }
+        };
     };
 
     render() {
@@ -17,7 +18,7 @@ class OrderList extends PureComponent {
                 <h2>您的订单</h2>
                 {
                     this.state.data.length
-                    ? <OrderListComponent data={this.state.data} />
+                    ? <OrderListComponent data={this.state.data} submitComment={this.submitComment} />
                     : <div>暂无订单</div>
                 }
             </div>
@@ -33,6 +34,7 @@ class OrderList extends PureComponent {
 
     };
 
+    // 获取列表数据
     loadOrderList = username => {
         const result = getOrderListData(username);
 
@@ -49,6 +51,24 @@ class OrderList extends PureComponent {
             console.log(error)
         })
     };
+
+    // 提交评价
+    submitComment = (id, comment, callback) => {
+        // 上传值
+        const result = postComment(id, comment);
+
+        result.then(res => {
+            if(res.status === 200) {
+                return res.json();
+            }
+        }).then(json => {
+            if (json.errno === 0) {
+                callback()
+            }
+        }).catch(error => {
+            console.log(error)
+        })
+    };
 
 };
 

diff --git a/src/fetch/user/orderList.js b/src/fetch/user/orderList.js
@@ -1,7 +1,20 @@
 import get from '../get';
+import post from '../post';
 
-export function getOrderListData(username) {
+
+// 获取订单列表
+export const getOrderListData = username => {
     const result = get(`/api/orderList/${username}`);
 
+    return result;
+};
+
+// 提交评价
+export const postComment = (id, comment) => {
+    const result = post('/api/submitComment', {
+        id: id,
+        comment: comment
+    });
+
     return result;
 };