feature:卡务中心->充值/退款、批量操作

1、界面样式调整

src/views/cardCenter/cardOperation/ptCard/RechargeForm.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="p-2">
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="50%" :draggable="draggable" :show-close="false">
+  <div class="e-dialog">
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="50%" :draggable="draggable">
       <div class="panel">
         <h4 class="panel-title">{{ labelInfo }}</h4>
-        <el-form ref="formAccountRef" :model="accountFormData" label-width="100px">
+        <el-form ref="formAccountRef" :model="accountFormData" label-width="auto">
           <el-row>
             <el-col :span="12">
               <el-form-item label="姓名" prop="realName">
@@ -29,7 +29,7 @@
             </el-col>
           </el-row>
         </el-form>
-        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
+        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto">
           <el-row>
             <el-col :span="12">
               <el-form-item label="操作钱包" prop="bagCode">
@@ -290,6 +290,7 @@ const submitForm = async () => {
   if (!formRef.value) return;
   const valid = await formRef.value?.validate();
   if (!valid) return;
+  formLoading.value = true;
   try {
     const data = formData.value as unknown as PtBagForm;
     data.userId = accountFormData.value.userId;
@@ -321,5 +322,47 @@ const getList = async (userId: string | number) => {
 };
 /** 关闭按钮 */
 </script>
+<style scoped>
+.e-dialog {
+  .slide-fade-enter-active {
+    transition: all 0.3s ease;
+  }
+
+  .slide-fade-leave-active {
+    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+  }
+
+  .slide-fade-enter,
+  .slide-fade-leave-to {
+    opacity: 0;
+  }
+}
+:deep() .el-dialog {
+  border-radius: 10px;
+}
+
+:deep() .el-dialog__body {
+  padding: 1px 1px !important;
+  max-height: 90vh !important;
+}
+
+:deep() .el-dialog__header {
+  background: #1d78d5;
+  border-radius: 6px 6px 5px 5px;
+}
+
+:deep() .el-dialog__title {
+  color: white;
+  margin-top: 1px;
+}
+
+:deep() .el-dialog__headerbtn .el-dialog__close {
+  color: white !important;
+  top: 15px;
+  right: 10px;
+}
 
-<style scoped lang="scss"></style>
+:deep() .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
+  padding: 1px !important;
+}
+</style>

src/views/cardCenter/cardOperation/ptCard/batchRechargeForm.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="p-2">
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" :draggable="draggable" :show-close="false">
-      <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="100px">
+  <div class="e-dialog">
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="20%" :draggable="draggable">
+      <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="auto">
         <el-form-item label="人员姓名:" prop="realName">
           <el-input v-model="realNames" type="textarea" :rows="5" :disabled="true" />
         </el-form-item>
@@ -243,8 +243,46 @@ const submitForm = async () => {
 onMounted(() => {});
 </script>
 <style scoped>
-/deep/ .el-dialog__header {
-  background-color: #3ca1ff;
-  border: 0;
+.e-dialog {
+  .slide-fade-enter-active {
+    transition: all 0.3s ease;
+  }
+
+  .slide-fade-leave-active {
+    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+  }
+
+  .slide-fade-enter,
+  .slide-fade-leave-to {
+    opacity: 0;
+  }
+}
+:deep() .el-dialog {
+  border-radius: 10px;
+}
+
+:deep() .el-dialog__body {
+  padding: 1px 1px !important;
+  max-height: 90vh !important;
+}
+
+:deep() .el-dialog__header {
+  background: #1d78d5;
+  border-radius: 6px 6px 5px 5px;
+}
+
+:deep() .el-dialog__title {
+  color: white;
+  margin-top: 1px;
+}
+
+:deep() .el-dialog__headerbtn .el-dialog__close {
+  color: white !important;
+  top: 15px;
+  right: 10px;
+}
+
+:deep() .el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
+  padding: 1px !important;
 }
 </style>