Explorar el Código

【机构】-订单详情页面2

chao hace 4 años
padre
commit
dff157864a

+ 5 - 0
src/main/resources/static/css/base/base.h5.css

@@ -146,6 +146,11 @@
 .cartAlert p em{font-style:normal;color:#e15616;}
 .btn-to-cart{background:#e15616!important;color:#FFF!important;}
 .btn-to-goon{background:#5bb641!important;color:#FFF!important;}
+/* 支付 */
+.payAlert{font-size:3.7vw;}
+.payAlert p,.payAlert ul{margin-bottom:2vw;}
+.payAlert em{font-style:normal;color:#e15616;}
+.payAlert i{font-style:normal;color:#f55c5c;}
 /* 登录弹框 */
 .loginAlert{padding-top:1vw;text-align:center;}
 .loginAlert span{display:block}

+ 5 - 0
src/main/resources/static/css/base/base.pc.css

@@ -226,6 +226,11 @@ header{box-shadow: 0 2px 10px #ebecef;}
 .cartAlert p em{font-style:normal;color:#e15616;}
 .btn-to-cart{background:#e15616!important;color:#FFF!important;}
 .btn-to-goon{background:#5bb641!important;color:#FFF!important;}
+/* 支付 */
+.payAlert{font-size:14px;}
+.payAlert p,.payAlert ul{margin-bottom:10px;}
+.payAlert em{font-style:normal;color:#e15616;}
+.payAlert i{font-style:normal;color:#f55c5c;}
 /*分页*/
 .pageWrap{width:1184px;text-align:center;margin:20px auto 36px}
 .pageWrap a{box-sizing:border-box;display:inline-block;width:40px;height:40px;line-height:40px;border:1px solid #EBECEF;font-size:16px;margin:0 5px;color:#2D3036;background:#fff;border-radius:2px}

+ 1 - 0
src/main/resources/static/css/user-center/dashboard.css

@@ -93,6 +93,7 @@ li{list-style:none}
     .user-header .logo .logo-file{width:26.7vw;height:19.4vw;outline:none;opacity:0;position:absolute;top:0;left:0}
     .user-header .logo .file{position:absolute;top:5vw;left:9vw;width:9vw;height:9vw}
     .user-header .logo .file:before{width:9vw;height:9vw;background-position:-7.5vw -60.3vw}
+    .user-header .logo img{max-width:100%;max-height:100%;display:block;margin:0 auto;}
     .user-header .account{width:64vw;height:19.4vw;box-sizing:border-box;color:#9aa5b5;font-size:3.1vw;line-height:6.4vw;position:relative}
     .user-header .account .name{font-size:3.7vw;color:#22272e}
     .user-header .account em{font-style:normal;color:#e15616}

+ 52 - 6
src/main/resources/static/js/user-center/order/detail.js

@@ -129,31 +129,75 @@ var orderPage = new Vue({
                 })
             })
         },
+        showModelTypePop: function(){
+            CAIMEI.Popup({
+                content: '<div class="payAlert">' +
+                           '<p>您已通过线下转账的方式支付了订单部分款项,剩余款项依然需要使用线下转账方式,给您带来的不便敬请谅解</p>' +
+                           '<p>待付金额:<em>¥'+toFloat(this.orderInfo.pendingPayments)+'</em></p>' +
+                           '<ul><li>开户行:中信银行(深圳泰然支行)</li>' +
+                                '<li>银行卡号:6217 6803 0362 0897</li>' +
+                                '<li>户名:周仁声</li>' +
+                                '<li>订单标识<em>'+this.orderIdentificationId+'</em></li></ul>' +
+                           '<p><i>请在转账备注中填写上述订单标识,方便财务快速审核,提高发货速度</i></p>' +
+                         '</div>',
+                confitmBtnText: '确定',
+                cancelBtnText: '关闭'
+            },function(){
+                // 确定
+                this.hidePaymentConfirm();
+            },function(){
+                // 关闭
+            });
+        },
         hanldPayOrderFn:function(){//支付订单
             var _self = this;
-            OrderApi.OrderPaymentValidation({orderId:_self.orderId},function(response){
-                if(response.code == 0){
-                    var dataCode = response.data.code;
-                    _self.payModelData = response.data;
+            OrderApi.OrderPaymentValidation({orderId:_self.orderId},function(r){
+                if(r.code*1 === 0){
+                    var dataCode = r.data.code;
+                    _self.payModelData = r.data;
                     switch(dataCode){
                         case 1:
                             _self.modelType = 1;
+                            CAIMEI.Popup({
+                                content: '<div class="payAlert">您有采美余额<em>¥'+toFloat(r.data.ableUserMoney)+'</em>暂未使用,是否需要抵扣订单? 抵扣后您只需再支付<em>¥'+toFloat(r.data.pendingPayments)+'</em></div>',
+                                confitmBtnText: '抵扣,继续付款',
+                                cancelBtnText: '不抵扣,继续付款'
+                            },function(){
+                                // 抵扣,继续付款
+                                _self.hanldCancelConfirm(1)
+                            },function(){
+                                // 不抵扣,继续付款
+                                _self.hanldCancelConfirm()
+                            });
                             break;
                         case 2:
                             _self.modelType = 2;
+                            CAIMEI.Popup({
+                                content: '<div class="payAlert">您有采美余额<em>¥'+toFloat(r.data.ableUserMoney)+'</em>暂未使用,是否需要抵扣订单? 抵扣后订单支付完成</div>',
+                                confitmBtnText: '抵扣,继续付款',
+                                cancelBtnText: '不抵扣,继续付款'
+                            },function(){
+                                // 抵扣,继续付款
+                                _self.hanldCancelConfirm(1);
+                            },function(){
+                                // 不抵扣,继续付款
+                                //_self.hanldCancelConfirm();
+                                _self.showModelTypePop();
+                            });
                             break;
                         case -1:
                             CAIMEI.Alert('订单已申请全部退款,无需再付款!', '确定', false);
                             break;
                         default:
-                            if(response.data.onlinePayFlag == '1'){
+                            if(r.data.onlinePayFlag == '1'){
                                 _self.modelType = 3;
+                                _self.showModelTypePop();
                             }else{
                                 window.location.href = '/pay/caimei-paycash.html?type=payfirm&orderID='+_self.orderId;
                             }
                     }
                 }else{
-                    CAIMEI.Alert(response.msg, '确定', false);
+                    CAIMEI.Alert(r.msg, '确定', false);
                 }
             })
         },
@@ -166,6 +210,7 @@ var orderPage = new Vue({
                     } else {
                         if (_self.orderInfo.onlinePayFlag === '1') {
                             _self.modelType = 3;
+                            _self.showModelTypePop();
                         } else {
                             window.location.href = '/pay/caimei-paycash.html?type=payfirm&orderID='+_self.orderId;
                         }
@@ -179,6 +224,7 @@ var orderPage = new Vue({
             var _self = this;
             if(_self.orderInfo.onlinePayFlag == '1'){
                 _self.modelType = 3;
+                _self.showModelTypePop();
             }else{
                 window.location.href = '/pay/caimei-paycash.html?type=payfirm&orderID='+_self.orderId;
             }

+ 36 - 1
src/main/resources/static/js/utils.js

@@ -130,6 +130,41 @@ CAIMEI.Modal = function(content,cancelText,confitmText,callback){
         }
     });
 };
+/*自定义双回调弹窗
+ * @param  params{
+ *      content, 提示文字信息
+ *      confitmBtnText,自定义确认按钮文字
+ *      confirmCallback, 回调函数
+ *      cancelBtnText, 自定义取消按钮文字
+ *      cancelCallback 回调函数
+ * }
+ * @auth charles
+ */
+CAIMEI.Popup = function(params,confirmCallback, cancelCallback){
+    $.confirm({
+        boxWidth: (isPC?'300px':'70%'),
+        title:'提示',
+        content: params.content,
+        closeIcon: true,
+        animation: 'opacity',
+        closeAnimation: 'opacity',
+        useBootstrap: false,
+        animateFromElement: false,
+        buttons: {
+            cancel: {
+                text: params.cancelBtnText,
+                btnClass: 'btn-cancel',
+                action: cancelCallback?cancelCallback:function(){}
+            },
+            confirm:{
+                text: params.confitmBtnText,
+                btnClass: 'btn-confirm',
+                action: confirmCallback?confirmCallback:function(){}
+            }
+        }
+    });
+};
+
 /*单个确定提示弹窗
  * @param content 提示文字信息
  * @param confitmText 自定义按钮文字内容
@@ -265,4 +300,4 @@ CAIMEI.returnedTarget = function(){//对象合并 IE 兼容方法
             return target;
         };
     }
-}
+}

+ 8 - 8
src/main/resources/templates/user-center/order/detail.html

@@ -254,33 +254,33 @@
         </div>
     </div>
     <!--余额可抵扣部分-->
-    <div class="popup" v-if="modelType==1">
+    <!--<div class="popup" v-if="modelType==1">
         <div class="popup-layer bran">
             <div class="popup-title"> <p>提示</p> <i class="popup-close layui-layer-ico"></i></div>
             <div class="popup-content">
-                <p>您有采美余额<span id="partMonery">¥200.00</span>暂未使用,是否需要抵扣订单? 抵扣后您只需再支付<span id="partAmont">¥200.00</span></p>
+                <p>您有采美余额<span id="partMonery">¥{{ableUserMoney | NumFormat}}</span>暂未使用,是否需要抵扣订单? 抵扣后您只需再支付<span id="partAmont">¥{{pendingPayments | NumFormat}}</span></p>
             </div>
             <div class="popup-button">
                 <div class="btn btn-cancel" @click="hanldCancelConfirm">不抵扣,继续付款</div>
                 <div class="btn btn-confim" @click="hanldPaymentConfirm(1)">抵扣,继续付款</div>
             </div>
         </div>
-    </div>
+    </div>-->
     <!--余额可抵扣全部-->
-    <div class="popup" v-if="modelType==2">
+    <!--<div class="popup" v-if="modelType==2">
         <div class="popup-layer bran">
             <div class="popup-title"> <p>提示</p> <i class="popup-close layui-layer-ico"></i></div>
             <div class="popup-content">
-                <p>您有采美余额<span>¥200.00</span>暂未使用,是否需要抵扣订单? 抵扣后订单支付完成</p>
+                <p>您有采美余额<span>¥{{ableUserMoney | NumFormat}}</span>暂未使用,是否需要抵扣订单? 抵扣后订单支付完成</p>
             </div>
             <div class="popup-button">
                 <div class="btn btn-cancel" @click="hanldCancelConfirm">不抵扣,继续付款</div>
                 <div class="btn btn-confim" @click="hanldPaymentConfirm(2)">抵扣</div>
             </div>
         </div>
-    </div>
+    </div>-->
     <!--线下转账提示-->
-    <div class="popup" v-if="modelType==3">
+    <!--<div class="popup" v-if="modelType==3">
         <div class="popup-layer bran">
             <div class="popup-title"> <p>提示</p> <i class="popup-close layui-layer-ico"></i></div>
             <div class="popup-content">
@@ -299,7 +299,7 @@
                 <div class="btn btn-onlinePayConfim" @click="hidePaymentConfirm">确定</div>
             </div>
         </div>
-    </div>
+    </div>-->
 </div>
 
 <!-- 引入底部 -->