expressForm的更新

frontend/src/View/user/ExpressForm.vue

@@ -9,48 +9,72 @@
             <el-button class="btn">智能填写</el-button>
           </el-row>
         </el-row>
-        <el-form label-width="auto" class="form">
+        <el-form label-width="auto" class="form" ref="formRef">
-          <el-form-item label="姓名">
+          <el-form-item>
-            <el-input placeholder="请填写真实姓名"></el-input>
+            <template #label>
+              <span style="color: red;">*</span> 姓名
+            </template>
+            <el-input placeholder="请填写真实姓名" v-model="formData.name"></el-input>
           </el-form-item>
-          <el-form-item label="联系电话">
+          <el-form-item>
-            <el-input placeholder="请填写手机号码或者固话号码"></el-input>
+            <template #label>
+              <span style="color: red;">*</span> 联系电话
+            </template>
+            <el-input placeholder="请填写手机号码或者固话号码" v-model="formData.phone"></el-input>
           </el-form-item>
-          <el-form-item label="省市区">
+          <el-form-item>
-            <el-input placeholder="请选择省市区"></el-input>
+            <template #label>
+              <span style="color: red;">*</span> 省市区
+            </template>
+            <el-input placeholder="请选择省市区" v-model="formData.region"></el-input>
           </el-form-item>
-          <el-form-item label="详细地址">
+          <el-form-item>
-            <el-input placeholder="请填写详细地址"></el-input>
+            <template #label>
+              <span style="color: red;">*</span> 详细地址
+            </template>
+            <el-input placeholder="请填写详细地址" v-model="formData.address"></el-input>
           </el-form-item>
           <el-form-item label="公司名称">
-            <el-input placeholder="请填写公司名称"></el-input>
+            <el-input placeholder="请填写公司名称" v-model="formData.company"></el-input>
           </el-form-item>
         </el-form>
       </el-row>
       <el-image class="arrow" src="/arrow.png"></el-image>
       <el-row class="panel send-panel send-panel1">
         <el-row class="send-container">
-          <el-button class="send-btn receive-btn">收</el-button>
+          <el-button class="receive-btn">收</el-button>
           <el-row>
             <el-button class="btn">地址薄</el-button>
             <el-button class="btn">智能填写</el-button>
           </el-row>
         </el-row>
-        <el-form label-width="auto" class="form">
+        <el-form label-width="auto" class="form" ref="formRef">
-          <el-form-item label="姓名">
+          <el-form-item>
-            <el-input placeholder="请填写真实姓名"></el-input>
+            <template #label>
+              <span style="color: red;">*</span> 姓名
+            </template>
+            <el-input placeholder="请填写真实姓名" v-model="formData.name"></el-input>
           </el-form-item>
-          <el-form-item label="联系电话">
+          <el-form-item>
-            <el-input placeholder="请填写手机号码或者固话号码"></el-input>
+            <template #label>
+              <span style="color: red;">*</span> 联系电话
+            </template>
+            <el-input placeholder="请填写手机号码或者固话号码" v-model="formData.phone"></el-input>
           </el-form-item>
-          <el-form-item label="省市区">
+          <el-form-item>
-            <el-input placeholder="请选择省市区"></el-input>
+            <template #label>
+              <span style="color: red;">*</span> 省市区
+            </template>
+            <el-input placeholder="请选择省市区" v-model="formData.region"></el-input>
           </el-form-item>
-          <el-form-item label="详细地址">
+          <el-form-item>
-            <el-input placeholder="请填写详细地址"></el-input>
+            <template #label>
+              <span style="color: red;">*</span> 详细地址
+            </template>
+            <el-input placeholder="请填写详细地址" v-model="formData.address"></el-input>
           </el-form-item>
           <el-form-item label="公司名称">
-            <el-input placeholder="请填写公司名称"></el-input>
+            <el-input placeholder="请填写公司名称" v-model="formData.company"></el-input>
           </el-form-item>
         </el-form>
       </el-row>
@@ -71,9 +95,43 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
 
+const formRef = ref(null); // 用于操作表单
+const formData = 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 submitForm = async () => {
+  try {
+    // 验证表单是否有效
+    await formRef.value.validate();
+    // 如果验证通过，可以进行下一步操作，比如提交数据
+    console.log('表单数据:', formData.value);
+    // 在这里添加表单提交的相关逻辑
+  } catch (error) {
+    // 验证失败，打印错误信息
+    console.log('表单验证失败:', error);
+  }
+};
 </script>
 
+
+
 <style scoped>
  .send-btn {
    border-radius: 100%;