index_20190427094513.js 4.75 KB
Newer Older
baiguangyao committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155
import React, { Component } from 'react';
import { Flex, NavBar, List } from 'antd-mobile';
import { OrderItem } from '@/common/index'

import "./order.scss"

const Item = List.Item;

const mockData = [
  {
    title: '三月面试求职班',
    imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    content: '涵盖ML主流算法及其应用-文字超过一行换行',
    newprice: '980',
    price: '1280',
    id: '110'
  },
  {
    title: '三月面试求职班',
    imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    content: '涵盖ML主流算法及其应用-文字超过一行换行',
    newprice: '980',
    price: '1280',
    id: '110'
  },
  {
    title: '三月面试求职班',
    imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
    content: '涵盖ML主流算法及其应用-文字超过一行换行',
    newprice: '980',
    price: '1280',
    id: '110'
  }
]


function OrderList(props) {
  const listData = props.list;
  return (
    <div>
      {
        listData.map((item, index) => {
          const Info = (
            <div className="order-info">
              <p className='order-title'>{item.title}</p>
              <p className='order-content'>{item.content}</p>
              <p className='order-des'>
                <span className='order-newprice'>¥{item.newprice}</span>
                <span className='order-price'>¥{item.price}</span>
              </p>
            </div>
          )
          
          return (
            <OrderItem {...item} key={index} info={Info}>
              <div className="order-prefer">
                <List key={index}>
                  <Item
                    arrow="horizontal"
                    onClick={() => { }}
                  >
                    优惠券
                </Item>
                </List>
              </div>
            </OrderItem>
          )
        })
      }
    </div>
  );
}

class Order extends Component {
  constructor(props) {
    super(props);
    this.state = {
     
    }
  }
  handleClick = () => {
    console.log(1);
  }
    render() {
        return (
          <div className="order-wrapper">
            <Flex>
              <Flex.Item>
                <NavBar
                  style={{"height": "44px"}}
                  className="order-tab"
                  mode="light"
                  icon={<i className="iconfont iconiconfront-68"></i>}
                >
                  课程报名
                </NavBar>
                <div className="order-information">
                  <i className="iconfont iconiconfront-6 order-addsize"></i>
                  <div className="order-infotext">完善报名信息</div>
                  <i className="iconfont iconiconfront-70 order-next"></i>
                </div>
                <div className="order-information">
                  <i className="iconfont iconiconfront-20"></i>
                  <div className="order-cell">
                    <div className="name">姓名: 张三</div>
                    <div>电话: 13266532323</div>
                   
                  </div>
                  <div className="order-cell">
                    <div>QQ: 1084251364</div>
                  </div>
                </div>
                <div className="order-list">
                    <OrderList list={mockData}/>
                    
                </div>
                <div className="order-balance">
                  <List>
                    <Item
                      onClick={() => { }}
                      className="order-prefer-text"
                      extra={<i className="iconfont icondanseshixintubiao-5"></i>}
                    >
                      余额抵扣
                          <span className="order-balanceprice">(账户余额: <i className="order-money">1</i>)</span>
                      <i className="iconfont iconiconfront-22"></i>
                    </Item>
                  </List>
                </div>
                <div className="order-bar">
                  <div className="order-course"></div>
                  <div className="order-bar-text">
                    <div>
                      <span>合计:</span>
                      <span>¥ 30.50</span>
                    </div>
                    <div>
                      <span>已优惠:</span>
                      <span>¥ 200.50</span>
                    </div>
                  </div>
                  <button type="button" className="order-button ">
                    <span className="order-button-text">提交订单</span>
                  </button>
                </div>
              </Flex.Item>
            </Flex>
          </div>
      
        )
    }

}

export default Order;