油卡手机 充值接口调用

project.config.json

@@ -0,0 +1,72 @@
+{
+  "description": "项目配置文件",
+  "packOptions": {
+    "ignore": []
+  },
+  "setting": {
+    "urlCheck": true,
+    "es6": true,
+    "enhance": false,
+    "postcss": true,
+    "preloadBackgroundData": false,
+    "minified": true,
+    "newFeature": false,
+    "coverView": true,
+    "nodeModules": false,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "scopeDataCheck": false,
+    "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "checkSiteMap": true,
+    "uploadWithSourceMap": true,
+    "compileHotReLoad": false,
+    "useMultiFrameRuntime": false,
+    "useApiHook": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "enableEngineNative": false,
+    "bundle": false,
+    "useIsolateContext": true,
+    "useCompilerModule": true,
+    "userConfirmedUseCompilerModuleSwitch": false,
+    "userConfirmedBundleSwitch": false,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true
+  },
+  "compileType": "miniprogram",
+  "libVersion": "2.15.0",
+  "appid": "wx5c4ed31860a62578",
+  "projectname": "miniprogram-2",
+  "debugOptions": {
+    "hidedInDevtools": []
+  },
+  "scripts": {},
+  "isGameTourist": false,
+  "simulatorType": "wechat",
+  "simulatorPluginLibVersion": {},
+  "condition": {
+    "search": {
+      "list": []
+    },
+    "conversation": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "plugin": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": []
+    }
+  }
+}

src/config/index.ts

@@ -51,6 +51,8 @@ export const http: any = {
     getBannerList:host +  '/dev/banner',
     getPolicy: host + '/dev/policy',
     getDenomination: host + '/dev/refill/goods',
-    getRechargeLists: host + '/dev/refill/order/list'
+    getRechargeLists: host + '/dev/refill/order/list',
+    RechargeOrder: host + '/dev/refill/add',
+    RechargeOrderPay: host + '/dev/refill/pay',
     // getPetrifactionList: host+ 'dev/refill/order/list'
 };

src/extend/Http.ts

@@ -365,4 +365,22 @@ export default class Http {
             data: params,
         });
     }
+
+    // 油卡 手机充值
+    async RechargeOrder(params: any = null) {
+        return this.httpClient.request({
+            url: http.RechargeOrder,
+            method: 'GET',
+            data: params,
+        });
+    }
+
+    // 订单支付 
+    async RechargeOrderPay(params: any = null) {
+        return this.httpClient.request({
+            url: http.RechargeOrderPay,
+            method: 'GET',
+            data: params,
+        });
+    }
 }

src/views/index/oilRecharge.vue

@@ -18,7 +18,11 @@
             </span>
             <div class="cardContent">
               <div class="selectCard">选择油卡</div>
-              <el-input v-model="petrifactionCard" placeholder="请输入以1开头的19位中石化加油卡号" />
+              <el-form :model="petrifaction" :rules="petrifactionRule" ref="petrifaction">
+                <el-form-item prop="petrifactionCard">
+                 <el-input v-model="petrifaction.petrifactionCard" placeholder="请输入以1开头的19位中石化加油卡号" />
+                </el-form-item>
+              </el-form>
               <div class="alert">
                 <img src="@/assets/image/cardAlert@2x.png" alt="">
                 <span>请仔细核对卡号，避免造成不必要的损失。</span>
@@ -32,7 +36,11 @@
           </span>
           <div class="cardContent">
             <div class="selectCard">选择油卡</div>
-            <el-input v-model="petrifactionCard" placeholder="请输入以9开头的16位中石油加油卡号" />
+            <el-form :model="petroleum" :rules="petroleumRule" ref="petroleum">
+              <el-form-item prop="petroleumCard">
+                <el-input v-model="petroleum.petroleumCard" placeholder="请输入以9开头的16位中石油加油卡号" />
+              </el-form-item>
+            </el-form>
             <div class="alert">
               <img src="@/assets/image/cardAlert@2x.png" alt="">
               <span>请仔细核对卡号，避免造成不必要的损失。</span>
@@ -76,15 +84,48 @@
 
 <script>
 import Http from '@/extend/Http';
+import {Message} from "element-ui";
 export default {
   name: 'oilRecharge',
   data() {
+    var validPetrifaction = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error('油卡不能为空'));
+      } else if (!/^1\d{18}$/.test(value)) {
+        return callback(new Error('请输入合法油卡'));
+      } else {
+        callback();
+      }
+    };
+    var validPetroleum = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error('油卡不能为空'));
+      } else if (!/^9\d{15}$/.test(value)) {
+        return callback(new Error('请输入合法油卡'));
+      } else {
+        callback();
+      }
+    };
     return {
       activeName: 'petrifaction',
       // 石化
-      petrifactionCard: '',
+      petrifaction: {
+        petrifactionCard: '',
+      },
+      petrifactionRule: {
+        petrifactionCard: [
+          { validator: validPetrifaction, trigger: 'blur' }
+        ],
+      },
       // 石油
-      petrifactionCard: '',
+      petroleum: {
+        petroleumCard: ''
+      },
+      petroleumRule: {
+        petroleumCard: [
+          { validator: validPetroleum, trigger: 'blur' }
+        ],
+      },
       // 充值面额
       oil_amount: [],
       // 当前面额
@@ -111,7 +152,7 @@ export default {
     // 获取充值面额
     async getDenomination() {
       let res = await Http.getInstance().getDenomination();
-      console.log('油卡面额', res);
+      // console.log('油卡面额', res);
       if (res && res.msg == '请求成功') {
         this.oil_amount = res.data.oil_amount
       }
@@ -122,7 +163,57 @@ export default {
       this.curAmount = item
     },
     // 充值按钮
-    recharfeBtn() {}
+    recharfeBtn() {
+      if (!this.curAmount) {
+        Message({
+          message: '请选择充值金额', type: "warning"
+        });
+        return
+      }
+      if (this.activeName === 'petrifaction') {
+        this.$refs.petrifaction.validate(async valid => {
+          if (valid) {
+            let res = await Http.getInstance().RechargeOrder({
+              cardno: this.petrifaction.petrifactionCard,
+              amount: this.curAmount
+            });
+            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'
+                }
+              });
+            }
+          }
+        })
+      } else if (this.activeName === 'petroleum') {
+        this.$refs.petroleum.validate(async valid => {
+          if (valid) {
+            let res = await Http.getInstance().RechargeOrder({
+              cardno: this.petroleum.petroleumCard,
+              amount: this.curAmount
+            });
+            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'
+                }
+              });
+            }
+          }
+        })
+      }
+    }
   }
 }
 </script>
