补缴订单详情和订单详情付款时的bug

src/views/order/bujiaodetail.vue

@@ -1,23 +1,35 @@
 <template>
     <div class="detail-wrap ">
-        <div class="detail social-detail white-box" >
-            <h6 class="d-flex justify-content-between align-items-center pb-2">
-                <label  style=" font-size: 1.2rem;" class="badge m-0 p-0">订单编号：{{data.order_sn}}</label>
+        <div class="p_head">
+            <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/index')">
+            <span>
+                订单详情
+            </span>
+        </div>
+        <div class="detail social-detail white-box" style="color:#333">
+            <h6 class="d-flex justify-content-between align-items-center pb-2" style=" font-size: 1.5rem;">
+                订单编号：
+                <label  style=" font-size: 1.3rem;" class="m-0 p-0">{{data.order_sn}}</label>
             </h6>
             <h6 class="d-flex justify-content-between align-items-center  two-h6" style=" font-size: 1.5rem;">
-                <label class="small">下单时间：{{data.create_timestamp}}</label>
+                下单时间：
+                <label class="small" style=" font-size: 1.3rem;">{{data.create_timestamp}}</label>
             </h6>
             <h6 class="d-flex justify-content-between align-items-center  two-h6" style=" font-size: 1.5rem;">
-                <label class="small">用户姓名：{{data.realname}}</label>
+                用户姓名：
+                <label class="small" style=" font-size: 1.3rem;">{{data.realname}}</label>
             </h6>
             <h6 class="d-flex justify-content-between align-items-center  two-h6" style=" font-size: 1.5rem;">
-                <label class="small">代缴城市：{{data.city_name}}</label>
+                代缴城市：
+                <label class="small" style=" font-size: 1.3rem;">{{data.city_name}}</label>
             </h6>
             <h6 class="d-flex justify-content-between align-items-center  two-h6" style=" font-size: 1.5rem;">
-                <label class="small">社保户别：{{data.social_type}}</label>
+                社保户别：
+                <label class="small" style=" font-size: 1.3rem;">{{data.social_type}}</label>
             </h6>
-            <h6 class="d-flex justify-content-between align-items-center  two-h6" style=" font-size: 1.5rem;">
-                <label class="small">身份证号：{{data.id_card}}</label>
+            <h6 class="d-flex justify-content-between align-items-center  two-h6" style=" margin-bottom: 1rem;font-size: 1.5rem;padding-bottom:1.5rem">
+                身份证号：
+                <label class="small" style=" font-size: 1.3rem;">{{data.id_card}}</label>
             </h6>
         </div>
         <div class="detail social-detail white-box" v-for="item in data.detaillist">
@@ -25,8 +37,8 @@
                 社保（{{item.month}}月份）
                 <label class="p-0 m-0 ">缴费基数：&yen;<span class="badges">{{item.social_basic}}</span></label>
             </h6>
-            <hr>
-            <ul class="list-group list-group-flush pl-4">
+            <!-- <hr> -->
+            <ul class="list-group list-group-flush">
                 <li class="d-flex justify-content-between align-items-center two-li">
                     {{item.pension_num}}
                     <span class="badges"  style=" font-size: 1.3rem;">&yen;{{item.pension}}</span>
@@ -48,19 +60,19 @@
                     <span class="badges"  style=" font-size: 1.3rem;">&yen;{{item.birth}}</span>
                 </li>
             </ul>
-            <p class="subtotal d-flex justify-content-between align-items-center two-h6" style="margin-bottom: 0.6rem">
+            <p class="subtotal d-flex justify-content-between align-items-center two-h6" style="margin-bottom: 1rem;padding-bottom:1.5rem">
                 社保小计
                 <span class="badges"  style=" font-size: 1.3rem;">&yen;{{item.subtotal}}</span>
             </p>
             <div class="social-detail white-box" v-if="item.fund">
-                <h6 class="d-flex justify-content-between align-items-center " style="font-size: 1.4rem;color: #666666;">
+                <h6 class="d-flex justify-content-between align-items-center two-h6" style="font-size: 1.3rem;">
                     公积金
-                    <label class="p-0 m-0 ">缴费基数：&yen;<span class="badges">{{item.fund_basic}}</span></label>
+                    <label class="p-0 m-0 ">缴费基数：&yen;<span class="badges" style=" font-size: 1.3rem;">{{item.fund_basic}}</span></label>
                 </h6>
 
-                <p class="d-flex justify-content-between align-items-center  pb-3" style="margin-bottom: 0.5rem;color: #999999;padding: 0 1.5rem;">
+                <p class="d-flex justify-content-between align-items-center" style="margin-bottom: 1rem;padding-bottom:1.5rem">
                     公积金
-                    <span class="badges">&yen;{{item.fund}}</span>
+                    <span class="badges" style=" font-size: 1.3rem;">&yen;{{item.fund}}</span>
                 </p>
             </div>
         </div>
@@ -86,16 +98,25 @@
 <!--                <label class="p-0 m-0 ">&yen;<span class="badges"  style=" font-size: 1.3rem;">{{data.charge_details.subtotal}}</span></label>-->
 <!--            </h6>-->
             <hr>
