571 lines
16 KiB
Vue
571 lines
16 KiB
Vue
<template>
|
||
<view class="container">
|
||
<VNavigationBar title="车辆详情" background-color="#fff" title-color="#333"></VNavigationBar>
|
||
<view class="body">
|
||
<view class="card">
|
||
<button type="primary" @click="openCameraScan">识别行驶证</button>
|
||
<view class="formItem">
|
||
<text class="formLabel require">是否车主</text>
|
||
<view>
|
||
<radio-group v-model="car.isOwner" @change="radioChange">
|
||
<radio value="1" :checked="car.isOwner=='1'">是</radio>
|
||
<radio value="0" :checked="car.isOwner=='0'">否</radio>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
<view class="formItem">
|
||
<text class="formLabel require">车牌号</text>
|
||
<input type="text" style="text-align: right" placeholder="请输入车牌号" v-model="car.licenseNumber"/>
|
||
</view>
|
||
<view class="formItem">
|
||
<text class="formLabel">车架号</text>
|
||
<input type="text" style="text-align: right" placeholder="请输入车架号" v-model="car.vin"/>
|
||
</view>
|
||
<view class="formItem">
|
||
<text class="formLabel">发动机号码</text>
|
||
<input type="text" style="text-align: right" placeholder="请输入发动机号码" v-model="car.engineNumber"/>
|
||
</view>
|
||
<view class="formItem">
|
||
<text class="formLabel">品牌</text>
|
||
<song-data-picker
|
||
ref="songpicker"
|
||
style=" width: 55%;"
|
||
:localdata="brandList"
|
||
popup-title="请选择品牌"
|
||
:openSearch="true"
|
||
@change="onchange"
|
||
@nodeclick="onnodeclick"
|
||
></song-data-picker>
|
||
<!-- <picker @change="brandChange" :value="brandIndex" :range="brandNamesComputed">-->
|
||
<!-- <view class="uni-input">{{ brandNamesComputed[brandIndex] }}</view>-->
|
||
<!-- </picker>-->
|
||
</view>
|
||
<view class="formItem">
|
||
<text class="formLabel">型号</text>
|
||
<input type="text" style="text-align: right" placeholder="请输入型号" v-model="car.carModelInput"/>
|
||
</view>
|
||
<view class="formItem">
|
||
<text class="formLabel">车辆性质</text>
|
||
<picker @change="natureChange" :value="natureIndex" :range="natureNamesComputed">
|
||
<view class="uni-input">{{ natureNamesComputed[natureIndex] }}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="formItem">
|
||
<text class="formLabel">车辆类别</text>
|
||
<picker @change="categoryChange" :value="categoryIndex" :range="categoryNamesComputed">
|
||
<view class="uni-input">{{ categoryNamesComputed[categoryIndex] }}</view>
|
||
</picker>
|
||
</view>
|
||
<view class="formItem">
|
||
<text class="formLabel">注册日期</text>
|
||
<picker
|
||
mode="date"
|
||
:value="car.carRegisterDate"
|
||
start="2020-01-01"
|
||
end="2030-12-31"
|
||
@change="bindDateChange1">
|
||
<view style="margin-left: 10rpx">
|
||
{{ car.carRegisterDate}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<view class="formItem">
|
||
<text class="formLabel">行驶证</text>
|
||
<u-upload
|
||
:action="uploadUrl"
|
||
:headers="headers"
|
||
:file-list="fileList"
|
||
:max-count="1"
|
||
:show-upload-btn="true"
|
||
@after-read="afterRead"
|
||
@delete="deleteFile"
|
||
@success="uploadSuccess"
|
||
@fail="uploadFail"
|
||
></u-upload>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="btnItem edit" @click="submit" v-if="bo2">
|
||
确定
|
||
</view>
|
||
|
||
<view class="btnItem delete" v-if="bo1" @click="del">
|
||
<uni-icons type="trash" color="#F92C2C"></uni-icons>
|
||
删除
|
||
</view>
|
||
<view class="line" v-if="bo1"></view>
|
||
<view class="btnItem edit" v-if="bo1" @click="submit">
|
||
<uni-icons type="compose" color="#0174F6"></uni-icons>
|
||
保存
|
||
</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 {getJSONData} from '@/utils/auth'
|
||
|
||
export default {
|
||
components: {
|
||
VNavigationBar
|
||
},
|
||
data() {
|
||
return {
|
||
uploadUrl: config.baseUrl+"/app-api/infra/file/upload",
|
||
headers: {},
|
||
fileList: [],
|
||
car: {
|
||
id:"",
|
||
//是否车主
|
||
isOwner:"1",
|
||
// 车牌号
|
||
licenseNumber: '',
|
||
// 车架号
|
||
vin: '',
|
||
// 发动机号码
|
||
engineNumber: '',
|
||
// 品牌id
|
||
carBrand:'',
|
||
// 型号
|
||
carModelInput: '',
|
||
// 车辆性质 字典字段
|
||
carNature:'',
|
||
// 车辆类别 字典字段
|
||
carCategory:'',
|
||
// 注册日期
|
||
carRegisterDate:'',
|
||
},
|
||
bo1: false,
|
||
bo2: true,
|
||
categoryIndex: 0,
|
||
natureIndex: 0,
|
||
brandIndex: 0,
|
||
//可选车辆类别范围
|
||
categoryList: [],
|
||
//可选车辆性质范围
|
||
natureList: [],
|
||
//所有可选车辆品牌
|
||
brandList: [],
|
||
//选中的车辆品牌id
|
||
brandId: '',
|
||
//选中的车辆品牌名称
|
||
brandName: 0,
|
||
};
|
||
},
|
||
// 计算属性，将对象数组转换为字符串数组
|
||
computed: {
|
||
// 计算属性，将对象数组转换为字符串数组 picker 标签的 range 属性 只能绑定数组
|
||
brandNamesComputed() {
|
||
return this.brandList.map(item => item.brandName);
|
||
},
|
||
natureNamesComputed() {
|
||
return this.natureList.map(item => item.label);
|
||
},
|
||
categoryNamesComputed() {
|
||
return this.categoryList.map(item => item.label);
|
||
}
|
||
},
|
||
onShow(){
|
||
this.getCameraPhoto()
|
||
},
|
||
onLoad(options) {
|
||
// 如果是修改
|
||
if (options.id) {
|
||
// 有数据为编辑 或 删除
|
||
this.car = getJSONData("carInfo");
|
||
console.log('初始化页面数据', this.car)
|
||
if(this.car.carRegisterDate){
|
||
this.car.carRegisterDate = this.timestampToDate(this.car.carRegisterDate)
|
||
}
|
||
this.fileList = [
|
||
{
|
||
url:config.baseImageUrl+this.car.carLicenseImg
|
||
}
|
||
]
|
||
this.$forceUpdate()
|
||
console.log('初始化页面数据', this.fileList)
|
||
this.bo1 = true;
|
||
this.bo2 = false;
|
||
} else {
|
||
// 没有数据 需要赋值一下初始化
|
||
this.bo1 = false;
|
||
this.bo2 = true;
|
||
}
|
||
// 初始化
|
||
this.getCategoryList();
|
||
this.getNatureList();
|
||
this.getBrandList();
|
||
},
|
||
methods: {
|
||
onchange(e) {
|
||
this.brandId = e.detail.value[0].id
|
||
this.brandName = e.detail.value[0].brandName
|
||
this.car.carBrand = e.detail.value[0].id
|
||
},
|
||
onnodeclick(node) {
|
||
console.log(node,"node")
|
||
},
|
||
radioChange(event){
|
||
this.car.isOwner = event.detail.value
|
||
},
|
||
/**
|
||
* 时间戳转文字
|
||
* */
|
||
timestampToDate(timestamp) {
|
||
const date = new Date(timestamp); // 如果timestamp是数值，可以直接作为Date构造函数的参数
|
||
const year = date.getFullYear();
|
||
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
||
const day = date.getDate().toString().padStart(2, '0');
|
||
return `${year}-${month}-${day}`;
|
||
},
|
||
/**
|
||
* ocr识别内容自动赋值
|
||
* */
|
||
getCameraPhoto(){
|
||
let pages = getCurrentPages();
|
||
let currPage = pages[pages.length-1];
|
||
if(typeof(currPage.data.driveLicense) != undefined && currPage.data.driveLicense != null){
|
||
let driveLicense = currPage.data.driveLicense;
|
||
this.fileList=[{
|
||
url: driveLicense.imgUrl
|
||
}]
|
||
this.car.licenseNumber = driveLicense.plateNo
|
||
this.car.vin = driveLicense.vin
|
||
this.car.engineNumber = driveLicense.engineNo
|
||
this.car.carRegisterDate = driveLicense.registerDate
|
||
//车辆品牌自动定位
|
||
this.brandList.forEach((item, index) => {
|
||
if (item.brandName == driveLicense.brand) {
|
||
this.car.carBrand = this.brandList[index].id;
|
||
this.setCarBrand(this.brandList[index].id,item.brandName)
|
||
}
|
||
})
|
||
//车辆性质自动定位
|
||
this.natureList.forEach((item, index) => {
|
||
if (item.label == driveLicense.useCharacter) {
|
||
this.natureIndex = index;
|
||
this.car.carNature = this.natureList[index].value;
|
||
}
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 设置选中的车辆品牌
|
||
* @param id
|
||
* @param name
|
||
*/
|
||
setCarBrand(id,name){
|
||
this.$nextTick(()=>{
|
||
this.brandId = id
|
||
this.brandName = name
|
||
this.$refs.songpicker.inputSelected=[{text:name,value:id}]
|
||
})
|
||
},
|
||
/**
|
||
* 打开摄像头
|
||
*/
|
||
openCameraScan(){
|
||
uni.navigateTo({
|
||
url: '/pages/myCar/scan-frame'
|
||
});
|
||
},
|
||
// 调用OCR服务进行文字识别
|
||
recognizeText(imagePath) {
|
||
|
||
},
|
||
afterRead(file) {
|
||
//上传
|
||
// uploadFileApi 为上传到服务端的接口 count大于1 使用 await
|
||
upload({
|
||
url:'/app-api/infra/file/upload',
|
||
filePath: file.file.url
|
||
}).then((res)=>{
|
||
this.fileList.push({
|
||
url: config.baseImageUrl+res.data
|
||
})
|
||
console.log(this.fileList)
|
||
})
|
||
},
|
||
deleteFile(file, index) {
|
||
console.log('删除文件');
|
||
this.fileList.splice(index, 1);
|
||
},
|
||
uploadSuccess(res, file) {
|
||
console.log('上传成功', res);
|
||
},
|
||
uploadFail(error, file) {
|
||
console.log('上传失败', error);
|
||
},
|
||
// 品牌选择事件
|
||
brandChange(event) {
|
||
// 下标
|
||
const newIndex = event.detail.value;
|
||
this.brandIndex = newIndex;
|
||
//
|
||
this.car.carBrand = this.brandList[newIndex].id;
|
||
},
|
||
// 车辆类别选择事件
|
||
categoryChange(event) {
|
||
const newIndex = event.detail.value;
|
||
this.categoryIndex = newIndex;
|
||
//
|
||
this.car.carCategory = this.categoryList[newIndex].value;
|
||
},
|
||
// 车辆性质选择事件
|
||
natureChange(event) {
|
||
const newIndex = event.detail.value;
|
||
this.natureIndex = newIndex;
|
||
//
|
||
this.car.carNature = this.natureList[newIndex].value;
|
||
},
|
||
// 日期选择 事件
|
||
bindDateChange1(e) {
|
||
this.car.carRegisterDate = e.target.value; // 更新选择的日期到data中的date变量
|
||
|
||
},
|
||
// 查询下拉 车辆类别
|
||
async getCategoryList() {
|
||
let res = await request({
|
||
url: '/app-api/system/dict-data/type?type=car_category',
|
||
method: 'get',
|
||
tenantIdFlag: false
|
||
})
|
||
if (res.code == 200) {
|
||
console.log('车辆类别', res.data)
|
||
this.categoryList = res.data;
|
||
if (this.bo2 == true){
|
||
this.car.carCategory = res.data[0].value;
|
||
}
|
||
else {
|
||
// 如果是修改 遍历当前集合 将index 同步
|
||
this.categoryList.forEach((item, index) => {
|
||
if (item.value == this.car.carCategory) {
|
||
this.categoryIndex = index;
|
||
}
|
||
})
|
||
|
||
}
|
||
}
|
||
},
|
||
// 查询下拉 车辆性质
|
||
async getNatureList() {
|
||
let res = await request({
|
||
url: '/app-api/system/dict-data/type?type=car_nature',
|
||
method: 'get',
|
||
tenantIdFlag: false
|
||
})
|
||
if (res.code == 200) {
|
||
console.log('车辆性质', res.data)
|
||
this.natureList = res.data;
|
||
if (this.bo2 == true){
|
||
this.car.carNature = res.data[0].value;
|
||
}
|
||
else {
|
||
// 如果是修改 遍历当前集合 将index 同步
|
||
this.natureList.forEach((item, index) => {
|
||
if (item.value == this.car.carNature) {
|
||
this.natureIndex = index;
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
// 查询下拉 车辆品牌
|
||
async getBrandList() {
|
||
let res = await request({
|
||
url: '/userClient/base/carBrand/list',
|
||
method: 'get',
|
||
})
|
||
if (res.code == 200) {
|
||
console.log('车辆品牌', res.data)
|
||
res.data.forEach(item => {
|
||
item.text = item.brandName,
|
||
item.value = item.id
|
||
})
|
||
this.brandList = res.data;
|
||
if (this.bo2 == true){
|
||
this.car.carBrand= res.data[0].id;
|
||
}else {
|
||
// 如果是修改 遍历当前集合 将index 同步
|
||
this.brandList.forEach((item, index) => {
|
||
if (item.id == this.car.carBrand) {
|
||
this.setCarBrand(item.id,item.brandName)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
},
|
||
// 新增或修改
|
||
async submit() {
|
||
if(this.fileList.length>0){
|
||
this.car.carLicenseImg = this.fileList[0].url.replace(config.baseImageUrl,"")
|
||
}
|
||
let res = await request({
|
||
url: '/app-api/base/user-car/createOrUpdate',
|
||
method: 'POST',
|
||
data: this.car,
|
||
tenantIdFlag: false
|
||
})
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'none'
|
||
})
|
||
setTimeout(()=>{
|
||
// 操作成功返回上一个页面
|
||
uni.navigateBack();
|
||
},500)
|
||
}else {
|
||
uni.showToast({
|
||
title: '保存失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
//删除
|
||
async del() {
|
||
let res = await request({
|
||
url: `/app-api/base/user-car/delById?id=${this.car.id}`,
|
||
method: 'delete',
|
||
tenantIdFlag: false
|
||
})
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '删除成功',
|
||
icon: 'none'
|
||
})
|
||
setTimeout(()=>{
|
||
// 删除成功返回上一个页面
|
||
uni.navigateBack();
|
||
},500)
|
||
}else {
|
||
uni.showToast({
|
||
title: '删除失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</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 0;
|
||
padding: 0 32rpx;
|
||
background-color: #fff;
|
||
|
||
.formItem {
|
||
box-sizing: border-box;
|
||
width: 686rpx;
|
||
margin: 0 auto;
|
||
padding: 40rpx;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
column-gap: 20rpx;
|
||
|
||
border-bottom: 1rpx solid #dddddd;
|
||
|
||
&:last-child {
|
||
border: none;
|
||
}
|
||
|
||
.require {
|
||
content: "*";
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
.labelVal {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
column-gap: 20rpx;
|
||
}
|
||
|
||
|
||
.formLabel {
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.formValue {
|
||
flex: 1;
|
||
width: 0;
|
||
text-align: right;
|
||
font-size: 32rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.carImg {
|
||
width: 240rpx;
|
||
height: 150rpx;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
background-color: #efefef;
|
||
}
|
||
|
||
.formImg {
|
||
margin-top: 30rpx;
|
||
width: 240rpx;
|
||
height: 150rpx;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
background-color: #efefef;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.line {
|
||
width: 2rpx;
|
||
background-color: #dddddd;
|
||
}
|
||
|
||
.btnItem {
|
||
flex: 1;
|
||
width: 0;
|
||
padding: 34rpx 0;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
font-size: 32rpx;
|
||
|
||
&.delete {
|
||
color: #f92c2c;
|
||
}
|
||
|
||
&.edit {
|
||
color: #0174f6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|