import React, { Component } from 'react'; import { Flex, NavBar, List, Switch } from 'antd-mobile'; import { createForm } from 'rc-form' 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' } ] 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-list"> <OrderList list={mockData}/> <div className="order-balance"> <List> <Item arrow="horizontal" onClick={() => { }} className="order-prefer-text" extra={<Switch {...getFieldProps('1', { initialValue: true, valuePropName: 'checked' })} />} > 余额抵扣 <span className="order-balanceprice">(账户余额: <i className="order-money">1元</i>)</span> <i className=""></i> </Item> </List> </div> </div> </Flex.Item> </Flex> </div> ) } } export default Order;