index.js

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 style={{"padding": "0 15px"}}>
      {
        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">
                    <span className="order-course-text">2门课程</span>
                  </div>
                  <div className="order-bar-text">
                    <div className="order-amount">
                      <span className="order-amount-title">合计:</span>
                      <span className="order-amount-price">¥ 30.50</span>
                    </div>
                    <div className="order-preprice">
                      <span className="order-preprice-title">已优惠:</span>
                      <span className="order-preprice-price">¥ 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;