feat(transferDialog): 转账弹窗样式调整优化

src/components/TransferDialog.vue

@@ -1,20 +1,26 @@
 <template>
   <el-dialog
-    :title="'转账'"
+    title="转账"
     :visible.sync="dialogVisible"
-    width="30%"
+    width="40%"
     center
     :close-on-click-modal="false"
     :before-close="handleBeforeClose"
     @close="onClose"
   >
-    <div class="diaBox2">
-      <el-form :model="zzform" :rules="zzrules" label-width="auto" ref="zzform">
-        <el-form-item :label="'转出账户'" prop="pkAccount">
+    <div class="transfer-dialog-content">
+      <el-form
+        :model="transferForm"
+        :rules="transferRules"
+        label-width="100px"
+        ref="transferFormRef"
+      >
+        <el-form-item label="转出账户" prop="pkAccount">
           <el-select
-            @change="checkYue"
-            v-model="zzform.pkAccount"
-            :placeholder="'请选择'"
+            @change="fetchAccountBalance"
+            v-model="transferForm.pkAccount"
+            placeholder="请选择"
+            style="width: 100%"
           >
             <el-option
               v-for="(item, index) in accountList"
@@ -24,49 +30,58 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item :label="'当前余额'" prop="yue">
-          <el-input v-model="zzform.yue" disabled></el-input>
+        <el-form-item label="当前余额" prop="yue">
+          <el-input v-model="transferForm.yue" disabled></el-input>
         </el-form-item>
-        <el-form-item :label="'转出编号'" prop="memberCode">
-          <el-input v-model="zzform.memberCode" disabled></el-input>
+        <el-form-item label="转出编号" prop="memberCode">
+          <el-input v-model="transferForm.memberCode" disabled></el-input>
         </el-form-item>
-        <el-form-item :label="'转出姓名'" prop="memberName">
-          <el-input v-model="zzform.memberName" disabled></el-input>
+        <el-form-item label="转出姓名" prop="memberName">
+          <el-input v-model="transferForm.memberName" disabled></el-input>
         </el-form-item>
-        <el-form-item :label="'接收编号'" prop="toMemberCode">
+        <el-form-item label="接收编号" prop="toMemberCode">
           <el-input
-            v-model="zzform.toMemberCode"
-            @blur="checkName"
-            :placeholder="'请输入'"
+            v-model="transferForm.toMemberCode"
+            @blur="fetchRecipientName"
+            placeholder="请输入"
           ></el-input>
         </el-form-item>
-        <el-form-item :label="'接收姓名'" prop="toMemberName">
-          <el-input v-model="zzform.toMemberName" disabled></el-input>
+        <el-form-item label="接收姓名" prop="toMemberName">
+          <el-input v-model="transferForm.toMemberName" disabled></el-input>
         </el-form-item>
-        <el-form-item :label="'转账金额'" prop="transferMoney">
+        <el-form-item label="转账金额" prop="transferMoney">
           <el-input
-            v-model="zzform.transferMoney"
-            :placeholder="'请输入'"
+            v-model="transferForm.transferMoney"
+            placeholder="请输入"
           ></el-input>
         </el-form-item>
-        <el-form-item :label="'二级密码'" prop="payPwd">
+        <el-form-item label="二级密码" prop="payPwd">
           <el-input
-            v-model="zzform.payPwd"
+            v-model="transferForm.payPwd"
             type="password"
-            :placeholder="'请输入'"
+            show-password
+            placeholder="请输入"
           ></el-input>
         </el-form-item>
-        <el-form-item :label="'备注'" prop="remarks">
-          <el-input v-model="zzform.remarks" :placeholder="'请输入'"></el-input>
+        <el-form-item label="备注" prop="remarks">
+          <el-input
+            v-model="transferForm.remarks"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入"
+          ></el-input>
         </el-form-item>
       </el-form>
-      <div style="text-align: center">
-        <el-button class="saveBtn" @click="saveZz">{{ "确认" }}</el-button>
+      <div class="dialog-footer">
         <el-button
-          @click="handleCancel"
-          style="width: 117px; font-size: 16px"
-          >{{ "取消" }}</el-button
+          type="primary"
+          class="confirm-button"
+          @click="submitTransfer"
+          >{{ "确认" }}</el-button
         >
+        <el-button @click="handleCancel" class="cancel-button">{{
+          "取消"
+        }}</el-button>
       </div>
     </div>
   </el-dialog>
