From 977f2133d6024984ec831e328d18a7e38cf3db34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=99=E5=90=8C=E5=AD=A6?= <2495967527@qq.com>
Date: Sun, 29 Sep 2024 18:02:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=93=B6=E8=A1=8C=E5=8D=A1?=
 =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modules/mer_admin.js                  |   9 +
 src/router/full-routers.js                    |   2 +-
 src/views/modules/bank-card/index.vue         |  61 +-
 .../modules/bank-card/popup/add-or-update.vue | 758 ++++++++++--------
 .../modules/bank-card/popup/view-details.vue  | 571 +++++++++++++
 5 files changed, 1054 insertions(+), 347 deletions(-)
 create mode 100644 src/views/modules/bank-card/popup/view-details.vue

diff --git a/src/api/modules/mer_admin.js b/src/api/modules/mer_admin.js
index 37cbd51..378d992 100644
--- a/src/api/modules/mer_admin.js
+++ b/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 },
+    });
+  },
+
 };
diff --git a/src/router/full-routers.js b/src/router/full-routers.js
index b63962a..fe7a742 100644
--- a/src/router/full-routers.js
+++ b/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: [],
diff --git a/src/views/modules/bank-card/index.vue b/src/views/modules/bank-card/index.vue
index 67f4b60..cb509c4 100644
--- a/src/views/modules/bank-card/index.vue
+++ b/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-option label="审核中" value="shanghai"></el-option>
-              <el-option label="未通过" value="beijing"></el-option>
-              <el-option label="已通过" value="beijing"></el-option>
+            <el-select v-model="formInline.status" placeholder="请选择">
+              <el-option label="全部" value=""></el-option>
+              <el-option label="审核中" value="0"></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: "",
-        region: "",
+        status: "",
       },
       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: "证件号",
-          align: "certId",
-          field: "minSalePrice",
+          title: "银行卡号",
+          align: "center",
+          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();
-            };
-            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();
+              this.$refs.viewDetails.toggle(row).update();
             };
             return (
               <div>
-                <el-button
-                  size="mini"
-                  disabled={row.status != "DOWN"}
-                  type="primary"
-                  onClick={edit}
-                >
-                  编辑
+                <el-button size="mini" type="primary" onClick={edit}>
+                  详情
                 </el-button>
               </div>
             );
diff --git a/src/views/modules/bank-card/popup/add-or-update.vue b/src/views/modules/bank-card/popup/add-or-update.vue
index c7aef1e..17f1a18 100644
--- a/src/views/modules/bank-card/popup/add-or-update.vue
+++ b/src/views/modules/bank-card/popup/add-or-update.vue
@@ -9,294 +9,412 @@
     >
       <template slot="dialog__content">
         <el-form :model="modalData" ref="modalForm">
-          <el-row>
-            <el-col :span="12">
-              <el-form-item
-                label-width="150px"
-                label="是否需冷藏"
-                prop="bankType"
-              >
-                <el-select
-                  style="width: 300px"
-                  v-model="modalData.bankType"
-                  placeholder="请选择"
+          <el-row v-show="process == 1">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="银行类型："
+                  prop="bankType"
                 >
-                  <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
-                  style="width: 300px"
-                  v-model="modalData.name"
-                  placeholder="请输入企业名称"
+                  <el-select
+                    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
+                    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
+                    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
+                    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>
-              </el-form-item>
-            </el-col>
+                  <el-input
+                    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
+                    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
+                    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
+                    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
+                    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
+                    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
+                    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
+                    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
+                    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
+                    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
+                    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
+                    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
+                    style="width: 300px"
+                    v-model="modalData.licenseNumber"
+                    placeholder="请输入营业执照号"
+                  >
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
           </el-row>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label-width="150px" label="省份" prop="prov">
-                <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
-                  style="width: 300px"
-                  v-model="modalData.area"
-                  placeholder="请输入地区"
+          <el-row v-show="process == 2">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item
+                  label-width="150px"
+                  label="营业执照图片："
+                  prop="licensePicture"
                 >
-                </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
-                  style="width: 300px"
-                  v-model="modalData.socialCreditCode"
-                  placeholder="请输入社会信用码"
+                  <el-upload
+                    class="upload-demo"
+                    :action="this.$api.mer_admin.uploadFile()"
+                    :on-success="handleAvatarSuccess"
+                    :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-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item
-                label-width="150px"
-                label="社会信用码有效期"
-                prop="socialCreditCodeExpires"
-              >
-                <el-date-picker
-                  style="width: 300px"
-                  v-model="modalData.socialCreditCodeExpires"
-                  type="date"
-                  placeholder="选择日期"
+                  <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-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
-                  style="width: 300px"
-                  v-model="modalData.businessScope"
-                  placeholder="请输入经营范围"
+                  <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-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item
-                label-width="150px"
-                label="法人姓名"
-                prop="legalPerson"
-              >
-                <el-input
-                  style="width: 300px"
-                  v-model="modalData.legalPerson"
-                  placeholder="请输入法人姓名"
+                  <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-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
-                  style="width: 300px"
-                  v-model="modalData.legalCertId"
-                  placeholder="请输入法人身份证号码"
+                  <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-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item
-                label-width="150px"
-                label="法人身份证有效期"
-                prop="legalCertIdExpires"
-              >
-                <el-date-picker
-                  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
-                  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
-                  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
-                  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
-                  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
-                  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
-                  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
-                  style="width: 300px"
-                  v-model="modalData.licenseNumber"
-                  placeholder="请输入营业执照号"
-                >
-                </el-input>
-              </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="handleAvatarSuccess"
-                  :file-list="fileList"
-                  list-type="picture"
-                  :headers="{ token: 'Bearer' + 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-form-item>
-            </el-col>
+                  <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>
@@ -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,
-          submit: true,
+          disabled: () => this.process == 1,
           handle: () => {
-            let data = {
-              ...this.ProductData,
-              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: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-                center: true,
-              }
-            )
-              .then(() => {
-                this.$api.mer_admin.setDiscounts(data).then((res) => {
-                  this.toggle();
-                  this.$emit("queryList");
-                });
-              })
-              .catch(() => {
-                this.$message({
-                  type: "info",
-                  message: "已取消",
-                });
+            console.log(this.modalData);
+            this.process = 1;
+          },
+        },
+        {
+          label: this.process == 1 ? "下一步" : "确认添加",
+          type: "primary",
+          handle: () => {
+            if (this.process == 1) {
+              this.process = 2;
+            } else {
+              console.log(this.modalData);
+              this.$api.mer_admin.bankCardAdd(this.modalData).then((res) => {
+                console.log(res);
+                this.$emit("queryList");
+                this.toggle();
               });
+            }
           },
         },
       ];
diff --git a/src/views/modules/bank-card/popup/view-details.vue b/src/views/modules/bank-card/popup/view-details.vue
new file mode 100644
index 0000000..d94034c
--- /dev/null
+++ b/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>
\ No newline at end of file