angelo
/
web-base-pc
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
woody 2025-05-06 11:01:11 +08:00
parent 551a363b57
commit 23a9b42d8b
1 changed files with 242 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

343
src/components/TransferDialog.vue
View File

@ -1,20 +1,26 @@
<template> <template>
<el-dialog <el-dialog
:title="'转账'" title="转账"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
width="30%" width="40%"
center center
:close-on-click-modal="false" :close-on-click-modal="false"
:before-close="handleBeforeClose" :before-close="handleBeforeClose"
@close="onClose" @close="onClose"
> >
<div class="diaBox2"> <div class="transfer-dialog-content">
<el-form :model="zzform" :rules="zzrules" label-width="auto" ref="zzform"> <el-form
<el-form-item :label="'转出账户'" prop="pkAccount"> :model="transferForm"
:rules="transferRules"
label-width="100px"
ref="transferFormRef"
>
<el-form-item label="转出账户" prop="pkAccount">
<el-select <el-select
@change="checkYue" @change="fetchAccountBalance"
v-model="zzform.pkAccount" v-model="transferForm.pkAccount"
:placeholder="'请选择'" placeholder="请选择"
style="width: 100%"
> >
<el-option <el-option
v-for="(item, index) in accountList" v-for="(item, index) in accountList"
@ -24,49 +30,58 @@
></el-option> ></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="'当前余额'" prop="yue"> <el-form-item label="当前余额" prop="yue">
<el-input v-model="zzform.yue" disabled></el-input> <el-input v-model="transferForm.yue" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="'转出编号'" prop="memberCode"> <el-form-item label="转出编号" prop="memberCode">
<el-input v-model="zzform.memberCode" disabled></el-input> <el-input v-model="transferForm.memberCode" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="'转出姓名'" prop="memberName"> <el-form-item label="转出姓名" prop="memberName">
<el-input v-model="zzform.memberName" disabled></el-input> <el-input v-model="transferForm.memberName" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="'接收编号'" prop="toMemberCode"> <el-form-item label="接收编号" prop="toMemberCode">
<el-input <el-input
v-model="zzform.toMemberCode" v-model="transferForm.toMemberCode"
@blur="checkName" @blur="fetchRecipientName"
:placeholder="'请输入'" placeholder="请输入"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="'接收姓名'" prop="toMemberName"> <el-form-item label="接收姓名" prop="toMemberName">
<el-input v-model="zzform.toMemberName" disabled></el-input> <el-input v-model="transferForm.toMemberName" disabled></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="'转账金额'" prop="transferMoney"> <el-form-item label="转账金额" prop="transferMoney">
<el-input <el-input
v-model="zzform.transferMoney" v-model="transferForm.transferMoney"
:placeholder="'请输入'" placeholder="请输入"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="'二级密码'" prop="payPwd"> <el-form-item label="二级密码" prop="payPwd">
<el-input <el-input
v-model="zzform.payPwd" v-model="transferForm.payPwd"
type="password" type="password"
:placeholder="'请输入'" show-password
placeholder="请输入"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="'备注'" prop="remarks"> <el-form-item label="备注" prop="remarks">
<el-input v-model="zzform.remarks" :placeholder="'请输入'"></el-input> <el-input
v-model="transferForm.remarks"
type="textarea"
:rows="2"
placeholder="请输入"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div style="text-align: center"> <div class="dialog-footer">
<el-button class="saveBtn" @click="saveZz">{{ "确认" }}</el-button>
<el-button <el-button
@click="handleCancel" type="primary"
style="width: 117px; font-size: 16px" class="confirm-button"
>{{ "取消" }}</el-button @click="submitTransfer"
>{{ "确认" }}</el-button
> >
<el-button @click="handleCancel" class="cancel-button">{{
"取消"
}}</el-button>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
@ -93,8 +108,15 @@ export default {
if (!value) { if (!value) {
return callback(new Error("请输入转账金额")); 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 { } else {
callback(); callback();
} }
@ -104,12 +126,16 @@ export default {
return callback(new Error("请输入二级密码")); return callback(new Error("请输入二级密码"));
} }
// Add more complex password validation if needed // Add more complex password validation if needed
// Example: Minimum length
// if (value.length < 6) {
// return callback(new Error('二级密码长度至少为6位'));
// }
callback(); callback();
}; };
return { return {
dialogVisible: this.visible, dialogVisible: this.visible,
zzform: { transferForm: {
pkAccount: "", pkAccount: "",
memberCode: "", memberCode: "",
memberName: "", memberName: "",
@ -121,15 +147,18 @@ export default {
yue: "", yue: "",
}, },
accountList: [], accountList: [],
zzrules: { transferRules: {
pkAccount: [ pkAccount: [
{ required: true, message: "请选择转出账户", trigger: "change" }, { required: true, message: "请选择转出账户", trigger: "change" },
], ],
toMemberCode: [ toMemberCode: [
{ required: true, message: "请输入接收编号", trigger: "blur" }, { required: true, message: "请输入接收编号", trigger: "blur" },
// 可选：添加编号格式校验
// { pattern: /^\d+$/, message: '接收编号必须为数字', trigger: 'blur' }
], ],
transferMoney: [ transferMoney: [
{ required: true, validator: validateAmount, trigger: "blur" }, { required: true, message: "请输入转账金额", trigger: "blur" }, // 保留必填，具体校验交给 validator
{ validator: validateAmount, trigger: "blur" },
], ],
payPwd: [ payPwd: [
{ required: true, validator: validatePassword, trigger: "blur" }, { required: true, validator: validatePassword, trigger: "blur" },
@ -137,6 +166,14 @@ export default {
remarks: [ remarks: [
{ max: 200, message: "备注不能超过200个字符", trigger: "blur" }, { 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 immediate: true, // Trigger the handler immediately when component mounts
deep: true, // Watch for nested changes in userInfo if necessary 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: { methods: {
initializeForm() { initializeForm() {
// Initialize form fields based on userInfo // Initialize form fields based on userInfo
if (this.userInfo) { if (this.userInfo) {
this.zzform.memberCode = this.transferForm.memberCode =
this.userInfo.serviceCode || this.userInfo.memberCode; this.userInfo.serviceCode || this.userInfo.memberCode;
if (this.zzform.memberCode) { if (this.transferForm.memberCode) {
this.fetchMemberName(this.zzform.memberCode, "memberName"); this.fetchMemberName(this.transferForm.memberCode, "memberName");
} }
} }
}, },
fetchMemberName(memberCode, targetField) { fetchMemberName(memberCode, targetField) {
if (!memberCode) {
this.transferForm[targetField] = "";
return;
}
// 添加加载状态（可选）
// this.loading[targetField] = true;
wal wal
.getTransferChineseName({ memberCode: memberCode }) .getTransferChineseName({ memberCode: memberCode })
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200 && res.memberName) {
this.zzform[targetField] = res.memberName; this.transferForm[targetField] = res.memberName;
} else { } else {
this.zzform[targetField] = ""; this.transferForm[targetField] = "";
if (targetField === "toMemberName") { 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 err
); );
this.zzform[targetField] = ""; this.transferForm[targetField] = "";
if (targetField === "toMemberName") { if (targetField === "toMemberName") {
this.$message.error(`获取接收方姓名失败`); this.$message.error(`获取接收方姓名失败，请稍后重试`);
} }
}); });
// .finally(() => {
// this.loading[targetField] = false;
// });
}, },
fetchTransferAccounts() { fetchTransferAccounts() {
// this.loading.accountList = true; // 可选加载状态
wal wal
.getTransferAccount() .getTransferAccount()
.then((res) => { .then((res) => {
@ -207,38 +273,52 @@ export default {
this.$message.error("获取转账账户列表失败"); this.$message.error("获取转账账户列表失败");
this.accountList = []; this.accountList = [];
}); });
// .finally(() => {
// this.loading.accountList = false;
// });
}, },
checkYue(val) { fetchAccountBalance(pkAccountValue) {
this.zzform.yue = ""; // Reset balance first this.transferForm.yue = ""; // Reset balance first
if (!val) return; if (!pkAccountValue) return;
// this.loading.yue = true; // 可选加载状态
wal wal
.getTransferMember({ pkAccount: val }) .getTransferMember({ pkAccount: pkAccountValue })
.then((res) => { .then((res) => {
if (res.code === 200 && res.data !== null && res.data !== undefined) { 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 { } else {
this.zzform.yue = "获取失败"; this.transferForm.yue = "获取失败";
console.warn("获取余额响应异常:", res); console.warn("获取余额响应异常:", res);
this.$message.error(res.msg || "获取账户余额失败");
} }
}) })
.catch((err) => { .catch((err) => {
console.error("检查余额失败:", err); console.error("检查余额失败:", err);
this.zzform.yue = "获取失败"; this.transferForm.yue = "获取失败";
this.$message.error("获取账户余额失败，请稍后重试");
}); });
// .finally(() => {
// this.loading.yue = false;
// });
}, },
checkName() { fetchRecipientName() {
if (!this.zzform.toMemberCode) { if (!this.transferForm.toMemberCode) {
this.zzform.toMemberName = ""; this.transferForm.toMemberName = "";
return; return;
} }
this.fetchMemberName(this.zzform.toMemberCode, "toMemberName"); // 先清除旧姓名，避免接口调用慢时显示旧数据
this.transferForm.toMemberName = "";
this.fetchMemberName(this.transferForm.toMemberCode, "toMemberName");
}, },
saveZz() { submitTransfer() {
this.$refs.zzform.validate((valid) => { this.$refs.transferFormRef.validate((valid) => {
if (valid) { if (valid) {
// Add loading state if needed // Add loading state if needed
// this.submitting = true;
wal wal
.addTransfer(this.zzform) .addTransfer(this.transferForm)
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.$message({ this.$message({
@ -253,37 +333,79 @@ export default {
}) })
.catch((err) => { .catch((err) => {
console.error("转账失败:", err); console.error("转账失败:", err);
this.$message.error("转账失败"); // 根据错误类型或内容给出更具体的提示
const errorMsg =
err.response?.data?.msg ||
err.message ||
"转账请求失败，请检查网络或联系管理员";
this.$message.error(errorMsg);
}); });
// .finally(() => {
// this.submitting = false;
// });
} else { } else {
console.log("转账表单验证失败"); 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; return false;
} }
}); });
}, },
handleBeforeClose(done) { handleBeforeClose(done) {
// Optional: Add confirmation dialog before closing if needed // Optional: Add confirmation dialog before closing if form is dirty
done(); // 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() { handleCancel() {
this.$emit("update:visible", false); this.$emit("update:visible", false);
this.$emit("close"); // this.$emit("close"); // onClose 也会触发，避免重复触发
this.resetForm(); // resetForm 会在 onClose 中调用
}, },
onClose() { onClose() {
this.$emit("update:visible", false); this.$emit("update:visible", false); // 确保父组件状态同步
this.$emit("close"); this.$emit("close"); // 触发关闭事件
this.resetForm(); this.resetForm();
}, },
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 // Manually reset form data to initial state
this.zzform.toMemberName = ""; this.transferForm = {
this.zzform.yue = ""; pkAccount: "",
// Re-initialize memberCode and memberName as they might be cleared by resetFields memberCode:
this.initializeForm(); this.userInfo?.serviceCode || this.userInfo?.memberCode || "",
memberName: this.transferForm.memberName,
toMemberCode: "",
transferMoney: "",
remarks: "",
payPwd: "",
toMemberName: "",
yue: "",
};
// 如果希望每次打开都重新获取转出姓名，则取消注释下一行
// this.initializeForm();
}, },
}, },
mounted() { mounted() {
@ -293,48 +415,67 @@ export default {
this.initializeForm(); this.initializeForm();
this.fetchTransferAccounts(); this.fetchTransferAccounts();
} }
// 保存表单初始状态，用于判断是否修改（可选）
// this.initialFormState = { ...this.transferForm };
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .diaBox2 { .transfer-dialog-content {
padding: 0 70px; padding: 20px 40px;
.el-form-item { .el-form-item {
line-height: 60px; // Consider if this fixed height is always appropriate margin-bottom: 18px;
margin-bottom: 22px; // Standard Element UI form item margin
} }
.el-form-item__label {
font-size: 18px; .el-input,
font-weight: 500; .el-select,
line-height: normal; // Let label determine its own line height .el-textarea {
padding-right: 12px; // Standard Element UI label padding width: 100%;
} }
.el-input__inner, .el-input__inner,
.el-textarea__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; font-size: 16px;
line-height: normal; // Let input determine its own line height
}
.el-select {
width: 100%; // Use full width
} }
.saveBtn { ::v-deep .el-form-item__label {
width: 117px;
font-size: 16px; font-size: 16px;
background-color: rgba(214, 24, 32, 1); color: #606266;
color: #ffffff; line-height: 40px;
border: none; padding-right: 12px;
&:hover {
background-color: rgba(214, 24, 32, 0.9);
}
} }
// Adjust button spacing if needed ::v-deep .el-input__inner {
.el-button + .el-button { 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;
}
}
.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; margin-left: 15px;
} }
} }