<template>
|
<div class="collect-page">
|
<div class="collect-header">
|
<h2>车辆信息采集</h2>
|
<p>请如实填写车辆信息，提交后由企业审核</p>
|
</div>
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="collect-form">
|
<el-form-item label="车牌号码" prop="plateNo">
|
<el-input v-model="form.plateNo" size="large" placeholder="如：苏A12345" clearable />
|
</el-form-item>
|
|
<el-form-item label="号牌颜色" prop="plateColor">
|
<el-select v-model="form.plateColor" size="large" placeholder="请选择" style="width: 100%">
|
<el-option v-for="i in plateColorOptions" :key="i" :label="i" :value="i" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="车辆类型" prop="carType">
|
<el-select v-model="form.carType" size="large" placeholder="请选择" style="width: 100%">
|
<el-option v-for="i in carTypeOptions" :key="i" :label="i" :value="i" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="车辆识别代码（VIN）" prop="carVin">
|
<el-input v-model="form.carVin" size="large" placeholder="17 位 VIN 码" clearable />
|
</el-form-item>
|
|
<el-form-item label="车辆型号" prop="carModel">
|
<el-input v-model="form.carModel" size="large" placeholder="请输入车辆型号" clearable />
|
</el-form-item>
|
|
<el-form-item label="发动机型号" prop="engineModel">
|
<el-input v-model="form.engineModel" size="large" placeholder="请输入发动机型号" clearable />
|
</el-form-item>
|
|
<el-form-item label="发动机生产厂" prop="engineProductFactory">
|
<el-input v-model="form.engineProductFactory" size="large" placeholder="请输入发动机生产厂" clearable />
|
</el-form-item>
|
|
<el-form-item label="发动机编号" prop="engineNo">
|
<el-input v-model="form.engineNo" size="large" placeholder="请输入发动机编号" clearable />
|
</el-form-item>
|
|
<el-form-item label="排放标准" prop="emissionStandard">
|
<el-select v-model="form.emissionStandard" size="large" placeholder="请选择" style="width: 100%">
|
<el-option v-for="i in emissionOptions" :key="i" :label="i" :value="i" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="注册登记日期" prop="registeDate">
|
<el-date-picker
|
v-model="form.registeDate"
|
size="large"
|
type="date"
|
value-format="YYYY-MM-DD"
|
placeholder="请选择注册登记日期"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
|
<el-form-item label="使用性质" prop="natureOfUse">
|
<el-select v-model="form.natureOfUse" size="large" placeholder="请选择" style="width: 100%">
|
<el-option v-for="i in natureOptions" :key="i" :label="i" :value="i" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="燃料类型" prop="fuelType">
|
<el-select v-model="form.fuelType" size="large" placeholder="请选择" style="width: 100%">
|
<el-option v-for="i in fuelOptions" :key="i" :label="i" :value="i" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="车牌照片" prop="platePhoto">
|
<PhotoCapture v-model="form.platePhoto" placeholder="拍摄车牌" />
|
</el-form-item>
|
|
<el-form-item label="行驶证照片" prop="licensePhoto">
|
<PhotoCapture v-model="form.licensePhoto" placeholder="拍摄行驶证" />
|
</el-form-item>
|
|
<el-form-item label="车辆全景照片" prop="scenePhoto">
|
<PhotoCapture v-model="form.scenePhoto" placeholder="拍摄车辆全景" />
|
</el-form-item>
|
|
<div class="collect-actions">
|
<el-button type="primary" size="large" :loading="submitting" style="width: 100%" @click="submit">
|
提交采集
|
</el-button>
|
<el-button size="large" style="width: 100%; margin: 10px 0 0 0" @click="reset">重新填写</el-button>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from "vue";
|
import { ElMessage } from "element-plus";
|
import { addVehicleInfo } from "@/api/environmentAccess/vehicleInfo.js";
|
import PhotoCapture from "../components/PhotoCapture.vue";
|
|
defineOptions({ name: "车辆信息采集" });
|
|
const formRef = ref();
|
const submitting = ref(false);
|
|
const plateColorOptions = ["蓝色", "黄色", "绿色", "白色", "黑色", "其他"];
|
const carTypeOptions = ["小型汽车", "大型汽车", "新能源汽车", "挂车", "摩托车", "其他"];
|
const emissionOptions = ["国三", "国四", "国五", "国六", "纯电动", "其他"];
|
const natureOptions = ["营运", "非营运", "货运", "客运", "其他"];
|
const fuelOptions = ["汽油", "柴油", "天然气", "电", "混合动力", "其他"];
|
|
const emptyForm = () => ({
|
plateNo: "",
|
plateColor: "",
|
carType: "",
|
carVin: "",
|
carModel: "",
|
engineModel: "",
|
engineProductFactory: "",
|
engineNo: "",
|
emissionStandard: "",
|
registeDate: "",
|
natureOfUse: "",
|
fuelType: "",
|
platePhoto: "",
|
licensePhoto: "",
|
scenePhoto: "",
|
});
|
|
const form = reactive(emptyForm());
|
|
const rules = {
|
plateNo: [{ required: true, message: "请输入车牌号码", trigger: "blur" }],
|
plateColor: [{ required: true, message: "请选择号牌颜色", trigger: "change" }],
|
carType: [{ required: true, message: "请选择车辆类型", trigger: "change" }],
|
};
|
|
const submit = () => {
|
formRef.value?.validate((valid) => {
|
if (!valid) return;
|
submitting.value = true;
|
addVehicleInfo({ ...form, reviewStatus: "pending" })
|
.then(() => {
|
ElMessage.success("提交成功，等待企业审核");
|
Object.assign(form, emptyForm());
|
formRef.value?.clearValidate();
|
})
|
.catch(() => ElMessage.error("提交失败，请稍后重试"))
|
.finally(() => {
|
submitting.value = false;
|
});
|
});
|
};
|
|
const reset = () => {
|
Object.assign(form, emptyForm());
|
formRef.value?.clearValidate();
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.collect-page {
|
max-width: 640px;
|
margin: 0 auto;
|
padding: 16px 14px 40px;
|
background: #fff;
|
min-height: 100vh;
|
box-sizing: border-box;
|
}
|
|
.collect-header {
|
padding: 8px 0 16px;
|
border-bottom: 1px solid #ebeef5;
|
margin-bottom: 18px;
|
|
h2 {
|
margin: 0 0 6px;
|
font-size: 20px;
|
color: #303133;
|
}
|
|
p {
|
margin: 0;
|
font-size: 13px;
|
color: #909399;
|
}
|
}
|
|
.collect-form {
|
:deep(.el-form-item__label) {
|
font-size: 15px;
|
padding-bottom: 4px;
|
}
|
|
:deep(.el-input__inner),
|
:deep(.el-select__placeholder) {
|
font-size: 15px;
|
}
|
}
|
|
.collect-actions {
|
margin-top: 22px;
|
}
|
|
/* 手机端适配 */
|
@media (max-width: 768px) {
|
.collect-page {
|
padding: 12px 12px calc(48px + env(safe-area-inset-bottom));
|
min-height: auto;
|
}
|
|
.collect-header h2 {
|
font-size: 18px;
|
}
|
|
.collect-form :deep(.el-form-item) {
|
margin-bottom: 16px;
|
}
|
|
.collect-actions {
|
position: sticky;
|
bottom: 0;
|
padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
|
background: #fff;
|
margin-top: 12px;
|
}
|
}
|
</style>
|
