充值页面交互

src/main/webapp/resources/js/pinganPay/controllers/forstore/recharge_ctrl.js

@@ -1,7 +1,31 @@
 define([ 'app/app' ], function(app) {
     'use strict';
     app.register.controller('rechargeCtrl', ['$scope', '$rootScope', 'toaster', function ($scope, $rootScope, toaster ) {
-        document.title = '充值-优软商城';
+        $scope.rechargeType = 'wechat';
+        $scope.step = 1;
+        $scope.setRechargeType = function (type) {
+            $scope.rechargeType = type;
+        }
+        $scope.goNext = function () {
+            $scope.step = 2;
+        }
+        $scope.getText = function () {
+            switch ($scope.rechargeType) {
+                case 'wechat':
+                    return '微信支付';
+                    break;
+                case 'alipay':
+                    return '支付宝支付';
+                    break;
+                case 'fastpay':
+                    return '快捷支付';
+                    break;
+                case 'netbank':
+                    return '网银支付';
+                    break;
+                default: return '';
+            }
+        }
     }]);
 
 });

src/main/webapp/resources/view/pinganPay/forstore/recharge.html

@@ -105,7 +105,6 @@
         margin: 0;
     }
     .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item .com-check-radio{
-        float: left;
         margin-top: 10px;
     }
     .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item .card-info {
@@ -116,6 +115,8 @@
         background: #fff;
         border-radius: 3px;
         border: 1px solid #e5e5e5;
+        float: right;
+        cursor: pointer;
     }
     .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item .card-info.active {
         border: 1px solid #4290f7;
@@ -127,6 +128,18 @@
     .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item .card-info span {
         margin-right: 18px;
     }
+    .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item .card-info >div {
+        width: 166px;
+        display: inline-block;
+        float: right;
+    }
+    .pay-recharge .pay-recharge-content .pay-recharge-card .card-lists .card-list-item .card-info >div >i {
+        font-style: normal;
+        font-weight: bold;
+        color: #ff8522;
+        font-size: 18px;
+        margin-right: 10px;
+    }
     .pay-recharge .pay-recharge-content .pay-recharge-card .fast-pay-content {
         margin-top: 19px;
     }
@@ -162,8 +175,8 @@
     }
     .pay-recharge .pay-recharge-accounting >span {
         position: relative;
-        display: block;
-        width: 106px;
+        display: inline-block;
+        padding: 0 21px;
         text-align: center;
         height: 36px;
         line-height: 36px;
@@ -180,6 +193,18 @@
         border-radius: 100%;
         background: #21bf01;
     }
+    .pay-recharge .pay-recharge-accounting >span.wechat,
+    .pay-recharge .pay-recharge-accounting >span.wechat::after{
+        background: #21bf01;
+    }
+    .pay-recharge .pay-recharge-accounting >span.alipay,
+    .pay-recharge .pay-recharge-accounting >span.alipay::after{
+        background: #05a9f5;
+    }
+    .pay-recharge .pay-recharge-accounting >span.fastpay,
+    .pay-recharge .pay-recharge-accounting >span.fastpay::after{
+        background: #f44c0a;
+    }
     .pay-recharge .pay-recharge-accounting .pay-qrcode {
         text-align: center;
     }
@@ -237,33 +262,35 @@
         <p>账户：<span>深圳市优软科技有限公司</span>&nbsp;&nbsp;哈哈哈</p>
         <p>账户余额：<span class="green-text">56.63</span>&nbsp;元</p>
     </div>
-    <div class="pay-recharge-content">
+    <div class="pay-recharge-content" ng-if="step == 1">
         <div class="pay-recharge-items">
             <span>充值方式：</span>
-            <a href="javascript:void(0)" class="active">
+            <a href="javascript:void(0)" ng-class="{'active': rechargeType == 'wechat'}" ng-click="setRechargeType('wechat')">
                 <img src="static/img/pingan/wechat.png" alt="">
                 <span>微信支付</span>
             </a>
-            <a href="javascript:void(0)">
+            <a href="javascript:void(0)" ng-class="{'active': rechargeType == 'alipay'}" ng-click="setRechargeType('alipay')">
                 <img src="static/img/pingan/alipay.png" alt="">
                 <span>支付宝支付</span>
             </a>
-            <a href="javascript:void(0)">
+            <a href="javascript:void(0)" ng-class="{'active': rechargeType == 'fastpay'}" ng-click="setRechargeType('fastpay')">
                 <img src="static/img/pingan/fastpay.png" alt="">
                 <span>储蓄卡支付</span>
             </a>
-            <a href="javascript:void(0)">
-                <img src="static/img/pingan/net-bank.png" alt="">
+            <a href="javascript:void(0)" ng-class="{'active': rechargeType == 'netbank'}" ng-click="setRechargeType('netbank')">
+                <img src="static/img/pingan/netbank.png" alt="">
                 <span>网银支付</span>
             </a>
         </div>
-       <!-- <div class="pay-recharge-input">
+        <div class="pay-recharge-input" ng-show="rechargeType == 'wechat' || rechargeType == 'alipay'">
             <img src="static/img/pingan/border.png" alt="">
