apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

二手车交易，全部页面&对接部分接口

Browse Source
This commit is contained in:
zhouxueli
2025-03-11 11:09:01 +08:00
parent 24f25635d5
commit 76c6d6ef5b
7 changed files with 2295 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

467
src/views/secondHandCar/wantBuy.vue Normal file
View File

@ -0,0 +1,467 @@
<template>
<div class="wrap" >
<div class="headerWrap">
<img class="bg" src="@/assets/secondHandCar/bg.png" />
<div class="navWrap">
<img class="back" @click="h5GoBack" src="@/assets/secondHandCar/back.png" />
<img class="navIcon" src="@/assets/secondHandCar/qiugou_big.png" />
<div style="opacity: 0;" class="back"></div>
</div>
<div class="audit" v-if="type==2 && auditReason">
<span><img class="noAudit" src="@/assets/secondHandCar/noAudit.png" />审核不通过：</span>
<span>{{auditReason}}</span>
</div>
</div>
<div class="contentWrap">
<div class="oneContent content">
<img class="sort" src="@/assets/secondHandCar/one_qiugou.png" />
<div class="item vehicleTypeItem">
<span> <span class="star">*</span>求购类型 </span>
<div class="radioWrap">
<van-radio-group v-model="form.vehicleType" direction="horizontal">
<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>
<van-field
v-show="form.vehicleType=='其他'"
placeholder="请填写求购物品名称"
v-model="ortherReason"
> </van-field>
</div>
</div>
<div class="item">
<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>
<van-radio name="2" :class="{'checked':form.boardType==2}">斜落地</van-radio>
<van-radio name="3" :class="{'checked':form.boardType==3}">一般平板</van-radio>
<van-radio name="9" :class="{'checked':form.boardType==9}">不限</van-radio>
</van-radio-group>
</div>
<div class="item">
<span> <span class="star">*</span>排放标准 </span>
<van-radio-group v-model="form.emissionStandard" direction="horizontal" class="radioWrap">
<van-radio name="4" :class="{'checked':form.emissionStandard==4}">国4</van-radio>
<van-radio name="5" :class="{'checked':form.emissionStandard==5}">国5</van-radio>
<van-radio name="6" :class="{'checked':form.emissionStandard==6}">国6</van-radio>
<van-radio name="1" :class="{'checked':form.emissionStandard==1}">不限</van-radio>
</van-radio-group>
</div>
<div class="item">
<span> <span class="star">*</span>联系号码 </span>
<van-field
class="radioWrap"
v-model="form.contactNumber"
input-align="right"
> </van-field>
</div>
<div class="item priceItem">
<span> <span class="star">*</span>价格区间 </span>
<div style="display: flex;align-items: center" class="price">
<el-input v-model="form.minPrice" >
<template slot="suffix" >元
</template>
</el-input>
<span style="font-size: 14px;color: rgba(44, 61, 84, 0.59);margin: 0 6px">-</span>
<el-input v-model="form.maxPrice" >
<template slot="suffix" >元
</template>
</el-input>
</div>
</div>
</div>
<div class="line"></div>
<div class="twoContent content">
<img class="sort" src="@/assets/secondHandCar/two_supply.png" />
<el-input class="ipt" v-model.trim="form.desc" type="textarea" :autosize="{ minRows: 6, maxRows: 6 }"
maxlength="500" show-word-limit placeholder="描述车辆信息：如事故、额外加装、无线遥控"></el-input>
<div v-if="type==2" style="margin: 10px 3px">不通过原因</div>
<el-input v-if="type==2" class="ipt" v-model.trim="auditReason" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }"
maxlength="200" show-word-limit placeholder="请填写不通过原因"></el-input>
<div class="checkedWrap" v-if="type==1">
<img v-show="radio==1" @click="radio=0" class="radioIcon" src="@/assets/secondHandCar/checked.png" />
<img v-show="radio==0" @click="radio=1" class="radioIcon" src="@/assets/secondHandCar/uncheck.png" />
<span>我已阅读并同意</span>
<span>《xxxxx条款》</span>
</div>
<div class="btnWrap" >
<div v-if="type==1" class="btn commonBtn" @click="noMultipleClicks(submitHandle)">发布</div>
<div class="auditBtn">
<div class="commonBtn" @click="noMultipleClicks(auditHandle,0)">审核不通过</div>
<div class="commonBtn" @click="noMultipleClicks(auditHandle,1)"><span style="margin-right: 6px">✔</span>审核通过</div>
</div>
</div>
<!-- <div class="item">
<span> <span class="star">*</span>审核结果 </span>
<div>
<img @click="radio=0" class="radioIcon" src="@/assets/secondHandCar/checked.png" />
<span>通过</span>
</div>
<div>
<img @click="radio=0" class="radioIcon" src="@/assets/secondHandCar/uncheck.png" />
<span>不通过</span>
</div>
</div>-->
</div>
</div>
</div>
</template>
<script>
import {myMixins} from "@/utils/myMixins"
import {publishCarInfo, carInfoDetail, auditCarInfo} from "@/api/secondHandCar"
export default {
name: "wantBuy",
mixins:[myMixins],
data(){
return{
form:{
id:'',
type:2,
licenseType:'',
vehicleType:'',
boardType:'',
emissionStandard:'',
contactNumber:'',
minPrice:'',
maxPrice:'',
desc:'',
},
ortherReason:'',
radio: 0,
type:'',
id:'',
queryType:'',
noClick:true,
auditReason:'',
}
},
async mounted() {
const urlParams = new URLSearchParams(window.location.search);
this.type=this.$route.query.type || urlParams.get('type');
this.id=this.$route.query.id
this.queryType=this.$route.query.queryType
if( this.id){
let res = await carInfoDetail({
id:this.id,
queryType:this.queryType ,
})
this.form={...res.data}
this.form.boardType=res.data.boardType?.code
this.form.emissionStandard=res.data.emissionStandard?.code
this.auditReason=res.data?.auditReason
}
},
methods:{
// 审核操作
async auditHandle(type){
/* if (type==0 && !this.auditReason){
this.$toast('请填写不通过原因')
return
}*/
try {
await auditCarInfo({
id: this.id,
auditResult: type ? 1 : 0 ,
auditReason: this.auditReason,
})
this.h5GoBack()
} finally {
console.log(type)
}
},
// 发布求购
async submitHandle(){
if (!this.radio) {
this.$toast('请勾选我已阅读并同意')
return
}
let flag=this.validateHandle()
if(flag){
this.$toast(flag)
return
}
let rule=this.validationRules.find(item=>!item.value)
if(rule){
this.$toast(rule.name)
return
}
try {
let res = await publishCarInfo({
...this.form,
})
if(res.code == 200 && !res.msg){
this.h5GoBack()
}else{
this.$toast(res.msg)
}
console.log("发布求购publishCarInfo",res)
} finally {
console.log(111)
}
},
// 手机号验证方法
validateHandle() {
const contactNumberPattern = /^1[3-9]\d{9}$/; // 手机号正则表达式
let str=''
if (!this.form.contactNumber) {
str='联系方式不能为空'
} else if (!contactNumberPattern.test(this.form.contactNumber)) {
str='联系方式格式错误'
} else {
str=''
}
return str
},
},
computed: {
validationRules() {
return [
{ value: this.form.vehicleType, name: '车辆类型不能为空' },
{ value: this.form.boardType, name: '落板方式不能为空' },
{ value: this.form.emissionStandard, name: '排放标准不能为空' },
{ value: this.form.contactNumber, name: '联系方式不能为空' },
{ value: this.form.minPrice, name: '售价不能为空' },
{ value: this.form.maxPrice, name: '售价不能为空' },
];
},
},
}
</script>
<style scoped lang="scss">
@import '@/styles/mixin.scss';
.wrap {
@include wh(100%, 100%);
position: relative;
}
.headerWrap{
width: 100%;
box-sizing: border-box;
padding: 15px 16px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
.bg{
position: absolute;
width: 100%;
height: 120px;
line-height: 120px;
top: 0;
left: 0;
opacity: 0.5;
z-index: -1;
}
.back{
@include wh(15px,15px);
}
.navIcon{
@include wh(84px,21px);
}
.audit{
@include wh(100%,43px);
background: #FFF7F4;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #FF6B3B;
.noAudit{
@include wh(13px,12px);
margin-right: 5px;
vertical-align: bottom;
}
span:first-child{
font-weight: 600;
}
}
}
.contentWrap{
height: calc(100% - 42px);
overflow-y: auto;
.sort{
@include wh(91px, 19px);
margin-bottom: 15px;
}
.line{
width: 100%;
border-bottom: 1px solid #F2F2F2;
margin-top: 26px;
margin-bottom: 17px;
}
.lastLine{
margin-top: 3px !important;
}
.content{
width: 100%;
box-sizing: border-box;
padding:0 20px;
}
.oneContent{
.priceItem{
margin-top: 10px;
}
.vehicleTypeItem{
line-height: 13px !important;
}
.item{
display: flex;
//align-items: center;
font-weight: 400;
font-size: 13px;
color: #2C3D54;
line-height: 44px;
width: 100%;
box-sizing: border-box;
padding-left: 21px;
padding-right: 9px;
span:first-child{
display: inline-block;
width:70px;
font-size: 13px;
color: rgba(44, 61, 84, 0.59);
}
span:last-child{
display: inline-block;
width:calc(100% - 70px);
border-bottom: 1px solid #E9E9EA;
}
.orc{
box-sizing: border-box;
padding-left: 6px;
}
}
.star{
color: #FF4B4B !important;
opacity: 1 !important;
font-weight: bold;
font-size: 12px;
margin-right: 6px;
margin-left: -6px;
}
.radioWrap{
width:calc(100% - 70px);
border-bottom: 1px solid #E9E9EA;
}
.price{
display: flex;
align-items: center;
justify-content: space-around;
::v-deep .el-input__inner{
text-align: center;
width: 108px;
height: 36px;
background: rgba(230,238,255,0.34);
border-radius: 4px;
border: none;
}
::v-deep .el-input__suffix{
margin-right: 15px;
}
}
}
.twoContent{
.checkedWrap{
color:#808D99 ;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
margin-bottom: 10px;
font-size: 12px;
.radioIcon{
@include wh(16px, 16px);
margin-right: 6px;
}
span:last-child{
color: #0E76F4;
}
}
.btnWrap{
padding-bottom: 20px;
padding-top: 15px;
}
.commonBtn{
height: 46px;
line-height: 46px;
text-align: center;
font-weight: bold;
border-radius: 5px;
color: #FFFFFF;
}
.btn{
width: 296px;
background: #4A7FEB;
margin: 0 auto;
font-size: 15px;
}
.auditBtn{
display: flex;
justify-content: space-between;
font-size: 14px;
box-sizing: border-box;
padding: 0 6px;
div:first-child{
width: 100px;
opacity: 0.79;
background: #1C2C49;
}
div:last-child{
width: 200px;
background: #4A7FEB;
}
}
}
}
::v-deep .van-icon-success{
display: none !important;
}
::v-deep .van-radio__label{
margin-left: 0;
width: 54px;
//padding: 0px 8px;
height: 23px;
border-radius: 13px;
border: 1px solid #9F9F9F;
opacity: 0.5;
text-align: center;
line-height: 23px;
font-size: 12px;
color: #323233;
opacity: 1;
}
::v-deep .van-radio--horizontal{
margin-right: 4px;
}
::v-deep .van-radio--horizontal:last-child{
margin-right: 0;
}
::v-deep .checked .van-radio__label{
background: #FFF1EC !important;
border: 1px solid #FF5C26 !important;
color: #FE5006 !important;
border-radius: 13px !important;
}
::v-deep .vehicleRadio .van-radio__label{
margin-bottom: 8px !important;
}
::v-deep .van-field__right-icon{
margin-right: 0;
padding: 0;
}
::v-deep .ipt .el-textarea__inner{
background: #F5F7F9;
border-radius: 4px;
font-size: 12px;
border: none;
}
::v-deep .van-cell{
font-size: 13px;
}
</style>