环卫车小程序前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

218 lines
5.2 KiB

<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 label="类型" prop="type" @click="showType=true">
<u--input border="bottom" v-model="form.type" 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>
<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>
<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="actions"
title="请选择类型"
@close="showType = false"
@select="typeSelect"
>
</u-action-sheet>
<u-datetime-picker
:show="showDate"
v-model="date"
mode="date"
@confirm="onConfirm"
@cancel="onCancel"
></u-datetime-picker>
</view>
</template>
<script>
import { queryTypeList,addApply } from "@/common/api.js"
export default {
components:{
},
data() {
return {
showDate:false,
showType:false,
actions: [],
date:Number(new Date()),
form: {
categorytwoId:"",//id
type:"",//类型
model:"",//车辆型号
date:"",//时间
distance:"",//距离
price:"",//价格
contacts:"",//联系人
phone:"",//联系人电话
remark:"",//备注
},
rules: {
type:[
{
type: 'string',
required: true,
message: '请填写类型',
trigger: ['blur', 'change']
}
],
model:[
{
type: 'string',
required: true,
message: '请选择车辆型号',
trigger: ['blur', 'change']
}
],
date:[
{
type: 'string',
required: true,
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()
},
watch: {
},
methods: {
onCancel(){
this.showDate = false
},
onConfirm(e){
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
},
typeSelect(event) {
console.info(event)
this.form.categorytwoId = event.id
this.form.type = event.name
},
onQueryTypeList(){
queryTypeList({}).then(response=>{
console.info("queryTypeList",response)
this.actions = response.result.records
}).catch(error=>{
})
},
onSubmit() {
this.$refs.uForm.validate().then(res => {
this.onAddApply()
// uni.$u.toast('校验通过')
}).catch(errors => {
// uni.$u.toast('校验失败')
})
},
onAddApply(){
let that = this
let params={
categorytwoId:that.form.categorytwoId,
model:that.form.model,
carTime: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>