订单支付接口

src/components/order/index.js

@@ -4,6 +4,7 @@ import { OrderItem } from '@/common/index';
 import { Link } from 'react-router-dom';
 import { http, api } from "@/utils";
 import { throttle } from 'lodash';
+import {HeaderBar} from '../../common';
 
 import "./order.scss"
 
@@ -85,7 +86,7 @@ class Order extends Component {
       if(res.data.code !== 200) {
         return;
       }
-      console.log(res);
+      this.props.history.replace(`/payorder?oid=${res.data.data.oid}`);
     });
   }
   // 使用余额
@@ -172,14 +173,7 @@ class Order extends Component {
       <div className="order-wrapper">
         <Flex>
           <Flex.Item>
-            <NavBar
-              style={{ "height": "44px" }}
-              className="order-tab"
-              mode="light"
-              icon={<i className="iconfont iconiconfront-68"></i>}
-            >
-              课程报名
-                </NavBar>
+            <HeaderBar title='课程报名' arrow={true}></HeaderBar>
             {
               !this.state.perfect &&
               <Link to='/orderinfo' className="order-information">

src/components/order/orderinfo.js

 import React, { Component } from 'react';
 import { Flex, NavBar, List, InputItem, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
 import { Formik, Field, Form, withFormik } from 'formik';
+import {HeaderBar} from '../../common';
 import { http, api } from "@/utils";
 
 const InnerForm = ({
@@ -55,25 +56,49 @@ const MyForm = withFormik({
         values,
         FormBag
     ) => {
-        if (!values.real_name) {
+        const {real_name, cellphone, qq} = values;
+        if (!real_name) {
+            Toast.info('请输入姓名！', undefined, undefined, false);
+            return;
+        }else if ((`${real_name}`).replace(/\s+/g, '').length === 0) {
             Toast.info('请输入姓名！', undefined, undefined, false);
             return;
         }
-        if (!values.cellphone) {
+        if (!cellphone) {
             Toast.info('请输入手机号！', undefined, undefined, false);
             return;
-        } else if (!/1\d{10}/g.test(values.cellphone.replace(/\s+/g, ''))) {
+        } else if (!/1\d{10}/g.test((`${cellphone}`).replace(/\s+/g, ''))) {
             Toast.info('请输入正确的手机号！', undefined, undefined, false);
             return;
         }
-        if (!values.qq) {
+        if (!qq) {
             Toast.info('请输入QQ号！', undefined, undefined, false);
             return;
-        } else if (!/\d{5,}/g.test(values.qq)) {
+        } else if (!/\d{5,}/g.test(qq)) {
             Toast.info('请输入正确QQ号！', undefined, undefined, false);
             return;
         }
-        http.post(`${api.home}/m/order/saveUserInfo`, values).then(res=>{
+        let same = false;
+        if(FormBag.props.userInfo) {
+            const userInfo = FormBag.props.userInfo;
+            if(userInfo.real_name === real_name) {
+                same = true;
+            }
+            if(userInfo.cellphone === cellphone) {
+                same = true;
+            }
+            if(userInfo.qq === qq) {
+                same = true;
+            }
+        }
+        if(same) {
+            FormBag.props.history.replace({
+                pathname: '/order',
+                state: values
+            });
+            return;
+        }
+        http.post(`${api.home}/m/order/saveUserInfo`, {real_name: values.real_name, cellphone: (`${values.cellphone}`).replace(/\s+/g, ''), qq: values.qq}).then(res=>{
             if(res.data.code !== 200) {
                 Toast.info(res.data.msg, undefined, undefined, false);
                 return;
@@ -95,14 +120,7 @@ class Orderinfo extends Component {
     render() {
         return (
             <div>
-                <NavBar
-                    style={{ "height": "44px", backgroundColor: '#F7F9FC' }}
-                    className="order-tab"
-                    mode="light"
-                    icon={<i className="iconfont iconiconfront-68"></i>}
-                >
-                    报名信息
-                    </NavBar>
+                <HeaderBar title='报名信息' arrow={true}></HeaderBar>
                 <MyForm history={this.props.history} userInfo={this.props.location.state}/>
             </div>
         )

src/components/order/payOrder/PayOrder.scss

@@ -22,9 +22,9 @@
 
   .pay-type-list {
     .am-list-header {
-        color: #333333;
-        font-size: 15px;
-        background-color: #fff;
+      color: #333333;
+      font-size: 15px;
+      background-color: #fff;
     }
 
     .iconzhifubaox- {
@@ -43,37 +43,37 @@
     }
 
     .am-radio-inner {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        background-color: #C1C1C1;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background-color: #c1c1c1;
     }
-    .am-radio-inner:after{
-        display: block;
-        border-color: #FFF;
-        top: 0;
-        right: 6px;
+    .am-radio-inner:after {
+      display: block;
+      border-color: #fff;
+      top: 0;
+      right: 6px;
     }
 
-    .am-radio.am-radio-checked .am-radio-inner{
-        background-color: #009AFF;
-        border-radius: 50%;
-        width: 20px;
-        height: 20px;
+    .am-radio.am-radio-checked .am-radio-inner {
+      background-color: #009aff;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
     }
-    .am-radio.am-radio-checked .am-radio-inner:after{
-        display: block;
+    .am-radio.am-radio-checked .am-radio-inner:after {
+      display: block;
     }
   }
 
-  .pay-tip{
-      width: 100%;
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      font-size: 12px;
-      color: #FF3131;
-      background-color: #FFF4CE;
+  .pay-tip {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    font-size: 12px;
+    color: #ff3131;
+    background-color: #fff4ce;
   }
 
   .pay-button {
@@ -89,6 +89,66 @@
     z-index: 9;
   }
 
+  .check-staging {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, $alpha: 0.6);
+    z-index: 19;
+
+    .container {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 300px;
+      border-radius: 6px;
+      background-color: #FFF;
+      padding-bottom: 10px;
+
+      .check-title{
+        color: #333333;
+        font-size: 16px;
+        text-align: center;
+        width: 100%;
+        height: 44px;
+        line-height: 44px;
+        border-bottom: 1px solid #DDDDDD;
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+      }
+    }
+
+    .am-list-item .am-list-line .am-list-extra {
+      flex-basis: 16%;
+    }
+    .am-radio-inner {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      border: 1px solid #BFBFBF;
+      background-color: #fff;
+    }
+    .am-radio-inner:after {
+      display: block;
+      border-color: #fff;
+      top: 0;
+      right: 6px;
+    }
+    .am-radio.am-radio-checked .am-radio-inner {
+      background-color: #009aff;
+      border: 1px solid #FFF;
+      border-radius: 50%;
+      width: 20px;
+      height: 20px;
+    }
+    .am-radio.am-radio-checked .am-radio-inner:after {
+      display: block;
+    }
+  }
+
   .order-info {
     position: relative;
     flex: 1;
@@ -127,8 +187,8 @@
 
   .v-list-item {
     padding: 10px 15px;
-    background-color: #FFF;
-    border-bottom: 1px solid #E7EAF1;
+    background-color: #fff;
+    border-bottom: 1px solid #e7eaf1;
 
     .content {
       border: none;