二手车交易，全部页面&对接部分接口
This commit is contained in:
554
src/views/secondHandCar/carSource.vue
Normal file
554
src/views/secondHandCar/carSource.vue
Normal file
@ -0,0 +1,554 @@
|
||||
<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/cheyuan_big.png" />
|
||||
<div style="opacity: 0;" class="back"></div>
|
||||
</div>
|
||||
<div class="audit" v-if="type!=1 && auditRemark">
|
||||
<span><img class="noAudit" src="@/assets/secondHandCar/noAudit.png" />审核不通过：</span>
|
||||
<span>{{auditRemark}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentWrap" :class="[type==1 ? 'noContentAudit': 'hasContentAudit']">
|
||||
<div class="oneContent content">
|
||||
<img class="sort" src="@/assets/secondHandCar/one_cheyuan.png" />
|
||||
<div class="uploadWrap">
|
||||
<upload-common style="margin-right:4px" @success1="getDrivingLicense" :text="'行驶证照片'" :multiple="false" />
|
||||
<upload-common style="margin-right: 4px" @success2="getPlateColor" :text="'车辆45度照'" :multiple="false" />
|
||||
<upload-common @success3="getOtherImg" :text="'其他照片0/6'" :multiple="true" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="twoContent content">
|
||||
<img class="sort" src="@/assets/secondHandCar/two_desc.png" />
|
||||
<div class="ocrInfo">
|
||||
<div class="item"><span>牌照类型</span><span class="orc">{{ form.licenseType==1 ? '蓝牌' : (form.licenseType==2 ? '黄牌' : (form.licenseType==3 ? '绿牌' : '')) }}</span></div>
|
||||
<div class="item"><span>上装品牌</span><span class="orc">{{form.brandModel}}</span></div>
|
||||
<div class="item"><span>注册日期</span><span class="orc">{{form.registerDate?.substring(0,10)}}</span></div>
|
||||
</div>
|
||||
<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-group>
|
||||
</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-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-group>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span> <span class="star">*</span>所在城市 </span>
|
||||
<van-field
|
||||
@focus="areaShow = true"
|
||||
class="radioWrap"
|
||||
v-model="areaName"
|
||||
input-align="right"
|
||||
|
||||
|
||||
> </van-field>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span> <span class="star">*</span>行驶里程 </span>
|
||||
<van-field
|
||||
class="radioWrap"
|
||||
v-model="form.mileage"
|
||||
input-align="right"
|
||||
>
|
||||
<template slot="right-icon" >
|
||||
<span style="white-space: nowrap; margin-left: 8px;"> 公里 </span>
|
||||
</template>
|
||||
</van-field>
|
||||
</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">
|
||||
<span> <span class="star">*</span>售价</span>
|
||||
<van-field
|
||||
style="border: none"
|
||||
class="radioWrap"
|
||||
v-model="form.maxPrice"
|
||||
input-align="right"
|
||||
>
|
||||
<template slot="right-icon" >
|
||||
<span style="white-space: nowrap; margin-left: 8px;"> 元 </span>
|
||||
</template>
|
||||
</van-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line lastLine"></div>
|
||||
<div class="threeContent content">
|
||||
<img class="sort" src="@/assets/secondHandCar/three.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 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 v-else 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>
|
||||
</div>
|
||||
<van-popup
|
||||
v-model="areaShow"
|
||||
closeable
|
||||
position="bottom"
|
||||
>
|
||||
<van-area title="标题" :area-list="areaList" closeable="true"
|
||||
@cancel="areaShow = false" @confirm="confirmHandle"/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {publishCarInfo,carInfoDetail,auditCarInfo} from "@/api/secondHandCar"
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import uploadCommon from "@/views/secondHandCar/components/upload-common.vue";
|
||||
import {areaList} from "@vant/area-data";
|
||||
export default {
|
||||
name: "carSource",
|
||||
mixins:[myMixins],
|
||||
components:{uploadCommon},
|
||||
data(){
|
||||
return{
|
||||
form:{
|
||||
id:'',
|
||||
type:1,
|
||||
vehicleLicensePhoto:'',
|
||||
vehicleAnglePhoto:'',
|
||||
otherPhoto:'',
|
||||
licenseType:'',
|
||||
brandModel:'',
|
||||
vinCode:'',
|
||||
plateNumber:'',
|
||||
vehicleFrontLicensePlate:'',
|
||||
registerDate:'',
|
||||
vehicleType:'',
|
||||
boardType:'',
|
||||
emissionStandard:'',
|
||||
areaCode:'',
|
||||
mileage:'',
|
||||
contactNumber:'',
|
||||
minPrice:0,
|
||||
maxPrice:'',
|
||||
desc:'',
|
||||
},
|
||||
price:'',
|
||||
radio: 0,
|
||||
type:'',//1为发布 2为审核
|
||||
areaList: areaList,
|
||||
areaShow:false,
|
||||
areaName:'',
|
||||
noClick:true,
|
||||
otherImgSrc:[],
|
||||
id:'',
|
||||
auditRemark:'',
|
||||
auditReason:'',
|
||||
queryType:'',
|
||||
}
|
||||
},
|
||||
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.licenseType=res.data.licenseType?.code
|
||||
this.form.boardType=res.data.boardType?.code
|
||||
this.form.emissionStandard=res.data.emissionStandard?.code
|
||||
this.auditRemark=res.data?.auditRemark
|
||||
this.areaName=res.data?.areaName
|
||||
}
|
||||
console.log("---",this.type,this.form)
|
||||
},
|
||||
methods:{
|
||||
confirmHandle(val){
|
||||
let data=val.length
|
||||
// console.log("val",val)
|
||||
this.form.areaCode=val[data - 1]?.code
|
||||
if(val[0].name.includes('市')){
|
||||
this.areaName=val[1].name + val[2].name
|
||||
}else{
|
||||
this.areaName=val[0].name +val[1].name + val[2].name
|
||||
}
|
||||
this.areaShow=false
|
||||
},
|
||||
getDrivingLicense(data){
|
||||
console.log("getDrivingLicense",data)
|
||||
this.form.vehicleLicensePhoto=data.url
|
||||
this.form.brandModel=data.info.model
|
||||
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
|
||||
},
|
||||
getPlateColor(data){
|
||||
console.log("getPlateColor",data)
|
||||
this.form.vehicleAnglePhoto=data.url
|
||||
this.form.licenseType=data.colorStatus
|
||||
this.form.vehicleFrontLicensePlate=data.plateType
|
||||
},
|
||||
getOtherImg(data){
|
||||
this.otherImgSrc.push(data)
|
||||
console.log("getOtherImg",data)
|
||||
},
|
||||
// 审核操作
|
||||
async auditHandle(type){
|
||||
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
|
||||
}
|
||||
if (!this.form.vehicleLicensePhoto) {
|
||||
this.$toast('行驶证不能为空')
|
||||
return
|
||||
}
|
||||
if (!this.form.vehicleAnglePhoto) {
|
||||
this.$toast('车辆45度不能为空')
|
||||
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,
|
||||
otherPhoto:this.otherImgSrc?.join(',')
|
||||
})
|
||||
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='联系方式不能为空'
|
||||
// return
|
||||
} 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.areaCode, name: '所在城市不能为空' },
|
||||
{ value: this.form.mileage, name: '行驶里程不能为空' },
|
||||
{ value: this.form.contactNumber, 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-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
position: relative;
|
||||
.navWrap{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px 10px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navBar{
|
||||
margin-bottom: 46px;
|
||||
|
||||
}
|
||||
.noContentAudit{
|
||||
height: calc(100% - 42px);
|
||||
}
|
||||
.hasContentAudit{
|
||||
height: calc(100% - 85px);
|
||||
}
|
||||
.contentWrap{
|
||||
width: 100%;
|
||||
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 14px 0 20px;
|
||||
//padding:0 20px;
|
||||
}
|
||||
.oneContent{
|
||||
.uploadWrap{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
//justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.twoContent{
|
||||
.ocrInfo{
|
||||
background: #FAFBFC;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.vehicleTypeItem{
|
||||
line-height: 13px !important;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.threeContent{
|
||||
.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;
|
||||
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 .van-field__right-icon{
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
}
|
||||
::v-deep .ipt .el-textarea__inner{
|
||||
background: #F5F7F9;
|
||||
border-radius: 4px;
|
||||
//opacity: 0.74;
|
||||
font-size: 12px;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .van-popup__close-icon--top-right{
|
||||
display: none;
|
||||
}
|
||||
::v-deep .vehicleRadio .van-radio__label{
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
</style>
|
||||
154
src/views/secondHandCar/components/upload-common.vue
Normal file
154
src/views/secondHandCar/components/upload-common.vue
Normal file
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<!-- <div>-->
|
||||
<van-uploader
|
||||
v-model="files"
|
||||
:after-read="handleFileRead"
|
||||
:before-delete="deleteHandle"
|
||||
:preview-size="105"
|
||||
accept="image "
|
||||
:max-size="5 * 1024 * 1024"
|
||||
:max-count="multiple ? 6 : 1"
|
||||
>
|
||||
<div class="upload">
|
||||
<img class="icon" src="@/assets/secondHandCar/upload.png" />
|
||||
<span class="text">{{ text }}</span>
|
||||
</div>
|
||||
</van-uploader>
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ocrHandler, uploadImage} from "@/api/mine";
|
||||
export default {
|
||||
name: "uploadCommon",
|
||||
props:{
|
||||
text:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
multiple:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
files: [],
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
deleteHandle(file,detail){
|
||||
console.log("file,detail",file,detail)
|
||||
},
|
||||
async handleFileRead(file) {
|
||||
const formData = new FormData();
|
||||
formData.append("file" , file.file);
|
||||
let res = await uploadImage(formData);
|
||||
console.log("res",res)
|
||||
if(this.text == '行驶证照片'){
|
||||
// 行驶证识别
|
||||
let result = await ocrHandler({
|
||||
ocrType: 3,
|
||||
imageUrl: res.data,
|
||||
cardSide: 'FRONT'
|
||||
});
|
||||
// console.log("result",result)
|
||||
let data={url:res?.data,info:{...result?.data?.frontInfo}}
|
||||
this.$emit('success1',data)
|
||||
}else if(this.text == '车辆45度照'){
|
||||
let result = await ocrHandler({
|
||||
ocrType: 10,
|
||||
imageUrl: res.data,
|
||||
cardSide: 'FRONT'
|
||||
});
|
||||
// console.log("result",result)
|
||||
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{
|
||||
this.$emit('success3',res?.data)
|
||||
}
|
||||
},
|
||||
getVehicleLicense(color) {
|
||||
let vehicleLicense=''
|
||||
if( color == '蓝' ) {
|
||||
vehicleLicense = 1
|
||||
} else if(color == '黄') {
|
||||
vehicleLicense = 2
|
||||
} else if(color == '临牌') {
|
||||
vehicleLicense = 4
|
||||
} else if(color.includes('绿')) {
|
||||
vehicleLicense = 3
|
||||
} else {
|
||||
vehicleLicense = 5
|
||||
}
|
||||
return vehicleLicense
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .van-uploader{
|
||||
}
|
||||
.upload:last-child{
|
||||
//margin-right: 0px !important;
|
||||
|
||||
}
|
||||
.upload{
|
||||
//margin-right: 5px;
|
||||
position: relative;
|
||||
width: 105px;
|
||||
height: 70px;
|
||||
background: #F1F6FF;
|
||||
box-shadow: 0px 0px 2px 0px rgba(235,235,235,0.38);
|
||||
border-radius: 4px;
|
||||
border: 1px solid #B8CBE9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 3px;
|
||||
.icon{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.text{
|
||||
width: 80px;
|
||||
background: #5A6FFF;
|
||||
border-radius: 7px;
|
||||
opacity: 0.9;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
::v-deep .van-uploader__preview{
|
||||
margin: 0;
|
||||
//margin-left: 4px;
|
||||
|
||||
}
|
||||
::v-deep .van-uploader__preview-image{
|
||||
height: 70px !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
::v-deep .van-uploader__preview-delete {
|
||||
background-image: url('@/assets/secondHandCar/delete.png'); /* 替换为你的图片路径 */
|
||||
background-size: cover;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
::v-deep .van-uploader__preview-delete-icon {
|
||||
display: none !important; /* 强制隐藏伪元素 */
|
||||
}
|
||||
::v-deep .van-uploader__wrapper{
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
305
src/views/secondHandCar/forSale.vue
Normal file
305
src/views/secondHandCar/forSale.vue
Normal file
@ -0,0 +1,305 @@
|
||||
<template>
|
||||
<div class="wrap" >
|
||||
<div class="headerWrap">
|
||||
<img class="back" @click="h5GoBack" src="@/assets/secondHandCar/back.png" />
|
||||
<span>在售</span>
|
||||
<div style="opacity: 0;" class="back"></div>
|
||||
</div>
|
||||
<div class="contentWrap">
|
||||
<van-swipe @change="onChange">
|
||||
<van-swipe-item v-for="(item,i) in imgSrcList" :key="i">
|
||||
<img v-if="item" class="swipeImg" :src="item" />
|
||||
</van-swipe-item>
|
||||
<van-swipe-item>
|
||||
<img class="swipeImg" src="@/assets/secondHandCar/45angle.png" />
|
||||
</van-swipe-item>
|
||||
<template #indicator>
|
||||
<div class="custom-indicator">{{ current + 1 }}/{{(imgSrcList.length + 1)}}</div>
|
||||
</template>
|
||||
</van-swipe>
|
||||
<div class="infoWrap">
|
||||
<div class="titleWrap wrapCommon">
|
||||
<div class="info">
|
||||
<span>{{ detailInfo.vehicleType }}</span>
|
||||
<span>{{ detailInfo.boardType?.label }}</span>
|
||||
<span>{{ detailInfo.licenseType?.label }}</span>
|
||||
<span>{{detailInfo.brandModel}}</span>
|
||||
<span>{{ detailInfo.mileage }}公里</span>
|
||||
<span>{{ detailInfo.emissionStandard?.label }}</span>
|
||||
</div>
|
||||
<div class="time">
|
||||
<span>{{ detailInfo.createTime?.substring(0,10) }}</span><span>{{ detailInfo.areaName }}</span><span>发布</span>
|
||||
</div>
|
||||
<div class="price">
|
||||
<span>{{ detailInfo.maxPrice / 10000 }}</span>
|
||||
<span>万</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailInfoWrap wrapCommon">
|
||||
<div>
|
||||
<img class="descImg firstDescImg" src="@/assets/secondHandCar/details.png" />
|
||||
</div>
|
||||
<div class="descItem descCommon">
|
||||
<div class="itemInfo">
|
||||
<span>{{ detailInfo.licenseType?.label }}</span>
|
||||
<span>牌照类型</span>
|
||||
</div>
|
||||
<div class="suGang"></div>
|
||||
<div class="itemInfo">
|
||||
<span>{{ detailInfo.vehicleType }}</span>
|
||||
<span>拖车类型</span>
|
||||
</div>
|
||||
<div class="suGang"></div>
|
||||
<div class="itemInfo">
|
||||
<span>{{ detailInfo.boardType?.label }} </span>
|
||||
<span>拖车落板</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="descItem descCommon">
|
||||
<div class="itemInfo">
|
||||
<span>{{detailInfo.brandModel}}</span>
|
||||
<span>牌照类型</span>
|
||||
</div>
|
||||
<div class="suGang"></div>
|
||||
<div class="itemInfo">
|
||||
<span>{{ detailInfo.emissionStandard?.label }}</span>
|
||||
<span>排放标准</span>
|
||||
</div>
|
||||
<div class="suGang"></div>
|
||||
<div class="itemInfo">
|
||||
<span>{{ detailInfo.mileage}}公里</span>
|
||||
<span>行驶公里</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="descItem descCommon">
|
||||
<div class="itemInfo">
|
||||
<span>{{ detailInfo.createTime?.substring(0,10) }}</span>
|
||||
<span>发布日期</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class="descImg" src="@/assets/secondHandCar/description.png" />
|
||||
</div>
|
||||
<div class="descCommon desc">{{detailInfo.desc}}</div>
|
||||
</div>
|
||||
<div class="btnWrap" >
|
||||
<div class="btn commonBtn" @click="noMultipleClicks(handle)">我想要</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import {carInfoDetail} from "@/api/secondHandCar";
|
||||
export default {
|
||||
name: "forSale",
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
current: 0,
|
||||
noClick:true,
|
||||
id:'',
|
||||
queryType:'',
|
||||
detailInfo:'',
|
||||
imgSrcList:[],
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
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.detailInfo=res?.data
|
||||
this.imgSrcList=res.data.otherPhoto?.split(',') || []
|
||||
console.log("=",res,this.imgSrcList)
|
||||
|
||||
/*this.form={...res.data}
|
||||
this.form.licenseType=res.data.licenseType?.code
|
||||
this.form.boardType=res.data.boardType?.code
|
||||
this.form.emissionStandard=res.data.emissionStandard?.code
|
||||
this.auditRemark=res.data?.auditRemark
|
||||
this.areaName=res.data?.areaName*/
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onChange(index) {
|
||||
this.current = index;
|
||||
},
|
||||
handle(){
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/mixin.scss';
|
||||
.wrap {
|
||||
@include wh(100%, 100%);
|
||||
position: relative;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
.headerWrap{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 16px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.back{
|
||||
@include wh(15px,15px);
|
||||
}
|
||||
span{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #203152;
|
||||
}
|
||||
}
|
||||
.contentWrap{
|
||||
height: calc(100% - 42px);
|
||||
overflow-y: auto;
|
||||
.infoWrap{
|
||||
box-sizing: border-box;
|
||||
padding: 0 6px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
.wrapCommon{
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(5.602678571428572px);
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.titleWrap{
|
||||
height: 108px;
|
||||
padding: 18px 0 15px 21px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.info{
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #212020;
|
||||
line-height: 21px;
|
||||
span{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
line-height: 17px;
|
||||
span:first-child{
|
||||
margin-right: 20px;
|
||||
}
|
||||
span:last-child{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.price{
|
||||
color: #FF5533;
|
||||
line-height: 28px;
|
||||
font-weight: 600;
|
||||
span:first-child{
|
||||
font-size: 20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
span:last-child{
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detailInfoWrap{
|
||||
box-sizing: border-box;
|
||||
padding: 18px 28px 15px 22px;
|
||||
.descImg{
|
||||
@include wh(72px, 19px);
|
||||
}
|
||||
.firstDescImg{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.descCommon{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.descItem{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.itemInfo{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span:first-child{
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #282828;
|
||||
line-height: 20px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
span:last-child{
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #999999;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
.suGang{
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
border-right: 1px solid #999999;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.desc{
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #282828;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.btnWrap{
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.custom-indicator {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 20px;
|
||||
padding: 2px 5px;
|
||||
font-size: 12px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: wheat;
|
||||
}
|
||||
.van-swipe-item{
|
||||
height: 215px;
|
||||
background-color: pink;
|
||||
.swipeImg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,10 +2,11 @@
|
||||
<div class="wrap">
|
||||
<div class="headerWrap">
|
||||
<img class="bg" src="@/assets/secondHandCar/bg.png" />
|
||||
<img class="mine" src="@/assets/secondHandCar/mine.png" />
|
||||
<img class="mine" src="@/assets/secondHandCar/mine.png" @click="goMine" />
|
||||
<el-input
|
||||
@input="getList"
|
||||
placeholder="请输入"
|
||||
v-model="keyword">
|
||||
v-model.trim="topSearch">
|
||||
<img slot="suffix" class="search" src="@/assets/secondHandCar/search.png"/>
|
||||
</el-input>
|
||||
</div>
|
||||
@ -16,28 +17,28 @@
|
||||
<img class="big" v-show="activeTab === 1" src="@/assets/secondHandCar/qiugouBig.png" @click="activeTab = 1"/>
|
||||
<img class="small" v-show="activeTab === 0" src="@/assets/secondHandCar/qiugouSmall.png" @click="activeTab = 1"/>
|
||||
</div>
|
||||
<div>
|
||||
<div @click="poupShow = true">
|
||||
<img class="suggest" src="@/assets/secondHandCar/suggest.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filterWrap">
|
||||
<el-select v-model="plateType" placeholder="牌照类型" class="customSel">
|
||||
<el-select @change="getList" v-model="licenseType" placeholder="牌照类型" :class="{'customSel':true , 'has-value': licenseType }" clearable>
|
||||
<el-option
|
||||
v-for="item in plateTypeOption"
|
||||
v-for="item in licenseTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="vehicleType" placeholder="车辆类型" class="customSel">
|
||||
<el-select @change="getList" v-model="vehicleType" placeholder="车辆类型" :class="{'customSel':true , 'has-value': vehicleType }" clearable>
|
||||
<el-option
|
||||
v-for="item in vehicleTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
:value="item.label">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="price" placeholder="价格区间" class="customSel">
|
||||
<el-select @change="getList" v-model="price" placeholder="价格区间" :class="{'customSel':true , 'has-value': price }" clearable>
|
||||
<el-option
|
||||
v-for="item in priceOption"
|
||||
:key="item.value"
|
||||
@ -45,17 +46,17 @@
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="paiFang" placeholder="排放标准" class="customSel">
|
||||
<el-select @change="getList" v-model="emissionStandard" placeholder="排放标准" :class="{'customSel':true , 'has-value': emissionStandard }" clearable>
|
||||
<el-option
|
||||
v-for="item in paiFangOption"
|
||||
v-for="item in emissionStandardOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-select v-model="luoBan" placeholder="落板方式" class="customSel">
|
||||
<el-select @change="getList" v-model="boardType" placeholder="落板方式" :class="{'customSel':true , 'has-value': boardType }" clearable>
|
||||
<el-option
|
||||
v-for="item in luoBanOption"
|
||||
v-for="item in boardTypeOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
@ -65,91 +66,73 @@
|
||||
<div class="contentWrap" v-show="!showEmpty">
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
|
||||
<div class="contentItem">
|
||||
<div class="item">
|
||||
<div class="item" v-for="(item,index) in pageList" :key="index" @click="viewCarSource(item)">
|
||||
<div class="left">
|
||||
<img src="@/assets/secondHandCar/45angle.png" />
|
||||
<img :src="item.vehicleAnglePhoto" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">牵引车</div>
|
||||
<div class="type">全落地 | 黄牌 | 粤海 | 18万km | 国5</div>
|
||||
<div class="date">注册日期： 2025-03-07</div>
|
||||
<div class="price"><span>￥</span> <span>10.25</span> <span>万</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<img src="@/assets/secondHandCar/45angle.png" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">牵引车</div>
|
||||
<div class="type">全落地 | 黄牌 | 粤海 | 18万km | 国5</div>
|
||||
<div class="date">注册日期： 2025-03-07</div>
|
||||
<div class="price"><span>￥</span> <span>10.25</span> <span>万</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<img src="@/assets/secondHandCar/45angle.png" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">牵引车</div>
|
||||
<div class="type">全落地 | 黄牌 | 粤海 | 18万km | 国5</div>
|
||||
<div class="date">注册日期： 2025-03-07</div>
|
||||
<div class="price"><span>￥</span> <span>10.25</span> <span>万</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<img src="@/assets/secondHandCar/45angle.png" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">牵引车</div>
|
||||
<div class="type">全落地 | 黄牌 | 粤海 | 18万km | 国5</div>
|
||||
<div class="date">注册日期： 2025-03-07</div>
|
||||
<div class="price"><span>￥</span> <span>10.25</span> <span>万</span> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="left">
|
||||
<img src="@/assets/secondHandCar/45angle.png" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">牵引车</div>
|
||||
<div class="type">全落地 | 黄牌 | 粤海 | 18万km | 国5</div>
|
||||
<div class="date" v-show="activeTab==0">注册日期： 2025-03-07</div>
|
||||
<div class="price"><span>￥</span> <span>10.25</span> <span>万</span> </div>
|
||||
<div class="title">{{item.vehicleType}}</div>
|
||||
<div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
|
||||
{{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
|
||||
|
||||
<div v-else class="type">{{ item.boardType?.label }} |
|
||||
{{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
|
||||
<!-- <div class="date" v-show="activeTab==0">注册日期： 2025-03-07</div>-->
|
||||
<div class="price"><span>￥</span> <span>{{priceHandle(item.maxPrice) }}</span> <span>万</span> </div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
<img v-show="activeTab==0" class="fixImg" src="@/assets/secondHandCar/sellCar.png" />
|
||||
<img v-show="activeTab==1" class="fixImg" src="@/assets/secondHandCar/buyCar.png" />
|
||||
</div>
|
||||
<div class="empty" v-show="showEmpty">
|
||||
<img src="@/assets/empty.png" />
|
||||
</div>
|
||||
<img v-show="activeTab==0" @click="releaseHandle(1)" class="fixImg" src="@/assets/secondHandCar/sellCar.png" />
|
||||
<img v-show="activeTab==1" @click="releaseHandle(2)" class="fixImg" src="@/assets/secondHandCar/buyCar.png" />
|
||||
<van-popup v-model="poupShow" closeable round :style="{ width: '90%',height:'40%' }" class="poupWrap">
|
||||
<span class="title">反馈建议</span>
|
||||
<div class="poupContent">
|
||||
<div class="tip">如有任何建议，请及时反馈我们。</div>
|
||||
<el-input class="ipt" v-model.trim="suggestContent" type="textarea" :autosize="{ minRows: 6, maxRows: 10 }"
|
||||
maxlength="500" show-word-limit></el-input>
|
||||
<div class="btnWrap">
|
||||
<div class="btn" @click="submitSuggest">提交</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import {appPageList,userFeedback } from "@/api/secondHandCar"
|
||||
export default {
|
||||
name: "indexList",
|
||||
computed: {
|
||||
},
|
||||
mixins:[myMixins],
|
||||
watch:{
|
||||
activeTab(){
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
pageList:[],
|
||||
keyword:'',
|
||||
topSearch:'',
|
||||
activeTab:0,
|
||||
showEmpty:false,
|
||||
isLoading:false,
|
||||
isFinished:false,
|
||||
plateType:'',
|
||||
licenseType:'',
|
||||
vehicleType:'',
|
||||
minPrice:'',
|
||||
maxPrice:'',
|
||||
price:'',
|
||||
paiFang:'',
|
||||
luoBan:'',
|
||||
plateTypeOption:[
|
||||
{value:1,label:'黄牌'},{value:2,label:'绿牌'},{value:3,label:'蓝牌'},
|
||||
emissionStandard:'',
|
||||
boardType:'',
|
||||
licenseTypeOption:[
|
||||
{value:2,label:'黄牌'},{value:3,label:'绿牌'},{value:1,label:'蓝牌'},
|
||||
],
|
||||
vehicleTypeOption:[
|
||||
{value:1,label:'拖车'},{value:2,label:'地库车'},{value:3,label:'牵引车'},{value:4,label:'随车吊'},{value:5,label:'其他'},
|
||||
@ -157,52 +140,90 @@ export default {
|
||||
priceOption:[
|
||||
{value:1,label:'5~6'},{value:2,label:'7~8'},{value:3,label:'8~9'}
|
||||
],
|
||||
paiFangOption:[
|
||||
{value:1,label:'国四'},{value:2,label:'国五'},{value:3,label:'国六'},{value:4,label:'不限'},
|
||||
emissionStandardOption:[
|
||||
{value:1,label:'不限'},{value:4,label:'国四'},{value:5,label:'国五'},{value:6,label:'国六'}
|
||||
],
|
||||
luoBanOption:[
|
||||
{value:1,label:'全落地'},{value:2,label:'斜落地'},{value:3,label:'一般斜板'}
|
||||
]
|
||||
boardTypeOption:[
|
||||
{value:1,label:'全落地'},{value:2,label:'斜落地'},{value:3,label:'一般斜板'},{value:9,label:'不限'}
|
||||
],
|
||||
poupShow:false,
|
||||
suggestContent:'',
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.driverId = urlParams.get('driverId');
|
||||
// this.getList();
|
||||
this.getList();
|
||||
document.addEventListener('visibilitychange', async ( ) => {
|
||||
let state = document.visibilityState
|
||||
if (state == 'hidden') { // 用户离开了
|
||||
}
|
||||
if (state == 'visible') {
|
||||
// this.getList();
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
goMine(){//我的发布
|
||||
this.$router.push({ name: "mineRelease",})
|
||||
},
|
||||
priceHandle(item){
|
||||
return item/10000
|
||||
},
|
||||
viewCarSource(item){
|
||||
if(this.activeTab===0){//车源查看
|
||||
this.$router.push({ name: "forSale", query: {type:1 , id:item.id,queryType:1 }})
|
||||
}else{//求购查看
|
||||
this.$router.push({ name: "wantBuySale", query: { type:1 ,id:item.id ,queryType:2}})
|
||||
}
|
||||
},
|
||||
releaseHandle(type){
|
||||
if(type===1){//车源发布
|
||||
this.$router.push({
|
||||
name: "carSource",
|
||||
query: { type:1 }
|
||||
})
|
||||
}else{//求购发布
|
||||
this.$router.push({ name: "wantBuy", query: { type:1 } })
|
||||
}
|
||||
},
|
||||
async submitSuggest(){
|
||||
if(!this.suggestContent){
|
||||
this.$toast('反馈提交不能为空')
|
||||
return
|
||||
}
|
||||
//继续提交
|
||||
await userFeedback ({
|
||||
content:this.suggestContent,
|
||||
})
|
||||
this.poupShow=false
|
||||
this.suggestContent=''
|
||||
this.$toast('反馈建议提交成功')
|
||||
},
|
||||
onRefresh() {
|
||||
// this.getList()
|
||||
this.getList()
|
||||
setTimeout(() => {
|
||||
this.$toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
/* async getList(){
|
||||
let res= await driverTrainList({
|
||||
driverId:this.driverId,//79639
|
||||
async getList(){
|
||||
let res= await appPageList({
|
||||
type:this.activeTab==0 ? 1 : 2,
|
||||
topSearch:this.topSearch,
|
||||
licenseType:this.licenseType,
|
||||
vehicleType:this.vehicleType,
|
||||
minPrice:this.minPrice,
|
||||
maxPrice:this.maxPrice,
|
||||
boardType:this.boardType,
|
||||
emissionStandard:this.emissionStandard,
|
||||
brandModel:this.brandModel,
|
||||
})
|
||||
this.pageList=res.data?.list;
|
||||
if(res.data.assessState == 0){
|
||||
this.isFinished=false
|
||||
}else {
|
||||
this.isFinished=true //是否完成
|
||||
}
|
||||
this.pageList=res.data
|
||||
if(this.pageList?.length === 0){
|
||||
this.showEmpty = true
|
||||
}else {
|
||||
this.showEmpty = false
|
||||
}
|
||||
},*/
|
||||
},
|
||||
goApp(){
|
||||
let data = {"action":"goBack","params":""}
|
||||
var u = navigator.userAgent;
|
||||
@ -220,10 +241,19 @@ export default {
|
||||
@import "@/styles/common.scss";
|
||||
@import "@/styles/mixin.scss";
|
||||
.wrap{
|
||||
//position: relative;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.fixImg{
|
||||
width: 210px;
|
||||
height: 102px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 11;
|
||||
}
|
||||
.headerWrap{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -301,44 +331,44 @@ export default {
|
||||
font-size: 12px;
|
||||
background: #F5F5F5;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-input__icon{
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
width: 18px;
|
||||
color: #2A5094;
|
||||
}
|
||||
::v-deep .el-input__suffix{
|
||||
right: 2px;
|
||||
}
|
||||
}
|
||||
.has-value ::v-deep .el-input__inner{
|
||||
background: #F1F6FF ;
|
||||
color: #007BE9;
|
||||
font-weight: bold;
|
||||
}
|
||||
.has-value ::v-deep .el-input__icon{
|
||||
color: #007BE9;
|
||||
}
|
||||
}
|
||||
.contentWrap{
|
||||
width: 100%;
|
||||
height: calc(100% - 150px);
|
||||
overflow-y: auto;
|
||||
background-color: #F2F2F2 ;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 6px 0;
|
||||
position: relative;
|
||||
.fixImg{
|
||||
width: 210px;
|
||||
height: 102px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 11;
|
||||
}
|
||||
.contentItem{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #FFFFFF;
|
||||
//border-top-left-radius: 10px;
|
||||
//border-top-right-radius: 10px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 8px;
|
||||
padding-top: 18px;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.left{
|
||||
img{
|
||||
@ -346,7 +376,7 @@ export default {
|
||||
height: 77px;
|
||||
background: linear-gradient( 90deg, rgba(5,32,54,0.88) 0%, rgba(69,87,103,0.19) 64%, rgba(133,141,152,0) 100%);
|
||||
border-radius: 7px;
|
||||
margin-right: 8px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
@ -354,19 +384,23 @@ export default {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #212020;
|
||||
line-height: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.type{
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #282828;
|
||||
line-height: 17px;
|
||||
line-height: 23px;
|
||||
width: 200px;
|
||||
white-space: nowrap; /* 强制文本在一行显示 */
|
||||
overflow: hidden; /* 隐藏超出部分 */
|
||||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||||
}
|
||||
.date{
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #999999;
|
||||
line-height: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.price{
|
||||
color: #FF5533;
|
||||
@ -386,7 +420,54 @@ export default {
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
.line{
|
||||
width: 224px;
|
||||
border-bottom: 2px solid #F5F5F5;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.poupWrap{
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
.title{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #c8c9cc;
|
||||
}
|
||||
.poupContent{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px 10px 10px;
|
||||
.tip,.ipt{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.ipt{
|
||||
|
||||
}
|
||||
.btnWrap{
|
||||
width: 100%;
|
||||
text-align: -webkit-right;
|
||||
.btn{
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: #4C81F5;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty{
|
||||
@include flexTwoCenter;
|
||||
height:calc(100% - 86px);
|
||||
background-color: #FAFAFA;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
397
src/views/secondHandCar/mineRelease.vue
Normal file
397
src/views/secondHandCar/mineRelease.vue
Normal file
@ -0,0 +1,397 @@
|
||||
<template>
|
||||
<div class="wrap" >
|
||||
<div class="headerWrap">
|
||||
<img class="bg" src="@/assets/secondHandCar/bg.png" />
|
||||
<div class="nav">
|
||||
<img class="back" @click="h5GoBack" src="@/assets/secondHandCar/back.png" />
|
||||
<span>我的发布</span>
|
||||
<div style="opacity: 0;" class="back"></div>
|
||||
</div>
|
||||
<div class="tabBar">
|
||||
<div v-for="(item,i) in tabList" :key="i" :class="{'active':activeTab == (i+1)}" @click="tabClickHandle(item)">{{item.name}}
|
||||
<span v-if="i==0 && noPassNum">{{noPassNum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contentWrap" v-show="!showEmpty">
|
||||
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="min-height:85vh">
|
||||
<div class="contentItem">
|
||||
<div class="item" v-for="(item,index) in pageList" :key="index" @click.stop="itemHandle(item)">
|
||||
<div class="left">
|
||||
<img class="bigImg" src="@/assets/secondHandCar/45angle.png" />
|
||||
<img v-if="item.type==1" class="smallImg" src="@/assets/secondHandCar/mine_cheyuan.png" />
|
||||
<img v-else class="smallImg" src="@/assets/secondHandCar/mine_qiugou.png" />
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">
|
||||
<span>牵引车</span>
|
||||
<img class="titleImg" :src="getStatus(item.status?.code)" />
|
||||
</div>
|
||||
<div v-if="activeTab==0" class="type">{{ item.boardType?.label }} | {{ item.licenseType?.label }} |
|
||||
{{ item.mileage }}km | {{item.emissionStandard?.label}}</div>
|
||||
|
||||
<div v-else class="type">{{ item.boardType?.label }} |
|
||||
{{item.vehicleType }} | {{item.emissionStandard?.label}}</div>
|
||||
<div class="price"><span>{{ priceHandle(item.maxPrice) }}</span> <span>万</span> </div>
|
||||
<div class="btnWrap">
|
||||
<img v-if="[1,2].includes(activeTab)" @click.stop="reviseHandle(item)" class="revise" src="@/assets/secondHandCar/revise.png" />
|
||||
<img v-if="[1,2].includes(activeTab)" @click.stop="xiajiaHandle(item)" class="xiajia" src="@/assets/secondHandCar/xiajia.png" />
|
||||
<img v-if="[2,3].includes(activeTab)" @click.stop="polishHandle(item)" class="polish" src="@/assets/secondHandCar/polish.png" />
|
||||
<img v-if="activeTab == 3" @click.stop="reShangJiaHandle(item)" class="reshangjia" src="@/assets/secondHandCar/reshangjia.png" />
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
</div>
|
||||
<div class="empty" v-show="showEmpty">
|
||||
<img src="@/assets/empty.png" />
|
||||
</div>
|
||||
<van-popup v-model="poupShow" closeable round :style="{ width: '70%',height:'18%' }" class="poupWrap">
|
||||
<span class="title">下架原因</span>
|
||||
<div class="poupContent">
|
||||
<van-radio-group v-model="radio" class="radioWrap">
|
||||
<van-radio name="1">已售出</van-radio>
|
||||
<van-radio name="2">不卖了</van-radio>
|
||||
</van-radio-group>
|
||||
<div class="btnWrap">
|
||||
<div class="btn" @click="submitHandle">确认</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
import { minePublishPageList,auditFailCount,usedCarPolish,usedCarReShelf,usedCarRemove} from "@/api/secondHandCar"
|
||||
export default {
|
||||
name: "mineRelease",
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
activeTab:1,
|
||||
tabList:[{value:1,name:'审核中'},{value:2,name:'发布中'},{value:3,name:'已下架'},],
|
||||
noClick:true,
|
||||
poupShow:false,
|
||||
radio:'',
|
||||
pageList:[],
|
||||
noPassNum:'',
|
||||
showEmpty:false,
|
||||
isLoading:false,
|
||||
xiajiaInfo:'',
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.getCount()
|
||||
await this.getList()
|
||||
},
|
||||
methods:{
|
||||
onRefresh() {
|
||||
this.getList()
|
||||
setTimeout(() => {
|
||||
this.$toast('刷新成功');
|
||||
this.isLoading = false;
|
||||
}, 1000);
|
||||
},
|
||||
itemHandle(item){//审核
|
||||
this.$router.push({
|
||||
name: item.type==1 ? "carSource" : 'wantBuy',
|
||||
query: { type:2 ,id:item.id,queryType:3},
|
||||
})
|
||||
},
|
||||
async getList(){
|
||||
let res= await minePublishPageList({
|
||||
queryType:this.activeTab
|
||||
})
|
||||
this.pageList=res?.data;
|
||||
if(this.pageList?.length === 0){
|
||||
this.showEmpty = true
|
||||
}else {
|
||||
this.showEmpty = false
|
||||
}
|
||||
},
|
||||
async getCount(){//获取审核不通数量
|
||||
let res= await auditFailCount()
|
||||
this.noPassNum=res.data
|
||||
},
|
||||
async submitHandle(){//提交下架原因
|
||||
if(!this.radio){
|
||||
this.$toast('下架原因不能为空')
|
||||
return
|
||||
}
|
||||
await usedCarRemove({
|
||||
id:this.xiajiaInfo.id,
|
||||
downReason:this.radio==1 ? '已售出' : '不卖了'
|
||||
})
|
||||
this.poupShow=false
|
||||
await this.getList()
|
||||
},
|
||||
priceHandle(item){
|
||||
return item/10000
|
||||
},
|
||||
reviseHandle(item){//修改
|
||||
this.$router.push({
|
||||
name: item.type==1 ? "carSource" : 'wantBuy',
|
||||
query: { type:1 ,id:item.id,queryType:3},
|
||||
})
|
||||
},
|
||||
async polishHandle(item){//檫亮
|
||||
await usedCarPolish(item.id)
|
||||
this.$toast('你的曝光度已提升')
|
||||
await this.getList()
|
||||
},
|
||||
async reShangJiaHandle(item){//重新上架
|
||||
await usedCarReShelf(item.id)
|
||||
await this.getList()
|
||||
},
|
||||
xiajiaHandle(item){//下架
|
||||
this.poupShow=true
|
||||
this.xiajiaInfo=item
|
||||
},
|
||||
tabClickHandle(i) {
|
||||
this.activeTab = i.value
|
||||
this.getList()
|
||||
},
|
||||
getStatus(i){
|
||||
switch (i){
|
||||
case 5://发布中
|
||||
return require('@/assets/secondHandCar/fabuing.png')
|
||||
case 6://已下架
|
||||
return require('@/assets/secondHandCar/alreayXiajia.png')
|
||||
case 7://信息过期
|
||||
return require('@/assets/secondHandCar/expire.png')
|
||||
case 1://待审核
|
||||
return require('@/assets/secondHandCar/wait_verify.png')
|
||||
default://未通过
|
||||
return require('@/assets/secondHandCar/nopass.png')
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</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 0;
|
||||
position: relative;
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
span{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #203152;
|
||||
}
|
||||
.tabBar{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: 13px;
|
||||
color: #6A727C;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
span{
|
||||
background-color: #4C81F5;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.active{
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #06336D;
|
||||
position: relative;
|
||||
}
|
||||
.active:after {
|
||||
content: '';
|
||||
display: block;
|
||||
background: linear-gradient( 270deg, #33A3FF 0%, #176AFE 100%);
|
||||
border-radius: 2px;
|
||||
@include wh(26px,2px);
|
||||
position: absolute;
|
||||
border-radius: 2px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.contentWrap{
|
||||
height: calc(100% - 100px);
|
||||
overflow-y: auto;
|
||||
background-color: #F2F2F2;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 6px 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.contentItem{
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 8px;
|
||||
padding-top: 18px;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.left{
|
||||
position: relative;
|
||||
.bigImg{
|
||||
width: 115px;
|
||||
height: 77px;
|
||||
background: linear-gradient( 90deg, rgba(5,32,54,0.88) 0%, rgba(69,87,103,0.19) 64%, rgba(133,141,152,0) 100%);
|
||||
border-radius: 7px;
|
||||
}
|
||||
.smallImg{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 36px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
|
||||
.title{
|
||||
box-sizing: border-box;
|
||||
padding-right: 18px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #212020;
|
||||
line-height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.titleImg{
|
||||
width: 43px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
.type{
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #282828;
|
||||
line-height: 23px;
|
||||
width: 200px;
|
||||
white-space: nowrap; /* 强制文本在一行显示 */
|
||||
overflow: hidden; /* 隐藏超出部分 */
|
||||
text-overflow: ellipsis; /* 超出部分显示省略号 */
|
||||
}
|
||||
.date{
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #999999;
|
||||
line-height: 20px;
|
||||
}
|
||||
.price{
|
||||
color: #FF5533;
|
||||
span:first-child{
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
span:last-child{
|
||||
font-weight: 600;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
.line{
|
||||
width: 224px;
|
||||
border-bottom: 2px solid #F5F5F5;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.btnWrap{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 18px;
|
||||
text-align: right;
|
||||
img{
|
||||
margin-left: 10px;
|
||||
}
|
||||
img:first-child{
|
||||
margin-left: 0;
|
||||
}
|
||||
.revise,.xiajia{
|
||||
@include wh(56px,25px)
|
||||
}
|
||||
.polish{
|
||||
@include wh(69px,25px)
|
||||
}
|
||||
.reshangjia{
|
||||
@include wh(78px,25px)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.poupWrap{
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
.title{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #c8c9cc;
|
||||
}
|
||||
.radioWrap{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.poupContent{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px 4px 10px;
|
||||
.btnWrap{
|
||||
width: 100%;
|
||||
text-align: -webkit-right;
|
||||
//margin-top: 20px;
|
||||
.btn{
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: #4C81F5;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.empty{
|
||||
@include flexTwoCenter;
|
||||
height:calc(100% - 86px);
|
||||
background-color: #FAFAFA;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
467
src/views/secondHandCar/wantBuy.vue
Normal file
467
src/views/secondHandCar/wantBuy.vue
Normal 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>
|
||||
226
src/views/secondHandCar/wantBuySale.vue
Normal file
226
src/views/secondHandCar/wantBuySale.vue
Normal file
@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="wrap" >
|
||||
<div class="headerWrap">
|
||||
<img class="back" @click="h5GoBack" src="@/assets/secondHandCar/back.png" />
|
||||
<span>在售</span>
|
||||
<div style="opacity: 0;" class="back"></div>
|
||||
</div>
|
||||
<div class="contentWrap">
|
||||
<div class="titleWrap wrapCommon">
|
||||
<div class="info">
|
||||
<span>牵引车</span>
|
||||
<span>全落地</span>
|
||||
<span>黄牌</span>
|
||||
<span>帕菲特</span>
|
||||
<span>八万公里</span>
|
||||
<span>国5</span>
|
||||
</div>
|
||||
<div class="time">
|
||||
<span>2025-03-05</span><span>江苏苏州</span><span>发布</span>
|
||||
</div>
|
||||
<div class="price">
|
||||
<span>20.5</span>
|
||||
<span>万</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detailInfoWrap wrapCommon">
|
||||
<div>
|
||||
<img class="descImg firstDescImg" src="@/assets/secondHandCar/details.png" />
|
||||
</div>
|
||||
<div class="descItem descCommon">
|
||||
<div class="itemInfo">
|
||||
<span>拖车</span>
|
||||
<span>拖车类型</span>
|
||||
</div>
|
||||
<div class="suGang"></div>
|
||||
<div class="itemInfo">
|
||||
<span>全落地 </span>
|
||||
<span>拖车落板</span>
|
||||
</div>
|
||||
<div class="suGang"></div>
|
||||
<div class="itemInfo">
|
||||
<span>国五</span>
|
||||
<span>排放标准</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img class="descImg" src="@/assets/secondHandCar/description.png" />
|
||||
</div>
|
||||
<div class="descCommon desc">
|
||||
事故事故手动阀时空裂缝就能看拉萨你发凯撒老大飞机考拉说法你时空裂缝距离考试纽福克斯就发了斯
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn" @click="noMultipleClicks(handle)">我有车源</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
export default {
|
||||
name: "wantBuySale",
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
current: 0,
|
||||
noClick:true
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
},
|
||||
methods:{
|
||||
onChange(index) {
|
||||
this.current = index;
|
||||
},
|
||||
handle(){
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/mixin.scss';
|
||||
.wrap {
|
||||
@include wh(100%, 100%);
|
||||
position: relative;
|
||||
background-color: #F6F6F6;
|
||||
}
|
||||
.headerWrap{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 16px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
.back{
|
||||
@include wh(15px,15px);
|
||||
}
|
||||
span{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #203152;
|
||||
}
|
||||
}
|
||||
.contentWrap{
|
||||
height: calc(100% - 42px);
|
||||
overflow-y: auto;
|
||||
.wrapCommon{
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(5.602678571428572px);
|
||||
box-sizing: border-box;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.titleWrap{
|
||||
margin-top: 10px;
|
||||
height: 108px;
|
||||
padding: 18px 0 15px 21px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.info{
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #212020;
|
||||
line-height: 21px;
|
||||
span{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
line-height: 17px;
|
||||
span:first-child{
|
||||
margin-right: 20px;
|
||||
}
|
||||
span:last-child{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.price{
|
||||
color: #FF5533;
|
||||
line-height: 28px;
|
||||
font-weight: 600;
|
||||
span:first-child{
|
||||
font-size: 20px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
span:last-child{
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detailInfoWrap{
|
||||
box-sizing: border-box;
|
||||
padding: 18px 28px 15px 22px;
|
||||
.descImg{
|
||||
@include wh(72px, 19px);
|
||||
}
|
||||
.firstDescImg{
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.descCommon{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.descItem{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.itemInfo{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span:first-child{
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #282828;
|
||||
line-height: 20px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
span:last-child{
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
color: #999999;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
.suGang{
|
||||
width: 1px;
|
||||
height: 8px;
|
||||
border-right: 1px solid #999999;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.desc{
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #282828;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.btn{
|
||||
width: 296px;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
color: #FFFFFF;
|
||||
background: #4A7FEB;
|
||||
margin: 0 auto;
|
||||
font-size: 15px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user