@@ -213,6 +304,9 @@ export default {
     .selectCard {
       margin-bottom: 1.667rem;
     }
+    /deep/.el-form-item {
+      margin-bottom: 10px;
+    }
     /deep/.el-input__inner {
       border: 0;
       border-bottom: 1px solid #BFBFBF;

src/views/index/phoneRecharge.vue

@@ -12,7 +12,11 @@
       <!-- 选择手机卡 -->
       <div class="cardContent">
         <div class="selectCard">选择手机号</div>
-        <el-input v-model="phoneCard" placeholder="请输入12位手机号码" />
+        <el-form :model="phoneForm" :rules="phoneFormRule" ref="phoneForm">
+          <el-form-item prop="phoneCard">
+            <el-input v-model="phoneForm.phoneCard" placeholder="请输入12位手机号码" />
+          </el-form-item>
+        </el-form>
         <div class="alert">
           <img src="@/assets/image/cardAlert@2x.png" alt="">
           <span>请仔细核对手机号，避免造成不必要的损失。</span>
@@ -55,12 +59,29 @@
 
 <script>
 import Http from '@/extend/Http';
+import {Message} from "element-ui";
 export default {
   name: 'phoneRecharge',
   data() {
+    var validPhone = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error('手机号不能为空'));
+      } else if (!/^1[3-9]\d{9}$/.test(value)) {
+        return callback(new Error('请输入合法手机号'));
+      } else {
+        callback();
+      }
+    };
     return {
       // 手机号
-      phoneCard: '',
+      phoneForm: {
+        phoneCard: '',
+      },
+      phoneFormRule: {
+        phoneCard: [
+          { validator: validPhone, trigger: 'blur' }
+        ]
+      },
       // 充值面额
       phone_amount: [],
       curAmountIdx: null,
@@ -98,7 +119,34 @@ export default {
       this.curAmount = item
     },
     // 充值按钮
-    recharfeBtn() {}
+    recharfeBtn() {
+      if (!this.curAmount) {
+        Message({
+          message: '请选择充值金额', type: "warning"
+        });
+        return
+      }
+      this.$refs.phoneForm.validate(async valid => {
+        if (valid) {
+          let res = await Http.getInstance().RechargeOrder({
+            cardno: this.phoneForm.phoneCard,
+            amount: this.curAmount
+          });
+          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'
+              }
+            });
+          }
+        }
+      })
+    }
   }
 }
 </script>

src/views/order/payment.ts

@@ -24,7 +24,8 @@ export default class UserIndex extends Vue {
         zhifupay:true,
         isShowA:true,
         isShowB: false,
-        isShowC: true
+        isShowC: true,
+        recharfe: true
     };
     private closeTime: string = '0';
     private timer: number = 0;
@@ -55,6 +56,9 @@ export default class UserIndex extends Vue {
             this.data.totalCharge = info.total_charge;
             this.data.orderSn = info.order_sn;
         }
+        if (this.$route.params.recharfe) {
+            this.data.recharfe = false
+        }
     }
     hideModel() {
         this.data.model = false;
@@ -155,9 +159,16 @@ export default class UserIndex extends Vue {
 
     async weixinpayment() {
         let openid = localStorage.getItem('openid');
-        let res = await Http.getInstance().getWeixin({
-            order_sn: this.data.orderSn, platform: 'weixin', pay: 'wxpay', openid: openid
-        });
+        let res
+        if (this.data.recharfe) {
+            res = await Http.getInstance().getWeixin({
+                order_sn: this.data.orderSn, platform: 'weixin', pay: 'wxpay', openid: openid
+            });
+        } else {
+            res = await Http.getInstance().RechargeOrderPay({
+                order_sn: this.data.orderSn, openid: openid
+            });
+        }
         res.data.jsApiList = ['chooseWXPay'];
         console.log(res.data)
         //wx.config(res.data);

src/views/order/payment.vue

@@ -12,7 +12,7 @@
             </div>
         </div>
         <div class="payment mt-4">
-            <h6 class="zhifu-way">请选择支付方式</h6>
+            <h6 class="zhifu-way" v-if="data.recharfe">请选择支付方式</h6>
             <ul class="list-group list-group-flush"  v-if="data.zhifupay">
                 <li class="list-group-item d-flex align-items-center" @click="weixin" >
                    <div>
@@ -23,7 +23,7 @@
                         <img class="pay-img-xiao" src="../../assets/image/pay-cost_11.png"  v-if="!data.isShowA" alt="">
                     </div>
                 </li>
-                <li class="list-group-item d-flex align-items-center"  @click="zhifubao">
+                <li class="list-group-item d-flex align-items-center"  @click="zhifubao" v-if="data.recharfe">
                    <div>
                        <img class="pay-img-da" src="../../assets/image/ico-13.png" alt="">
                    </div>