确认支付页面金额计算

src/components/order/index.js

@@ -39,10 +39,13 @@ function OrderList(props) {
                         onClick={() => { }}
                       >
                         <Link to={{
-                                pathname: `/coupons?id=${course_id}`,
+                                pathname: `/coupons`,
+                                search: `?id=${course_id}`,
                                 state: {
                                     from: '/order',
+                                    a: 'sldfasldjfsl'
                               }}}>
+                          {/* <Link to='coupons' query={{id: course_id}} state={{from: '/order'}}> */}
                           <Flex justify='between'>
                             <span style={{ color: '#333', fontSize: '15px' }}>优惠券</span>
                             <span style={{ fontSize: '14px', color: '#999999' }}>{!coupon_desc ? (coupon_num === 0 ? '无' : `${coupon_num}张可用`) : (coupon_desc)}</span>
@@ -90,10 +93,11 @@ class Order extends Component {
       if(res.data.code !== 200) {
         return;
       }
-      this.props.history.replace(`/payorder?oid=${res.data.data.oid}`);
+      sessionStorage.removeItem('orderUseCacheObj');
+      this.props.history.replace(`/payorder?oid=${res.data.data.order_id}`);
     });
   }
-  // 使用余额
+  // 勾选取消勾选 是否使用余额
   useBalance = () => {
     let useBalanceFlag = this.state.useBalance;
     this.setState({
@@ -103,22 +107,29 @@ class Order extends Component {
       this.cacheObj = {
         ...this.state
       }
+      sessionStorage.setItem('orderUseCacheObj', JSON.stringify(this.state));
+    }else{
+      sessionStorage.removeItem('orderUseCacheObj');
     }
-    // console.log(useBalance);
+    this.computedMoney(useBalanceFlag);
+  }
+  // 勾选取消勾选时：计算金额、优惠金额、优惠券等
+  computedMoney = (useBalanceFlag) => {
     let totalSale = parseFloat(this.cacheObj.total),
       userAccount = parseFloat(this.cacheObj.user_account);
+    const { discount } = this.state;
     if (!useBalanceFlag) {
       if (totalSale > userAccount) {
         this.setState({
           offset: userAccount.toFixed(2),
           total: (totalSale - userAccount).toFixed(2),
-          discount: userAccount.toFixed(2),
+          discount: (userAccount + parseFloat(discount)).toFixed(2),
         });
       } else {
         this.setState({
           offset: totalSale.toFixed(2),
           total: 0,
-          discount: totalSale.toFixed(2),
+          discount: (totalSale + parseFloat(discount)).toFixed(2),
         });
       }
     } else {
@@ -128,11 +139,25 @@ class Order extends Component {
         discount: this.cacheObj.discount,
       });
     }
-    this.computedMoney();
-  }
-  // 计算金额、优惠金额、优惠券等
-  computedMoney = () => {
-
+  };
+  // 选择优惠券返回时根据是否勾选计算
+  computedMoneyByCache = () => {
+    let totalSale = parseFloat(this.cacheObj.total),
+      userAccount = parseFloat(this.cacheObj.user_account),
+      discount = parseFloat(this.cacheObj.discount);
+      if(totalSale > userAccount) {
+        this.setState({
+          offset: userAccount.toFixed(2),
+          total: (totalSale - userAccount).toFixed(2),
+          discount: (discount + userAccount).toFixed(2),
+        });
+      }else{
+        this.setState({
+          offset: totalSale.toFixed(2),
+          total: 0,
+          discount: totalSale.toFixed(2),
+        });
+      }
   };
   // 展示余额抵扣规则
   showInfo = () => {
@@ -146,7 +171,13 @@ class Order extends Component {
         return;
       }
       const { course, total, user_account, user_info, discount } = res.data.data;
-      this.dataCache = JSON.parse(JSON.stringify(res.data.data));
+      this.cacheObj = {
+        perfect: user_info,
+        orderList: course,
+        user_account,
+        total,
+        discount,
+      }
       this.setState({
         perfect: user_info,
         orderList: course,
@@ -154,12 +185,19 @@ class Order extends Component {
         total,
         discount,
       });
+      if(this.props.history.action === 'PUSH') {
+        sessionStorage.removeItem('orderUseCacheObj');
+      }
+      else{
+        const cacheObj = sessionStorage.getItem('orderUseCacheObj');
+        if(cacheObj !== null) {
+          this.setState({
+            useBalance: true
+          });
+          this.computedMoneyByCache();
+        }
+      }
     })
-
-    // // 获取报名信息 获取课程列表 获取用户账户余额
-    // Promise.race([http.get(), http.get(), http.get()]).then(res=>{
-
-    // });
   };
   render() {
     const {
@@ -224,17 +262,21 @@ class Order extends Component {
                     <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>
+                      <i className="iconfont iconiconfront-22 question-mark" onClick={this.showInfo}></i>
                     </Flex>
 
-                    <div>
+                    <Flex>
                       {
                         useBalance ? (
-                          <span style={{ color: '#FF2121', fontSize: '15px', marginRight: "6px" }}>{`-${offset}`}</span>
-                        ) : null
+                          <>
+                            <span style={{ color: '#FF2121', fontSize: '15px', marginRight: "6px" }}>{`-${offset}`}</span>
+                            <i className={`iconfont icondanseshixintubiao-5 balance-used`} onClick={throttle(this.useBalance, 600)}></i>
+                          </>
+                        ) : (
+                          <i className='circle-icon' onClick={throttle(this.useBalance, 600)}></i>
+                        )
                       }
-                      <i className={`iconfont ${useBalance ? 'icondanseshixintubiao-5' : 'iconiconfront-3'} `} onClick={throttle(this.useBalance, 600)}></i>
-                    </div>
+                    </Flex>
                   </Flex>
                 </Item>
               </List>

src/components/order/order.scss

@@ -40,6 +40,7 @@
 
     .user-icon {
       font-size: 28px;
+      flex-basis: 40px;
     }
 
     .order-cell {
@@ -47,6 +48,7 @@
       font-size: 13px;
       color: $color_333;
       line-height: 20px;
+      flex: 1 1 auto;
   
       .name {
         margin-bottom: 10px;
@@ -212,17 +214,33 @@
     }
   }
 
-  .order-balanceprice {
-    color: $color_666;
-    font-size: $font_12;
-
-    .order-money {
-      color: #ff2121;
-      font-size: $font_12 !important;
-      font-weight: normal;
-      font-style: inherit;
-      vertical-align: middle;
-      margin: 0;
+  .order-balance{
+    .order-balanceprice {
+      color: $color_666;
+      font-size: $font_12;
+  
+      .order-money {
+        color: #ff2121;
+        font-size: $font_12 !important;
+        font-weight: normal;
+        font-style: inherit;
+        vertical-align: middle;
+        margin: 0;
+      }
+    }
+     .am-list-content .iconiconfront-22.question-mark {
+      font-size: 24px;
+    }
+    .balance-used {
+      font-size: 24px;
+      color: #0099FF;
+    }
+    .circle-icon {
+      width: 20px;
+      height: 20px;
+      border: 1px solid #BFBFBF;
+      border-radius: 50%;
+      margin-right: 2px;
     }
   }
 
@@ -232,7 +250,6 @@
   .order-list {
     .am-list-item {
       padding-left: 0 !important;
-
     }
   }