添加银行卡对接完成

src/api/modules/mer_admin.js

@@ -147,4 +147,13 @@ export const mer_admin = {
   bankCardAdd: (data) => {
     return $http.post(`/merchant-api/bank/com-create`, data);
   },
+  //获取银行卡详情
+  bankCardDetail: (id) => {
+    return $http.request({
+      method: "get",
+      url: "/merchant-api/bank/detail",
+      params: { id },
+    });
+  },
+
 };

src/router/full-routers.js

@@ -88,7 +88,7 @@ export default {
       url: "bank-card/index",
       perms: "",
       type: 0,
-      elIcon: "el-icon-menu",
+      elIcon: "el-icon-picture-outline",
       orderNum: 0,
       open: null,
       list: [],

src/views/modules/bank-card/index.vue

@@ -12,10 +12,11 @@
       <template slot="tableTop">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
           <el-form-item label="银行卡状态：">
-            <el-select v-model="formInline.region" placeholder="请选择">
+            <el-select v-model="formInline.status" placeholder="请选择">
-              <el-option label="审核中" value="shanghai"></el-option>
+              <el-option label="全部" value=""></el-option>
-              <el-option label="未通过" value="beijing"></el-option>
+              <el-option label="审核中" value="0"></el-option>
-              <el-option label="已通过" value="beijing"></el-option>
+              <el-option label="未通过" value="1"></el-option>
+              <el-option label="已通过" value="2"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item>
@@ -43,19 +44,21 @@
       @queryList="$refs.oTable.reload()"
       ref="addOrUpdate"
     ></add-or-update>
+    <!-- 查看详情 -->
+    <viewDetails ref="viewDetails"></viewDetails>
   </div>
 </template>
 
 <script>
 import AddOrUpdate from "./popup/add-or-update.vue";
+import viewDetails from "./popup/view-details.vue";
 export default {
-    components: { AddOrUpdate,},
+  components: { AddOrUpdate, viewDetails },
   data() {
     return {
       dataList: [],
       formInline: {
-        user: "",
+        status: "",
-        region: "",
       },
       tableProp: {
         "auto-resize": true,
@@ -103,6 +106,7 @@ export default {
           linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
             ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
             : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
+          status: this.formInline.status,
         })
         .then((res) => {
           console.log(res);
@@ -124,17 +128,17 @@ export default {
         {
           title: "持卡人",
           align: "center",
-          field: "cardId",
+          field: "cardName",
         },
         {
-          title: "证件号",
+          title: "银行卡号",
-          align: "certId",
+          align: "center",
-          field: "minSalePrice",
+          field: "cardId",
         },
         {
           title: "手机号",
           align: "center",
-          field: "legalMp",
+          field: "telNo",
         },
         {
           title: "企业名称",
@@ -145,6 +149,16 @@ export default {
           title: "状态",
           align: "center",
           field: "status",
+          type: "jsx",
+          render: ({ row }) => {
+            if (row.status == 0) {
+              return <span>审核中</span>;
+            } else if (row.status == 1) {
+              return <span>未通过</span>;
+            } else if (row.status == 2) {
+              return <span>已通过</span>;
+            }
+          },
         },
         {
           title: "操作",
@@ -152,29 +166,14 @@ export default {
           type: "jsx",
           align: "center",
           width: "140px",
-          render: ({ row }) => {
+          render: (row) => {
             let edit = () => {
-              this.$refs.addOrUpdate.toggle(row).update();
+              this.$refs.viewDetails.toggle(row).update();
-            };
-            let priceAdjustment = () => {
-              console.log(row);
-              this.$refs.AddPrice.toggle(row).update();
-            };
-            let changeInventory = () => {
-              this.$refs.addStock.toggle(row).update();
-            };
-            let setDiscounts = () => {
-              this.$refs.AddDiscount.toggle(row).update();
             };
             return (
               <div>
-                <el-button
+                <el-button size="mini" type="primary" onClick={edit}>
-                  size="mini"
+                  详情
-                  disabled={row.status != "DOWN"}
-                  type="primary"
-                  onClick={edit}
-                >
-                  编辑
                 </el-button>
               </div>
             );

src/views/modules/bank-card/popup/add-or-update.vue

@@ -9,11 +9,12 @@
     >
       <template slot="dialog__content">
         <el-form :model="modalData" ref="modalForm">
+          <el-row v-show="process == 1">
             <el-row>
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="是否需冷藏"
+                  label="银行类型："
                   prop="bankType"
                 >
                   <el-select
@@ -41,7 +42,7 @@
                   <el-input
                     style="width: 300px"
                     v-model="modalData.name"
-                  placeholder="请输入企业名称"
+                    placeholder="请输入企业名称："
                   >
                   </el-input>
                 </el-form-item>
@@ -49,8 +50,22 @@
             </el-row>
             <el-row>
               <el-col :span="12">
-              <el-form-item label-width="150px" label="省份" prop="prov">
+                <el-form-item label-width="150px" label="省份：" prop="prov">
-                <el-cascader
+                  <el-select
+                    style="width: 300px"
+                    @change="handleChange"
+                    v-model="modalData.prov"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in this.$api.mer_admin.getCityOptions()"
+                      :key="item.name"
+                      :label="item.name"
+                      :value="item.name"
+                    >
+                    </el-option>
+                  </el-select>
+                  <!-- <el-cascader
                     v-model="productPlace"
                     style="width: 300px"
                     :options="this.$api.mer_admin.getCityOptions()"
@@ -61,11 +76,11 @@
                       label: 'name',
                       children: 'children',
                     }"
-                ></el-cascader>
+                  ></el-cascader> -->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-              <el-form-item label-width="150px" label="地区" prop="cas">
+                <el-form-item label-width="150px" label="地级市：" prop="cas">
                   <el-input
                     style="width: 300px"
                     v-model="modalData.area"
@@ -77,7 +92,11 @@
             </el-row>
             <el-row>
               <el-col :span="12">
-              <el-form-item label-width="150px" label="社会信用码" prop="prov">
+                <el-form-item
+                  label-width="150px"
+                  label="社会信用码："
+                  prop="prov"
+                >
                   <el-input
                     style="width: 300px"
                     v-model="modalData.socialCreditCode"
@@ -89,10 +108,11 @@
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="社会信用码有效期"
+                  label="社会信用码有效期："
                   prop="socialCreditCodeExpires"
                 >
                   <el-date-picker
+                    value-format="yyyy-MM-dd"
                     style="width: 300px"
                     v-model="modalData.socialCreditCodeExpires"
                     type="date"
@@ -106,7 +126,7 @@
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="经营范围"
+                  label="经营范围："
                   prop="businessScope"
                 >
                   <el-input
@@ -120,7 +140,7 @@
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="法人姓名"
+                  label="法人姓名："
                   prop="legalPerson"
                 >
                   <el-input
@@ -136,7 +156,7 @@
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="	法人身份证号码"
+                  label="	法人身份证号码："
                   prop="legalCertId"
                 >
                   <el-input
@@ -150,10 +170,11 @@
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="法人身份证有效期"
+                  label="法人身份证有效期："
                   prop="legalCertIdExpires"
                 >
                   <el-date-picker
+                    value-format="yyyy-MM-dd"
                     style="width: 300px"
                     v-model="modalData.legalCertIdExpires"
                     type="date"
@@ -167,7 +188,7 @@
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="法人手机号"
+                  label="法人手机号："
                   prop="legalMp"
                 >
                   <el-input
@@ -179,7 +200,11 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-              <el-form-item label-width="150px" label="企业地址" prop="address">
+                <el-form-item
+                  label-width="150px"
+                  label="企业地址："
+                  prop="address"
+                >
                   <el-input
                     style="width: 300px"
                     v-model="modalData.address"
@@ -193,7 +218,7 @@
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="银行代码"
+                  label="银行代码："
                   prop="bankCode"
                 >
                   <el-input
@@ -205,7 +230,11 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-              <el-form-item label-width="150px" label="银行卡号" prop="cardNo">
+                <el-form-item
+                  label-width="150px"
+                  label="银行卡号："
+                  prop="cardNo"
+                >
                   <el-input
                     style="width: 300px"
                     v-model="modalData.cardNo"
@@ -219,7 +248,7 @@
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="银行卡对应户名"
+                  label="银行卡对应户名："
                   prop="cardName"
                 >
                   <el-input
@@ -233,7 +262,7 @@
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="银行卡类型"
+                  label="银行卡类型："
                   prop="bankAcctType"
                 >
                   <el-select
@@ -258,7 +287,7 @@
               <el-col :span="24">
                 <el-form-item
                   label-width="150px"
-                label="营业执照号"
+                  label="营业执照号："
                   prop="licenseNumber"
                 >
                   <el-input
@@ -270,11 +299,13 @@
                 </el-form-item>
               </el-col>
             </el-row>
+          </el-row>
+          <el-row v-show="process == 2">
             <el-row>
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="营业执照图片"
+                  label="营业执照图片："
                   prop="licensePicture"
                 >
                   <el-upload
@@ -283,7 +314,7 @@
                     :on-success="handleAvatarSuccess"
                     :file-list="fileList"
                     list-type="picture"
-                  :headers="{ token: 'Bearer' + this.$cookie.get('token') }"
+                    :headers="{ token: this.$cookie.get('token') }"
                   >
                     <el-button size="small" type="primary">点击上传</el-button>
                   </el-upload>
@@ -292,12 +323,99 @@
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                label="法人身份证正面国徽"
+                  label="法人身份证正面国徽："
                   prop="bankAcctType"
                 >
+                  <el-upload
+                    class="upload-demo"
+                    :action="this.$api.mer_admin.uploadFile()"
+                    :on-success="idCardFrontImg"
+                    :file-list="fileList"
+                    list-type="picture"
+                    :headers="{ token: this.$cookie.get('token') }"
+                  >
+                    <el-button size="small" type="primary">点击上传</el-button>
+                  </el-upload>
                 </el-form-item>
               </el-col>
             </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="法人身份证背面人像："
+                  prop="licensePicture"
+                >
+                  <el-upload
+                    class="upload-demo"
+                    :action="this.$api.mer_admin.uploadFile()"
+                    :on-success="idCardBackImg"
+                    :file-list="fileList"
+                    list-type="picture"
+                    :headers="{ token: this.$cookie.get('token') }"
+                  >
+                    <el-button size="small" type="primary">点击上传</el-button>
+                  </el-upload>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="开户银行许可证照："
+                  prop="bankAcctType"
+                >
+                  <el-upload
+                    class="upload-demo"
+                    :action="this.$api.mer_admin.uploadFile()"
+                    :on-success="bankLicenseImg"
+                    :file-list="fileList"
+                    list-type="picture"
+                    :headers="{ token: this.$cookie.get('token') }"
+                  >
+                    <el-button size="small" type="primary">点击上传</el-button>
+                  </el-upload>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="手持身份证正面国徽(选传)："
+                  prop="licensePicture"
+                >
+                  <el-upload
+                    class="upload-demo"
+                    :action="this.$api.mer_admin.uploadFile()"
+                    :on-success="handIdCardFrontImg"
+                    :file-list="fileList"
+                    list-type="picture"
+                    :headers="{ token: this.$cookie.get('token') }"
+                  >
+                    <el-button size="small" type="primary">点击上传</el-button>
+                  </el-upload>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="手持身份证背面人像(选传)："
+                  prop="bankAcctType"
+                >
+                  <el-upload
+                    class="upload-demo"
+                    :action="this.$api.mer_admin.uploadFile()"
+                    :on-success="handIdCardBackImg"
+                    :file-list="fileList"
+                    list-type="picture"
+                    :headers="{ token: this.$cookie.get('token') }"
+                  >
+                    <el-button size="small" type="primary">点击上传</el-button>
+                  </el-upload>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-row>
         </el-form>
       </template>
     </obj-modal>
@@ -315,13 +433,14 @@ export default {
       modalConfig: {
         title: "添加银行卡",
         show: false,
-        width: "80%",
+        width: "1000px",
       },
       modalData: {},
       value1: [],
       ProductData: {},
       productPlace: "", //地区
       fileList: [],
+      process: 1,
     };
   },
   methods: {
@@ -331,7 +450,6 @@ export default {
         this.modalConfig.show = true;
       } else {
         this.modalConfig.show = false;
-        this.$refs.modal.resetFields();
       }
       if (e) {
         this.init(cloneDeep(e));
@@ -339,6 +457,9 @@ export default {
       return {
         add: () => {
           this.modalConfig.title = "添加银行卡";
+          this.process = 1;
+          this.productPlace = "";
+          this.fileList = [];
           this.$nextTick(() => {
             this.modalData = {
               linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
@@ -380,10 +501,31 @@ export default {
     init(row) {},
     handleChange(e) {
       console.log(e);
-      this.modalData.prov = e.join("-");
+      // this.modalData.prov = e.join("-");
     },
     handleAvatarSuccess(res) {
       console.log(res);
+      this.modalData.licensePicture = res.data;
+    },
+    idCardFrontImg(res) {
+      console.log(res);
+      this.modalData.idCardFront = res.data;
+    },
+    idCardBackImg(res) {
+      console.log(res);
+      this.modalData.idCardBack = res.data;
+    },
+    bankLicenseImg(res) {
+      console.log(res);
+      this.modalData.bankLicense = res.data;
+    },
+    handIdCardFrontImg(res) {
+      console.log(res);
+      this.modalData.handIdCardFront = res.data;
+    },
+    handIdCardBackImg(res) {
+      console.log(res);
+      this.modalData.handIdCardBack = res.data;
     },
   },
   computed: {
@@ -396,42 +538,28 @@ export default {
           },
         },
         {
-          label: this.isAdd ? "确认添加" : "确认",
+          label: "上一步",
           type: "primary",
-          loading: this.isLoading,
+          disabled: () => this.process == 1,
-          submit: true,
           handle: () => {
-            let data = {
+            console.log(this.modalData);
-              ...this.ProductData,
+            this.process = 1;
-              ruleObject: {
+          },
-                discount: this.modalData.discount,
-                limitCount: this.modalData.limitCount,
         },
-              startTime: this.modalData.DiscountTime[0],
-              endTime: this.modalData.DiscountTime[1],
-            };
-            this.$confirm(
-              `此操作将 商品折扣=${this.modalData.discount}折 限购数 = ${this.modalData.limitCount}, 是否确认保存此折扣?`,
-              "提示",
         {
-                confirmButtonText: "确定",
+          label: this.process == 1 ? "下一步" : "确认添加",
-                cancelButtonText: "取消",
+          type: "primary",
-                type: "warning",
+          handle: () => {
-                center: true,
+            if (this.process == 1) {
-              }
+              this.process = 2;
-            )
+            } else {
-              .then(() => {
+              console.log(this.modalData);
-                this.$api.mer_admin.setDiscounts(data).then((res) => {
+              this.$api.mer_admin.bankCardAdd(this.modalData).then((res) => {
-                  this.toggle();
+                console.log(res);
                 this.$emit("queryList");
+                this.toggle();
               });
-              })
+            }
-              .catch(() => {
-                this.$message({
-                  type: "info",
-                  message: "已取消",
-                });
-              });
           },
         },
       ];

src/views/modules/bank-card/popup/view-details.vue

@@ -0,0 +1,571 @@
+<template>
+  <div>
+    <obj-modal
+      ref="modal"
+      labelWidth="150px"
+      :modalConfig="modalConfig"
+      :modalData="modalData"
+      :modalHandles="modalHandles"
+    >
+      <template slot="dialog__content">
+        <el-form :model="modalData" ref="modalForm">
+          <el-row v-show="process == 1">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="银行类型："
+                  prop="bankType"
+                >
+                  <el-select
+                    disabled
+                    style="width: 300px"
+                    v-model="modalData.bankType"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in [
+                        { label: '摊主银行卡', value: 1 },
+                        { label: '代理银行卡', value: 2 },
+                        { label: '专员银行卡', value: 3 },
+                        { label: '分销银行卡', value: 4 },
+                        { label: '用户银行卡', value: 5 },
+                      ]"
+                      :label="item.label"
+                      :value="item.value"
+                      :key="item.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label-width="150px" label="企业名称" prop="cas">
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.name"
+                    placeholder="请输入企业名称："
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label-width="150px" label="省份：" prop="prov">
+                  <el-select
+                    disabled
+                    style="width: 300px"
+                    @change="handleChange"
+                    v-model="modalData.prov"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in this.$api.mer_admin.getCityOptions()"
+                      :key="item.name"
+                      :label="item.name"
+                      :value="item.name"
+                    >
+                    </el-option>
+                  </el-select>
+                  <!-- <el-cascader
+                    v-model="productPlace"
+                    style="width: 300px"
+                    :options="this.$api.mer_admin.getCityOptions()"
+                    @change="handleChange"
+                    clearable
+                    :props="{
+                      value: 'name',
+                      label: 'name',
+                      children: 'children',
+                    }"
+                  ></el-cascader> -->
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label-width="150px" label="地级市：" prop="cas">
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.area"
+                    placeholder="请输入地区"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="社会信用码："
+                  prop="prov"
+                >
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.socialCreditCode"
+                    placeholder="请输入社会信用码"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="社会信用码有效期："
+                  prop="socialCreditCodeExpires"
+                >
+                  <el-date-picker
+                    disabled
+                    value-format="yyyy-MM-dd"
+                    style="width: 300px"
+                    v-model="modalData.socialCreditCodeExpires"
+                    type="date"
+                    placeholder="选择日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="经营范围："
+                  prop="businessScope"
+                >
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.businessScope"
+                    placeholder="请输入经营范围"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="法人姓名："
+                  prop="legalPerson"
+                >
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.legalPerson"
+                    placeholder="请输入法人姓名"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="	法人身份证号码："
+                  prop="legalCertId"
+                >
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.legalCertId"
+                    placeholder="请输入法人身份证号码"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="法人身份证有效期："
+                  prop="legalCertIdExpires"
+                >
+                  <el-date-picker
+                    disabled
+                    value-format="yyyy-MM-dd"
+                    style="width: 300px"
+                    v-model="modalData.legalCertIdExpires"
+                    type="date"
+                    placeholder="选择日期"
+                  >
+                  </el-date-picker>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="法人手机号："
+                  prop="legalMp"
+                >
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.legalMp"
+                    placeholder="请输入法人手机号"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="企业地址："
+                  prop="address"
+                >
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.address"
+                    placeholder="请输入企业地址"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="银行代码："
+                  prop="bankCode"
+                >
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.bankCode"
+                    placeholder="请输入银行代码"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="银行卡号："
+                  prop="cardNo"
+                >
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.cardNo"
+                    placeholder="请输入银行卡号"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="银行卡对应户名："
+                  prop="cardName"
+                >
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.cardName"
+                    placeholder="请输入银行卡对应户名"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="银行卡类型："
+                  prop="bankAcctType"
+                >
+                  <el-select
+                    disabled
+                    style="width: 300px"
+                    v-model="modalData.bankAcctType"
+                    placeholder="请输入银行卡类型"
+                  >
+                    <el-option
+                      v-for="item in [
+                        { label: '公账', value: 1 },
+                        { label: '私账', value: 2 },
+                      ]"
+                      :label="item.label"
+                      :value="item.value"
+                      :key="item.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                <el-form-item
+                  label-width="150px"
+                  label="营业执照号："
+                  prop="licenseNumber"
+                >
+                  <el-input
+                    readonly
+                    style="width: 300px"
+                    v-model="modalData.licenseNumber"
+                    placeholder="请输入营业执照号"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-row>
+          <el-row v-show="process == 2">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="营业执照图片："
+                  prop="licensePicture"
+                >
+                  <el-image
+                    style="width: 100px; height: 100px"
+                    :src="modalData.licensePicture"
+                    :preview-src-list="[modalData.licensePicture]"
+                  >
+                  </el-image>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="法人身份证正面国徽："
+                  prop="idCardFront"
+                >
+                  <el-image
+                    style="width: 100px; height: 100px"
+                    :src="modalData.idCardFront"
+                    :preview-src-list="[modalData.idCardFront]"
+                  >
+                  </el-image>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="法人身份证背面人像："
+                  prop="idCardBack"
+                >
+                  <el-image
+                    style="width: 100px; height: 100px"
+                    :src="modalData.idCardBack"
+                    :preview-src-list="[modalData.idCardBack]"
+                  >
+                  </el-image>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="开户银行许可证照："
+                  prop="bankLicense"
+                >
+                  <el-image
+                    style="width: 100px; height: 100px"
+                    :src="modalData.bankLicense"
+                    :preview-src-list="[modalData.bankLicense]"
+                  >
+                  </el-image>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="手持身份证正面国徽(选传)："
+                  prop="handIdCardFront"
+                >
+                  <el-image
+                    style="width: 100px; height: 100px"
+                    :src="modalData.handIdCardFront"
+                    :preview-src-list="[modalData.handIdCardFront]"
+                  >
+                  </el-image>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="手持身份证背面人像(选传)："
+                  prop="handIdCardBack"
+                >
+                  <el-image
+                    style="width: 100px; height: 100px"
+                    :src="modalData.handIdCardBack"
+                    :preview-src-list="[modalData.handIdCardBack]"
+                  >
+                  </el-image>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-row>
+        </el-form>
+      </template>
+    </obj-modal>
+  </div>
+</template>
+<script>
+import { debounce, cloneDeep } from "lodash";
+import { Divider } from "element-ui";
+export default {
+  components: {},
+  data() {
+    return {
+      isAdd: true,
+      //表格属性
+      modalConfig: {
+        title: "详情",
+        show: false,
+        width: "1000px",
+      },
+      modalData: {},
+      ProductData: {},
+      productPlace: "", //地区
+      fileList: [],
+      process: 1,
+    };
+  },
+  methods: {
+    queryTableData(pageNo, pageSize) {},
+    toggle(e) {
+      if (this.modalConfig.show == false) {
+        this.modalConfig.show = true;
+      } else {
+        this.modalConfig.show = false;
+      }
+      if (e) {
+        this.init(cloneDeep(e.row));
+      }
+      return {
+        add: () => {
+          this.modalConfig.title = "添加银行卡";
+          this.process = 1;
+          this.productPlace = "";
+          this.$nextTick(() => {
+            this.modalData = {
+              linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
+                ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
+                : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
+              bankType: "",
+              name: "",
+              prov: "",
+              area: "",
+              socialCreditCode: "",
+              socialCreditCodeExpires: "",
+              businessScope: "",
+              legalPerson: "",
+              legalCertId: "",
+              legalCertIdExpires: "",
+              legalMp: "",
+              address: "",
+              bankCode: "",
+              cardNo: "",
+              cardName: "",
+              licensePicture: "",
+              idCardFront: "",
+              idCardBack: "",
+              bankLicense: "",
+              handIdCardFront: "",
+              handIdCardBack: "",
+              bankAcctType: "",
+              licenseNumber: "",
+            };
+            this.$refs.modal.resetFields();
+          });
+          this.isAdd = true;
+        },
+        update: () => {
+          this.process = 1;
+          this.modalData.title = "详情";
+          this.isAdd = false;
+        },
+      };
+    },
+    init(row) {
+      console.log(row);
+      this.modalData = row;
+    },
+    handleChange(e) {
+      console.log(e);
+      // this.modalData.prov = e.join("-");
+    },
+    handleAvatarSuccess(res) {
+      console.log(res);
+      this.modalData.licensePicture = res.data;
+    },
+    idCardFrontImg(res) {
+      console.log(res);
+      this.modalData.idCardFront = res.data;
+    },
+    idCardBackImg(res) {
+      console.log(res);
+      this.modalData.idCardBack = res.data;
+    },
+    bankLicenseImg(res) {
+      console.log(res);
+      this.modalData.bankLicense = res.data;
+    },
+    handIdCardFrontImg(res) {
+      console.log(res);
+      this.modalData.handIdCardFront = res.data;
+    },
+    handIdCardBackImg(res) {
+      console.log(res);
+      this.modalData.handIdCardBack = res.data;
+    },
+  },
+  computed: {
+    modalHandles() {
+      return [
+        {
+          label: "取消",
+          handle: () => {
+            this.toggle();
+          },
+        },
+        {
+          label: "上一步",
+          type: "primary",
+          disabled: () => this.process == 1,
+          handle: () => {
+            console.log(this.modalData);
+            this.process = 1;
+          },
+        },
+        {
+          label: this.process == 1 ? "下一步" : "确定",
+          type: "primary",
+          handle: () => {
+            if (this.process == 1) {
+              this.process = 2;
+            } else {
+              this.toggle();
+            }
+          },
+        },
+      ];
+    },
+  },
+  asyncComputed: {},
+};
+</script>
+<style lang="scss" scoped>
+.introduce {
+  padding: 5px;
+  background: #fdf6ec;
+  text-align: center;
+}
+.introduce-center {
+  margin-bottom: 10px;
+}
+</style>