第三方充值-充值方式选择

src/views/business/salaryAccount/index.vue

@@ -64,9 +64,9 @@
                                 <div style="width: 90%;">
                                     <el-row>
                                         <el-col :span="12"><el-button style="width:120px;" type="primary"
-                                                @click="balanceRecharge(ele.payAccNo)">余额充值</el-button></el-col>
+                                                @click="ownBalanceRecharge(ele.payAccNo)">余额充值</el-button></el-col>
                                         <el-col :span="12"><el-button style="width:120px;" type="primary"
-                                                @click="serviceChargeRecharge(ele.payAccNo)">服务费充值</el-button></el-col>
+                                                @click="ownServiceChargeRecharge(ele.payAccNo)">服务费充值</el-button></el-col>
                                     </el-row>
                                 </div>
                                 <div style="width: 90%;">
@@ -232,6 +232,32 @@
                 <el-button type="primary" @click="accDetail.panel = false">确 定</el-button>
             </div>
         </el-dialog>
+        <!-- 自有账户充值 -->
+        <el-dialog :title="ownRechargeTitle" :visible.sync="ownAliQRCodeRechargeOpen" width="42%" center>
+            <el-row :gutter="64">
+                <el-col :span="12">
+                    <p style="text-align: center;">通过与账本同主体的企业支付宝进行充值，可在手机端和电脑端充值</p>
+                </el-col>
+                <el-col :span="12">
+                    <p style="text-align: center;">通过银行系统进行打款充值</p>
+                </el-col>
+
+            </el-row>
+            <el-row :gutter="64">
+                <el-col :span="12">
+                    <div class="ownRechargeMain">
+                        <img class="ownRechargeImage" src="@/assets/images/zfb.png" alt="">
+                        <el-button class="ownRechargeButton">支付宝充值</el-button>
+                    </div>
+                </el-col>
+                <el-col :span="12">
+                    <div class="ownRechargeMain">
+                        <img class="ownRechargeImage" src="@/assets/images/xianxia.png" alt="">
+                        <el-button class="ownRechargeButton" @click="offlineRecharge">线下充值</el-button>
+                    </div>
+                </el-col>
+            </el-row>
+        </el-dialog>
     </div>
 </template>
 
@@ -269,7 +295,7 @@ export default {
             thirdParty: [],
             // 去发薪-当前选中的卡号
             cardNo: null,
-            // 充值参数
+            // 充值参数-第三方
             aliQRCodeRechargeOpen: false,
             aliQRCodeRechargeForm: {
                 payeeAccNo: '',
@@ -293,6 +319,13 @@ export default {
                         trigger: 'blur'
                     }
                 ]
+            },
+            // 充值参数-自有
+            ownAliQRCodeRechargeOpen: false,
+            ownRechargeTitle: null,
+            ownRechargeNo: null,
+            ownAliQRCodeRechargeForm: {
+
             }
         }
     },
@@ -307,13 +340,40 @@ export default {
         }
     },
     methods: {
-        // 点击余额充值方法
+        // 选择线下充值方法
+        offlineRecharge() {
+            this.ownAliQRCodeRechargeOpen = false
+            this.$modal.loading('...加载中')
+            getAccAliInfo(card.payAccNo).then(resp => {
+                if (200 === resp.code) {
+                    // this.accDetail.companyName = card.companyName
+                    // this.accDetail.info = resp.data
+                    // this.accDetail.panel = true
+                }
+            }).finally(() => {
+                this.$modal.closeLoading()
+            })
+        },
+        // 点击服务分充值方法-第三方
+        ownServiceChargeRecharge(val) {
+            console.log('执行了', val);
+            this.ownRechargeNo = val
+            this.ownRechargeTitle = '自有服务费充值'
+            this.ownAliQRCodeRechargeOpen = true
+        },
+        // 点击余额充值方法-自有
+        ownBalanceRecharge(val) {
+            this.ownRechargeNo = val
+            this.ownRechargeTitle = '自有余额充值'
+            this.ownAliQRCodeRechargeOpen = true
+        },
+        // 点击余额充值方法-第三方
         balanceRecharge(val) {
             this.aliQRCodeRechargeForm.rechargeType = 1
             this.aliQRCodeRechargeForm.payeeAccNo = val
             this.aliQRCodeRechargeOpen = true
         },
-        // 点击服务费充值方法
+        // 点击服务费充值方法-第三方
         serviceChargeRecharge(val) {
             this.aliQRCodeRechargeForm.rechargeType = 2
             this.aliQRCodeRechargeForm.payeeAccNo = val
@@ -496,5 +556,25 @@ export default {
             }
         }
     }
+
+    // 自有充值选中对话框样式-选择充值方式
+    .ownRechargeMain {
+        height: 160px;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        align-content: center;
+
+        .ownRechargeImage {
+            width: 100px;
+            height: 100px;
+        }
+
+        .ownRechargeButton {
+            width: 32%;
+            border-radius: 16px;
+        }
+    }
 }
 </style>