283 lines
7.5 KiB
Vue
283 lines
7.5 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="上传图片" labelWidth="200">
|
|
<u-upload></u-upload>
|
|
</u-form-item>
|
|
<u-form-item borderBottom label="车牌号" labelWidth="200" @click="carInputClick(); hideKeyboard()">
|
|
<u-input
|
|
v-model="car.licenseNumber"
|
|
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="showType = true; hideKeyboard()">
|
|
<u-input
|
|
v-model="car.carCategory"
|
|
border="none"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
placeholder="请选择车辆型号"
|
|
></u-input>
|
|
<u-icon
|
|
slot="right"
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</u-form-item>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<u-form-item borderBottom label="车架号" labelWidth="200">
|
|
<u-input v-model="car.cjNo" border="none" placeholder="请输入车架号"></u-input>
|
|
</u-form-item>
|
|
<u-form-item borderBottom label="发动机号" labelWidth="200">
|
|
<u-input v-model="car.fdjNo" border="none" placeholder="请输入发动机号"></u-input>
|
|
</u-form-item>
|
|
<u-form-item borderBottom label="年检时间" labelWidth="200" @click="openDatePicker('nj'); hideKeyboard()">
|
|
<u-input
|
|
v-model="car.njDate"
|
|
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.bxDate"
|
|
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.zcrqDate"
|
|
border="none"
|
|
disabled
|
|
disabledColor="#ffffff"
|
|
placeholder="请选择注册日期时间"
|
|
></u-input>
|
|
<u-icon
|
|
slot="right"
|
|
name="arrow-right"
|
|
></u-icon>
|
|
</u-form-item>
|
|
</view>
|
|
</u-form>
|
|
|
|
<!-- 车辆型号 -->
|
|
<u-action-sheet
|
|
:actions="typeList"
|
|
:show="showType"
|
|
title="请选择车辆型号"
|
|
@close="showType = false"
|
|
@select="typeSelect"
|
|
>
|
|
</u-action-sheet>
|
|
|
|
<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 {bus} from "@/utils/eventBus";
|
|
|
|
export default {
|
|
components: {
|
|
VNavigationBar
|
|
},
|
|
data() {
|
|
return {
|
|
pageTitle: '',
|
|
car: {
|
|
// 车牌号
|
|
licenseNumber: '',
|
|
// 型号
|
|
carModelInput: '',
|
|
// 品牌id
|
|
carBrand: '',
|
|
// 车辆类别 字典字段
|
|
carCategory: '',
|
|
// 车辆性质 字典字段
|
|
carNature: '',
|
|
// 注册日期
|
|
carRegisterDate: '2024-09-24',
|
|
},
|
|
bo1: false,
|
|
bo2: true,
|
|
|
|
datePickerShow: false,
|
|
datePickerValue: new Date().getTime(),
|
|
pickerConfirmField: 'njDate',
|
|
|
|
showType: false,
|
|
typeList: [
|
|
{
|
|
name: '一汽奥迪 2024款 A6L',
|
|
value: '1'
|
|
},
|
|
],
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// 如果是修改
|
|
if (options.car) {
|
|
// 有数据为编辑 或 删除
|
|
this.car = JSON.parse(decodeURIComponent(options.car));
|
|
console.log('初始化页面数据', this.car)
|
|
this.bo1 = true;
|
|
this.bo2 = false;
|
|
this.pageTitle = '修改车辆信息'
|
|
} else {
|
|
// 没有数据 需要赋值一下初始化
|
|
this.bo1 = false;
|
|
this.bo2 = true;
|
|
this.pageTitle = '添加车辆信息'
|
|
}
|
|
},
|
|
methods: {
|
|
typeSelect(e) {
|
|
console.log('e', e)
|
|
},
|
|
|
|
// 打开车牌选择器
|
|
carInputClick() {
|
|
this.$refs.plateNumber.open();
|
|
},
|
|
getPlateNum(e) {
|
|
|
|
},
|
|
|
|
openDatePicker(picker) {
|
|
if (picker === 'nj') {
|
|
this.pickerConfirmField = 'njDate'
|
|
} else if (picker === 'bx') {
|
|
this.pickerConfirmField = 'bxDate'
|
|
} else if (picker === 'zcrq') {
|
|
this.pickerConfirmField = 'zcrqDate'
|
|
}
|
|
this.datePickerShow = true
|
|
},
|
|
datePickerConfirm({value}, field, picker) {
|
|
const date = new Date(value)
|
|
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}日`
|
|
}
|
|
console.log('for value', value)
|
|
return value
|
|
},
|
|
// 新增
|
|
async submit() {
|
|
|
|
bus.$emit('updateCarInfo', this.car)
|
|
uni.navigateBack();
|
|
// let res = await request({
|
|
// url: '/userClient/base/myCar/create',
|
|
// method: 'POST',
|
|
// data: this.car,
|
|
// })
|
|
// if (res.code == 200) {
|
|
// // 新增成功返回上一个页面
|
|
// bus.$emit('updateCarInfo', res.result)
|
|
// uni.navigateBack();
|
|
// }
|
|
},
|
|
}
|
|
}
|
|
</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>
|