<template>
|
|
<view class="se-m-20 se-p-20 se-br-10">
|
|
<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="80">
|
|
<u-form-item labelWidth="0">
|
|
<view class="se-fs-26 se-c-black se-pb-10">
|
|
请选择您要寻找的车辆类型:
|
|
</view>
|
|
<view class="se-flex se-flex-ai-c se-flex-ff-rw">
|
|
<view v-if="item.name !='环卫设备及配件'" class="se-py-10 se-px-30 se-fs-22 se-br-10 se-mr-15 se-mt-10" :class="item.id==form.cartypeId ? 'se-bgc-green se-c-white se-b-green' : 'se-b se-c-text'" @click="handleCartype(item)" v-for="(item,index) in categoryList" :key="index">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="类型" prop="categorytwoId" @click="showType=true">
|
|
<u--input border="bottom" v-model="form.categorytwoName" disabled placeholder="请填写类型"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
<u-form-item label="车辆型号" prop="model">
|
|
<u--input v-model="form.model" placeholder="请填写车辆型号"></u--input>
|
|
</u-form-item>
|
|
<template v-if="form.cartypeName!='新车'">
|
|
<u-form-item label="年限" prop="date" @click="showDate=true" >
|
|
<u--input border="bottom" v-model="form.date" disabled placeholder="请填写年限"></u--input>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
</template>
|
|
|
|
<u-form-item label="公里数" prop="distance">
|
|
<u--input v-model="form.distance" placeholder="请填写公里数"></u--input>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="联系人" prop="contacts">
|
|
<u--input v-model="form.contacts" placeholder="请填写联系人"></u--input>
|
|
</u-form-item>
|
|
<u-form-item label="联系电话" prop="phone">
|
|
<u--input v-model="form.phone" placeholder="请填写联系电话"></u--input>
|
|
</u-form-item>
|
|
|
|
<u-form-item label="备注" labelPosition="top" prop="remark">
|
|
<u--textarea class="se-mt-20" v-model="form.remark" count
|
|
placeholder="请填写备注"></u--textarea>
|
|
</u-form-item>
|
|
<u-form-item>
|
|
<view class="se-px-20 se-pt-20">
|
|
<view class="se-px-20 se-pb-80 se-fs-20 se-flex">
|
|
<view @click="onSubmit"
|
|
class="se-mx-10 se-flex-1 se-br-40 se-flex-h-c se-h-80 se-lh-80 se-ta-c se-fs-28 se-c-white se-bgc-green">
|
|
<text>确认申请</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
|
|
</u--form>
|
|
<u-action-sheet
|
|
:show="showType"
|
|
:actions="categoryTwoList"
|
|
title="请选择类型"
|
|
@close="showType = false"
|
|
@select="categoryTwoSelect"
|
|
>
|
|
</u-action-sheet>
|
|
<u-picker :show="showDate" :columns="columns" @confirm="onConfirm"
|
|
@cancel="onCancel"></u-picker>
|
|
<!-- <u-datetime-picker
|
|
:maxDate="maxDate"
|
|
:show="showDate"
|
|
v-model="date"
|
|
mode="date"
|
|
@confirm="onConfirm"
|
|
@cancel="onCancel"
|
|
></u-datetime-picker> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const now = new Date();
|
|
const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
|
|
const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000;
|
|
|
|
import { queryTypeList,addApply,queryCategoryList } from "@/common/api.js"
|
|
export default {
|
|
components:{
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
columns:[['2025', '2024', '2023', '2022', '2020', '2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012', '2011', '2010', '2009', '2008', '2007', '2006', '2005', '2004', '2003', '2002', '2001', '2000']],
|
|
maxDate:startOfYesterday,
|
|
categoryTwoList:[],
|
|
categoryList:[],
|
|
showDate:false,
|
|
showType:false,
|
|
actions: [],
|
|
date:Number(new Date()),
|
|
form: {
|
|
cartypeId:"",
|
|
cartypeName:"",
|
|
categorytwoId:"",//id
|
|
categorytwoName:"",
|
|
type:"",//类型
|
|
model:"",//车辆型号
|
|
date:"",//时间
|
|
distance:"",//距离
|
|
price:"",//价格
|
|
contacts:"",//联系人
|
|
phone:"",//联系人电话
|
|
remark:"",//备注
|
|
},
|
|
rules: {
|
|
categorytwoName:[
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写类型',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
model:[
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择车辆型号',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
// date:[
|
|
// {
|
|
// validator: (rule, value, callback) => {
|
|
// console.info(this.form.cartypeName)
|
|
// return this.form.cartypeName=='新车' ? false : callback(new Error('请填写时间'))
|
|
// },
|
|
// message: '请填写时间',
|
|
// trigger: ['blur', 'change']
|
|
// }
|
|
// ],
|
|
distance:[
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写公里数',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
price:[
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写价格',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
contacts:[
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写联系人',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
phone:[
|
|
{
|
|
type: 'string',
|
|
required: true,
|
|
message: '请填写联系电话',
|
|
trigger: ['blur', 'change']
|
|
}
|
|
],
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
// this.onQueryTypeList()
|
|
this.onQueryCategoryList()
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
handleCartype(event){
|
|
this.form.cartypeId = event.id
|
|
this.form.cartypeName = event.name
|
|
this.categoryTwoList =event.carrentCategorytwoList
|
|
this.form.categorytwoId = ""
|
|
this.form.categorytwoName = ""
|
|
if(this.form.cartypeName=='新车'){
|
|
this.form.date = ""
|
|
}
|
|
},
|
|
onQueryCategoryList(){
|
|
let that = this
|
|
queryCategoryList({}).then(response=>{
|
|
console.info("queryCategoryList",response)
|
|
if(response.result.length>0){
|
|
that.categoryList = response.result
|
|
that.form.cartypeId = response.result[0].id
|
|
that.form.cartypeName = response.result[0].name
|
|
that.categoryTwoList = response.result[0].carrentCategorytwoList
|
|
}
|
|
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
onCancel(){
|
|
this.form.date = '';
|
|
this.showDate = false
|
|
},
|
|
onConfirm(e){
|
|
this.form.date = e.value[0];
|
|
this.showDate = false
|
|
// console.info('e',e)
|
|
// const date = new Date(e.value);
|
|
// const year = date.getFullYear();
|
|
// const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
// const day = String(date.getDate()).padStart(2, '0');
|
|
// this.form.date = `${year}-${month}-${day}`;
|
|
// this.showDate = false
|
|
},
|
|
categoryTwoSelect(event){
|
|
this.form.categorytwoId = event.id
|
|
this.form.categorytwoName = event.name
|
|
},
|
|
|
|
onQueryTypeList(){
|
|
queryTypeList({}).then(response=>{
|
|
console.info("queryTypeList",response)
|
|
this.actions = response.result
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
onSubmit() {
|
|
this.$refs.uForm.validate().then(res => {
|
|
this.onAddApply()
|
|
// uni.$u.toast('校验通过')
|
|
}).catch(errors => {
|
|
console.info(errors)
|
|
// uni.$u.toast('校验失败')
|
|
})
|
|
},
|
|
onAddApply(){
|
|
let that = this
|
|
if(that.form.cartypeName!='新车' && !that.form.date){
|
|
return uni.$u.toast('请选择时间')
|
|
}
|
|
let params={
|
|
categoryoneId:that.form.cartypeId,
|
|
categorytwoId:that.form.categorytwoId,
|
|
model:that.form.model,
|
|
carTime:Number(that.form.date),
|
|
mileage:that.form.distance,
|
|
name:that.form.contacts,
|
|
phone:that.form.phone,
|
|
remark:that.form.remark
|
|
}
|
|
addApply(params).then(response=>{
|
|
uni.$u.toast(response.message)
|
|
setTimeout(()=>{
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},1500)
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
},
|
|
onReady() {
|
|
this.$refs.uForm.setRules(this.rules)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #f5f5f5 !important;
|
|
}
|
|
</style>
|