story#5314 二手车系统的优化需求 需要UI和接口的修改

This commit is contained in:
2025-04-07 16:07:02 +08:00
parent 7b7e926f8a
commit 5de1efc5fb
6 changed files with 100 additions and 14 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@ -25,6 +25,8 @@
:text="'行驶证照片'" :multiple="false" :files.sync="vehicleLicensePhotoList"/>
<upload-common @success2="getPlateColor" @delete2="deleteImg2"
:text="'车辆45度照'" :multiple="false" :files.sync="vehicleAnglePhotoList" />
<upload-common @success4="getBackPhoto" @delete4="deleteImgBack"
:text="'车辆后方45度'" :multiple="false" :files.sync="vehicleRearPhotoList" />
<upload-common @success3="getOtherImg" @delete3="handleDeleteOtherImg"
:text="'其他照片0/6'" :multiple="true" :files.sync="otherImgSrcList"/>
</div>
@ -40,13 +42,13 @@
<div class="item vehicleTypeItem">
<span> <span class="star">*</span>车辆类型 </span>
<van-radio-group v-model="form.vehicleType" direction="horizontal" class="radioWrap">
<van-radio name="拖车" :class="{'checked':form.vehicleType=='拖车','vehicleRadio':true}">平板拖车</van-radio>
<van-radio name="平板拖车" :class="{'checked':form.vehicleType=='平板拖车','vehicleRadio':true}">平板拖车</van-radio>
<van-radio name="地库车" :class="{'checked':form.vehicleType=='地库车','vehicleRadio':true}">地库车</van-radio>
<van-radio name="牵引车" :class="{'checked':form.vehicleType=='牵引车','vehicleRadio':true}">牵引车</van-radio>
<van-radio name="随车吊" :class="{'checked':form.vehicleType=='随车吊','vehicleRadio':true}">随车吊</van-radio>
</van-radio-group>
</div>
<div class="item" v-if="form.vehicleType=='拖车'">
<div class="item" v-if="form.vehicleType=='平板拖车'">
<span> <span class="star">*</span>落板方式 </span>
<van-radio-group v-model="form.boardType" direction="horizontal" class="radioWrap">
<van-radio name="1" :class="{'checked':form.boardType==1}">全落地</van-radio>
@ -63,6 +65,13 @@
<van-radio name="6" :class="{'checked':form.emissionStandard==6}">国6</van-radio>
</van-radio-group>
</div>
<div class="item">
<span> <span class="star">*</span>刹车系统 </span>
<van-radio-group v-model="form.brakeSystem" direction="horizontal" class="radioWrap">
<van-radio name="1" :class="{'checked':form.brakeSystem==1}">气刹</van-radio>
<van-radio name="2" :class="{'checked':form.brakeSystem==2}">油刹</van-radio>
</van-radio-group>
</div>
<div class="item">
<span> <span class="star">*</span>所在城市 </span>
<van-field
@ -99,10 +108,9 @@
> </van-field>
</div>
<div class="item">
<span> <span class="star">*</span>售价含税</span>
<span> <span class="star">*</span>售价(含税)</span>
<van-field
type="number"
style="border: none"
class="radioWrap"
v-model="form.minPrice"
@input="validatePrice"
@ -113,6 +121,16 @@
</template>
</van-field>
</div>
<div class="item">
<span> <span class="star">*</span>底盘品牌</span>
<van-field
style="border: none"
class="radioWrap"
v-model="form.underpanBrand"
input-align="right"
>
</van-field>
</div>
</div>
<div class="line lastLine"></div>
<div class="threeContent content">
@ -163,6 +181,7 @@ export default {
type:1,
vehicleLicensePhoto:'',
vehicleAnglePhoto:'',
vehicleRearPhoto: '',
otherPhoto:'',
licenseType:'',
brandModel:'',
@ -178,6 +197,8 @@ export default {
contactNumber:'',
minPrice:'',
desc:'',
underpanBrand: '',
brakeSystem: '',
},
radio: 0,
type:'',//1为发布&修改 2为审核
@ -191,6 +212,7 @@ export default {
areaName:'',
vehicleLicensePhotoList:[],
vehicleAnglePhotoList:[],
vehicleRearPhotoList: [],
otherImgSrcList:[],
otherImgSrc:[],
status:'',
@ -225,6 +247,7 @@ export default {
}
this.vehicleLicensePhotoList=[{url:res.data?.vehicleLicensePhoto}]
this.vehicleAnglePhotoList=[{url:res.data?.vehicleAnglePhoto}]
this.vehicleRearPhotoList = [{ url: res.data?.vehicleRearPhoto }]
}
let carSourceFormInfo=localStorage.getItem("carSourceFormInfo") ? JSON.parse(localStorage.getItem("carSourceFormInfo")) : ''
if(!carSourceFormInfo){
@ -242,6 +265,9 @@ export default {
}
if(this.form.vehicleAnglePhoto){
this.vehicleAnglePhotoList=[{url:this.form.vehicleAnglePhoto}]
}
if( this.form.vehicleRearPhoto ) {
this.vehicleRearPhotoList = [{url: this.form.vehicleRearPhoto}]
}
// console.log("carSourceFormInfo",carSourceFormInfo)
if(carSourceFormInfo.otherImgSrc0){
@ -319,7 +345,7 @@ export default {
this.form.vinCode=data.info.vin
this.form.plateNumber=data.info.plateNo
this.form.registerDate=data.info.registerDate +' 00:00:00'
this.form.vehicleType=data.info.vehicleType
// this.form.vehicleType=data.info.vehicleType
},
deleteImg1(){
this.form.vehicleLicensePhoto=''
@ -336,6 +362,13 @@ export default {
getOtherImg(data){
this.otherImgSrc.push(data.url)
},
getBackPhoto(data) {
console.log("datadata",data)
this.form.vehicleRearPhoto = data.url
},
deleteImgBack() {
this.form.vehicleRearPhoto = '';
},
handleDeleteOtherImg(file,index) {
this.otherImgSrc = this.otherImgSrc.filter((item,i) => index !== i);
this.otherImgSrcList = this.otherImgSrcList.filter((item,i) => index !== i);
@ -354,15 +387,19 @@ export default {
this.$toast('车辆45度不能为空')
return
}
if(!this.form.vehicleRearPhoto) {
this.$toast('车辆后方45度不能为空')
return
}
let flag=this.validateHandle()
if(flag){
this.$toast(flag)
return
}
if (this.form.vehicleType=='拖车' && !this.form.boardType) {
if (this.form.vehicleType=='平板拖车' && !this.form.boardType) {
this.$toast('落板方式不能为空')
return
}else if(this.form.vehicleType !=='拖车'){
}else if(this.form.vehicleType !=='平板拖车'){
this.form.boardType=''
}
let rule = this.validationRules.find(item =>
@ -404,15 +441,19 @@ export default {
this.$toast('车辆45度不能为空')
return
}
if(!this.form.vehicleRearPhoto) {
this.$toast('车辆后方45度不能为空')
return
}
let flag=this.validateHandle()
if(flag){
this.$toast(flag)
return
}
if (this.form.vehicleType=='拖车' && !this.form.boardType) {
if (this.form.vehicleType=='平板拖车' && !this.form.boardType) {
this.$toast('落板方式不能为空')
return
}else if(this.form.vehicleType !=='拖车'){
}else if(this.form.vehicleType !=='平板拖车'){
this.form.boardType=''
}
let rule = this.validationRules.find(item =>
@ -472,10 +513,12 @@ export default {
return [
{ value: this.form.vehicleType, name: '车辆类型不能为空' },
{ value: this.form.emissionStandard, name: '排放标准不能为空' },
{ value: this.form.brakeSystem, name: '刹车系统不能为空' },
{ value: this.form.areaCode, name: '所在城市不能为空' },
{ value: this.form.mileage, name: '行驶里程不能为空' },
{ value: this.form.contactNumber, name: '联系方式不能为空' },
{ value: this.form.minPrice, name: '售价不能为空' },
{ value: this.form.underpanBrand, name: '底盘品牌不能为空' },
];
},
},

View File

@ -89,6 +89,8 @@ export default {
this.$emit("delete1");
} else if (this.text === "车辆45度照") {
this.$emit("delete2");
} else if(this.text == '车辆后方45度') {
this.$emit("delete4");
} else {
console.log("file, detail", file, detail)
this.$emit("delete3", file, detail.index);
@ -122,6 +124,8 @@ export default {
let num = this.getVehicleLicense(result.data.color)
let data = {url: res?.data, colorStr: result.data.color, colorStatus: num, plateType: result.data.number}
this.$emit('success2', data)
} else if(this.text == '车辆后方45度') {
this.$emit('success4', {url: res?.data, uid: file.uid})
} else {
this.$emit('success3', {url: res?.data, uid: file.uid})
}
@ -253,4 +257,4 @@ export default {
::v-deep .van-uploader__preview-delete-icon {
display: none !important; /* 强制隐藏伪元素 */
}
</style>
</style>

View File

@ -150,6 +150,9 @@ export default {
if(res.data.otherPhoto){
this.imgSrcList=res.data.otherPhoto.split(',') || []
}
if( res?.data?.vehicleRearPhoto ) {
this.imgSrcList.unshift(res?.data?.vehicleRearPhoto)
}
this.imgSrcList.unshift(res?.data?.vehicleAnglePhoto)
}
},

View File

@ -73,6 +73,14 @@
:value="item.value">
</el-option>
</el-select>
<el-select v-model="proprietary" placeholder="发布方" :class="{'customSel':true , 'has-value': (proprietary || proprietary === 0) ? true : false }" clearable>
<el-option
v-for="item in proprietaryOption"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<div class="contentWrap" v-show="!show">
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
@ -85,6 +93,8 @@
<div class="contentItem">
<div class="item" v-for="(item,index) in pageList" :key="index" @click="viewCarSource(item)">
<div class="left">
<img class="owner_logo" v-if="item.proprietary == 1" src="@/assets/secondHandCar/icon_zdOwner.png" alt="">
<img class="saled_logo" v-if="item.status.code == 6 && item.downReason == '已售出'" src="@/assets/secondHandCar/icon_saled.png" alt="">
<img class="img" v-if="item.vehicleAnglePhoto" :src="item.vehicleAnglePhoto" />
<div v-else class="qiugou">{{item.vehicleType?.substring(0,2)}}</div>
</div>
@ -154,6 +164,10 @@ export default {
this.setSearchVal();
this.getList()
},
proprietary() {
this.setSearchVal();
this.getList()
}
},
data(){
return{
@ -171,6 +185,7 @@ export default {
priceSort:'',
emissionStandard:'',
boardType:'',
proprietary: '',
licenseTypeOption:[
{value:2,label:'黄牌'},{value:3,label:'绿牌'},{value:1,label:'蓝牌'},
],
@ -186,6 +201,7 @@ export default {
boardTypeOption:[
{value:1,label:'全落地'},{value:2,label:'斜落一体'},{value:3,label:'普通斜板'},{value:9,label:'不限'}
],
proprietaryOption: [{value: 1, label: '中道自营'}, {value: 0, label: '服务商发布'}],
poupShow:false,
suggestContent:'',
}
@ -255,6 +271,7 @@ export default {
sessionStorage.setItem('licenseType',String(this.licenseType));
sessionStorage.setItem('emissionStandard',String(this.emissionStandard));
sessionStorage.setItem('boardType',String(this.boardType));
sessionStorage.setItem('proprietary',String(this.proprietary));
},
getSearchVal(){
this.activeTab = Number(sessionStorage.getItem('indexActiveTab')) || 0;
@ -264,6 +281,7 @@ export default {
this.licenseType = Number(sessionStorage.getItem('licenseType')) || '';
this.emissionStandard = Number(sessionStorage.getItem('emissionStandard')) || '';
this.boardType = Number(sessionStorage.getItem('boardType')) || '';
this.proprietary = Number(sessionStorage.getItem('proprietary')) || '';
},
goMine(){//我的发布
this.$router.push({ name: "mineRelease"})
@ -320,6 +338,7 @@ export default {
priceSort:this.priceSort,
boardType:this.boardType,
emissionStandard:this.emissionStandard,
proprietary: this.proprietary
})
this.total=res.total
if(this.pageNum == 1){// 第一页直接赋值
@ -434,23 +453,23 @@ export default {
justify-content: space-around;
padding-bottom: 10px;
.customSel {
width: 69px;
width: 60px;
height: 25px;
background: #F5F5F5;
border-radius: 4px;
font-size: 12px;
font-size: 10px;
color: #323233;
::v-deep .el-input__inner{
padding: 0 2px;
height: 25px;
font-size: 12px;
font-size: 10px;
background: #F5F5F5;
border-radius: 4px;
border: none;
}
::v-deep .el-input__icon{
line-height: 25px;
font-size: 12px;
font-size: 10px;
width: 18px;
color: #2A5094;
}
@ -504,6 +523,9 @@ export default {
cursor: pointer;
}
.left{
width: 115px;
height: 77px;
position: relative;
.img, .qiugou{
width: 115px;
height: 77px;
@ -522,6 +544,20 @@ export default {
object-fit: cover; /* 保持比例填充容器,裁剪多余部分 */
object-position: center; /* 居中显示 */
}
.owner_logo {
width: 60px;
height: 23px;
position: absolute;
left: -4px;
top: -3px;
}
.saled_logo {
width: 76px;
height: 48px;
position: absolute;
left: 24px;
top: 16px;
}
}
.right{
.title{