-            <h6 class="d-block badges pb-3 text-right"  style=" font-size: 1.3rem;color: #999999;">
+            <h6 class="d-block badges pb-3 text-right"  style=" font-size: 1.3rem;color: #333;">
                 应付总计：&yen;{{data.payment}}
             </h6>
-            <h6 class="d-block badges pb-3 text-right"  style=" font-size: 1.3rem;color: #f7211e;">
-                实付款：&yen;{{data.payment}}
+            <h6 class="d-block badges pb-3 text-right"  style=" font-size: 1.3rem;color: #333;">
+                实付款：<span style="color: #EC2C2C">&yen;{{data.payment}}</span>
             </h6>
         </div>
-        <div class="detail-button">
+        <!-- <div class="detail-button">
             <button class="btn-one" @click="gopay" v-if="!data.isShow">去缴费</button>
             <button class="btn-two" style="" @click="cancel" v-if="!data.isShow">取消订单</button>
+        </div> -->
+        <div class="bottom-twobtn">
+            <button type="button" class="button-1" @click="gopay" v-if="!data.isShow">
+                <img class="button-2-img" src="../../assets/image/payFoot@2x.png" alt="">
+                去缴费
+            </button>
+            <button type="button" class="button-2" @click="cancel" v-if="!data.isShow">
+                取消订单
+            </button>
         </div>
     </div>
 </template>
@@ -172,6 +193,27 @@
 </script>
 
 <style lang="scss" scoped>
+    // 顶部导航
+    .p_head{
+        text-align: center;
+        font-size: 2rem;
+        // font-family: 'PingFang SC';
+        padding-bottom: 1.667rem;
+        padding-top: 1rem;
+        // font-weight: bold;
+        line-height: 1.5rem;
+        background-color: #fff;
+        .leftIcon{
+            position: absolute;
+            left: 1.667rem;
+            top: 1.4rem;
+            width: 0.667rem;
+        }
+        span {
+            vertical-align: middle;
+            color: #333;
+        }
+    }
     .detail-wrap {
         width: 100%;
         font-family: "HiraginoSansGB";
@@ -185,13 +227,19 @@
         margin: 0.5rem 0;
     }
     .two-h6{
-        color: #666666;
+        // color: #666666;
+        color: #333333
+    }
+    // 间距
+    h6 {
+        line-height: 1.5;
     }
     .two-li{
-        color: #999999;
+        // color: #999999;
+        color: #333;
         padding-top: 0.5rem;
         padding-bottom: 0.5rem;
-        padding-right: 1.5rem;
+        // padding-right: 1.5rem;
     }
     .price-text{
 
@@ -216,7 +264,8 @@
         border-bottom: 0;
     }
     .subtotal {
-        padding: .75rem 1.25rem;
+        // padding: .75rem 1.25rem;
+        padding: .75rem 0rem;
     }
     .detail-button{
         width: 100%;
@@ -245,5 +294,31 @@
             margin-bottom: 3rem;
         }
     }
+    // 底部按钮
+    .bottom-twobtn{
+        width: 100%;
+        padding-left: 0 !important;
+        height: 4rem;
+        margin-top: 1.2rem;
+        .button-1{
+            width: 50%;
+            height: 100%;
+            border: none;
+            background: #4FDCA2;
+            color: #ffffff;
+            font-size: 1.5rem;
+            .button-2-img{
+                width: 1.5rem;
+            }
+        }
+        .button-2{
+            width: 50%;
+            height: 100%;
+            border: none;
+            background: #fff;
+            color: #7D7D7D;
+            font-size: 1.5rem;
+        }
+    }
 </style>
 

src/views/order/detail.vue

@@ -114,7 +114,8 @@
 
         public data: any = {
             order_sn: '',
-            isShow: true
+            isShow: true,
+            order_type: ''
         };
 
         async created() {
@@ -129,6 +130,7 @@
             this.data["create_timestamp"] =res.data.create_timestamp;
             this.data.social_type = res.data.social_name
             this.data.city_name = res.data.city_name
+            this.data.order_type = this.$route.params.type
             if(res.data.status == '已付款'){
                 this.data.isShow = true
             }
@@ -144,7 +146,8 @@
           router.replace({
               name: 'opayment',
               params: {
-                  order_sn: res.data.order_sn
+                  order_sn: res.data.order_sn,
+                  type: this.$route.params.type
               }
           });
       }

src/views/order/list.vue

@@ -120,6 +120,7 @@
     import router from "../../router";
     import {MessageBox} from 'element-ui';
     import {Message} from "element-ui";
+import login from "@/store/module/login";
 
     @Component({})
     export default class OrderList extends Vue {
@@ -175,6 +176,7 @@
             let res = await Http.getInstance().savelistOrder({
                 order_sn: data['order_sn']
             });
+            console.log('付款data', data);
             console.log(res)
             if(data['order_type'] == 1){
                 localStorage.setItem('order_paying', JSON.stringify(res.data));
@@ -294,6 +296,7 @@
                         status: data["status"],
                         payment: data["payment"],
                         create_timestamp: data["create_timestamp"],
+                        type: data['order_type']
                     }
                 });
             }else{