提交demo
This commit is contained in:
浅念
@@ -0,0 +1,321 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user