修正

src/views/dynamicManagement/friendRelation.vue

@@ -30,16 +30,32 @@
           <el-input v-model="formData.acName" placeholder="请输入" clearable />
         </el-form-item>
 
-        <el-form-item label="消费门槛金额(￥)" required>
+        <el-form-item label="消费门槛金额(￥)">
           <div style="display: flex; gap: 10px; align-items: center; width: 100%">
             <el-form-item prop="moneyLow" style="flex: 1; margin-bottom: 0">
-              <el-input v-model.number="formData.moneyLow" placeholder="0.00" clearable>
+              <el-input
+                v-model="formData.moneyLow"
+                type="number"
+                :min="0"
+                step="0.01"
+                placeholder="0.00"
+                clearable
+                @input="handleMoneyInput('moneyLow')"
+              >
                 <template #prefix> ￥ </template>
               </el-input>
             </el-form-item>
             <span>~</span>
             <el-form-item prop="moneyHigh" style="flex: 1; margin-bottom: 0">
-              <el-input v-model.number="formData.moneyHigh" placeholder="0.00" clearable>
+              <el-input
+                v-model="formData.moneyHigh"
+                type="number"
+                :min="0"
+                step="0.01"
+                placeholder="0.00"
+                clearable
+                @input="handleMoneyInput('moneyHigh')"
+              >
                 <template #prefix> ￥ </template>
               </el-input>
             </el-form-item>
@@ -133,8 +149,8 @@ const merchantList = ref<any[]>([]);
 // 表单数据
 const formData = reactive({
   acName: "",
-  moneyLow: undefined as number | undefined,
-  moneyHigh: undefined as number | undefined,
+  moneyLow: "" as string | number,
+  moneyHigh: "" as string | number,
   details: [] as Array<{
     friendStoreUserId: string | number;
     couponId: string | number;
@@ -143,11 +159,84 @@ const formData = reactive({
   }>
 });
 
+// 金额验证器
+const validateMoneyLow = (rule: any, value: any, callback: any) => {
+  if (value === "" || value === null || value === undefined) {
+    callback(new Error("请输入最低消费金额"));
+    return;
+  }
+
+  const numValue = Number(value);
+  if (isNaN(numValue)) {
+    callback(new Error("请输入有效的金额"));
+    return;
+  }
+
+  if (numValue < 0) {
+    callback(new Error("金额不能为负数"));
+    return;
+  }
+
+  // 验证小数位数不超过2位
+  const decimalPart = String(value).split(".")[1];
+  if (decimalPart && decimalPart.length > 2) {
+    callback(new Error("最多支持2位小数"));
+    return;
+  }
+
+  // 如果最高金额已填写，验证最低金额不能大于最高金额
+  if (formData.moneyHigh !== "" && formData.moneyHigh !== null && formData.moneyHigh !== undefined) {
+    const highValue = Number(formData.moneyHigh);
+    if (!isNaN(highValue) && numValue > highValue) {
+      callback(new Error("最低金额不能大于最高金额"));
+      return;
+    }
+  }
+
+  callback();
+};
+
+const validateMoneyHigh = (rule: any, value: any, callback: any) => {
+  if (value === "" || value === null || value === undefined) {
+    callback(new Error("请输入最高消费金额"));
+    return;
+  }
+
+  const numValue = Number(value);
+  if (isNaN(numValue)) {
+    callback(new Error("请输入有效的金额"));
+    return;
+  }
+
+  if (numValue < 0) {
+    callback(new Error("金额不能为负数"));
+    return;
+  }
+
+  // 验证小数位数不超过2位
+  const decimalPart = String(value).split(".")[1];
+  if (decimalPart && decimalPart.length > 2) {
+    callback(new Error("最多支持2位小数"));
+    return;
+  }
+
+  // 如果最低金额已填写，验证最高金额不能小于最低金额
+  if (formData.moneyLow !== "" && formData.moneyLow !== null && formData.moneyLow !== undefined) {
+    const lowValue = Number(formData.moneyLow);
+    if (!isNaN(lowValue) && numValue < lowValue) {
+      callback(new Error("最高金额不能小于最低金额"));
+      return;
+    }
+  }
+
+  callback();
+};
+
 // 表单验证规则
 const formRules = reactive<FormRules>({
   acName: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
-  moneyLow: [{ required: true, message: "请输入最低消费金额", trigger: "blur" }],
-  moneyHigh: [{ required: true, message: "请输入最高消费金额", trigger: "blur" }]
+  moneyLow: [{ required: true, validator: validateMoneyLow, trigger: "blur" }],
+  moneyHigh: [{ required: true, validator: validateMoneyHigh, trigger: "blur" }]
 });
 
 // 表格列配置
@@ -253,14 +342,26 @@ const openAddDialog = async () => {
   dialogVisible.value = true;
 };
 
+// 处理金额输入
+const handleMoneyInput = (field: "moneyLow" | "moneyHigh") => {
+  // 当一个金额字段改变时，触发另一个字段的验证
+  if (formRef.value) {
+    const otherField = field === "moneyLow" ? "moneyHigh" : "moneyLow";
+    // 如果另一个字段有值，触发其验证
+    if (formData[otherField] !== "" && formData[otherField] !== null && formData[otherField] !== undefined) {
+      formRef.value.validateField(otherField, () => {});
+    }
+  }
+};
+
 // 关闭对话框
 const closeDialog = () => {
   dialogVisible.value = false;
   formRef.value?.resetFields();
   Object.assign(formData, {
     acName: "",
-    moneyLow: undefined,
-    moneyHigh: undefined,
+    moneyLow: "",
+    moneyHigh: "",
     details: []
   });
   currentEditId.value = "";
@@ -504,8 +605,8 @@ const handleSubmit = async () => {
         const params = {
           storeId: localGet("createdId") || "",
           acName: formData.acName,
-          moneyHigh: formData.moneyHigh,
-          moneyLow: formData.moneyLow,
+          moneyHigh: Number(formData.moneyHigh),
+          moneyLow: Number(formData.moneyLow),
           details: details
         };