105 lines
2.7 KiB
Vue
105 lines
2.7 KiB
Vue
<template>
|
|
<el-form
|
|
label-position="top"
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
label-width="100px"
|
|
>
|
|
<div style="margin-bottom: 15px">
|
|
<span
|
|
class="x_bg_blue"
|
|
style="
|
|
display: inline-block;
|
|
width: 5px;
|
|
height: 5px;
|
|
margin: 0 5px;
|
|
vertical-align: middle;
|
|
"
|
|
></span>
|
|
联系我
|
|
</div>
|
|
<el-form-item label="" prop="content">
|
|
<el-input
|
|
v-model="form.content"
|
|
type="textarea"
|
|
:autosize="{ minRows: 4, maxRows: 6 }"
|
|
placeholder="请输入需求"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="姓名" prop="name">
|
|
<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="单位" prop="company">
|
|
<el-input v-model="form.company" placeholder="请输入所在单位"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="联系电话" prop="mobile">
|
|
<el-input
|
|
v-model="form.mobile"
|
|
maxlength="11"
|
|
placeholder="请输入联系电话"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱">
|
|
<el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button class="x_btns" @click="submitForm">提交</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
<script setup>
|
|
import { launch } from "@/api/config";
|
|
const { proxy } = getCurrentInstance();
|
|
const data = reactive({
|
|
form: {},
|
|
rules: {
|
|
content: [{ required: true, message: "需求内容不能为空", trigger: "blur" }],
|
|
name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
|
|
company: [{ required: true, message: "单位不能为空", trigger: "blur" }],
|
|
mobile: [
|
|
{ required: true, message: "联系电话不能为空", trigger: "blur" },
|
|
{
|
|
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
|
message: "请输入正确的手机号码",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
},
|
|
});
|
|
const { form, rules } = toRefs(data);
|
|
/** 表单重置 */
|
|
function reset() {
|
|
form.value = {
|
|
content: undefined,
|
|
name: undefined,
|
|
company: undefined,
|
|
mobile: undefined,
|
|
email: undefined,
|
|
};
|
|
proxy.resetForm("formRef");
|
|
}
|
|
/** 提交按钮 */
|
|
function submitForm() {
|
|
proxy.$refs["formRef"].validate((valid) => {
|
|
if (valid) {
|
|
launch(form.value).then((res) => {
|
|
proxy.$modal.msgSuccess(res.message);
|
|
reset();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.el-form-item {
|
|
margin-bottom: 15px;
|
|
}
|
|
::v-deep .el-form-item--medium .el-form-item__label {
|
|
line-height: 22px;
|
|
padding-bottom: 5px;
|
|
}
|
|
.x_btns {
|
|
width: 100%;
|
|
}
|
|
</style> |