@@ -93,8 +108,15 @@ export default {
       if (!value) {
         return callback(new Error("请输入转账金额"));
       }
-      if (!/^[0-9]+(.[0-9]{1,2})?$/.test(value)) {
-        callback(new Error("请输入有效的金额"));
+      // 允许整数或最多两位小数的正数
+      if (!/^(0|[1-9]\d*)(\.\d{1,2})?$/.test(value) || parseFloat(value) <= 0) {
+        callback(new Error("请输入有效的正数金额"));
+      } else if (
+        this.transferForm.yue !== "" &&
+        this.transferForm.yue !== "获取失败" &&
+        parseFloat(value) > parseFloat(this.transferForm.yue)
+      ) {
+        callback(new Error("转账金额不能超过当前余额"));
       } else {
         callback();
       }
@@ -104,12 +126,16 @@ export default {
         return callback(new Error("请输入二级密码"));
       }
       // Add more complex password validation if needed
+      // Example: Minimum length
+      // if (value.length < 6) {
+      //   return callback(new Error('二级密码长度至少为6位'));
+      // }
       callback();
     };
 
     return {
       dialogVisible: this.visible,
-      zzform: {
+      transferForm: {
         pkAccount: "",
         memberCode: "",
         memberName: "",
@@ -121,15 +147,18 @@ export default {
         yue: "",
       },
       accountList: [],
-      zzrules: {
+      transferRules: {
         pkAccount: [
           { required: true, message: "请选择转出账户", trigger: "change" },
         ],
         toMemberCode: [
           { required: true, message: "请输入接收编号", trigger: "blur" },
+          // 可选：添加编号格式校验
+          // { pattern: /^\d+$/, message: '接收编号必须为数字', trigger: 'blur' }
         ],
         transferMoney: [
-          { required: true, validator: validateAmount, trigger: "blur" },
+          { required: true, message: "请输入转账金额", trigger: "blur" }, // 保留必填，具体校验交给 validator
+          { validator: validateAmount, trigger: "blur" },
         ],
         payPwd: [
           { required: true, validator: validatePassword, trigger: "blur" },
@@ -137,6 +166,14 @@ export default {
         remarks: [
           { max: 200, message: "备注不能超过200个字符", trigger: "blur" },
         ],
+        toMemberName: [
+          // 增加接收姓名验证（如果需要）
+          // { required: true, message: '无法获取接收方姓名，请检查接收编号', trigger: 'change' } // 触发器可能需要调整
+        ],
+        yue: [
+          // 增加余额显示验证（如果需要）
+          // { required: true, message: '无法获取账户余额', trigger: 'change' }
+        ],
       },
     };
   },
@@ -158,28 +195,53 @@ export default {
       immediate: true, // Trigger the handler immediately when component mounts
       deep: true, // Watch for nested changes in userInfo if necessary
     },
+    // 监听转出账户变化，清除余额，避免显示旧余额
+    "transferForm.pkAccount"(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.transferForm.yue = "";
+      }
+    },
+    // 监听接收编号变化，清除接收人姓名
+    "transferForm.toMemberCode"(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.transferForm.toMemberName = "";
+      }
+    },
   },
   methods: {
     initializeForm() {
       // Initialize form fields based on userInfo
       if (this.userInfo) {
-        this.zzform.memberCode =
+        this.transferForm.memberCode =
           this.userInfo.serviceCode || this.userInfo.memberCode;
-        if (this.zzform.memberCode) {
-          this.fetchMemberName(this.zzform.memberCode, "memberName");
+        if (this.transferForm.memberCode) {
+          this.fetchMemberName(this.transferForm.memberCode, "memberName");
         }
       }
     },
     fetchMemberName(memberCode, targetField) {
+      if (!memberCode) {
+        this.transferForm[targetField] = "";
+        return;
+      }
+      // 添加加载状态（可选）
+      // this.loading[targetField] = true;
       wal
         .getTransferChineseName({ memberCode: memberCode })
         .then((res) => {
-          if (res.code == 200) {
-            this.zzform[targetField] = res.memberName;
+          if (res.code == 200 && res.memberName) {
+            this.transferForm[targetField] = res.memberName;
           } else {
-            this.zzform[targetField] = "";
+            this.transferForm[targetField] = "";
             if (targetField === "toMemberName") {
-              this.$message.error(res.msg || "获取接收方姓名失败");
+              this.$message.error(
+                res.msg || "获取接收方姓名失败，请检查编号是否正确"
+              );
+              // 清空接收编号以便用户重新输入 (可选)
+              // this.transferForm.toMemberCode = '';
+            } else {
+              // 转出方姓名获取失败通常不提示用户，但记录日志
+              console.warn("获取转出方姓名失败:", res.msg || "未知错误");
             }
           }
         })
@@ -190,13 +252,17 @@ export default {
             }姓名失败:`,
             err
           );
-          this.zzform[targetField] = "";
+          this.transferForm[targetField] = "";
           if (targetField === "toMemberName") {
-            this.$message.error(`获取接收方姓名失败`);
+            this.$message.error(`获取接收方姓名失败，请稍后重试`);
           }
         });
+      // .finally(() => {
+      //   this.loading[targetField] = false;
+      // });
     },
     fetchTransferAccounts() {
+      // this.loading.accountList = true; // 可选加载状态
       wal
         .getTransferAccount()
         .then((res) => {
@@ -207,38 +273,52 @@ export default {
           this.$message.error("获取转账账户列表失败");
           this.accountList = [];
         });
+      // .finally(() => {
+      //   this.loading.accountList = false;
+      // });
     },
-    checkYue(val) {
-      this.zzform.yue = ""; // Reset balance first
-      if (!val) return;
+    fetchAccountBalance(pkAccountValue) {
+      this.transferForm.yue = ""; // Reset balance first
+      if (!pkAccountValue) return;
+      // this.loading.yue = true; // 可选加载状态
       wal
-        .getTransferMember({ pkAccount: val })
+        .getTransferMember({ pkAccount: pkAccountValue })
         .then((res) => {
           if (res.code === 200 && res.data !== null && res.data !== undefined) {
-            this.zzform.yue = res.data; // Assuming res.data holds the balance
+            this.transferForm.yue = res.data; // Assuming res.data holds the balance
+            // 手动触发金额校验（如果需要）
+            this.$refs.transferFormRef.validateField("transferMoney");
           } else {
-            this.zzform.yue = "获取失败";
+            this.transferForm.yue = "获取失败";
             console.warn("获取余额响应异常:", res);
+            this.$message.error(res.msg || "获取账户余额失败");
           }
         })
         .catch((err) => {
           console.error("检查余额失败:", err);
-          this.zzform.yue = "获取失败";
+          this.transferForm.yue = "获取失败";
+          this.$message.error("获取账户余额失败，请稍后重试");
         });
+      // .finally(() => {
+      //   this.loading.yue = false;
+      // });
     },
-    checkName() {
-      if (!this.zzform.toMemberCode) {
-        this.zzform.toMemberName = "";
+    fetchRecipientName() {
+      if (!this.transferForm.toMemberCode) {
+        this.transferForm.toMemberName = "";
         return;
       }
-      this.fetchMemberName(this.zzform.toMemberCode, "toMemberName");
+      // 先清除旧姓名，避免接口调用慢时显示旧数据
+      this.transferForm.toMemberName = "";
+      this.fetchMemberName(this.transferForm.toMemberCode, "toMemberName");
     },
-    saveZz() {
-      this.$refs.zzform.validate((valid) => {
+    submitTransfer() {
+      this.$refs.transferFormRef.validate((valid) => {
         if (valid) {
           // Add loading state if needed
+          // this.submitting = true;
           wal
-            .addTransfer(this.zzform)
+            .addTransfer(this.transferForm)
             .then((res) => {
               if (res.code == 200) {
                 this.$message({
@@ -253,37 +333,79 @@ export default {
             })
             .catch((err) => {
               console.error("转账失败:", err);
-              this.$message.error("转账失败");
+              // 根据错误类型或内容给出更具体的提示
+              const errorMsg =
+                err.response?.data?.msg ||
+                err.message ||
+                "转账请求失败，请检查网络或联系管理员";
+              this.$message.error(errorMsg);
             });
+          // .finally(() => {
+          //   this.submitting = false;
+          // });
         } else {
           console.log("转账表单验证失败");
+          // 可选：滚动到第一个错误项
+          // const firstErrorField = Object.keys(this.transferRules).find(field => {
+          //   const fieldInstance = this.$refs.transferFormRef.fields.find(f => f.prop === field);
+          //   return fieldInstance && fieldInstance.validateState === 'error';
+          // });
+          // if (firstErrorField) {
+          //   this.$refs.transferFormRef.fields.find(f => f.prop === firstErrorField).$el.scrollIntoView({ behavior: 'smooth' });
+          // }
+          this.$message.warning("请检查表单填写是否正确");
           return false;
         }
       });
     },
     handleBeforeClose(done) {
-      // Optional: Add confirmation dialog before closing if needed
-      done();
+      // Optional: Add confirmation dialog before closing if form is dirty
+      // const isDirty = Object.keys(this.initialFormState).some(key => this.initialFormState[key] !== this.transferForm[key]);
+      // if (isDirty) {
+      //   this.$confirm('表单内容尚未保存，确认关闭吗?', '提示', {
+      //     confirmButtonText: '确定',
+      //     cancelButtonText: '取消',
+      //     type: 'warning'
+      //   }).then(() => {
+      //     done();
+      //   }).catch(() => {});
+      // } else {
+      //   done();
+      // }
+      done(); // Keep simple for now
     },
     handleCancel() {
       this.$emit("update:visible", false);
-      this.$emit("close");
-      this.resetForm();
+      // this.$emit("close"); // onClose 也会触发，避免重复触发
+      // resetForm 会在 onClose 中调用
     },
     onClose() {
-      this.$emit("update:visible", false);
-      this.$emit("close");
+      this.$emit("update:visible", false); // 确保父组件状态同步
+      this.$emit("close"); // 触发关闭事件
       this.resetForm();
     },
     resetForm() {
-      if (this.$refs.zzform) {
-        this.$refs.zzform.resetFields();
+      // 清除校验状态
+      if (this.$refs.transferFormRef) {
+        this.$refs.transferFormRef.clearValidate();
+        // 注意：resetFields 可能不完全符合预期，特别是对于非 input 类组件或有初始值的情况
+        // this.$refs.transferFormRef.resetFields(); // 可以尝试使用，但下方手动重置更可靠
       }
-      // Manually reset fields not covered by resetFields if necessary
-      this.zzform.toMemberName = "";
-      this.zzform.yue = "";
-      // Re-initialize memberCode and memberName as they might be cleared by resetFields
-      this.initializeForm();
+      // Manually reset form data to initial state
+      this.transferForm = {
+        pkAccount: "",
+        memberCode:
+          this.userInfo?.serviceCode || this.userInfo?.memberCode || "",
+        memberName: this.transferForm.memberName,
+        toMemberCode: "",
+        transferMoney: "",
+        remarks: "",
+        payPwd: "",
+        toMemberName: "",
+        yue: "",
+      };
+      // 如果希望每次打开都重新获取转出姓名，则取消注释下一行
+      // this.initializeForm();
     },
   },
   mounted() {
@@ -293,48 +415,67 @@ export default {
       this.initializeForm();
       this.fetchTransferAccounts();
     }
+    // 保存表单初始状态，用于判断是否修改（可选）
+    // this.initialFormState = { ...this.transferForm };
   },
 };
 </script>
 
 <style lang="scss" scoped>
-::v-deep .diaBox2 {
-  padding: 0 70px;
+.transfer-dialog-content {
+  padding: 20px 40px;
+
   .el-form-item {
-    line-height: 60px; // Consider if this fixed height is always appropriate
-    margin-bottom: 22px; // Standard Element UI form item margin
+    margin-bottom: 18px;
   }
-  .el-form-item__label {
-    font-size: 18px;
-    font-weight: 500;
-    line-height: normal; // Let label determine its own line height
-    padding-right: 12px; // Standard Element UI label padding
+
+  .el-input,
+  .el-select,
+  .el-textarea {
+    width: 100%;
   }
+
   .el-input__inner,
   .el-textarea__inner {
-    width: 100%; // Use full width within the form item content
-    // height: 60px; // Avoid fixed height, let input size itself
-    padding: 0 15px; // Standard Element UI input padding
     font-size: 16px;
-    line-height: normal; // Let input determine its own line height
-  }
-  .el-select {
-    width: 100%; // Use full width
   }
 
-  .saveBtn {
-    width: 117px;
+  ::v-deep .el-form-item__label {
     font-size: 16px;
-    background-color: rgba(214, 24, 32, 1);
-    color: #ffffff;
-    border: none;
-    &:hover {
-      background-color: rgba(214, 24, 32, 0.9);
+    color: #606266;
+    line-height: 40px;
+    padding-right: 12px;
+  }
+
+  ::v-deep .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+  }
+  ::v-deep .el-select .el-input__inner {
+    height: 40px;
+    line-height: 40px;
+  }
+
+  .el-input.is-disabled .el-input__inner {
+    background-color: #f5f7fa;
+    border-color: #e4e7ed;
+    color: #c0c4cc;
+    cursor: not-allowed;
   }
 }
 
-  // Adjust button spacing if needed
-  .el-button + .el-button {
+.dialog-footer {
+  text-align: center;
+  padding-top: 10px;
+
+  .confirm-button {
+    width: 100px;
+    font-size: 16px;
+  }
+
+  .cancel-button {
+    width: 100px;
+    font-size: 16px;
     margin-left: 15px;
   }
 }