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

expressForm的更新

Browse Source
master
cxy 2 weeks ago
parent 47c3182032
commit 4d880a7c12
1 changed files with 79 additions and 21 deletions
Show Stats Download Patch File Download Diff File

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

@ -9,48 +9,72 @@
<el-button class="btn">智能填写</el-button>
</el-row>
</el-row>
<el-form label-width="auto" class="form">
<el-form-item label="姓名">
<el-input placeholder="请填写真实姓名"></el-input>
<el-form label-width="auto" class="form" ref="formRef">
<el-form-item>
<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-input placeholder="请填写手机号码或者固话号码"></el-input>
<el-form-item>
<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-input placeholder="请选择省市区"></el-input>
<el-form-item>
<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-input placeholder="请填写详细地址"></el-input>
<el-form-item>
<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-item label="姓名">
<el-input placeholder="请填写真实姓名"></el-input>
<el-form label-width="auto" class="form" ref="formRef">
<el-form-item>
<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-input placeholder="请填写手机号码或者固话号码"></el-input>
<el-form-item>
<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-input placeholder="请选择省市区"></el-input>
<el-form-item>
<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-input placeholder="请填写详细地址"></el-input>
<el-form-item>
<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%;

Write Preview
Loading…
Cancel
Save