Merge branch 'master' of git.proginn.com:zaixianjiaoyu/sourcecode

front/project/www/routes/page/cart/index.js

@@ -2,7 +2,7 @@ export default {
   path: '/cart',
   key: 'cart',
   title: '购物车',
-  needLogin: true,
+  needLogin: false,
   tab: 'main',
   component() {
     return import('./page');

front/project/www/routes/page/cart/index.less

@@ -105,4 +105,32 @@
       padding: 20px 0;
     }
   }
+
+  .gift-item {
+    background: #FAFAFAFF;
+    margin-bottom: 30px;
+
+    .gift-item-info {
+      width: 980px;
+      margin-left: 100px;
+      margin-right: 60px;
+      height: 58px;
+      line-height: 58px;
+      position: relative;
+
+      .gift {
+        position: absolute;
+        left: -80px;
+        top: 20px;
+      }
+    }
+
+    .gift-item-detail {
+      width: 980px;
+      margin-left: 100px;
+      margin-right: 60px;
+      border-top: 1px solid #eee;
+      padding: 20px 0;
+    }
+  }
 }

front/project/www/routes/page/cart/page.js

@@ -1,23 +1,12 @@
 import React, { Component } from 'react';
 import './index.less';
 import { Icon, Radio } from 'antd';
+import Assets from '@src/components/Assets';
 import Page from '@src/containers/Page';
 import CheckboxItem from '../../../components/CheckboxItem';
 import Button from '../../../components/Button';
-import { Order } from '../../../stores/order';
 
 export default class extends Page {
-  init() {
-
-  }
-
-  initData() {
-    Order.allCheckout()
-      .then(order => {
-        this.setState({ order });
-      });
-  }
-
   renderView() {
     const { _list = [{}, {}, {}] } = this.state;
     return (
@@ -33,6 +22,11 @@ export default class extends Page {
             return <OrderItem data={item} />;
           })}
         </div>
+        <div className="gift-list content">
+          {_list.map(item => {
+            return <GiftItem data={item} />;
+          })}
+        </div>
         <div className="footer">
           <div className="content">
             <div className="d-i-b m-t-1 m-r-2">
@@ -70,7 +64,68 @@ export default class extends Page {
   }
 }
 
