钱包

src/api/modules/mer_admin.js

@@ -142,9 +142,23 @@ export const mer_admin = {
       params: data,
     });
   },
-  //添加商家端银行卡
+  //添加商家端私账银行卡
   bankCardAdd: (data) => {
-    return $http.post(`/merchant-api/bank/com-create`, data);
+    return $http.post(`/merchant-api/bank/pri-create`, data);
+  },
+  //添加商家端公账银行卡
+  publicAccountBankCardAdd: (data) => {
+    return $http.post(`/merchant-api/bank/pub-create`, data);
+  },
+  //删除银行卡
+  bankCardDelete: (data) => {
+    return $http.post(`/merchant-api/bank/delete?id=${data}`);
+  },
+  //设置默认银行卡
+  defaultBank: (data) => {
+    return $http.post(
+      `/merchant-api/bank/default-bank?linkId=${data.linkId}&bankId=${data.bankId}`
+    );
   },
   //获取银行卡详情
   bankCardDetail: (id) => {

src/router/full-routers.js

@@ -92,6 +92,7 @@ export default {
       orderNum: 0,
       open: null,
       list: [],
+      hideInMenu: true,
     },
     {
       menuId: getUUID(),

src/router/index.js

@@ -105,19 +105,19 @@ router.beforeEach((to, from, next) => {
       .then(({ data }) => {
         const filterTreeData = (data, permissions) => {
           return data; //临时性返回所有菜单方便调试
-          return data.reduce((filtered, node) => {
+          // return data.reduce((filtered, node) => {
-            // 如果节点的权限在权限数组中
+          //   // 如果节点的权限在权限数组中
-            if (permissions.includes(node.url)) {
+          //   if (permissions.includes(node.url)) {
-              // 递归过滤子节点
+          //     // 递归过滤子节点
-              const list = filterTreeData(node.list || [], permissions);
+          //     const list = filterTreeData(node.list || [], permissions);
-              // 创建一个新的节点，包含过滤后的子节点
+          //     // 创建一个新的节点，包含过滤后的子节点
-              filtered.push({
+          //     filtered.push({
-                ...node,
+          //       ...node,
-                list,
+          //       list,
-              });
+          //     });
-            }
+          //   }
-            return filtered;
+          //   return filtered;
-          }, []);
+          // }, []);
         };
         console.log(data);
         if (data.data.markets?.length > 0) {

src/views/main-sidebar.vue

@@ -87,7 +87,7 @@
         }
         let filterMenu=filterMethod(JSON.parse(JSON.stringify(this.menuList)),this.keyWord);
         console.log(filterMenu);
-        return filterMenu;
+        return filterMenu.filter(item=>item.hideInMenu!=true);
       },
       //是否展示菜单搜索界面
       showSearchInput(){

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

@@ -135,10 +135,23 @@ export default {
           align: "center",
           field: "cardNo",
         },
+        {
+          title: "账户类型",
+          align: "center",
+          field: "bankAcctType",
+          type: "jsx",
+          render: ({ row }) => {
+            if (row.bankAcctType == 2) {
+              return <span>对私</span>;
+            } else {
+              return <span>对公</span>;
+            }
+          },
+        },
         {
           title: "手机号",
           align: "center",
-          field: "telNo",
+          field: "legalMp",
         },
         {
           title: "企业名称",
@@ -160,13 +173,65 @@ export default {
             }
           },
         },
+        {
+          title: "默认银行卡",
+          align: "center",
+          field: "status",
+          type: "jsx",
+          render: ({ row }) => {
+            let defaultBank = () => {
+              if (row.default) {
+                this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+                  confirmButtonText: "确定",
+                  cancelButtonText: "取消",
+                  type: "warning",
+                })
+                  .then(() => {
+                    this.$api.mer_admin
+                      .defaultBank({
+                        linkId: row.linkId,
+                        bankId: row.id,
+                      })
+                      .then((res) => {
+                        this.$refs.oTable.reload();
+                      })
+                      .catch((err) => {
+                        this.$refs.oTable.reload();
+                      });
+                  })
+                  .catch(() => {
+                    this.$refs.oTable.reload();
+                  });
+              }
+            };
+            return (
+              <el-switch
+                onchange={defaultBank}
+                disabled={row.default}
+                v-model={row.default}
+                active-text="是"
+                inactive-text="否"
+              ></el-switch>
+            );
+          },
+        },
+        {
+          title: "创建时间",
+          align: "center",
+          field: "createTime",
+        },
         {
           title: "操作",
           fixed: "right",
           type: "jsx",
           align: "center",
-          width: "140px",
+          width: "160px",
           render: (row) => {
+            let deleteBank = () => {
+              this.$api.mer_admin.bankCardDelete(row.row.id).then((res) => {
+                this.$refs.oTable.reload();
+              });
+            };
             let edit = () => {
               this.$refs.viewDetails.toggle(row).update();
             };
@@ -175,6 +240,13 @@ export default {
                 <el-button size="mini" type="primary" onClick={edit}>
                   详情
                 </el-button>
+                <span style={"margin-left:10px"}>
+                  <el-popconfirm onConfirm={deleteBank} title="确定删除吗？">
+                    <el-button size="mini" type="danger" slot="reference">
+                      删除
+                    </el-button>
+                  </el-popconfirm>
+                </span>
               </div>
             );
           },

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

@@ -8,8 +8,8 @@
       :modalHandles="modalHandles"
     >
       <template slot="dialog__content">
-        <el-form :model="modalData" ref="modalForm">
+        <el-form :rules="rules" :model="modalData" ref="modalForm">
-          <el-row v-show="process == 1 && modalData.bankAcctType == 1">
+          <el-row v-if="process == 1 && modalData.bankAcctType == 1">
             <el-row>
               <el-col :span="12">
                 <el-form-item
@@ -64,33 +64,9 @@
                   >
                   </el-input>
                 </el-form-item>
-                <!-- <el-form-item
-                  label-width="150px"
-                  label="银行类型："
-                  prop="bankType"
-                >
-                  <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-form-item label-width="150px" label="企业名称" prop="name">
                   <el-input
                     style="width: 300px"
                     v-model="modalData.name"
@@ -116,22 +92,10 @@
                     >
                     </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-form-item label-width="150px" label="地级市：" prop="area">
                   <el-input
                     style="width: 300px"
                     v-model="modalData.area"
@@ -146,7 +110,7 @@
                 <el-form-item
                   label-width="150px"
                   label="社会信用码："
-                  prop="prov"
+                  prop="socialCreditCode"
                 >
                   <el-input
                     style="width: 300px"
@@ -269,15 +233,22 @@
               <el-col :span="12">
                 <el-form-item
                   label-width="150px"
-                  label="银行代码："
+                  label="银行："
                   prop="bankCode"
+                  :validate-on-rule-change="false"
                 >
-                  <el-input
+                  <el-select
                     style="width: 300px"
                     v-model="modalData.bankCode"
-                    placeholder="请输入银行代码"
+                    placeholder="请输入银行卡类型"
                   >
-                  </el-input>
+                    <el-option
+                      v-for="item in bankOptions"
+                      :label="item.label"
+                      :value="item.value"
+                      :key="item.value"
+                    ></el-option>
+                  </el-select>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
@@ -324,7 +295,7 @@
               </el-col>
             </el-row> -->
           </el-row>
-          <el-row v-show="process == 2 && modalData.bankAcctType == 1">
+          <el-row v-if="process == 2 && modalData.bankAcctType == 1">
             <el-row>
               <el-col :span="12">
                 <el-form-item
@@ -348,7 +319,7 @@
                 <el-form-item
                   label-width="150px"
                   label="法人身份证正面国徽："
-                  prop="bankAcctType"
+                  prop="idCardFront"
                 >
                   <el-upload
                     class="upload-demo"
@@ -368,7 +339,7 @@
                 <el-form-item
                   label-width="150px"
                   label="法人身份证背面人像："
-                  prop="licensePicture"
+                  prop="idCardBack"
                 >
                   <el-upload
                     class="upload-demo"
@@ -386,7 +357,7 @@
                 <el-form-item
                   label-width="150px"
                   label="开户银行许可证照："
-                  prop="bankAcctType"
+                  prop="bankLicense"
                 >
                   <el-upload
                     class="upload-demo"
@@ -406,7 +377,6 @@
                 <el-form-item
                   label-width="150px"
                   label="手持身份证正面国徽(选传)："
-                  prop="licensePicture"
                 >
                   <el-upload
                     class="upload-demo"
@@ -424,7 +394,6 @@
                 <el-form-item
                   label-width="150px"
                   label="手持身份证背面人像(选传)："
-                  prop="bankAcctType"
                 >
                   <el-upload
                     class="upload-demo"
@@ -440,7 +409,7 @@
               </el-col>
             </el-row>
           </el-row>
-          <el-row v-show="modalData.bankAcctType == 2">
+          <el-row v-if="modalData.bankAcctType == 2">
             <el-row>
               <el-col :span="12">
                 <el-form-item
@@ -563,11 +532,7 @@
             </el-row>
             <el-row>
               <el-col :span="12">
-                <el-form-item
+                <el-form-item label-width="150px" label="法人身份证正面国徽：">
-                  label-width="150px"
-                  label="法人身份证正面国徽："
-                  prop="bankAcctType"
-                >
                   <el-upload
                     class="upload-demo"
                     :action="this.$api.mer_admin.uploadFile()"
@@ -581,11 +546,7 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item
+                <el-form-item label-width="150px" label="法人身份证背面人像：">
-                  label-width="150px"
-                  label="法人身份证背面人像："
-                  prop="licensePicture"
-                >
                   <el-upload
                     class="upload-demo"
                     :action="this.$api.mer_admin.uploadFile()"
@@ -625,8 +586,225 @@ export default {
       productPlace: "", //地区
       fileList: [],
       process: 1,
+      bankOptions: [
+        { label: "工商银行", value: "01020000" },
+        { label: "农业银行", value: "01030000" },
+        { label: "中国银行", value: "01040000" },
+        { label: "建设银行", value: "01050000" },
+        { label: "交通银行", value: "03010000" },
+        { label: "平安银行", value: "03134402" },
+        { label: "中信银行", value: "03020000" },
+        { label: "光大银行", value: "03030000" },
+        { label: "华夏银行", value: "03040000" },
+        { label: "民生银行", value: "03050000" },
+        { label: "广发银行", value: "03060000" },
+        { label: "招商银行", value: "03080000" },
+        { label: "兴业银行", value: "03090000" },
+        { label: "浦发银行", value: "03100000" },
+        { label: "北京银行", value: "03130011" },
+        { label: "天津银行", value: "03130012" },
+        { label: "上海银行", value: "03130031" },
+        { label: "江苏银行", value: "03130032" },
+        { label: "重庆银行", value: "03130050" },
+        { label: "大连银行", value: "03132102" },
+        { label: "哈尔滨银行", value: "03132301" },
+        { label: "南京银行", value: "03133201" },
+        { label: "杭州银行", value: "03133301" },
+        { label: "宁波银行", value: "03133302" },
+        { label: "温州银行", value: "03133308" },
+        { label: "恒丰银行", value: "03150000" },
+        { label: "浙商银行", value: "03160000" },
+      ],
+      rules: {
+        cardName: [
+          { required: true, message: "请输入银行卡对应户名", trigger: "blur" },
+        ],
+        //公卡
+        cardNo: [
+          { required: true, message: "请输入银行卡号", trigger: "blur" },
+          {
+            validator: function (rule, value, callback) {
+              const strBin =
+                "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
+              if (!value) {
+                return callback(new Error("请输入银行卡号"));
+              } else if (!Number.isInteger(+value)) {
+                callback(new Error("银行卡号必须全为数字"));
+              } else if (value.trim().length < 12 || value.trim().length > 19) {
+                callback(new Error("银行卡号长度必须在12到19之间"));
+              } else if (strBin.indexOf(value.substring(0, 2)) === -1) {
+                callback(new Error("银行卡号开头6位不符合规范"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        //私卡
+        cardId: [
+          { required: true, message: "请输入银行卡号", trigger: "blur" },
+          {
+            validator: function (rule, value, callback) {
+              const strBin =
+                "10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99";
+              if (!value) {
+                return callback(new Error("请输入银行卡号"));
+              } else if (!Number.isInteger(+value)) {
+                callback(new Error("银行卡号必须全为数字"));
+              } else if (value.trim().length < 12 || value.trim().length > 19) {
+                callback(new Error("银行卡号长度必须在12到19之间"));
+              } else if (strBin.indexOf(value.substring(0, 2)) === -1) {
+                callback(new Error("银行卡号开头6位不符合规范"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        certId: [
+          { required: true, message: "请输入身份证号", trigger: "blur" },
+          {
+            validator: function (rule, value, callback) {
+              const pattern =
+                /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/;
+              if (pattern.test(value)) {
+                callback();
+              } else {
+                callback(new Error("身份证格式错误"));
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        telNo: [
+          {
+            required: true,
+            message: "请输入手机号",
+            trigger: "blur",
+          },
+          {
+            validator: function (rule, value, callback) {
+              if (/^1[3456789]\d{9}$/.test(value) == false) {
+                callback(new Error("请输入正确的手机号"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        socialCreditCode: [
+          {
+            required: true,
+            message: "请输入统一社会信用码",
+            trigger: ["blur", "change"],
+          },
+        ],
+        socialCreditCodeExpires: [
+          {
+            required: true,
+            message: "请输入统一社会信用码有效期",
+            trigger: ["blur", "change"],
+          },
+        ],
+        name: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
+        prov: [
+          {
+            required: true,
+            message: "请选择省份",
+            trigger: ["blur", "change"],
+          },
+        ],
+        area: [{ required: true, message: "请输入地级市", trigger: "blur" }],
+        businessScope: [
+          { required: true, message: "请输入经营范围", trigger: "blur" },
+        ],
+        legalPerson: [
+          { required: true, message: "请输入法人姓名", trigger: "blur" },
+        ],
+        legalCertId: [
+          { required: true, message: "请输入法人身份证号", trigger: "blur" },
+          {
+            validator: function (rule, value, callback) {
+              const pattern =
+                /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/;
+              if (pattern.test(value)) {
+                callback();
+              } else {
+                callback(new Error("身份证格式错误"));
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        legalCertIdExpires: [
+          {
+            required: true,
+            message: "请输入法人身份证有效期",
+            trigger: "change",
+          },
+        ],
+        legalMp: [
+          {
+            required: true,
+            message: "请输入法人手机号",
+            trigger: "blur",
+          },
+          {
+            validator: function (rule, value, callback) {
+              if (/^1[3456789]\d{9}$/.test(value) == false) {
+                callback(new Error("请输入正确的手机号"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        address: [
+          { required: true, message: "请输入详细企业地址", trigger: "blur" },
+        ],
+        bankCode: [
+          {
+            required: true,
+            message: "请输入银行名称",
+            trigger: "change",
+          },
+        ],
+        licenseNumber: [
+          { required: true, message: "请输入营业执照号", trigger: "blur" },
+        ],
+        licensePicture: [
+          { required: true, message: "请输入营业执照", trigger: "blur" },
+        ],
+        bankLicense: [
+          {
+            required: true,
+            message: "请上传开户银行许可证照",
+            trigger: "blur",
+          },
+        ],
+        idCardFront: [
+          { required: true, message: "请上传身份证正面", trigger: "blur" },
+        ],
+        idCardBack: [
+          { required: true, message: "请上传身份证反面", trigger: "blur" },
+        ],
+      },
     };
   },
+  watch: {
+    "modalConfig.show"(newVal) {
+      if (!newVal) {
+        //关闭弹窗清空校验
+        setTimeout(() => {
+          this.$refs.modalForm?.resetFields();
+        });
+      }
+    },
+  },
   methods: {
     queryTableData(pageNo, pageSize) {},
     toggle(e) {
@@ -649,7 +827,6 @@ export default {
               linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
                 ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
                 : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
-              bankType: "",
               name: "",
               prov: "",
               area: "",
@@ -673,7 +850,7 @@ export default {
               bankAcctType: 1,
               licenseNumber: "",
             };
-            this.$refs.modal.resetFields();
+            this.$refs.modalForm?.resetFields();
           });
           this.isAdd = true;
         },
@@ -686,18 +863,22 @@ export default {
     handleAvatarSuccess(res) {
       console.log(res);
       this.modalData.licensePicture = res.data;
+      this.$refs.modalForm.validate();
     },
     idCardFrontImg(res) {
       console.log(res);
       this.modalData.idCardFront = res.data;
+      this.$refs.modalForm.validate();
     },
     idCardBackImg(res) {
       console.log(res);
       this.modalData.idCardBack = res.data;
+      this.$refs.modalForm.validate();
     },
     bankLicenseImg(res) {
       console.log(res);
       this.modalData.bankLicense = res.data;
+      this.$refs.modalForm.validate();
     },
     handIdCardFrontImg(res) {
       console.log(res);
@@ -713,7 +894,6 @@ export default {
           linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
             ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
             : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
-          bankType: "",
           name: "",
           prov: "",
           area: "",
@@ -743,7 +923,6 @@ export default {
           linkId: JSON.parse(sessionStorage.getItem("userInfo")).managerId
             ? JSON.parse(sessionStorage.getItem("userInfo")).managerId
             : JSON.parse(sessionStorage.getItem("userInfo")).merchantId,
-          bankType: "",
           cardId: "",
           cardName: "",
           certId: "",
@@ -752,6 +931,7 @@ export default {
           idCardBack: "",
           bankAcctType: 2,
         };
+        this.$refs.modalForm?.resetFields();
       }
     },
   },
@@ -778,16 +958,24 @@ export default {
             label: this.process == 1 ? "下一步" : "确认添加",
             type: "primary",
             handle: () => {
-              if (this.process == 1) {
+              console.log(this.modalData);
-                this.process = 2;
+
-              } else {
+              this.$refs.modalForm.validate((valid) => {
-                console.log(this.modalData);
+                if (valid) {
-                this.$api.mer_admin.bankCardAdd(this.modalData).then((res) => {
+                  if (this.process == 1) {
-                  console.log(res);
+                    this.process = 2;
-                  this.$emit("queryList");
+                  } else {
-                  this.toggle();
+                    console.log(this.modalData);
-                });
+                    this.$api.mer_admin
-              }
+                      .publicAccountBankCardAdd(this.modalData)
+                      .then((res) => {
+                        console.log(res);
+                        this.$emit("queryList");
+                        this.toggle();
+                      });
+                  }
+                }
+              });
             },
           },
         ];
@@ -804,10 +992,16 @@ export default {
             type: "primary",
             handle: () => {
               console.log(this.modalData);
-              this.$api.mer_admin.bankCardAdd(this.modalData).then((res) => {
+              this.$refs.modalForm.validate((valid) => {
-                console.log(res);
+                if (valid) {
-                this.$emit("queryList");
+                  this.$api.mer_admin
-                this.toggle();
+                    .bankCardAdd(this.modalData)
+                    .then((res) => {
+                      console.log(res);
+                      this.$emit("queryList");
+                      this.toggle();
+                    });
+                }
               });
             },
           },

src/views/modules/wallet/index.vue

@@ -11,9 +11,17 @@
               ></el-avatar>
               <span class="userName">用户名：{{ userInfo.userName }}</span>
             </div>
-            <el-button @click="addWithdrawal" type="primary" round
+            <div>
-              >发起提现</el-button
+              <el-button
-            >
+                @click="$router.push({ path: 'bank-card-index' })"
+                type="primary"
+                round
+                >绑定银行卡</el-button
+              >
+              <el-button @click="addWithdrawal" type="primary" round
+                >发起提现</el-button
+              >
+            </div>
           </div>
           <div class="userInfo">
             <el-card class="box-card">
@@ -44,6 +52,8 @@
             >
               <el-form-item label="申请状态">
                 <el-select
+                  style="width: 140px"
+                  size="mini"
                   v-model="formInline.cashOutStatus"
                   placeholder="请选择"
                 >
@@ -83,6 +93,8 @@
               </el-form-item>
               <el-form-item label="申请时间">
                 <el-date-picker
+                  size="mini"
+                  style="width: 260px"
                   @change="changeTime"
                   v-model="value1"
                   type="datetimerange"
@@ -92,8 +104,12 @@
                 </el-date-picker>
               </el-form-item>
               <el-form-item>
-                <el-button type="primary" @click="queryList">查询</el-button>
+                <el-button size="mini" type="primary" @click="queryList"
-                <el-button type="primary" @click="Reset">重置</el-button>
+                  >查询</el-button
+                >
+                <el-button size="mini" type="primary" @click="Reset"
+                  >重置</el-button
+                >
               </el-form-item>
             </el-form>
             <div>
@@ -136,7 +152,82 @@
           </div>
         </div>
       </el-col>
-      <el-col :span="9"><div class="grid-content bg-purple">2</div> </el-col>
+      <el-col :span="9"
+        ><div class="grid-content bg-purple">
+          <div style="margin: 9px 0">
+            <el-form
+              :inline="true"
+              :model="formInline"
+              class="demo-form-inline"
+            >
+              <el-form-item label="申请时间">
+                <el-date-picker
+                  style="width: 260px"
+                  size="mini"
+                  @change="changeTime"
+                  v-model="value1"
+                  type="datetimerange"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                >
+                </el-date-picker>
+              </el-form-item>
+              <el-form-item>
+                <el-button size="mini" type="primary" @click="queryList"
+                  >查询</el-button
+                >
+              </el-form-item>
+            </el-form>
+          </div>
+          <el-card class="box-cardTwo">
+            <div class="cardTwo-item">
+              <div>
+                <div style="font-size: 18px; font-weight: 600">总收入</div>
+                <div style="margin-top: 20px; font-size: 18px">
+                  ￥{{
+                    userInfo.availableAmount ? userInfo.availableAmount : "0"
+                  }}
+                </div>
+              </div>
+              <div>
+                <div style="font-size: 18px; font-weight: 600">总支出</div>
+                <div style="margin-top: 20px; font-size: 18px">
+                  ￥{{
+                    userInfo.availableAmount ? userInfo.availableAmount : "0"
+                  }}
+                </div>
+              </div>
+            </div>
+          </el-card>
+          <div style="margin: 10px 0">
+            <div style="font-size: 16px; margin: 0 0 20px 0; font-weight: 600">
+              钱包账单
+            </div>
+            <div style="background: #fff; padding: 10px; height: 55vh">
+              <div
+                v-for="item in 5"
+                :key="item"
+                style="
+                  background: #f1f8fe;
+                  padding: 10px;
+                  border-radius: 10px;
+                  margin-bottom: 10px;
+                "
+              >
+                <div style="font-size: 18px">12月06日 周五</div>
+                <div class="wallet-item">
+                  <div>收入</div>
+                  <div>+666</div>
+                </div>
+                <div class="wallet-item">
+                  <div>转账</div>
+                  <div>余额：427</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
     </el-row>
     <!-- 提现 -->
     <withdrawal @init="init" ref="withdrawal"></withdrawal>
@@ -203,7 +294,7 @@ export default {
         })
         .then((res) => {
           if (res.data.data.data.length > 0) {
-            this.$refs.withdrawal.toggle().add();
+            this.$refs.withdrawal.toggle().add(this.userInfo.availableAmount);
           } else {
             this.$message.error("请先绑定银行卡");
           }
@@ -276,4 +367,19 @@ export default {
   right: 20px;
   font-size: 16px;
 }
+.box-cardTwo {
+  margin-bottom: 30px;
+  height: 200px;
+  border-radius: 10px;
+}
+.cardTwo-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+.wallet-item {
+  margin: 10px 0;
+  display: flex;
+  justify-content: space-between;
+}
 </style>

src/views/modules/wallet/popup/withdrawal.vue

@@ -15,13 +15,17 @@
           label-width="150px"
           class="demo-ruleForm"
         >
-          <el-form-item label="提现金额：" prop="isRefundEarnestMoney">
+          <el-form-item label="提现金额：" prop="amount">
-            <el-input-number
+            <div>
-              v-model="ruleForm.amount"
+              <el-input-number
-              :min="0"
+                v-model="ruleForm.amount"
-              :step="1"
+                :min="0"
-              label="描述文字"
+                :max="this.amountSum"
-            ></el-input-number>
+                :step="1"
+                label="描述文字"
+              ></el-input-number>
+            </div>
+            <div>可提现金额：{{ amountSum }}</div>
           </el-form-item>
         </el-form>
       </div>
@@ -43,6 +47,7 @@ export default {
         show: false,
         width: "600px",
       },
+      amountSum: 0,
       modalData: {},
       ruleForm: {
         amount: "",
@@ -54,6 +59,16 @@ export default {
             message: "请输入提现金额",
             trigger: ["blur", "change"],
           },
+          {
+            validator: (rule, value, callback) => {
+              if (value > this.amountSum) {
+                callback(new Error("提现金额不能大于可提现金额"));
+              } else {
+                callback();
+              }
+            },
+            trigger: ["blur", "change"],
+          },
         ],
       },
     };
@@ -80,7 +95,8 @@ export default {
         this.init(cloneDeep(e));
       }
       return {
-        add: () => {
+        add: (row) => {
+          this.amountSum = row ? row : 0;
           this.modalConfig.title = "提现金额";
           this.isAdd = true;
         },