-            <span>充值金额：</span>
-            <input type="number" class="form-control" placeholder="请输入充值金额">元
-            <span class="remind-text">金额必须为整数或小数，小数点后不超过2位。</span>
-        </div>-->
-        <div class="pay-recharge-card">
+            <div class="pay-input">
+                <span>充值金额：</span>
+                <input type="number" class="form-control" placeholder="请输入充值金额">元
+                <span class="remind-text">金额必须为整数或小数，小数点后不超过2位。</span>
+            </div>
+        </div>
+        <div class="pay-recharge-card" ng-show="rechargeType == 'fastpay' || rechargeType == 'netbank'">
             <img src="static/img/pingan/border.png" alt="">
             <div class="card-lists">
                 <div class="card-list-item active">
@@ -338,61 +365,71 @@
                         <span>储蓄卡</span>
                     </div>
                 </div>
+                <div class="card-list-item" ng-if="rechargeType == 'fastpay'">
+                    <div class="card-info">
+                        <img src="static/img/pingan/addcard.png" alt="">
+                        <div><i>+</i>添加银行卡</div>
+                    </div>
+                </div>
             </div>
             <div class="fast-pay-content">
-                <p>快捷支付充值限额如下 <img src="static/img/pingan/remind.png" alt=""></p>
-               <!-- <table>
-                    <thead>
-                    <tr>
-                        <th width="116">单笔限额(元)</th>
-                        <th width="116">每日限额(元)</th>
-                        <th width="116">每月限额(元)</th>
-                        <th width="207">备注</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>5万</td>
-                        <td>5万</td>
-                        <td>无</td>
-                        <td>
-                            <div>
-                                客服热线：12312414
-                            </div>
-                            <div>信用卡：2341241</div>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>-->
-                 <table>
-                    <thead>
-                    <tr>
-                        <th width="116">单笔限额(元)</th>
-                        <th width="116">每日限额(元)</th>
-                        <th width="116">需要满足的条件</th>
-                        <th width="207">备注</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>5万</td>
-                        <td>5万</td>
-                        <td>无</td>
-                        <td rowspan="2">
-                            <div>
-                                客服热线：12312414
-                            </div>
-                            <div>信用卡：2341241</div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>5万</td>
-                        <td>5万</td>
-                        <td>无</td>
-                    </tr>
-                    </tbody>
-                </table>
-                <p>请关注您的充值金额是否超限</p>
+                <div ng-if="rechargeType == 'fastpay'">
+                    <table>
+                        <thead>
+                        <tr>
+                            <th width="116">单笔限额(元)</th>
+                            <th width="116">每日限额(元)</th>
+                            <th width="116">每月限额(元)</th>
+                            <th width="207">备注</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td>5万</td>
+                            <td>5万</td>
+                            <td>无</td>
+                            <td>
+                                <div>
+                                    客服热线：12312414
+                                </div>
+                                <div>信用卡：2341241</div>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div ng-if="rechargeType == 'netbank'">
+                    <p>快捷支付充值限额如下 <img src="static/img/pingan/remind.png" alt=""></p>
+                    <table>
+                        <thead>
+                        <tr>
+                            <th width="116">单笔限额(元)</th>
+                            <th width="116">每日限额(元)</th>
+                            <th width="116">需要满足的条件</th>
+                            <th width="207">备注</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td>5万</td>
+                            <td>5万</td>
+                            <td>无</td>
+                            <td rowspan="2">
+                                <div>
+                                    客服热线：12312414
+                                </div>
+                                <div>信用卡：2341241</div>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>5万</td>
+                            <td>5万</td>
+                            <td>无</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <p>请关注您的充值金额是否超限</p>
+                </div>
                 <div class="pay-input">
                     <span>充值金额：</span>
                     <input type="number" class="form-control" placeholder="请输入充值金额">元
@@ -400,11 +437,11 @@
                 </div>
             </div>
         </div>
-        <a href="javascript:void(0)">下一步</a>
-        <a href="javascript:void(0)" class="to-bank">登录到网上银行充值</a>
+        <a href="javascript:void(0)" ng-if="rechargeType != 'netbank'" ng-click="goNext()">下一步</a>
+        <a href="javascript:void(0)" class="to-bank" ng-if="rechargeType == 'netbank'" >登录到网上银行充值</a>
     </div>
-    <div class="pay-recharge-accounting" style="display: none">
-        <span>微信支付</span>
+    <div class="pay-recharge-accounting" ng-if="step == 2">
+        <span ng-bind="getText()" class="{{rechargeType}}">微信支付</span>
         <div class="pay-qrcode">
             <p>距离二维码过期还剩<span class="red-text">13</span>秒，过期后请刷新页面重新获取二维码</p>
             <!--<p class="red-text">二维码已过期，<a href="">刷新</a>&nbsp;页面重新获取二维码</p>-->
@@ -416,7 +453,7 @@
                 <div class="remind-wrap">
                     <img src="static/img/pingan/scan.png" alt="">
                     <div>
-                        请使用微信扫一扫<br/>
+                        请使用<span ng-bind="rechargeType == 'wechat' ? '微信' : '支付宝'"></span>扫一扫<br/>
                         扫描二维码充值
                     </div>
                 </div>