carrent-front/pages_subpack/apply/index.vue

<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>