合并dev分支

src/common/OrderList/index.js

@@ -13,13 +13,13 @@ import './orderlist.scss';
  */
 
 
-const OrderItem = ({ info, tab, children, src, ...restProps }) => {
+const OrderItem = ({ info, tab, children, ...restProps }) => {
     return (
             <div className='public-list-item'>
                 <div className="public-content">
                     {tab}
                     <div className="public-cover" >
-                        <img src={src} alt="" />
+                        <img src={restProps.image_name} alt="" />
                     </div>
                     {info}
                 </div>

src/components/order/index.js

 import React, { Component } from 'react';
-import { Flex, NavBar, List } from 'antd-mobile';
-import { OrderItem } from '@/common/index'
-import { Link } from 'react-router-dom'
+import { Flex, NavBar, List, WingBlank, Toast } from 'antd-mobile';
+import { OrderItem } from '@/common/index';
+import { Link } from 'react-router-dom';
+import { http, api } from "@/utils";
 
 import "./order.scss"
 
@@ -11,7 +12,7 @@ const mockData = [
   {
     title: '三月面试求职班',
     imgUrl: 'https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg',
-    content: '涵盖ML主流算法及其应用-文字超过一行换行',
+    content: '涵盖ML主流算法及其应用-文字超过一行换行然后呢再多呢是不是就出省略号了',
     newprice: '980',
     price: '1280',
     id: '110'
@@ -43,11 +44,11 @@ function OrderList(props) {
         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-title' style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.course_title}</p>
+              <p className='order-content' style={{ WebkitBoxOrient: 'vertical', WebkitLineClamp: '2', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box' }}>{item.simpledescription}</p>
               <p className='order-des'>
-                <span className='order-newprice'>¥{item.newprice}</span>
-                <span className='order-price'>¥{item.price}</span>
+                <span className='order-newprice'>¥{item.price0}</span>
+                <span className='order-price'>¥{item.price1}</span>
               </p>
             </div>
           )
@@ -60,7 +61,12 @@ function OrderList(props) {
                     arrow="horizontal"
                     onClick={() => { }}
                   >
-                    优惠券
+                    <Link to='/coupons'>
+                      <Flex justify='between'>
+                        <span>优惠券</span>
+                        <span>无</span>
+                      </Flex>
+                    </Link>
                   </Item>
                 </List>
               </div>
@@ -76,19 +82,74 @@ class Order extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      perfect: true
+      perfect: this.props.location.state,
+      user_account: 0.00,
+      total_sale: 0.00,
+      discount: 0.00,
+      useBalance: false,
+      orderList: [],
+    }
+  }
+  // 提交订单
+  submitOrder = () => {
+    const {
+      perfect,
+      total,
+      discount
+    } = this.state;
+    if (!perfect) {
+      Toast.info('请完善报名信息！');
     }
   }
-  handleClick = () => {
-    console.log(1);
+  // 使用余额
+  useBalance = () => {
+    this.setState((prevState) => ({
+      useBalance: !prevState.useBalance
+    }));
+    this.computedMoney();
   }
+  // 计算金额、优惠金额、优惠券等
+  computedMoney = () => {
+
+  };
+  // 展示余额抵扣规则
+  showInfo = () => {
+
+  };
+  componentDidMount() {
+    http.get(`${api.home}/m/order/preorder`).then((res) => {
+      if (res.code !== 200) {
+        return;
+      }
+      const { course, total_sale, user_account, user_info } = res.data.data;
+      console.log(course);
+      this.setState({
+        perfect: user_info,
+        orderList: course
+      });
+    })
+
+    // // 获取报名信息 获取课程列表 获取用户账户余额
+    // Promise.race([http.get(), http.get(), http.get()]).then(res=>{
+
+    // });
+  };
   render() {
+    const {
+      perfect,
+      user_account,
+      total_sale,
+      discount,
+      useBalance,
+      orderList,
+    } = this.state;
+
     return (
       <div className="order-wrapper">
         <Flex>
           <Flex.Item>
             <NavBar
-                  style={{"height": "44px"}}
+              style={{ "height": "44px" }}
               className="order-tab"
               mode="light"
               icon={<i className="iconfont iconiconfront-68"></i>}
@@ -106,50 +167,78 @@ class Order extends Component {
             {
               this.state.perfect &&
               <div className="order-information2">
-                    <i className="iconfont iconiconfront-20"></i>
-                    <div className="order-cell">
-                      <div className="name">姓名: 张三</div>
-                      <div>电话: 13266532323</div>
+                <WingBlank>
+                  <Flex align='center' justify='between' style={{ height: '80px' }}>
+                    <i className="iconfont iconiconfront-20 user-icon"></i>
 
-                    </div>
-                    <div className="order-cell">
-                      <div>QQ: 1084251364</div>
-                    </div>
+                    <Flex direction='column' justify='between' align='start' className="order-cell">
+                      <div className="name">{`姓名：${perfect.real_name}`}</div>
+                      <div>{`电话：${perfect.cellphone}`}</div>
+                    </Flex>
+
+                    <Flex align='start' className="order-cell">
+                      <div>{`QQ：${perfect.qq}`}</div>
+                    </Flex>
+
+                  </Flex>
+                </WingBlank>
               </div>
             }
             <div className="order-list">
-                    <OrderList list={mockData}/>
+              <OrderList list={orderList} />
             </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>
+                  <Flex justify='between'>
+                    <Flex align='center'>
+                      <span>余额抵扣</span>
+                      <span className="order-balanceprice"> (账户余额: <i className="order-money">{`${user_account}元`}</i>)</span>
+                      <i className="iconfont iconiconfront-22" onClick={this.showInfo}></i>
+                    </Flex>
+                    {
+                      useBalance ? (
+                        <div>
+                          <span style={{ color: '#FF2121', fontSize: '15px', marginRight: "6px" }}>{`-${user_account}`}</span>
+                          <i className="iconfont icondanseshixintubiao-5" onClick={this.useBalance}></i>
+                        </div>
+                      ) : (
+                        <i className="iconfont iconiconfront-3" onClick={this.useBalance}></i>
+                      )
+                    }
+                  </Flex>
                 </Item>
               </List>
             </div>
             <div className="order-bar">
               <div className="order-course">
-                    <span className="order-course-text">2门课程</span>
+                <span className="order-course-text">{`${orderList.length}门课程`}</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>
+                  <span className="order-amount-price">{`￥${total_sale}`}</span>
                 </div>
                 <div className="order-preprice">
                   <span className="order-preprice-title">已优惠:</span>
-                      <span className="order-preprice-price">¥ 200.50</span>
+                  <span className="order-preprice-price">{`¥${discount}`}</span>
                 </div>
               </div>
+              {
+                perfect ? (
+
+                  <button type="button" className="order-button has-info">
+                    <span className="order-button-text" onClick={this.submitOrder}>提交订单</span>
+                  </button>
+                ) : (
+
                     <button type="button" className="order-button">
-                    <span className="order-button-text">提交订单</span>
+                      <span className="order-button-text" onClick={this.submitOrder}>提交订单</span>
                     </button>
+                  )
+              }
             </div>
           </Flex.Item>
         </Flex>

src/components/order/order.scss

@@ -31,20 +31,39 @@
     background-size: 80px;
   }
 
+  .order-information2 {
+    height: 80px;
+    background-color: #FFF;
+    margin-top: 8px;
+    position: relative;
+
+    .user-icon {
+      font-size: 28px;
+    }
+
     .order-cell {
-    width: 50%;
-    height: 45px;
-    font-size: $font_14;
+      height: 50px;
+      font-size: 13px;
       color: $color_333;
-    margin-left: 20px;
       line-height: 20px;
-    display: inline-block;
-    vertical-align: middle;
   
       .name {
         margin-bottom: 10px;
       }
     }
+  }
+
+  .order-information2::before {
+    content: '';
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 2px;
+    position: absolute;
+    background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
+    background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
+    background-size: 80px;
+  }
 
   .order-addsize {
     font-size: 22px !important;
@@ -61,7 +80,7 @@
 
   .order-list {
     margin-top: 8px;
-    background-color: $white;
+    background-color: #F5F5F5;
     .public-content {
       padding: 10px 15px;
     }
@@ -72,13 +91,18 @@
     height: 22px;
     line-height: 22px;
     margin-left: 10px;
-    font-size: $font_16;
+    font-size: $font_14;
     color: $color_555;
   }
 
   .order-info {
     color: $color_666;
     font-size: $font_14;
+    min-width: 160px;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
 
     .order-title {
       height: 16px;
@@ -88,16 +112,11 @@
     }
 
     .order-content {
-      margin-top: 10px;
       color: $color_666;
       font-size: $font_14;
       line-height: 18px;
     }
 
-    .order-des {
-      margin-top: 10px;
-    }
-
     .order-newprice {
       color: $redprice;
       font-size: $font_16;
@@ -170,6 +189,9 @@
     -webkit-text-size-adjust: 100%;
     border: 1px solid transparent;
   }
+  .has-info {
+    background-color: #FF3131;
+  }
 
   .v-list-item {
     margin-top: 8px;
@@ -181,6 +203,9 @@
   }
 
   .order-prefer {
+    .am-list-content {
+      font-size: 15px !important;
+    }
     .am-list-line {
       padding: 0 15px;
     }

src/components/order/orderinfo.js

 import React, { Component } from 'react';
-import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank } from 'antd-mobile';
+import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
+import { Formik, Field, Form, withFormik } from 'formik';
 
-class orderinfo extends Component {
-  render() {
-    const { getFieldProps } = this.props.form;
-    return (
-      <Flex>
-            <Flex.Item>
-                <NavBar
-                    style={{ "height": "44px" }}
-                    className="order-tab"
-                    mode="light"
-                    icon={<i className="iconfont iconiconfront-68"></i>}
-                >
-                    报名信息
-                </NavBar>
-                <div>
-                    <List>
+const InnerForm = ({
+    values,
+    errors,
+    touched,
+    setFieldValue,
+    handleBlur,
+    handleSubmit,
+    isSubmitting,
+}) => (
+        <form>
             <InputItem
-                            {...getFieldProps('autofocus')}
                 clear
+                name="real_name"
+                onChange={(value) => setFieldValue('real_name', value)}
                 placeholder="请输入您的真实姓名"
-                            ref={el => this.autoFocusInst = el}
-                        >电话</InputItem>
+            >姓名</InputItem>
             <InputItem
-                            {...getFieldProps('focus')}
                 clear
+                type='phone'
+                name='cellphone'
                 placeholder="请输入您的手机号码"
-                            ref={el => this.inputRef = el}
-                        >姓名</InputItem>
+                onChange={(value) => setFieldValue('cellphone', value)}
+            >电话</InputItem>
             <InputItem
-                            {...getFieldProps('focus')}
                 clear
+                name='qq'
                 placeholder="请输入您的QQ号码"
-                            ref={el => this.inputRef = el}
+                maxLength='15'
+                onChange={(value) => setFieldValue('qq', value)}
             >QQ</InputItem>
-                    </List>
-                    <WhiteSpace />
-                    <div style={{marginTop: '21px'}}>
+
+            <div style={{ marginTop: '21px' }}>
                 <WingBlank>
-                            <Button type="primary">确认</Button>
+                    <Button type='primary' onClick={handleSubmit}>确认</Button>
                 </WingBlank>
             </div>
+        </form>
+    );
 
+const MyForm = withFormik({
+    mapPropsToValues: props => ({ real_name: '', cellphone: '', qq: '' }),
+    validate: (values, props) => {
+        const errors = {};
+        return errors;
+    },
+    handleSubmit: (
+        values,
+        FormBag
+    ) => {
+        if (!values.real_name) {
+            Toast.info('请输入姓名！', undefined, undefined, false);
+            return;
+        }
+        if (!values.cellphone) {
+            Toast.info('请输入手机号！', undefined, undefined, false);
+            return;
+        } else if (!/1\d{10}/g.test(values.cellphone.replace(/\s+/g, ''))) {
+            Toast.info('请输入正确的手机号！', undefined, undefined, false);
+            return;
+        }
+        if (!values.qq) {
+            Toast.info('请输入QQ号！', undefined, undefined, false);
+            return;
+        } else if (!/\d{5,}/g.test(values.qq)) {
+            Toast.info('请输入正确QQ号！', undefined, undefined, false);
+            return;
+        }
+        FormBag.props.history.push({
+            pathname: '/order',
+            state: values
+        });
+    },
+})(InnerForm);
+
+class Orderinfo extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <div>
+                <NavBar
+                    style={{ "height": "44px", backgroundColor: '#F7F9FC' }}
+                    className="order-tab"
+                    mode="light"
+                    icon={<i className="iconfont iconiconfront-68"></i>}
+                >
+                    报名信息
+                    </NavBar>
+                <MyForm history={this.props.history} />
             </div>
-            </Flex.Item>
-      </Flex>
         )
     }
-}
 
+};
 
-export default orderinfo;
+export default Orderinfo;
\ No newline at end of file