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 label="类型" prop="type">
				<u--input  v-model="form.type"  placeholder="请填写类型"></u--input>
			</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">
				<u--input  v-model="form.date"  placeholder="请填写年限"></u--input>
			</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>
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				form: {
					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) {
			
		},
		watch: {
			
		},
		methods: {
			
			onSubmit() {
				
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5 !important;
	}
</style>