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.
314 lines
8.1 KiB
314 lines
8.1 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 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>
|