531 lines
16 KiB
Vue
531 lines
16 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<VNavigationBar :title="pageTitle" background-color="#fff" title-color="#333"></VNavigationBar>
|
||
|
|
<view class="body">
|
||
|
|
<u-form labelPosition="top">
|
||
|
|
<view class="card">
|
||
|
|
<u-form-item borderBottom label="客户姓名" label-width="200">
|
||
|
|
<u-input v-model="userInfo.cusName" border="none" placeholder="请输入客户姓名"></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item borderBottom label="客户性别" label-width="200">
|
||
|
|
<u-radio-group
|
||
|
|
v-model="userInfo.sex"
|
||
|
|
placement="row"
|
||
|
|
>
|
||
|
|
<u-radio key="0" label="男" name="0" style="margin-right: 100rpx"></u-radio>
|
||
|
|
<u-radio key="1" label="女" name="1"></u-radio>
|
||
|
|
</u-radio-group>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item borderBottom label="客户联系方式" label-width="200">
|
||
|
|
<u-input v-model="userInfo.phoneNumber" border="none" placeholder="请输入客户手机号" type="number"></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="card">
|
||
|
|
<u-form-item borderBottom label="上传行驶证自动识别" labelWidth="200">
|
||
|
|
<u-upload
|
||
|
|
:fileList="fileList1"
|
||
|
|
@afterRead="afterRead"
|
||
|
|
@delete="deletePic"
|
||
|
|
name="1"
|
||
|
|
:maxCount="1"
|
||
|
|
multiple
|
||
|
|
></u-upload>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item borderBottom label="车牌号" labelWidth="200" @click="carInputClick();">
|
||
|
|
<u-input
|
||
|
|
@click="carInputClick();"
|
||
|
|
v-model="car.licenseNumber"
|
||
|
|
border="none"
|
||
|
|
disabled
|
||
|
|
disabledColor="#ffffff"
|
||
|
|
placeholder="请输入车牌号"
|
||
|
|
></u-input>
|
||
|
|
<u-icon
|
||
|
|
slot="right"
|
||
|
|
name="arrow-right"
|
||
|
|
></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<!-- @click="brandType = true;"-->
|
||
|
|
<u-form-item label="车辆品牌" labelWidth="200">
|
||
|
|
<song-data-picker
|
||
|
|
ref="songpicker"
|
||
|
|
style=" width: 100%;"
|
||
|
|
:localdata="brandList"
|
||
|
|
popup-title="请选择品牌"
|
||
|
|
:openSearch="true"
|
||
|
|
@change="onchange"
|
||
|
|
@nodeclick="onnodeclick"
|
||
|
|
></song-data-picker>
|
||
|
|
<!-- <picker @change="picker($event)" :value="arrayIndex" :range="brandList" range-key="brandName" v-if="brandList">-->
|
||
|
|
<!-- <view class="uni-input">{{ brandList && brandList[arrayIndex] ? brandList[arrayIndex].brandName : '' }}</view>-->
|
||
|
|
<!-- </picker>-->
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="车辆型号" labelWidth="200">
|
||
|
|
<u-input
|
||
|
|
v-model="car.carModel"
|
||
|
|
border="none"
|
||
|
|
placeholder="请输入车辆型号"
|
||
|
|
></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item class="formItem" label="车辆性质" labelWidth="200">
|
||
|
|
<picker @change="natureChange" :value="natureIndex" :range="natureList" range-key="value" v-if="natureList">
|
||
|
|
<view class="uni-input">{{ natureList[natureIndex].value}}</view>
|
||
|
|
</picker>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="card">
|
||
|
|
<u-form-item borderBottom label="车架号" labelWidth="200">
|
||
|
|
<u-input v-model="car.vin" border="none" placeholder="请输入车架号"></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item borderBottom label="发动机号" labelWidth="200">
|
||
|
|
<u-input v-model="car.engineNumber" border="none" placeholder="请输入发动机号"></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item borderBottom label="年检到期时间" labelWidth="200" @click="openDatePicker('nj'); ">
|
||
|
|
<u-input
|
||
|
|
v-model="car.nextInspectionDate"
|
||
|
|
border="none"
|
||
|
|
disabled
|
||
|
|
disabledColor="#ffffff"
|
||
|
|
placeholder="请选择年检到期时间"
|
||
|
|
></u-input>
|
||
|
|
<u-icon
|
||
|
|
slot="right"
|
||
|
|
name="arrow-right"
|
||
|
|
></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item borderBottom label="保险到期时间" labelWidth="200" @click="openDatePicker('bx'); hideKeyboard()">
|
||
|
|
<u-input
|
||
|
|
v-model="car.insuranceExpiryDate"
|
||
|
|
border="none"
|
||
|
|
disabled
|
||
|
|
disabledColor="#ffffff"
|
||
|
|
placeholder="请选择保险到期时间"
|
||
|
|
></u-input>
|
||
|
|
<u-icon
|
||
|
|
slot="right"
|
||
|
|
name="arrow-right"
|
||
|
|
></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item label="注册日期时间" labelWidth="200" @click="openDatePicker('zcrq'); hideKeyboard()">
|
||
|
|
<u-input
|
||
|
|
v-model="car.carRegisterDate"
|
||
|
|
border="none"
|
||
|
|
disabled
|
||
|
|
disabledColor="#ffffff"
|
||
|
|
placeholder="请选择注册日期时间"
|
||
|
|
></u-input>
|
||
|
|
<u-icon
|
||
|
|
slot="right"
|
||
|
|
name="arrow-right"
|
||
|
|
></u-icon>
|
||
|
|
</u-form-item>
|
||
|
|
</view>
|
||
|
|
</u-form>
|
||
|
|
|
||
|
|
|
||
|
|
<keyboard-plate ref="plateNumber" :plateNum.sync='car.licenseNumber' isShow
|
||
|
|
@change="getPlateNum"></keyboard-plate>
|
||
|
|
<u-datetime-picker
|
||
|
|
v-model="datePickerValue"
|
||
|
|
:formatter="formatter"
|
||
|
|
:show="datePickerShow"
|
||
|
|
mode="date"
|
||
|
|
@cancel="datePickerCancel"
|
||
|
|
@confirm="datePickerConfirm"
|
||
|
|
></u-datetime-picker>
|
||
|
|
</view>
|
||
|
|
<view class="footer">
|
||
|
|
<view class="btnItem edit" @click="submit">
|
||
|
|
确定
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import VNavigationBar from '@/components/VNavigationBar.vue';
|
||
|
|
import request from "@/utils/request";
|
||
|
|
import config from '@/config'
|
||
|
|
import upload from "@/utils/upload";
|
||
|
|
import {getDictByCode} from "@/utils/utils";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
VNavigationBar
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
pageTitle: '',
|
||
|
|
car: {
|
||
|
|
// 车牌号
|
||
|
|
licenseNumber: '',
|
||
|
|
// 型号
|
||
|
|
carModelInput: '',
|
||
|
|
// 品牌id
|
||
|
|
carBrand: '',
|
||
|
|
// 车辆类别 字典字段
|
||
|
|
carCategory: '',
|
||
|
|
// 车辆性质 字典字段
|
||
|
|
carNature: '',
|
||
|
|
// 注册日期
|
||
|
|
carRegisterDate: '',
|
||
|
|
// 车辆品牌型号数组
|
||
|
|
brandAndModel: [],
|
||
|
|
},
|
||
|
|
userInfo: {
|
||
|
|
cusName:"",
|
||
|
|
sex:"0",
|
||
|
|
phoneNumber:"",
|
||
|
|
car:{}
|
||
|
|
},
|
||
|
|
bo1: false,
|
||
|
|
bo2: true,
|
||
|
|
|
||
|
|
datePickerShow: false,
|
||
|
|
datePickerValue: new Date().getTime(),
|
||
|
|
pickerConfirmField: 'njDate',
|
||
|
|
showType: false,
|
||
|
|
brandType: false,
|
||
|
|
typeList: [],
|
||
|
|
//所有可选车辆品牌
|
||
|
|
brandList: [],
|
||
|
|
//选中的车辆品牌id
|
||
|
|
brandId: '',
|
||
|
|
//选中的车辆品牌名称
|
||
|
|
brandName: 0,
|
||
|
|
fileList1: [],
|
||
|
|
imageUrl: '',
|
||
|
|
//可选车辆性质范围
|
||
|
|
natureList: [],
|
||
|
|
natureIndex: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
// 没有数据 需要赋值一下初始化
|
||
|
|
this.bo1 = false;
|
||
|
|
this.bo2 = true;
|
||
|
|
this.pageTitle = '添加车辆信息'
|
||
|
|
this.getBrandList()
|
||
|
|
this.getNatureList()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onchange(e) {
|
||
|
|
this.brandId = e.detail.value[0].id
|
||
|
|
this.brandName = e.detail.value[0].brandName
|
||
|
|
},
|
||
|
|
onnodeclick(node) {
|
||
|
|
console.log(node,"node")
|
||
|
|
},
|
||
|
|
typeSelect(e) {
|
||
|
|
},
|
||
|
|
// 车辆性质选择事件
|
||
|
|
natureChange(event) {
|
||
|
|
const newIndex = event.detail.value;
|
||
|
|
this.natureIndex = newIndex;
|
||
|
|
//
|
||
|
|
this.car.carNature = this.natureList[newIndex].value;
|
||
|
|
},
|
||
|
|
getBrandList() {
|
||
|
|
request({
|
||
|
|
url: '/admin-api/base/carBrand/page',
|
||
|
|
method: 'GET',
|
||
|
|
params: {
|
||
|
|
pageNo: 1,
|
||
|
|
pageSize: 10000
|
||
|
|
}
|
||
|
|
}).then(res => {
|
||
|
|
res.data.records.forEach(item => {
|
||
|
|
item.text = item.brandName,
|
||
|
|
item.value = item.id
|
||
|
|
})
|
||
|
|
this.brandList = res.data.records
|
||
|
|
if (this.car) {
|
||
|
|
for (let i = 0; i < this.brandList.length; i++) {
|
||
|
|
if (this.car.carBrand == this.brandList[i].id) {
|
||
|
|
this.setCarBrand(this.brandList[i].id,this.brandList[i].brandName)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
// 打开车牌选择器
|
||
|
|
carInputClick() {
|
||
|
|
this.$refs.plateNumber.open();
|
||
|
|
},
|
||
|
|
getPlateNum(e) {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
openDatePicker(picker) {
|
||
|
|
if (picker === 'nj') {
|
||
|
|
this.pickerConfirmField = 'nextInspectionDate'
|
||
|
|
} else if (picker === 'bx') {
|
||
|
|
this.pickerConfirmField = 'insuranceExpiryDate'
|
||
|
|
} else if (picker === 'zcrq') {
|
||
|
|
this.pickerConfirmField = 'carRegisterDate'
|
||
|
|
}
|
||
|
|
this.datePickerShow = true
|
||
|
|
},
|
||
|
|
datePickerConfirm({value}, field, picker) {
|
||
|
|
let date;
|
||
|
|
|
||
|
|
// 检查 value 是否为时间戳
|
||
|
|
if (typeof value === 'number') {
|
||
|
|
// 如果是时间戳，确保是毫秒单位
|
||
|
|
date = new Date(value);
|
||
|
|
} else if (typeof value === 'string') {
|
||
|
|
// 如果是日期字符串，尝试解析
|
||
|
|
date = new Date(value);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 检查日期是否有效
|
||
|
|
if (isNaN(date.getTime())) {
|
||
|
|
console.error('Invalid date:', value);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.car[this.pickerConfirmField] = date.getFullYear() + '-' + (Number(date.getMonth()) + 1 + '').padStart(2, '0') + '-' + (date.getDate() + '').padStart(2, '0')
|
||
|
|
this.datePickerCancel(picker)
|
||
|
|
},
|
||
|
|
datePickerCancel(picker) {
|
||
|
|
this.datePickerValue = new Date().getTime()
|
||
|
|
this.datePickerShow = false
|
||
|
|
},
|
||
|
|
formatter(type, value) {
|
||
|
|
if (type === 'year') {
|
||
|
|
return `${value}年`
|
||
|
|
}
|
||
|
|
if (type === 'month') {
|
||
|
|
return `${value}月`
|
||
|
|
}
|
||
|
|
if (type === 'day') {
|
||
|
|
return `${value}日`
|
||
|
|
}
|
||
|
|
return value
|
||
|
|
},
|
||
|
|
// 新增
|
||
|
|
async submit() {
|
||
|
|
let jsonData = {}
|
||
|
|
if(!this.userInfo.cusName){
|
||
|
|
uni.showToast({
|
||
|
|
title: '请输入客户名称',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
if(!this.userInfo.phoneNumber){
|
||
|
|
uni.showToast({
|
||
|
|
title: '请输入客户手机号',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
if(!this.car.licenseNumber){
|
||
|
|
uni.showToast({
|
||
|
|
title: '请输入车牌号',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
this.car.carBrand = this.brandId
|
||
|
|
// bus.$emit('updateCarInfo', this.car)
|
||
|
|
this.car.brandAndModel = [this.brandId, this.car.carModel]
|
||
|
|
//将日期转为时间戳
|
||
|
|
if (this.car.nextInspectionDate) {
|
||
|
|
this.car.nextInspectionDate = new Date(this.car.nextInspectionDate).getTime()
|
||
|
|
}else {
|
||
|
|
this.car.nextInspectionDate = undefined
|
||
|
|
}
|
||
|
|
if (this.car.insuranceExpiryDate) {
|
||
|
|
this.car.insuranceExpiryDate = new Date(this.car.insuranceExpiryDate).getTime()
|
||
|
|
}else {
|
||
|
|
this.car.insuranceExpiryDate = undefined
|
||
|
|
}
|
||
|
|
if (this.car.carRegisterDate) {
|
||
|
|
this.car.carRegisterDate = new Date(this.car.carRegisterDate).getTime()
|
||
|
|
}else {
|
||
|
|
this.car.carRegisterDate = undefined
|
||
|
|
}
|
||
|
|
this.userInfo.car = this.car
|
||
|
|
//提交保存数据
|
||
|
|
request({
|
||
|
|
url: '/admin-api/base/custom/saveCustomerAndCar',
|
||
|
|
method: 'POST',
|
||
|
|
data: this.userInfo,
|
||
|
|
}).then(res => {
|
||
|
|
if(res.code==200){
|
||
|
|
//保存成功
|
||
|
|
uni.showToast({
|
||
|
|
title: "新增成功",
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
setTimeout(()=>{
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages-order/addOrder/addOrder?phone=${this.userInfo.phoneNumber}&carId=${res.data.carId}`
|
||
|
|
});
|
||
|
|
},700)
|
||
|
|
}else{
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 查询下拉 车辆性质
|
||
|
|
async getNatureList() {
|
||
|
|
request({
|
||
|
|
url: '/admin-api/system/dict-data/type',
|
||
|
|
method: 'get',
|
||
|
|
params:{type:"car_nature"}
|
||
|
|
}).then((res) => {
|
||
|
|
console.log(res)
|
||
|
|
if (res.code == 200) {
|
||
|
|
this.natureList = res.data
|
||
|
|
if (this.bo2 == true) {
|
||
|
|
// setTimeout(() => {
|
||
|
|
// this.car.carNature = this.natureList[0].value;
|
||
|
|
// }, 15000)
|
||
|
|
} else {
|
||
|
|
// 如果是修改 遍历当前集合 将index 同步
|
||
|
|
this.natureList.forEach((item, index) => {
|
||
|
|
if (item.value == this.car.carNature) {
|
||
|
|
this.natureIndex = index;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 删除图片
|
||
|
|
deletePic(event) {
|
||
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
||
|
|
},
|
||
|
|
// 新增图片
|
||
|
|
async afterRead(event) {
|
||
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
|
|
let lists = [].concat(event.file)
|
||
|
|
let fileListLen = this[`fileList${event.name}`].length
|
||
|
|
lists.map((item) => {
|
||
|
|
this[`fileList${event.name}`].push({
|
||
|
|
...item,
|
||
|
|
status: 'uploading',
|
||
|
|
message: '上传中'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
uni.showLoading({
|
||
|
|
title: '正在识别中...'
|
||
|
|
});
|
||
|
|
try {
|
||
|
|
for (let i = 0; i < lists.length; i++) {
|
||
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
||
|
|
let item = this[`fileList${event.name}`][fileListLen]
|
||
|
|
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||
|
|
status: 'success',
|
||
|
|
message: '',
|
||
|
|
url: result
|
||
|
|
}))
|
||
|
|
fileListLen++
|
||
|
|
}
|
||
|
|
}catch (e){
|
||
|
|
uni.hideLoading()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
uploadFilePromise(url) {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
upload({
|
||
|
|
url: '/admin-api/infra/file/upload',
|
||
|
|
filePath: url
|
||
|
|
}).then(res => {
|
||
|
|
resolve(config.baseImageUrl +res.data)
|
||
|
|
this.car.carLicenseImg = res.data
|
||
|
|
this.imageUrl = config.baseImageUrl + res.data
|
||
|
|
request({
|
||
|
|
url: '/admin-api/base/carMain/vehicleLicenseOCR',
|
||
|
|
method: 'POST',
|
||
|
|
data: this.imageUrl,
|
||
|
|
tenantIdFlag: false
|
||
|
|
}).then((res) => {
|
||
|
|
this.car.vin = res.data.vin
|
||
|
|
this.car.licenseNumber = res.data.plateNo
|
||
|
|
this.car.carRegisterDate = res.data.issueDate
|
||
|
|
this.car.engineNumber = res.data.engineNo
|
||
|
|
//车辆品牌自动定位
|
||
|
|
this.brandList.forEach((item, index) => {
|
||
|
|
if (item.brandName == res.data.brand) {
|
||
|
|
this.setCarBrand(item.id,item.brandName)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
//车辆性质自动定位
|
||
|
|
this.natureList.forEach((item, index) => {
|
||
|
|
if (item.label == res.data.useCharacter) {
|
||
|
|
this.natureIndex = index;
|
||
|
|
this.car.carNature = this.natureList[index].value;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
uni.hideLoading()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 设置选中的车辆品牌
|
||
|
|
* @param id
|
||
|
|
* @param name
|
||
|
|
*/
|
||
|
|
setCarBrand(id,name){
|
||
|
|
this.$nextTick(()=>{
|
||
|
|
this.brandId = id
|
||
|
|
this.brandName = name
|
||
|
|
this.$refs.songpicker.inputSelected=[{text:name,value:id}]
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
|
||
|
|
|
||
|
|
.container {
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 100%;
|
||
|
|
background-color: #f3f5f7;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.body {
|
||
|
|
flex: 1;
|
||
|
|
height: 0;
|
||
|
|
overflow: auto;
|
||
|
|
|
||
|
|
.card {
|
||
|
|
margin: 20rpx 30rpx;
|
||
|
|
padding: 0 30rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
background: #ffffff;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
padding: 30rpx 0;
|
||
|
|
|
||
|
|
.btnItem {
|
||
|
|
width: 510rpx;
|
||
|
|
height: 76rpx;
|
||
|
|
background: #0174F6;
|
||
|
|
border-radius: 38rpx 38rpx 38rpx 38rpx;
|
||
|
|
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #FFFFFF;
|
||
|
|
|
||
|
|
line-height: 76rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|