add order cart page

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

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

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

@@ -0,0 +1,136 @@
+@charset "utf-8";
+
+#cart {
+  background: #fff;
+  height: 100%;
+  padding-bottom: 100px;
+  overflow: hidden;
+  overflow-y: auto;
+
+  .content {
+    width: 1140px !important;
+  }
+
+  .footer {
+    position: fixed;
+    height: 80px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+
+    .content {
+      border-top: 1px solid #eee;
+      padding-left: 20px;
+
+      .d-i-b {
+        vertical-align: top;
+      }
+
+      .f-r {
+
+        .button {
+          width: 160px;
+          height: 80px;
+          line-height: 80px;
+          font-size: 22px;
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  .order-item {
+    background: #FAFAFAFF;
+    margin-bottom: 30px;
+
+    .order-item-info {
+      width: 980px;
+      margin-left: 100px;
+      margin-right: 60px;
+      height: 58px;
+      line-height: 58px;
+      position: relative;
+
+      .close {
+        position: absolute;
+        right: -40px;
+        top: 20px;
+      }
+
+      .select {
+        position: absolute;
+        left: -80px;
+        top: 20px;
+      }
+
+      .gift {
+        position: absolute;
+        right: -40px;
+        top: 25px;
+      }
+
+
+      .up {
+        cursor: pointer;
+        position: absolute;
+        left: 62px;
+        top: 20px;
+        font-size: 10px;
+        color: #D0D8E2;
+        transform: scale(0.8);
+
+      }
+
+      .down {
+        cursor: pointer;
+        position: absolute;
+        left: 62px;
+        top: 30px;
+        font-size: 10px;
+        color: #D0D8E2;
+        transform: scale(0.8);
+      }
+
+      input {
+        line-height: 32px;
+      }
+    }
+
+    .order-item-detail {
+      width: 980px;
+      margin-left: 100px;
+      margin-right: 60px;
+      border-top: 1px solid #eee;
+      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

@@ -0,0 +1,228 @@
+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';
+
+export default class extends Page {
+  renderView() {
+    const { _list = [{}, {}, {}] } = this.state;
+    return (
+      <div style={{ paddingTop: 50 }}>
+        <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">您看中的课程已构成套餐，结算有优惠</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="footer">
+          <div className="content">
+            <div className="d-i-b m-t-1 m-r-2">
+              <CheckboxItem className="v-a-m m-r-5" theme="white" checked />
+              全选
+            </div>
+            <div style={{ marginRight: 50 }} className="d-i-b m-t-1">
+              <Button size="small" radius disabled={false}>
+                删除
+              </Button>
+            </div>
+            <div style={{ marginTop: 15 }} className="d-i-b t-9 t-s-12 m-r-5">
+              优惠活动:
+            </div>
+            <div style={{ marginTop: 15 }} className="d-i-b t-s-12">
+              <div>单项课程 2门9折，3门88折，4门及以上85折。</div>
+              <div>1VS1私教 满30课时享95折优惠。</div>
+            </div>
+            <div className="f-r">
+              <div className="d-i-b m-r-1 m-t-1">
+                <div className="t-1 t-s-16 f-w-b">
+                  实付<span className="m-l-5 t-7 t-s-20"> ¥ 15000</span>
+                </div>
+                <div className="t-1">
+                  原价<span className="m-l-5 t-8 t-d-l-t">¥15200</span>
+                  <span className="m-l-5  t-8">（优惠活动-¥200）</span>
+                </div>
+              </div>
+              <Button className="submit">立即付款</Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+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">
+        {this.renderInfo()}
+        {this.renderDetail()}
+      </div>
+    );
+  }
+
+  renderInfo() {
+    return (
+      <div className="order-item-info">
+        <CheckboxItem theme="white" className="select" />
+        <Icon className="close" type="close-circle" theme="filled" />
+        <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 style={{ width: 120 }} className="d-i-b t-8 t-s-12 p-r">
+          数量
+          <input style={{ width: 32 }} className="m-l-5 t-c" />
+          <Icon className="up" type="caret-up" />
+          <Icon className="down" type="caret-down" />
+        </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: 880 }} 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>
+    );
+  }
+}

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

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

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

@@ -11,98 +11,58 @@
     width: 1140px !important;
   }
 
-  .footer {
-    position: fixed;
-    height: 80px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: #fff;
-
-    .content {
-      border-top: 1px solid #eee;
-      padding-left: 20px;
-
-      .d-i-b {
-        vertical-align: top;
-      }
-
-      .f-r {
-
-        .button {
-          width: 160px;
-          height: 80px;
-          line-height: 80px;
-          font-size: 22px;
-          padding: 0;
-        }
-      }
-    }
-  }
-
   .order-item {
     background: #FAFAFAFF;
-    margin-bottom: 30px;
+    margin-bottom: 20px;
 
     .order-item-info {
-      width: 980px;
-      margin-left: 100px;
-      margin-right: 60px;
+      margin-left: 20px;
+      margin-right: 20px;
       height: 58px;
       line-height: 58px;
       position: relative;
+    }
 
-      .close {
-        position: absolute;
-        right: -40px;
-        top: 20px;
-      }
-
-      .select {
-        position: absolute;
-        left: -80px;
-        top: 20px;
-      }
-
-      .gift {
-        position: absolute;
-        right: -40px;
-        top: 25px;
-      }
+    .order-item-detail {
+      margin-left: 20px;
+      margin-right: 20px;
+      border-top: 1px solid #eee;
+      padding: 20px 0;
+    }
+  }
 
+  .gift-list {
+    border-top: 1px solid #eee;
+  }
 
-      .up {
-        cursor: pointer;
-        position: absolute;
-        left: 62px;
-        top: 20px;
-        font-size: 10px;
-        color: #D0D8E2;
-        transform: scale(0.8);
+  .gift-item {
+    padding: 20px 0;
+    line-height: 20px;
+    border-bottom: 1px solid #eee;
 
-      }
+    .assets {
+      vertical-align: top;
+    }
+  }
 
-      .down {
-        cursor: pointer;
-        position: absolute;
-        left: 62px;
-        top: 30px;
-        font-size: 10px;
-        color: #D0D8E2;
-        transform: scale(0.8);
-      }
+  .block {
+    padding-top: 30px;
 
-      input {
-        line-height: 32px;
-      }
+    .title {
+      padding: 20px 0;
+      line-height: 20px;
+      border-bottom: 1px solid #eee;
     }
 
-    .order-item-detail {
-      width: 980px;
-      margin-left: 100px;
-      margin-right: 60px;
-      border-top: 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

@@ -1,56 +1,57 @@
 import React, { Component } from 'react';
 import './index.less';
-import { Icon, Radio } from 'antd';
+import { Icon } from 'antd';
+import Assets from '@src/components/Assets';
 import Page from '@src/containers/Page';
-import CheckboxItem from '../../../components/CheckboxItem';
-import Button from '../../../components/Button';
 
 export default class extends Page {
   renderView() {
     const { _list = [{}, {}, {}] } = this.state;
     return (
-      <div style={{ paddingTop: 50 }}>
+      <div style={{ paddingTop: 40 }}>
         <div className="content">
-          <div className="t-1 m-b-2 f-w-b t-s-24">购物车</div>
+          <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">您看中的课程已构成套餐，结算有优惠</div>
+          <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="footer">
-          <div className="content">
-            <div className="d-i-b m-t-1 m-r-2">
-              <CheckboxItem className="v-a-m m-r-5" theme="white" checked />
-              全选
-            </div>
-            <div style={{ marginRight: 50 }} className="d-i-b m-t-1">
-              <Button size="small" radius disabled={false}>
-                删除
-              </Button>
-            </div>
-            <div style={{ marginTop: 15 }} className="d-i-b t-9 t-s-12 m-r-5">
-              优惠活动:
-            </div>
-            <div style={{ marginTop: 15 }} className="d-i-b t-s-12">
-              <div>单项课程 2门9折，3门88折，4门及以上85折。</div>
-              <div>1VS1私教 满30课时享95折优惠。</div>
-            </div>
-            <div className="f-r">
-              <div className="d-i-b m-r-1 m-t-1">
-                <div className="t-1 t-s-16 f-w-b">
-                  实付<span className="m-l-5 t-7 t-s-20"> ¥ 15000</span>
-                </div>
-                <div className="t-1">
-                  原价<span className="m-l-5 t-8 t-d-l-t">¥15200</span>
-                  <span className="m-l-5  t-8">（优惠活动-¥200）</span>
-                </div>
-              </div>
-              <Button className="submit">立即付款</Button>
-            </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>
@@ -58,7 +59,28 @@ export default class extends Page {
   }
 }
 
+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">
@@ -71,19 +93,15 @@ class OrderItem extends Component {
   renderInfo() {
     return (
       <div className="order-item-info">
-        <CheckboxItem theme="white" className="select" />
-        <Icon className="close" type="close-circle" theme="filled" />
         <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">
+        <div style={{ width: 530 }} className="d-i-b t-8 t-s-12">
           实付金额满20000元赠送
         </div>
-        <div style={{ width: 120 }} className="d-i-b t-8 t-s-12 p-r">
-          数量
-          <input style={{ width: 32 }} className="m-l-5 t-c" />
-          <Icon className="up" type="caret-up" />
-          <Icon className="down" type="caret-down" />
+        <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>
@@ -91,22 +109,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">
+          <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 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>
@@ -144,30 +173,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>
     );
   }