环卫车小程序前端代码
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.
 
 
 

800 lines
24 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-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="cartypeId" @click="handleCategoryOneChange()">
<u--input readonly v-model="form.cartypeName" placeholder="请选择一级分类" border="bottom"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item> -->
<u-form-item label="二级分类" prop="categorytwoId" @click="handleCategoryTwoChange()">
<u--input readonly v-model="form.categorytwoName" placeholder="请选择二级分类" border="bottom"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="标题" prop="goodsName">
<view class="se-flex se-flex-h-c">
<u--input v-model="form.goodsName" type="text" class="se-w-200" placeholder="请填写标题"></u--input>
</view>
</u-form-item>
<u-form-item label="品牌" prop="brand">
<view class="se-flex se-flex-h-c">
<u--input v-model="form.brand" type="text" class="se-w-200" placeholder="请填写品牌"></u--input>
</view>
</u-form-item>
<u-form-item label="型号" prop="model">
<view class="se-flex se-flex-h-c">
<u--input v-model="form.model" type="text" class="se-w-200" placeholder="请填写型号"></u--input>
</view>
</u-form-item>
<u-form-item label="区域" prop="area" @click="handleAreaChange()">
<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" @click="showDate=true">
<u--input border="bottom" type="number" v-model="form.date" readonly placeholder="请填写年限"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="公里数" prop="mileage">
<u--input v-model="form.mileage" type="number" placeholder="请填写公里数"></u--input>
</u-form-item>
<u-form-item label="价格" prop="price">
<u--input v-model="form.price" type="number" placeholder="请填写价格"></u--input>
<div slot="right" class="se-c-green">¥ <text v-if="form.cartypeName=='租赁车辆'">/月</text> </div>
</u-form-item>
<u-form-item label="库存" prop="inventory">
<u--input v-model="form.inventory" type="number" placeholder="请填写库存"></u--input>
</u-form-item>
<u-form-item label="联系人" prop="contacts">
<u--input v-model="form.contacts" type="text" placeholder="请填写联系人"></u--input>
</u-form-item>
<u-form-item label="联系人电话" prop="phone">
<u--input v-model="form.phone" type="number" placeholder="请填写电话"></u--input>
</u-form-item>
<u-form-item label="浏览量" prop="views">
<u--input v-model="form.views" type="number" placeholder="请填写浏览量"></u--input>
</u-form-item>
<u-form-item prop="fileCarList" 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.fileCarList" @afterRead="afterCarFront" @delete="delCarFront" multiple :maxCount="5"></u-upload>
</view>
</view>
</u-form-item>
<u-form-item prop="fileFrontList" 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" multiple :maxCount="5"></u-upload>
</view>
</view>
</u-form-item>
<u-form-item prop="fileBackList" 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" multiple :maxCount="5"></u-upload>
</view>
</view>
</u-form-item>
<u-form-item prop="fileLeftList" 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" multiple :maxCount="5"></u-upload>
</view>
</view>
</u-form-item>
<u-form-item prop="fileRightList" 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" multiple :maxCount="5"></u-upload>
</view>
</view>
</u-form-item>
<u-form-item prop="fileCabList" 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" multiple :maxCount="5"></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>
<u-picker :show="showDate" :columns="columns" @confirm="onConfirm"
@cancel="onCancel"></u-picker>
<!-- <u-datetime-picker
:maxDate="maxDate"
:show="showDate"
v-model="date"
mode="year"
@confirm="onConfirm"
@cancel="onCancel"
></u-datetime-picker> -->
<u-action-sheet :actions="categoryOneList" @select="selectCategoryOneClick" title="分类" :show="categoryOneShow" @close="categoryOneShow=false"></u-action-sheet>
<u-action-sheet :actions="categoryTwoList" @select="selectCategoryTwoClick" title="分类" :show="categoryTwoShow" @close="categoryTwoShow=false"></u-action-sheet>
</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,addGoods,queryCategoryOneList,queryCategoryTwoList,queryCategoryList,queryGoodsById } from "@/common/api.js"
import QQMapWX from "@/util/qqmap-wx-jssdk.min.js"
export default {
components:{
},
data() {
return {
id:'',
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,
actions:[],
showType:false,
showDate:false,
date:Number(new Date()),
categoryOneShow:false,
categoryOneList:[],
categoryTwoShow:false,
categoryTwoList:[],
categoryList:[],//分类
form: {
// typeId:"",//类型
// cartypeId:"",//一级分类
// cartypeName:"",//一级分类名称
// categorytwoId:"",//二级分类
// categorytwoName:"",//二级分类名称
// goodsName:"驾驶式扫地机",//标题
// brand:"大众",//品牌
// model:"朗逸",//型号
// area:"湖南省长沙市岳麓区含光路658号",//区域
// latitude:"28.23586",
// longitude:"112.931496",
// address:'',
// date:"2024-12-15",//时间
// mileage:"2000",//距离
// price:"210000",//价格
// inventory:"5",//库存
// contacts:"柳川",//联系人
// phone:"13189698115",//联系人电话
// views:"5",//浏览量
// fileCarList:[
// {
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/7e98056b-e0b9-496f-89f8-88026ce9426e.png"
// },
// {
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/499fcd8a-3d4b-42f3-b023-61bac6b1c020.png"
// }
// ],//车辆照片
// fileFrontList:[
// {
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/7e98056b-e0b9-496f-89f8-88026ce9426e.png"
// },
// {
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/499fcd8a-3d4b-42f3-b023-61bac6b1c020.png"
// }
// ],//车辆照片前
// fileBackList:[
// {
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/7e98056b-e0b9-496f-89f8-88026ce9426e.png"
// },
// {
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/499fcd8a-3d4b-42f3-b023-61bac6b1c020.png"
// }
// ],//车辆照片后
// fileLeftList:[
// {
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/7e98056b-e0b9-496f-89f8-88026ce9426e.png"
// },
// {
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/499fcd8a-3d4b-42f3-b023-61bac6b1c020.png"
// }
// ],//车辆照片左
// fileRightList:[
// {
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/7e98056b-e0b9-496f-89f8-88026ce9426e.png"
// },
// {
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/499fcd8a-3d4b-42f3-b023-61bac6b1c020.png"
// }
// ],//车辆照片右
// fileCabList:[
// {
// status:1,
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/7e98056b-e0b9-496f-89f8-88026ce9426e.png"
// },
// {
// status:0,
// url:"https://tennis-oss.xzaiyp.top/2024-12-14/499fcd8a-3d4b-42f3-b023-61bac6b1c020.png"
// }
// ],//车辆照片 驾驶室
// introduce:`车型名称:车辆的品牌和型号,例如 "Toyota Corolla 2024"。
// 车辆类型:轿车、SUV、MPV、皮卡、跑车等。
// 价格区间:可选项,适用于市场推广。`,//车辆介绍
typeId:"",//类型
typeName:"",//类型名称
cartypeId:"",//一级分类
cartypeName:"",//一级分类名称
categorytwoId:"",//二级分类
categorytwoName:"",//二级分类名称
goodsName:"",//标题
brand:"",//品牌
model:"",//型号
area:"",//区域
latitude:"",
longitude:"",
address:'',
date:"",//时间
mileage:"",//距离
price:"",//价格
inventory:"",//库存
contacts:"",//联系人
phone:"",//联系人电话
views:"",//浏览量
fileCarList:[],//车辆照片
fileFrontList:[],//车辆照片前
fileBackList:[],//车辆照片后
fileLeftList:[],//车辆照片左
fileRightList:[],//车辆照片右
fileCabList:[],//车辆照片 驾驶室
introduce:``,//车辆介绍
},
rules: {
typeId:[
{
required: true,
message: '请选择类型',
trigger: ['blur', 'change']
}
],
goodsName:[
{
required: true,
message: '请填写标题',
trigger: ['blur', 'change']
}
],
brand:[
{
required: true,
message: '请填写品牌',
trigger: ['blur', 'change']
}
],
model:[
{
required: true,
message: '请填写型号',
trigger: ['blur', 'change']
}
],
area:[
{
required: true,
message: '请选择所在地区',
trigger: ['blur', 'change']
}
],
date:[
{
required: true,
message: '请填写时间',
trigger: ['blur', 'change']
}
],
mileage:[
{
required: true,
message: '请填写公里数',
trigger: ['blur', 'change']
}
],
price:[
{
required: true,
message: '请填写价格',
trigger: ['blur']
}
],
inventory:[
{
required: true,
message: '请填写库存',
trigger: ['blur']
}
],
contacts:[
{
required: true,
message: '请填写联系人',
trigger: ['blur', 'change']
}
],
phone:[
{
required: true,
message: '请填写联系电话',
trigger: ['blur', 'change']
}
],
views:[
{
required: true,
message: '请填写浏览量',
trigger: ['blur']
}
],
fileCarList:[
{
validator: (rule, value, callback) => {
if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
callback(new Error('照片不能为空'));
} else {
callback();
}
},
trigger: 'blur'
}
],
fileFrontList:[
{
validator: (rule, value, callback) => {
if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
callback(new Error('照片不能为空'));
} else {
callback();
}
},
trigger: 'blur'
}
],
fileBackList:[
{
validator: (rule, value, callback) => {
if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
callback(new Error('照片不能为空'));
} else {
callback();
}
},
trigger: 'blur'
}
],
fileLeftList:[
{
validator: (rule, value, callback) => {
if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
callback(new Error('照片不能为空'));
} else {
callback();
}
},
trigger: 'blur'
}
],
fileRightList:[
{
validator: (rule, value, callback) => {
if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
callback(new Error('照片不能为空'));
} else {
callback();
}
},
trigger: 'blur'
}
],
fileCabList:[
{
validator: (rule, value, callback) => {
if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
callback(new Error('照片不能为空'));
} else {
callback();
}
},
trigger: 'blur'
}
],
}
}
},
onLoad(options) {
let that = this
console.log("进图页面刷新:"+options)
if(options.id){
console.log("如果有数据的情况下:"+options.id)
that.id = options.id
that.getQueryGoodsById()
}else{
that.onQueryCategoryList()
}
// this.onQueryTypeList()
// this.onQueryCategoryOneList()
// this.onQueryCategoryTwoList()
},
watch: {
// "form.categorytwoId": function (newVal, oldVal) {
// if (newVal) {
// this.$nextTick(() => {
// this.form.categorytwoName = this.categoryTwoList
// .filter((item) => item.id == newVal)
// .map((item) => item.name)
// .join('');
// });
// }
// }
},
methods: {
getQueryGoodsById(){
let that = this
queryGoodsById({goodsId:that.id}).then(response=>{
let items = response.result;
console.info("queryGoodsById",response)
that.form.cartypeId=items.cartypeId
that.form.categorytwoId=items.categorytwoId
that.form.categorytwoName=items.categorytwoName
that.form.goodsName=items.goodsName
that.form.brand=items.brand
that.form.model=items.model
that.form.area=items.area
that.form.latitude=items.latitude
that.form.date=String(items.goodsTime)
that.form.inventory=String(items.inventory)
that.form.mileage=String(items.mileage)
that.form.contacts=items.userName
that.form.phone=items.phone
that.form.price=String(items.price)
that.form.views=String(items.views)
that.form.introduce=items.detail
that.form.fileCarList=items.image.split(',').map((url) => ({ url }))
that.form.fileBackList=items.imageBack.split(',').map((url) => ({ url }))
that.form.fileCabList=items.imageCab.split(',').map((url) => ({ url }))
that.form.fileFrontList=items.imageFront.split(',').map((url) => ({ url }))
that.form.fileLeftList=items.imageLeft.split(',').map((url) => ({ url }))
that.form.fileRightList=items.imageRight.split(',').map((url) => ({ url }))
that.onQueryCategoryList()
// this.$refs.uForm.setRules(this.rules)
}).catch(error=>{
})
},
onQueryCategoryList(){
let that = this
queryCategoryList({}).then(response=>{
console.info("queryCategoryList",response)
if(response.result.length>0){
that.categoryList = response.result
if(!that.id){
that.form.cartypeId = response.result[0].id
that.form.cartypeName = response.result[0].name
that.categoryTwoList = response.result[0].carrentCategorytwoList
}else{
that.categoryTwoList = response.result.find(item => item.id == that.form.cartypeId).carrentCategorytwoList
}
}
}).catch(error=>{
})
},
handleCategoryOneChange(){
console.info('handleCategoryOneChange')
this.categoryOneShow = true
},
selectCategoryOneClick(event){
console.info(event)
this.form.cartypeId = event.id
this.form.cartypeName = event.name
this.categoryOneShow = false
},
onQueryCategoryOneList(){
let that = this
let params = {}
queryCategoryOneList(params).then(response=>{
console.info("queryCategoryOneList",response)
that.categoryOneList = response.result.records
}).catch(error=>{
})
},
handleCategoryTwoChange(){
console.info('handleCategoryTwoChange')
this.categoryTwoShow = true
},
selectCategoryTwoClick(event){
console.info("selectCategoryTwoClick",event)
this.form.categorytwoId = event.id
this.form.categorytwoName = event.name
this.categoryTwoShow = false
},
onQueryCategoryTwoList(){
let that = this
let params = {
categoryoneId:"1867039853005877250"
}
queryCategoryTwoList(params).then(response=>{
console.info("queryCategoryTwoList",response)
that.categoryTwoList = response.result.records
}).catch(error=>{
})
},
onQueryTypeList(){
queryTypeList({}).then(response=>{
console.info("queryTypeList",response)
this.actions = response.result.records
this.form.typeId = response.result.records[0].id
}).catch(error=>{
})
},
onCancel(){
this.showDate = false
},
onConfirm(e){
console.info('e',e)
this.form.date = e.value[0];
this.showDate = false
// 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
},
handleAreaChange(){
const that = this;
wx.chooseLocation({
// type: 'wgs84',
success: function (res) {
const qqmapsdk = new QQMapWX({
key: 'TT7BZ-Z3LW4-KOAUB-KWHOA-SBJJ6-Y5B6R' // 必填
});
uni.showLoading({
title:"获取中...."
})
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function(response) {
console.log('逆地理编码结果:', response);
uni.hideLoading()
that.form.longitude = response.result.location.lng
that.form.latitude = response.result.location.lat
that.form.area = response.result.address
},
fail: function(error) {
uni.hideLoading()
console.error('逆地理编码失败:', error);
}
});
}
})
// this.$refs.citySelectRef.open()
},
handleCartype(event){
this.form.cartypeId = event.id
this.form.cartypeName = event.name
this.categoryTwoList =event.carrentCategorytwoList
this.form.categorytwoId = ""
this.form.categorytwoName = ""
},
// 照片
delCarFront(event) {
this.form.fileCarList.splice(event.index, 1)
},
async afterCarFront(e) {
let self = this
e.file.forEach(file => {
self.$Oss.ossUpload(file.url).then(url => {
self.form.fileCarList.push({
url
})
})
})
},
// 前
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('校验通过')
this.onAddGoods()
}).catch(errors => {
console.info(errors)
// uni.$u.toast('校验失败')
})
},
onAddGoods(){
let that = this
console.log("新增或者修改现在标识:"+that.id)
let params={
id:that.id?that.id:'',
cartypeId:that.form.cartypeId,
categorytwoId:that.form.categorytwoId,
goodsName:that.form.goodsName,//商品名称
brand:that.form.brand,//品牌
model:that.form.model,//型号
area:that.form.area,//所在区域
latitude:that.form.latitude,
longitude:that.form.longitude,
goodsTime:Number(that.form.date),//时间
inventory:that.form.inventory,//库存
mileage:that.form.mileage,//公里数
userName:that.form.contacts,//联系人
phone:that.form.phone,//联系人电话
price:that.form.price,//商品价格
views:that.form.views,//浏览量
image:that.form.fileCarList.map(item => item.url).join(','),//商品图片
imageBack:that.form.fileBackList.map(item => item.url).join(','),//车辆照片(后)
imageCab:that.form.fileCabList.map(item => item.url).join(','),//车辆照片(驾驶室)
imageFront:that.form.fileFrontList.map(item => item.url).join(','),//车辆照片(前)
imageLeft:that.form.fileLeftList.map(item => item.url).join(','),//车辆照片(左)
imageRight:that.form.fileRightList.map(item => item.url).join(','),//车辆照片(右)
detail:that.form.introduce,//车辆介绍
}
if(that.id == null){
}
uni.showLoading({
title:"提交中..."
})
addGoods(params).then(response=>{
console.info('response',response)
uni.hideLoading()
if(that.id){
uni.navigateBack({
delta:1
})
}else{
uni.showToast({
title: response.message,
mask: false,
icon: 'none',
duration: 2000
})
setTimeout(()=>{
uni.switchTab({
url:"/pages/home/index"
})
},1500)
}
}).catch(error=>{
})
}
},
onReady() {
this.$refs.uForm.setRules(this.rules)
}
}
</script>
<style>
page {
background-color: transparent;
forced-color-adjust: none;
}
</style>