储蓄卡支付页面

src/main/webapp/resources/css/pinganPay/pinganPay.css

@@ -7,4 +7,38 @@
     margin: 0 auto;
     padding-bottom: 40px;
     background: #fff;
+}
+
+.pingan-pay .card-info {
+    display: inline-block;
+    width: 263px;
+    height: 43px;
+    line-height: 43px;
+    background: #fff;
+    border-radius: 3px;
+    border: 1px solid #e5e5e5;
+    float: right;
+    cursor: pointer;
+}
+.pingan-pay .card-info.active {
+    border: 1px solid #4290f7;
+    background: #f8fafd;
+}
+.pingan-pay .card-info img {
+    margin: 0 10px;
+}
+.pingan-pay .card-info span {
+    margin-right: 18px;
+}
+.pingan-pay .card-info >div {
+    width: 166px;
+    display: inline-block;
+    float: right;
+}
+.pingan-pay .card-info >div >i {
+    font-style: normal;
+    font-weight: bold;
+    color: #ff8522;
+    font-size: 18px;
+    margin-right: 10px;
 }

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

@@ -6,6 +6,9 @@ define([ 'app/app' ], function(app) {
         $scope.setRechargeType = function (type) {
             $scope.rechargeType = type;
         }
+        $scope.setStep = function (step) {
+            $scope.step = step;
+        }
         $scope.goNext = function () {
             $scope.step = 2;
         }

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

@@ -255,9 +255,117 @@
         font-size: 16px;
         margin-right: 15px;
     }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area {
+        width: 710px;
+        margin: 0 auto;
+        border: 1px solid #e6f0fe;
+        font-size: 14px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-info {
+        background: #e6f0fe;
+        padding: 21px 0 56px 19px;
+        width: 710px;
+        margin-left: -1px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-info > p {
+        font-size: 16px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-info > div {
+        width: 352px;
+        height: 43px;
+        line-height: 43px;
+        margin-bottom: 10px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-info > div > span {
+        display: inline-block;
+        width: 84px;
+        text-align: right;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-info > div .accounting-price-area {
+        font-size: 18px;
+        display: inline-block;
+        background: #fff;
+        padding: 0 10px;
+        height: 30px;
+        line-height: 30px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-info > div > div {
+        border: none;
+        cursor: default;
+        border-radius: 2px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form {
+        height: 267px;
+        padding: 24px 0 0 19px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form > div {
+        margin-bottom: 12px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form > div > span:first-child {
+        display: inline-block;
+        width: 98px;
+        text-align: right;
+        margin-right: 16px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form > div > input {
+        width: 167px;
+        height: 30px;
+        display: inline-block;
+        border-radius: 2px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form > div > a {
+        font-size: 12px;
+        color: #4290f7;
+        margin-left: 14px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form > div .error-tip {
+        color: #f31a1a;
+        margin-left: 11px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form > div >img {
+        margin-left: 14px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form > div .pay-remind {
+        font-size: 12px;
+        color: #999;
+        margin: 12px 0 33px 118px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form > div .dynamic-code {
+        display: inline-block;
+        width: 126px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        border-radius: 2px;
+        background: #f44c0a;
+        color: #fff;
+        cursor: pointer;
+        margin-left: 10px;
+        outline: none;
+        font-size: 14px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form > div .dynamic-code.disabled {
+        background: #dedddd;
+        cursor: not-allowed;
+        color: #666;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form > div .dynamic-code.disabled span {
+        color: #f31a1a;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form .go-accounting {
+        text-align: center;
+        margin-top: 48px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form .go-accounting .dynamic-code {
+        width: 114px;
+    }
+    .pay-recharge .pay-recharge-accounting .accounting-input-area .accounting-input-form .go-accounting a {
+        font-size: 14px;
+        margin-left: 10px;
+    }
     /* 第二步 end */
 </style>
-<div class="pay-recharge">
+<div class="pay-recharge pingan-pay">
     <div class="pay-recharge-header">
         <p>账户：<span>深圳市优软科技有限公司</span>&nbsp;&nbsp;哈哈哈</p>
         <p>账户余额：<span class="green-text">56.63</span>&nbsp;元</p>
@@ -442,7 +550,7 @@
     </div>
     <div class="pay-recharge-accounting" ng-if="step == 2">
         <span ng-bind="getText()" class="{{rechargeType}}">微信支付</span>
-        <div class="pay-qrcode">
+        <div class="pay-qrcode" ng-if="rechargeType == 'wechat' || rechargeType == 'alipay'">
             <p>距离二维码过期还剩<span class="red-text">13</span>秒，过期后请刷新页面重新获取二维码</p>
             <!--<p class="red-text">二维码已过期，<a href="">刷新</a>&nbsp;页面重新获取二维码</p>-->
             <h4>充值金额：<span class="red-text">8000.00</span><span>元</span></h4>
@@ -459,5 +567,51 @@
                 </div>
             </div>
         </div>
+        <div class="accounting-input-area" ng-if="rechargeType == 'fastpay'">
+            <div class="accounting-input-info">
+                <p>确认充值信息</p>
+                <div>
+                    <span>银行卡信息：</span>
+                    <div class="card-info">
+                        <img src="static/img/pingan/bank/bank-china.png" alt="">
+                        <span>中国银行</span>
+                        <span>**1414</span>
+                        <span>储蓄卡</span>
+                    </div>
+                </div>
+                <div>
+                    <span>充值金额：</span>
+                    <div class="accounting-price-area">
+                        <span class="red-text">8000.00</span>&nbsp;&nbsp;元
+                    </div>
+                </div>
+            </div>
+            <div class="accounting-input-form">
+                <div>
+                    <span>商城支付密码：</span>
+                    <input type="text" class="form-control">
+                    <a href="javascript:void(0)">忘记密码？</a>
+                    <span class="error-tip">请输入6位数字支付密码，还可以输入2次</span>
+                    <img src="static/img/pingan/input-success.png" alt="">
+                    <div class="pay-remind">请输入6位数字支付密码</div>
+                </div>
+                <div>
+                    <span>手机号码：</span>
+                    <span>123****1231</span>
+                </div>
+                <div>
+                    <span>动态验证码：</span>
+                    <input type="text" class="form-control" placeholder="请输入验证码">
+                    <a href="javascript:void(0)" class="dynamic-code">免费获取验证码</a>
+                    <a href="javascript:void(0)" class="dynamic-code disabled"><span>120&nbsp;s</span>后重新获取</a>
+                    <span class="error-tip">验证码错误</span>
+                    <img src="static/img/pingan/input-success.png" alt="">
+                </div>
+                <div class="go-accounting">
+                    <a href="javascript:void(0)" class="dynamic-code">确认充值</a>
+                    <a href="javascript:void(0)" ng-click="setStep(1)">选择其他充值方式</a>
+                </div>
+            </div>
+        </div>
     </div>
 </div>