充值订单去付款

src/views/index/oilRecharge.vue

@@ -387,7 +387,8 @@ export default {
     }
   }
   .explainHead {
-    padding: 0 4.667rem;
+    // padding: 0 4.667rem;
+    text-align: center;
     margin-bottom: 2.083rem;
     i {
       display: inline-block;
@@ -416,7 +417,7 @@ export default {
       color: #F58520;
     }
   }
-  @media screen and (max-width: 375px) {
+  @media screen and (max-width: 411px) {
     .cardContent .alert {
       font-size: 1.1rem;
     }
@@ -424,31 +425,53 @@ export default {
       margin-right: 1.3rem;
     }
     .explainHead i {
-      width: 5rem;
+      width: 4rem;
     }
   }
   @media screen and (max-width: 360px) {
     .cardContent .alert {
-      font-size: 1.1rem;
+      font-size: 1rem;
+      padding-right: 0;
     }
     .denominationCard {
-      margin-right: 1.3rem;
+      margin-right: 1rem;
+      width: 30%;
+      i {
+        -webkit-transform: scale(0.9);
+      }
     }
     .explainHead i {
       width: 4rem;
     }
   }
-  @media screen and (max-width: 320px) {
+  @media screen and (max-width: 350px) {
+    .denominationCard {
+      margin-right: 0.4rem;
+      width: 31.8%;
+    }
+    .explainHead i {
+      width: 3rem;
+    }
+  }
+  @media screen and (max-width: 334px) {
+    .denominationCard {
+      width: 32%;
+    }
+  }
+  @media screen and (max-width: 333px) {
     .cardContent .alert {
       font-size: 1rem;
     }
     .denominationCard {
-      width: 41.3%;
+      width: 34.5%;
       margin-right: 1.3rem;
     }
     .explainHead i {
       width: 2.5rem;
     }
+    /deep/.el-tabs--border-card > .el-tabs__content {
+      height: 14rem;
+    }
     /deep/#tab-petrifaction,
     /deep/#tab-petroleum {
       padding-left: 2rem;

src/views/index/phoneRecharge.vue

@@ -14,7 +14,7 @@
         <div class="selectCard">选择手机号</div>
         <el-form :model="phoneForm" :rules="phoneFormRule" ref="phoneForm">
           <el-form-item prop="phoneCard">
-            <el-input v-model="phoneForm.phoneCard" placeholder="请输入12位手机号码" />
+            <el-input v-model="phoneForm.phoneCard" placeholder="请输入11位手机号码" />
           </el-form-item>
         </el-form>
         <div class="alert">
@@ -184,7 +184,7 @@ export default {
     padding: 0 1.667rem 7.5rem;
   }
   .cardContent {
-    height: 13rem;
+    height: 14rem;
     background-color: #fff;
     padding: 15px 20px;
     font-size: 1.167rem; 
@@ -201,6 +201,9 @@ export default {
       // margin-bottom: 1rem;
       padding-left: 0;
     }
+    /deep/.el-form-item {
+      margin-bottom: 10px;
+    }
     .alert {
       font-size: 1.2rem;
       color: #F58520;
@@ -275,7 +278,8 @@ export default {
     }
   }
   .explainHead {
-    padding: 0 4.667rem;
+    // padding: 0 4.667rem;
+    text-align: center;
     margin-bottom: 2.083rem;
     i {
       display: inline-block;
@@ -301,7 +305,7 @@ export default {
     color: #666666;
     margin-bottom: 1.667rem;
   }
-  @media screen and (max-width: 375px) {
+  @media screen and (max-width: 411px) {
     .cardContent .alert {
       font-size: 1.1rem;
     }
@@ -309,31 +313,53 @@ export default {
       margin-right: 1.3rem;
     }
     .explainHead i {
-      width: 5rem;
+      width: 4rem;
     }
   }
   @media screen and (max-width: 360px) {
     .cardContent .alert {
-      font-size: 1.1rem;
+      font-size: 1rem;
+      padding-right: 0;
     }
     .denominationCard {
-      margin-right: 1.3rem;
+      margin-right: 1rem;
+      width: 30%;
+      i {
+        -webkit-transform: scale(0.9);
+      }
     }
     .explainHead i {
       width: 4rem;
     }
   }
-  @media screen and (max-width: 320px) {
+  @media screen and (max-width: 350px) {
+    .denominationCard {
+      margin-right: 0.4rem;
+      width: 31.8%;
+    }
+    .explainHead i {
+      width: 3rem;
+    }
+  }
+  @media screen and (max-width: 335px) {
+    .denominationCard {
+      width: 32%;
+    }
+  }
+  @media screen and (max-width: 333px) {
     .cardContent .alert {
       font-size: 1rem;
     }
     .denominationCard {
-      width: 41.3%;
+      width: 34.5%;
       margin-right: 1.3rem;
     }
     .explainHead i {
       width: 2.5rem;
     }
+    /deep/.el-tabs--border-card > .el-tabs__content {
+      height: 14rem;
+    }
     /deep/#tab-petrifaction,
     /deep/#tab-petroleum {
       padding-left: 2rem;
@@ -342,9 +368,6 @@ export default {
     .cardContent .el-input__inner {
       font-size: 1rem;
     }
-    .denominationCard:nth-child(2n) {
-      margin-right: 0;
-    }
     .denominationCard:nth-child(3n) {
       margin-right: 1.667rem;
     }

src/views/recharge/list.vue

@@ -192,10 +192,10 @@ export default {
       console.log('充值订单', res);
       if(res.data.length == 0){
         this.moreShow = false
-        this.data.cueShow = true
-        this.data.cueShow2 = true
-        this.data.cueShow3 = true
-        this.data.cueShow4 = true
+        this.cueShow = true
+        this.cueShow2 = true
+        this.cueShow3 = true
+        this.cueShow4 = true
       }else{
         this.list = res.data
         this.hasMore = res.data.length >9 ;
@@ -339,6 +339,9 @@ export default {
                 message: '订单已取消', duration: 2000, type: "success"
             });
             this.getRechargeLists()
+            // setTimeout(function(){
+            //   location.reload()
+            // },1000)
         }
       }).catch(() => {
       });
@@ -362,22 +365,14 @@ export default {
     // 付款
     async gopay(event) {
       let data = this.list[event.target.getAttribute("data-key")];
-      let res = await Http.getInstance().RechargeOrder({
-        cardno: data.card_no,
-        amount: data.refill_amount
+      this.$router.replace({
+        name: 'opayment',
+        params: {
+          order_sn: data.refill_order_sn,
+          type: '1',
+          recharfe: 'false'
+        }
       });
-      console.log('详情充值', res);
-      if (res && res.msg == '请求成功') {
-        localStorage.setItem('order_paying', JSON.stringify(res.data));
-        this.$router.replace({
-          name: 'opayment',
-          params: {
-            order_sn: res.data.order_sn,
-            type: '1',
-            recharfe: 'false'
-          }
-        });
-      }
     }
   }
 }