fdzcxy212206209
/
delivery
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

expressForm的更新

Browse Source
master
cxy 2 weeks ago
parent 5e8f2d8378
commit bbf1faf092
1 changed files with 30 additions and 28 deletions
Show Stats Download Patch File Download Diff File

58
frontend/src/View/user/ExpressForm.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save