浅念
322 lines
7.2 KiB
Vue
322 lines
7.2 KiB
Vue
<template>
|
|
<view>
|
|
<!-- <uni-nav-bar leftText=" " :fixed="true" :border="false" color="#fff" backgroundColor="#3F435B" :statusBar="true" title="二手车录入"></uni-nav-bar> -->
|
|
<view class="content">
|
|
<view class="cell">
|
|
<view>产品名称 <text class="red">*</text></view>
|
|
<view class="right">
|
|
<input placeholder="请输入产品名称" v-model="carinfo.product_name" />
|
|
</view>
|
|
</view>
|
|
<view class="cell">
|
|
<view>车辆识别码</view>
|
|
<view class="right">
|
|
<input placeholder="请输入车架号/VIN码" v-model="carinfo.vin" />
|
|
</view>
|
|
</view>
|
|
<view class="cell">
|
|
<view>车价(￥)</view>
|
|
<view class="right">
|
|
<input placeholder="请输入车价" v-model="carinfo.price" />
|
|
</view>
|
|
</view>
|
|
<view class="cell">
|
|
<view>车源地</view>
|
|
<view class="right">
|
|
<input placeholder="请输入车源地" v-model="carinfo.source_place" />
|
|
</view>
|
|
</view>
|
|
<view class="cell">
|
|
<view>上牌地</view>
|
|
<view class="right">
|
|
<input placeholder="请输入上牌地" v-model="carinfo.plate_place" />
|
|
</view>
|
|
</view>
|
|
<view class="cell">
|
|
<view>上牌时间</view>
|
|
<view class="right">
|
|
<uni-datetime-picker
|
|
ref="borrowTimePicker"
|
|
type="date"
|
|
v-model="carinfo.plate_time"
|
|
placeholder="请选择时间"
|
|
:border="false"
|
|
:clear-icon="false"
|
|
@change="onBorrowTimeChange"
|
|
>
|
|
<view class="custom-datetime-input">
|
|
<text class="custom-datetime-text" :class="{ 'placeholder': !carinfo.plate_time }">
|
|
{{ carinfo.plate_time || '请选择时间' }}
|
|
</text>
|
|
<uni-icons type="calendar" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</uni-datetime-picker>
|
|
</view>
|
|
</view>
|
|
<view class="cell">
|
|
<view>排量</view>
|
|
<view class="right">
|
|
<input placeholder="请输入排量" v-model="carinfo.displacement" />
|
|
</view>
|
|
</view>
|
|
<view class="cell">
|
|
<view>里程</view>
|
|
<view class="right">
|
|
<input placeholder="请输入里程" v-model="carinfo.mileage" />
|
|
</view>
|
|
</view>
|
|
<view class="cell">
|
|
<view>车身颜色</view>
|
|
<view class="right">
|
|
<input placeholder="请输入车身颜色" v-model="carinfo.body_color" />
|
|
</view>
|
|
</view>
|
|
<view class="cont">
|
|
<view class="conts">产品图</view>
|
|
<view class="media-upload-wrapper">
|
|
<uni-file-picker ref="mediaPicker" limit="20" fileMediatype="image" @select="selectMedia" @delete="delfn" >
|
|
<view class="upload-icon-wrapper">
|
|
<image src="/static/image/img.png" mode="" class="addimg"></image>
|
|
</view>
|
|
</uni-file-picker>
|
|
</view>
|
|
</view>
|
|
<view class="cont">
|
|
<view class="conts">车况介绍</view>
|
|
<view class="">
|
|
<textarea auto-height v-model="carinfo.condition_desc" placeholder="请输入车况介绍"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="zw">
|
|
<button class="btn" @click="draftadd">提交</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { request,showToast } from '@/api/apiT.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
maxMedia:20,
|
|
carinfo:{
|
|
product_name:'',
|
|
vin:'',
|
|
price:'',
|
|
source_place:'',
|
|
plate_place:'',
|
|
plate_time:'',
|
|
displacement:'',
|
|
body_color:'',
|
|
images:[],
|
|
condition_desc:'',
|
|
mileage:''
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
},
|
|
methods: {
|
|
onBorrowTimeChange(e) {
|
|
this.carinfo.plate_time = e
|
|
},
|
|
uploadfn(imgUrl){
|
|
return new Promise((resolve, reject) => {
|
|
uni.uploadFile({
|
|
url: 'https://usedcar.dev.hnxinyouhe.com/upload/image?scene=usedcarimg',
|
|
filePath: imgUrl,
|
|
name: 'image',
|
|
header:{'Fdesk-Auth-Token': uni.getStorageSync('token'),'Fdesk-Login-Type': 'feishu','Fdesk-System-Code':'fdesk'},
|
|
success: (uploadFileRes) => {
|
|
const res = JSON.parse(uploadFileRes.data || '{}')
|
|
if(res && res.data && res.data.href){
|
|
resolve(res.data.href)
|
|
}else{
|
|
reject('上传失败')
|
|
}
|
|
},
|
|
fail: (err) => reject(err)
|
|
});
|
|
})
|
|
},
|
|
selectMedia(e){
|
|
const allowCount = this.maxMedia - this.carinfo.images.length
|
|
const tempFilePaths = e.tempFilePaths || (e.tempFiles || []).map(item => item.path || item.url)
|
|
const paths = tempFilePaths.slice(0, allowCount)
|
|
if(paths.length === 0){
|
|
return
|
|
}
|
|
Promise.all(paths.map(p => this.uploadfn(p))).then(urls => {
|
|
urls.forEach(url => {
|
|
this.carinfo.images.push(url)
|
|
})
|
|
}).catch(() => {
|
|
uni.showToast({
|
|
title:'图片上传失败，请重试',
|
|
icon:'none'
|
|
})
|
|
})
|
|
},
|
|
delfn(e){
|
|
this.carinfo.images.splice(e.index, 1)
|
|
},
|
|
draftadd(){
|
|
const payload = {
|
|
...this.carinfo,
|
|
// images 数组 => "url1,url2,url3"
|
|
images: (this.carinfo.images || [])
|
|
.map(s => String(s || '').trim())
|
|
.filter(Boolean)
|
|
.join(',')
|
|
}
|
|
request({
|
|
url:'common/usedcar/store',
|
|
method:'post',
|
|
data:payload
|
|
}).then(res => {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
});
|
|
setTimeout(() => {
|
|
uni.reLaunch({
|
|
url: '/pages/index/index',// 替换为你要跳转的页面路径
|
|
});
|
|
}, 1000);
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.uniui-right{
|
|
position: absolute;
|
|
top: 2px;
|
|
}
|
|
.red{
|
|
color: red;
|
|
}
|
|
.content{
|
|
margin: 20px 12px;
|
|
background: #FFFFFF;
|
|
border-radius: 10px;
|
|
}
|
|
.zw{
|
|
height: 120px;
|
|
}
|
|
.cont{
|
|
position: relative;
|
|
padding: 18px 20px;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
}
|
|
.conts{
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.media-upload-wrapper{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16rpx;
|
|
}
|
|
.cell{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content:space-between;
|
|
padding: 18px 20px;
|
|
/* border-bottom: 1px solid #C3C3C3; */
|
|
align-items: center;
|
|
font-weight: 500;
|
|
}
|
|
.cont::after,.cell::after{
|
|
content : '';
|
|
position : absolute;
|
|
width : 200%;
|
|
height : 200%;
|
|
top : 0;
|
|
left : 0;
|
|
transform-origin: 0 0;
|
|
border-width: 0;
|
|
border-bottom-width:1px;
|
|
border-style : solid;
|
|
transform : scale(0.5, 0.5);
|
|
border-radius : 1px;
|
|
box-sizing : border-box;
|
|
pointer-events : none;
|
|
border-color:#C3C3C3;
|
|
}
|
|
.cell1{
|
|
display: flex;
|
|
justify-content:space-between;
|
|
padding: 18px 20px;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
}
|
|
.right{
|
|
text-align: right;
|
|
}
|
|
.select{
|
|
display: flex;
|
|
position: relative;
|
|
margin-right: 10px;
|
|
}
|
|
.foot{
|
|
position: fixed;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
height: 120px;
|
|
background: #FFFFFF;
|
|
z-index: 2;
|
|
}
|
|
.btn{
|
|
background-color: #3F435B;
|
|
color: white;
|
|
border-radius: 50px;
|
|
width: 92%;
|
|
margin-bottom: 40px;
|
|
margin: 15px 4%;
|
|
}
|
|
|
|
.actives{
|
|
background-color: #dfdfdf;
|
|
}
|
|
.text{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
line-height: 30px;
|
|
padding: 10px 15px 0px;
|
|
.qd{
|
|
color: #3471FF;
|
|
}
|
|
}
|
|
.popup-content {
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.option-list {
|
|
max-height: 400rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.option-item {
|
|
padding: 20rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.option-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.no-data {
|
|
text-align: center;
|
|
padding: 20rpx;
|
|
color: #999;
|
|
}
|
|
.addimg{
|
|
width: 215rpx;
|
|
height: 215rpx;
|
|
}
|
|
</style>
|