From bbf1faf092ac477b4978fa0c5394a5c5b695e9bb Mon Sep 17 00:00:00 2001
From: cxy <1276771477@qq.com>
Date: Thu, 14 Nov 2024 19:31:46 +0800
Subject: [PATCH] =?UTF-8?q?expressForm=E7=9A=84=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/View/user/ExpressForm.vue | 58 +++++++++++++-------------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/frontend/src/View/user/ExpressForm.vue b/frontend/src/View/user/ExpressForm.vue
index 9586dd7..bbc0c8a 100644
--- a/frontend/src/View/user/ExpressForm.vue
+++ b/frontend/src/View/user/ExpressForm.vue
@@ -9,33 +9,33 @@
             <el-button class="btn">智能填写</el-button>
           </el-row>
         </el-row>
-        <el-form label-width="auto" class="form" ref="formRef">
+        <el-form label-width="auto" class="form" ref="sendFormRef">
           <el-form-item>
             <template #label>
               <span style="color: red;">*</span> 姓名
             </template>
-            <el-input placeholder="请填写真实姓名" v-model="formData.name"></el-input>
+            <el-input placeholder="请填写真实姓名" v-model="sendFormData.name"></el-input>
           </el-form-item>
           <el-form-item>
             <template #label>
               <span style="color: red;">*</span> 联系电话
             </template>
-            <el-input placeholder="请填写手机号码或者固话号码" v-model="formData.phone"></el-input>
+            <el-input placeholder="请填写手机号码或者固话号码" v-model="sendFormData.phone"></el-input>
           </el-form-item>
           <el-form-item>
             <template #label>
               <span style="color: red;">*</span> 省市区
             </template>
-            <el-input placeholder="请选择省市区" v-model="formData.region"></el-input>
+            <el-input placeholder="请选择省市区" v-model="sendFormData.region"></el-input>
           </el-form-item>
           <el-form-item>
             <template #label>
               <span style="color: red;">*</span> 详细地址
             </template>
-            <el-input placeholder="请填写详细地址" v-model="formData.address"></el-input>
+            <el-input placeholder="请填写详细地址" v-model="sendFormData.address"></el-input>
           </el-form-item>
           <el-form-item label="公司名称">
-            <el-input placeholder="请填写公司名称" v-model="formData.company"></el-input>
+            <el-input placeholder="请填写公司名称" v-model="sendFormData.company"></el-input>
           </el-form-item>
         </el-form>
       </el-row>
@@ -48,33 +48,33 @@
             <el-button class="btn">智能填写</el-button>
           </el-row>
         </el-row>
-        <el-form label-width="auto" class="form" ref="formRef">
+        <el-form label-width="auto" class="form" ref="receiveFormRef">
           <el-form-item>
             <template #label>
               <span style="color: red;">*</span> 姓名
             </template>
-            <el-input placeholder="请填写真实姓名" v-model="formData.name"></el-input>
+            <el-input placeholder="请填写真实姓名" v-model="receiveFormData.name"></el-input>
           </el-form-item>
           <el-form-item>
             <template #label>
               <span style="color: red;">*</span> 联系电话
             </template>
-            <el-input placeholder="请填写手机号码或者固话号码" v-model="formData.phone"></el-input>
+            <el-input placeholder="请填写手机号码或者固话号码" v-model="receiveFormData.phone"></el-input>
           </el-form-item>
           <el-form-item>
             <template #label>
               <span style="color: red;">*</span> 省市区
             </template>
-            <el-input placeholder="请选择省市区" v-model="formData.region"></el-input>
+            <el-input placeholder="请选择省市区" v-model="receiveFormData.region"></el-input>
           </el-form-item>
           <el-form-item>
             <template #label>
               <span style="color: red;">*</span> 详细地址
             </template>
-            <el-input placeholder="请填写详细地址" v-model="formData.address"></el-input>
+            <el-input placeholder="请填写详细地址" v-model="receiveFormData.address"></el-input>
           </el-form-item>
           <el-form-item label="公司名称">
-            <el-input placeholder="请填写公司名称" v-model="formData.company"></el-input>
+            <el-input placeholder="请填写公司名称" v-model="receiveFormData.company"></el-input>
           </el-form-item>
         </el-form>
       </el-row>
@@ -89,7 +89,7 @@
       </el-row>
     </el-row>
     <el-row class="panel send-panel">
-      <el-text class="confirm-btn">下单</el-text>
+      <el-button @click="submitForm" class="confirm-btn">下单</el-button>
     </el-row>
   </el-row>
 </template>
@@ -97,34 +97,36 @@
 <script setup>
 import { ref } from 'vue';
 
-const formRef = ref(null); // 用于操作表单
-const formData = ref({
+const sendFormRef = ref(null); // 用于操作寄件表单
+const receiveFormRef = ref(null); // 用于操作收件表单
+
+const sendFormData = ref({
   name: '',
   phone: '',
   region: '',
   address: '',
   company: ''
-}); // 表单数据
+}); // 寄件表单数据
 
-// 验证规则设置
-const rules = {
-  name: [{ required: true, message: '姓名为必填项', trigger: ['blur', 'change'] }],
-  phone: [{ required: true, message: '联系电话为必填项', trigger: ['blur', 'change'] }],
-  region: [{ required: true, message: '省市区为必填项', trigger: ['blur', 'change'] }],
-  address: [{ required: true, message: '详细地址为必填项', trigger: ['blur', 'change'] }],
-  company: [{ required: true, message: '公司名称为必填项', trigger: ['blur', 'change'] }]
-};
+const receiveFormData = ref({
+  name: '',
+  phone: '',
+  region: '',
+  address: '',
+  company: ''
+}); // 收件表单数据
 
 // 提交表单的逻辑
 const submitForm = async () => {
   try {
-    // 验证表单是否有效
-    await formRef.value.validate();
+    await sendFormRef.value.validate(); // 验证寄件表单
+    await receiveFormRef.value.validate(); // 验证收件表单
+
     // 如果验证通过，可以进行下一步操作，比如提交数据
-    console.log('表单数据:', formData.value);
+    console.log('寄件表单数据:', sendFormData.value);
+    console.log('收件表单数据:', receiveFormData.value);
     // 在这里添加表单提交的相关逻辑
   } catch (error) {
-    // 验证失败，打印错误信息
     console.log('表单验证失败:', error);
   }
 };