+class GiftItem extends Component {
+  render() {
+    return (
+      <div className="gift-item">
+        {this.renderInfo()}
+        {this.renderDetail()}
+      </div>
+    );
+  }
+
+  renderInfo() {
+    return (
+      <div className="gift-item-info">
+        <Assets name="gift2" className="gift" width={20} height={20} />
+        <div style={{ width: 360 }} className="d-i-b t-1 t-s-16">
+          OG 20 套餐
+        </div>
+        <div style={{ width: 400 }} className="d-i-b t-8 t-s-12">
+          实付金额满20000元赠送
+        </div>
+      </div>
+    );
+  }
+
+  renderDetail() {
+    return (
+      <div className="gift-item-detail l-h-20">
+        <div className="select">
+          <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
+            <span className="d-i-b f-w-b m-r-5">请选择</span>
+          </div>
+          <div className="d-i-b t-1 t-s-12">可至「个人中心-课程」预约辅导时间。</div>
+        </div>
+        <div className="select-list m-b-5 l-h-16">
+          <div>
+            <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
+              <span className="d-i-b m-r-5">
+                <Radio className="m-r-5" /> OG 20 语法 SC
+              </span>
+            </div>
+            <div className="d-i-b t-8 t-s-12">适合未参加过实战的考生</div>
+          </div>
+          <div>
+            <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
+              <span className="d-i-b m-r-5">
+                <Radio className="m-r-5" /> OG 20 语法 SC
+              </span>
+            </div>
+            <div className="d-i-b t-8 t-s-12">适合未参加过实战的考生</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
 class OrderItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { open: false };
+  }
+
   render() {
     return (
       <div className="order-item">
@@ -103,22 +158,33 @@ class OrderItem extends Component {
   }
 
   renderDetail() {
+    const { open } = this.state;
     return (
       <div className="order-item-detail l-h-20">
         <div className="contain">
           <div style={{ width: 880 }} className="d-i-b t-1 t-s-12">
             <span className="d-i-b f-w-b m-r-5">
               包含
-              <Icon className="t-10 c-p" type="caret-up" />
-              <Icon className="t-10 c-p" type="caret-down" />
+              <Icon
+                hidden={!open}
+                className="t-10 c-p"
+                type="caret-up"
+                onClick={() => this.setState({ open: !open })}
+              />
+              <Icon
+                hidden={open}
+                className="t-10 c-p"
+                type="caret-down"
+                onClick={() => this.setState({ open: !open })}
+              />
             </span>
-            <span style={{ width: 300 }} className="d-i-b nowrap">
+            <span hidden={open} style={{ width: 300 }} className="d-i-b nowrap">
               OG 20 语法 SC +OG 20 语法 SC +OG 20 语法 SC +OG 20 语法 SC +
             </span>
           </div>
           <div className="d-i-b t-1 t-s-12 t-d-l-t"> ¥ 123022</div>
         </div>
-        <div className="contain-list m-b-5 l-h-16">
+        <div hidden={!open} className="contain-list m-b-5 l-h-16">
           <div>
             <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
               <span className="d-i-b m-r-5">OG 20 语法 SC</span>
@@ -156,30 +222,6 @@ class OrderItem extends Component {
             </span>
           </div>
         </div>
-        <div className="select">
-          <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
-            <span className="d-i-b f-w-b m-r-5">请选择</span>
-          </div>
-          <div className="d-i-b t-1 t-s-12">可至「个人中心-课程」预约辅导时间。</div>
-        </div>
-        <div className="select-list m-b-5 l-h-16">
-          <div>
-            <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
-              <span className="d-i-b m-r-5">
-                <Radio className="m-r-5" /> OG 20 语法 SC
-              </span>
-            </div>
-            <div className="d-i-b t-8 t-s-12">适合未参加过实战的考生</div>
-          </div>
-          <div>
-            <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
-              <span className="d-i-b m-r-5">
-                <Radio className="m-r-5" /> OG 20 语法 SC
-              </span>
-            </div>
-            <div className="d-i-b t-8 t-s-12">适合未参加过实战的考生</div>
-          </div>
-        </div>
       </div>
     );
   }

front/project/www/routes/page/index.js

@@ -1,7 +1,8 @@
 import home from './home';
 import login from './login';
 import order from './order';
+import cart from './cart';
 import demo from './demo';
 import contract from './contract';
 
-export default [home, login, order, demo, contract];
+export default [home, login, order, cart, demo, contract];

front/project/www/routes/page/order/index.less

@@ -0,0 +1,68 @@
+@charset "utf-8";
+
+#order {
+  background: #fff;
+  height: 100%;
+  padding-bottom: 100px;
+  overflow: hidden;
+  overflow-y: auto;
+
+  .content {
+    width: 1140px !important;
+  }
+
+  .order-item {
+    background: #FAFAFAFF;
+    margin-bottom: 20px;
+
+    .order-item-info {
+      margin-left: 20px;
+      margin-right: 20px;
+      height: 58px;
+      line-height: 58px;
+      position: relative;
+    }
+
+    .order-item-detail {
+      margin-left: 20px;
+      margin-right: 20px;
+      border-top: 1px solid #eee;
+      padding: 20px 0;
+    }
+  }
+
+  .gift-list {
+    border-top: 1px solid #eee;
+  }
+
+  .gift-item {
+    padding: 20px 0;
+    line-height: 20px;
+    border-bottom: 1px solid #eee;
+
+    .assets {
+      vertical-align: top;
+    }
+  }
+
+  .block {
+    padding-top: 30px;
+
+    .title {
+      padding: 20px 0;
+      line-height: 20px;
+      border-bottom: 1px solid #eee;
+    }
+
+    .item {
+      padding: 20px 0;
+      line-height: 20px;
+      border-bottom: 1px solid #eee;
+
+      span {
+        margin-right: 40px;
+        display: inline-block;
+      }
+    }
+  }
+}

front/project/www/routes/page/order/page.js

@@ -0,0 +1,179 @@
+import React, { Component } from 'react';
+import './index.less';
+import { Icon } from 'antd';
+import Assets from '@src/components/Assets';
+import Page from '@src/containers/Page';
+
+export default class extends Page {
+  renderView() {
+    const { _list = [{}, {}, {}] } = this.state;
+    return (
+      <div style={{ paddingTop: 40 }}>
+        <div className="content">
+          <div className="t-1 m-b-2 f-w-b t-s-24">订单详情</div>
+        </div>
+        <div className="content">
+          <div className="m-b-1 t-8 m-b-2">订单编号 34310431-0514-05265</div>
+        </div>
+        <div className="list content">
+          {_list.map(item => {
+            return <OrderItem data={item} />;
+          })}
+        </div>
+        <div className="gift-list content">
+          {_list.map(item => {
+            return <GiftItem data={item} />;
+          })}
+        </div>
+        <div className="content block">
+          <div className="t-1 t-s-18 f-w-b title">订单金额</div>
+          <div className="t-2 t-s-12 item">
+            <span>应付金额</span>
+            <span>¥ 21200.0</span>
+          </div>
+          <div className="t-2 t-s-12 item">
+            <span>优惠金额</span>
+            <span>¥ 21200.0</span>
+          </div>
+          <div className="t-2 t-s-12 item">
+            <span>实付金额</span>
+            <span>¥ 21200.0</span>
+          </div>
+        </div>
+        <div className="content block">
+          <div className="t-1 t-s-18 f-w-b title">支付信息</div>
+          <div className="t-2 t-s-12 item">
+            <span>支付方式</span>
+            <span>
+              <Assets name="alipay" />
+              {/* alipay wechatpay bank */}
+            </span>
+          </div>
+          <div className="t-2 t-s-12 item">
+            <span>付款时间</span>
+            <span>2019-03-23 10:00:02</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+class GiftItem extends Component {
+  render() {
+    return (
+      <div className="gift-item">
+        <div className="d-i-b t-2 t-s-12 m-l-2">
+          <Assets className="m-r-5" width={20} height={20} name="gift2" />
+          16小时极速问答权限
+        </div>
+        <div style={{ marginRight: 80 }} className="d-i-b t-2 t-s-12 f-r">
+          实付金额满20000元赠送
+        </div>
+      </div>
+    );
+  }
+}
+
+class OrderItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { open: false };
+  }
+
+  render() {
+    return (
+      <div className="order-item">
+        {this.renderInfo()}
+        {this.renderDetail()}
+      </div>
+    );
+  }
+
+  renderInfo() {
+    return (
+      <div className="order-item-info">
+        <div style={{ width: 360 }} className="d-i-b t-1 t-s-16">
+          OG 20 套餐
+        </div>
+        <div style={{ width: 530 }} className="d-i-b t-8 t-s-12">
+          实付金额满20000元赠送
+        </div>
+        <div style={{ width: 120 }} className="d-i-b t-s-12 p-r">
+          <span className="t-8 m-r-2">数量</span>
+          <span className="t-1">1</span>
+        </div>
+        <div className="d-i-b t-7 t-s-16"> ¥ 15000</div>
+      </div>
+    );
+  }
+
+  renderDetail() {
+    const { open } = this.state;
+    return (
+      <div className="order-item-detail l-h-20">
+        <div className="contain">
+          <div style={{ width: 1010 }} className="d-i-b t-1 t-s-12">
+            <span className="d-i-b f-w-b m-r-5">
+              包含
+              <Icon
+                hidden={!open}
+                className="t-10 c-p"
+                type="caret-up"
+                onClick={() => this.setState({ open: !open })}
+              />
+              <Icon
+                hidden={open}
+                className="t-10 c-p"
+                type="caret-down"
+                onClick={() => this.setState({ open: !open })}
+              />
+            </span>
+            <span hidden={open} style={{ width: 300 }} className="d-i-b nowrap">
+              OG 20 语法 SC +OG 20 语法 SC +OG 20 语法 SC +OG 20 语法 SC +
+            </span>
+          </div>
+          <div className="d-i-b t-1 t-s-12 t-d-l-t"> ¥ 123022</div>
+        </div>
+        <div hidden={!open} className="contain-list m-b-5 l-h-16">
+          <div>
+            <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
+              <span className="d-i-b m-r-5">OG 20 语法 SC</span>
+            </div>
+            <div className="d-i-b t-8 t-s-12">
+              <span className="m-r-2">开通有效期: 3个月</span>
+              <span className="m-l-2">使用有效期: 3个月</span>
+            </div>
+          </div>
+          <div>
+            <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
+              <span className="d-i-b m-r-5">OG 20 语法 SC</span>
+            </div>
+            <div className="d-i-b t-8 t-s-12">
+              <span className="m-r-2">开通有效期: 3个月</span>
+              <span className="m-l-2">使用有效期: 3个月</span>
+            </div>
+          </div>
+          <div>
+            <div style={{ width: 360 }} className="d-i-b t-1 t-s-12">
+              <span className="d-i-b m-r-5">OG 20 语法 SC</span>
+            </div>
+            <div className="d-i-b t-8 t-s-12">
+              <span className="m-r-2">开通有效期: 3个月</span>
+              <span className="m-l-2">使用有效期: 3个月</span>
+            </div>
+          </div>
+        </div>
+        <div className="service">
+          <div className="d-i-b t-1 t-s-12">
+            <span className="d-i-b f-w-b m-r-5">赠送服务</span>
+            <span className="d-i-b">
+              机经券×1+VIP×3 月+模考×1
+              <Icon className="m-l-5 close" type="exclamation-circle" theme="filled" />
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}