carrent-front/pages_subpack/release/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-py-10">
					请选择您要发布的车辆类型：
				</view>
				<view class="se-flex se-flex-ai-c se-flex-ff-rw">
					<view class="se-py-10 se-px-30 se-fs-22 se-br-10 se-mr-15 se-mt-10" :class="item.select ? 'se-bgc-green se-c-white se-b-green' : 'se-b se-c-text'" @click="handleType(index)" v-for="(item,index) in typeList" :key="index">
						{{item.text}}
					</view>
				</view>
			</u-form-item>
			<u-form-item label="产品名称">
				<view class="se-flex se-flex-h-c">
					<u--input v-model="form.title" type="text" class="se-w-200" placeholder="请填写产品名称"></u--input>
				</view>
			</u-form-item>
			<u-form-item label="区域" prop="area">
				<u--input readonly v-model="form.area" placeholder="请选择地址" border="bottom"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</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="price">
				<u--input  v-model="form.price"  placeholder="请填写价格"></u--input>
				<div slot="right" class="se-c-green">￥/月</div>
			</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 prop="file" labelWidth="0">
				<view class="se-flex se-flex-v-sa">
					<view class="se-py-20 se-w-p-100 se-flex">
						车辆照片(前)
					</view>
					<view class="se-py-20 se-w-p-100">
						<u-upload :fileList="form.fileFrontList" @afterRead="afterFront" @delete="delFront" :maxCount="1"></u-upload>
					</view>
				</view>
			</u-form-item>
			<u-form-item prop="file" labelWidth="0">
				<view class="se-flex se-flex-v-sa">
					<view class="se-py-20 se-w-p-100 se-flex">
						车辆照片(后)
					</view>
					<view class="se-py-20 se-w-p-100">
						<u-upload :fileList="form.fileBackList" @afterRead="afterBack" @delete="delBack" :maxCount="1"></u-upload>
					</view>
				</view>
			</u-form-item>
			<u-form-item prop="file" labelWidth="0">
				<view class="se-flex se-flex-v-sa">
					<view class="se-py-20 se-w-p-100 se-flex">
						车辆照片(左)
					</view>
					<view class="se-py-20 se-w-p-100">
						<u-upload :fileList="form.fileLeftList" @afterRead="afterLeft" @delete="delLeft" :maxCount="1"></u-upload>
					</view>
				</view>
			</u-form-item>
			<u-form-item prop="file" labelWidth="0">
				<view class="se-flex se-flex-v-sa">
					<view class="se-py-20 se-w-p-100 se-flex">
						车辆照片(右)
					</view>
					<view class="se-py-20 se-w-p-100">
						<u-upload :fileList="form.fileRightList" @afterRead="afterRight" @delete="delRight" :maxCount="1"></u-upload>
					</view>
				</view>
			</u-form-item>
			<u-form-item prop="file" labelWidth="0">
				<view class="se-flex se-flex-v-sa">
					<view class="se-py-20 se-w-p-100 se-flex">
						车辆照片(驾驶室)
					</view>
					<view class="se-py-20 se-w-p-100">
						<u-upload :fileList="form.fileCabList" @afterRead="afterCab" @delete="delCab" :maxCount="1"></u-upload>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="车辆介绍" labelPosition="top" prop="introduce">
				<u--textarea v-model="form.introduce" class="se-mt-20" 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 {
				typeList:[
					{
						text:"新车",
						value:"xin",
						select:true
					},
					{
						text:"二手车",
						value:"ershouche",
						select:false
					},
					{
						text:"租赁车辆",
						value:"all",
						select:false
					}
				],
				form: {
					title:"",//产品名称
					area:"",//区域
					address:'',
					date:"",//时间
					distance:"",//距离
					price:"",//价格
					contacts:"",//联系人
					phone:"",//联系人电话
					fileFrontList:[],//车辆照片前
					fileBackList:[],//车辆照片后
					fileLeftList:[],//车辆照片左
					fileRightList:[],//车辆照片右
					fileCabList:[],//车辆照片 驾驶室
					introduce:"",//车辆介绍
				},
				rules: {
					title:[
						{
							type: 'string',
							required: true,
							message: '请填写产品名称',
							trigger: ['blur', 'change']
						}
					],
					area:[
						{
							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: {
			handleType(index){
				this.typeList.forEach(items=>{
					items.select = false
				})
				this.typeList[index].select = !this.typeList[index].select
			},
			// 前
			delFront(event) {
				this.form.fileFrontList.splice(event.index, 1)
			},
			async afterFront(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.fileFrontList.push({
							url
						})
					})
				})
			},
			// 后
			delBack(event) {
				this.form.fileBackList.splice(event.index, 1)
			},
			async afterBack(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.fileBackList.push({
							url
						})
					})
				})
			},
			// 左
			delLeft(event) {
				this.form.fileLeftList.splice(event.index, 1)
			},
			async afterLeft(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.fileLeftList.push({
							url
						})
					})
				})
			},
			// 左
			delRight(event) {
				this.form.fileRightList.splice(event.index, 1)
			},
			async afterRight(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.fileRightList.push({
							url
						})
					})
				})
			},
			// 车辆照片(驾驶室)
			delCab(event) {
				this.form.fileCabList.splice(event.index, 1)
			},
			async afterCab(e) {
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self.form.fileCabList.push({
							url
						})
					})
				})
			},
			onSubmit() {
				console.info(this.form)
				uni.navigateTo({
					url:"/pages_subpack/success/index"
				})
				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: transparent;
	    forced-color-adjust: none;
	}
</style>