486 lines
14 KiB
Vue
486 lines
14 KiB
Vue
<template>
|
||
<div class="wrap" >
|
||
<div class="headerWrap">
|
||
<img class="bg" src="@/assets/secondHandCar/bg.png" />
|
||
<div class="navWrap">
|
||
<div v-if="isWebFunc()" style="opacity: 0;" class="back"></div>
|
||
<img v-else class="back" @click="h5GoBack" src="@/assets/secondHandCar/back.png" />
|
||
<span class="title">售出信息</span>
|
||
<div style="opacity: 0;" class="back"></div>
|
||
</div>
|
||
<div class="audit" v-if="type=='revise' && status==9 && auditRemark">
|
||
<span><img class="noAudit" src="@/assets/secondHandCar/noAudit.png" />审核不通过：</span>
|
||
<span>{{auditRemark }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="contentWrap" :class="[!(status==9 && auditRemark) ? 'noReasonWrap': 'hasReasonWrap']">
|
||
<div class="content">
|
||
<div class="item" style="align-items: center">
|
||
<span> <span class="star">*</span>售出渠道 </span>
|
||
<van-radio-group v-model="form.salesChannel" direction="horizontal" class="radioWrap" :disabled="type !== 'revise'">
|
||
<van-radio name="1" :class="{'checked':form.salesChannel==1,'salesChannelRadio':true,'radio':true}">中道二手拖车</van-radio>
|
||
<van-radio name="2" :class="{'checked':form.salesChannel==2,'salesChannelRadio':true}">本地线下</van-radio>
|
||
<van-radio name="3" :class="{'checked':form.salesChannel==3,'salesChannelRadio':true}">报废</van-radio>
|
||
</van-radio-group>
|
||
</div>
|
||
<template v-if="form.salesChannel==3">
|
||
<div class="item" style="margin-top: 8px">
|
||
<span style="line-height: 0.5rem"> <span class="star">*</span>报废机动车回收证明 </span>
|
||
<upload-common @success3="getRecyclePhoto" @delete3="deleteImgRecycle" :show-del="type == 'revise'"
|
||
:text="'回收证明'" :multiple="false" :files.sync="recyclePathList"/>
|
||
</div>
|
||
<div class="item">
|
||
<span> <span class="star">*</span>报废年月</span>
|
||
<van-field
|
||
:disabled="type !== 'revise'"
|
||
@focus="showDatetime = true"
|
||
class="radioWrap"
|
||
readonly
|
||
v-model="scrapTimeFormatShow"
|
||
input-align="right"
|
||
>
|
||
</van-field>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="item">
|
||
<span> <span class="star">*</span>购买方 </span>
|
||
<van-field
|
||
:disabled="type !== 'revise'"
|
||
class="radioWrap"
|
||
v-model="form.purchaser"
|
||
input-align="right"
|
||
> </van-field>
|
||
</div>
|
||
<div class="item">
|
||
<span> <span class="star">*</span>售出价格 </span>
|
||
<van-field
|
||
:disabled="type !== 'revise'"
|
||
type="number"
|
||
class="radioWrap"
|
||
v-model="form.sellPrice"
|
||
input-align="right"
|
||
>
|
||
<template slot="right-icon" >
|
||
<span style="white-space: nowrap; margin-left: 8px;"> 元 </span>
|
||
</template>
|
||
</van-field>
|
||
</div>
|
||
<div class="item" style="margin-top: 8px">
|
||
<span> <span class="star">*</span>交易合同 </span>
|
||
<upload-common @success3="getTradePhoto" @delete3="deleteImgTrade" :show-del="type == 'revise'"
|
||
:text="'交易合同'" :multiple="false" :files.sync="tradeContractPathList"/>
|
||
</div>
|
||
<div class="item">
|
||
<span> <span class="star">*</span>交易年月</span>
|
||
<van-field
|
||
:disabled="type !== 'revise'"
|
||
@focus="showDatetime = true"
|
||
class="radioWrap"
|
||
readonly
|
||
v-model="tradeTimeFormatShow"
|
||
input-align="right"
|
||
> </van-field>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="btnWrap" v-if="type !== 'view'">
|
||
<div v-if="type == 'revise'" class="btn commonBtn" @click="noMultipleClicks(submitHandle)">确认售出</div>
|
||
<template v-else-if="type=='audit'">
|
||
<div style="margin: 10px">不通过原因</div>
|
||
<el-input style="margin-bottom: 10px;margin-left: 10px" class="ipt" v-model.trim="auditReason" type="textarea" :autosize="{ minRows: 2, maxRows: 6 }"
|
||
maxlength="200" show-word-limit placeholder="请填写不通过原因"></el-input>
|
||
<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>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<van-popup v-model="showDatetime" round position="bottom">
|
||
<van-datetime-picker
|
||
class="dataTime"
|
||
v-if="showDatetime"
|
||
v-model="time"
|
||
type="date"
|
||
:min-date="minDate"
|
||
@confirm="onConfirm"
|
||
@cancel="showDatetime = false"
|
||
/>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {myMixins} from "@/utils/myMixins"
|
||
import {auditCarInfo, usedCarRemove,carInfoDetail,auditCarInfoAgain} from "@/api/secondHandCar"
|
||
import uploadCommon from "@/views/secondHandCar/components/upload-common.vue";
|
||
import {timeFormat} from "@/utils/common";
|
||
export default {
|
||
name: "sellingInfo",
|
||
mixins:[myMixins],
|
||
data(){
|
||
return{
|
||
noClick:true,
|
||
form:{
|
||
id:'',
|
||
downReason: '已售出',
|
||
salesChannel:'',
|
||
purchaser:'',
|
||
sellPrice:'',
|
||
tradeContractPath:'',
|
||
tradeTime:'',
|
||
recyclePath:'',
|
||
scrapTime:'',
|
||
},
|
||
tradeContractPathList:[],
|
||
recyclePathList:[],
|
||
otherImgSrc:[],
|
||
otherImgSrcList:[],
|
||
type:'',
|
||
auditRemark:'',
|
||
auditReason:'',
|
||
status:'' ,
|
||
time:'',
|
||
showDatetime:false,
|
||
minDate: new Date(),
|
||
}
|
||
},
|
||
async mounted() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
this.form.id=this.$route.query.id || urlParams.get('id');
|
||
this.type=this.$route.query.type || urlParams.get('type');
|
||
if( this.form.id){
|
||
let res = await carInfoDetail({
|
||
id:this.form.id,
|
||
queryType:4,
|
||
})
|
||
this.form={...res.data}
|
||
this.form.downReason='已售出'
|
||
this.auditRemark=res.data?.auditRemark
|
||
this.status=res.data?.status?.code
|
||
if(res.data?.tradeContractPath){
|
||
this.tradeContractPathList=[{url:res.data?.tradeContractPath}]
|
||
}
|
||
if(res.data?.recyclePath){
|
||
this.recyclePathList=[{url:res.data?.recyclePath}]
|
||
}
|
||
}
|
||
},
|
||
methods:{
|
||
onConfirm(data) {
|
||
this.time = timeFormat(new Date(data))
|
||
if(this.form.salesChannel==3){
|
||
this.form.scrapTime = timeFormat(new Date(data))
|
||
}else {
|
||
this.form.tradeTime = timeFormat(new Date(data))
|
||
}
|
||
this.showDatetime = false;
|
||
},
|
||
// 审核操作
|
||
async auditHandle(type){
|
||
if (!type && !this.auditReason){
|
||
this.$toast('请填写不通过原因')
|
||
return
|
||
}
|
||
try {
|
||
await auditCarInfo({
|
||
id: this.form.id,
|
||
auditResult: type ? 1 : 0 ,
|
||
auditReason: this.auditReason,
|
||
...this.form,
|
||
licenseType:this.form?.licenseType?.code,
|
||
boardType:this.form?.boardType?.code,
|
||
emissionStandard:this.form?.emissionStandard?.code,
|
||
})
|
||
setTimeout(()=>{
|
||
this.closeParentDialog()
|
||
},1000)
|
||
} finally {
|
||
console.log(type)
|
||
}
|
||
},
|
||
async submitHandle(){
|
||
let rule = this.validationRules.find(item =>
|
||
item.required && (item.value === null || item.value === undefined || item.value === ''))
|
||
if(rule){
|
||
this.$toast(rule.name)
|
||
return
|
||
}
|
||
try {
|
||
// 清除原本选择的信息
|
||
if(this.form.salesChannel==3){
|
||
this.form.purchaser=''
|
||
this.form.sellPrice=''
|
||
this.form.tradeContractPath=''
|
||
this.form.tradeTime=''
|
||
}else{
|
||
this.form.recyclePath=''
|
||
this.form.scrapTime=''
|
||
}
|
||
let res=''
|
||
if(this.status == 9){
|
||
res=await auditCarInfoAgain({// 审核不通过再次提交
|
||
...this.form,
|
||
salesChannel:Number(this.form.salesChannel)
|
||
})
|
||
}else {
|
||
res=await usedCarRemove({
|
||
...this.form,
|
||
salesChannel:Number(this.form.salesChannel)
|
||
})
|
||
}
|
||
if(res.code == 200 && !res.msg){
|
||
this.$toast('操作成功')
|
||
if(this.isWebFunc()){
|
||
setTimeout(()=>{
|
||
this.closeParentDialog()
|
||
},1000)
|
||
}else{
|
||
setTimeout(()=>{
|
||
this.h5GoBack()
|
||
},1000)
|
||
}
|
||
}else{
|
||
this.$toast(res.msg)
|
||
}
|
||
} catch (e) {
|
||
console.log(e)
|
||
}
|
||
},
|
||
getTradePhoto(data) {
|
||
this.form.tradeContractPath = data.url
|
||
},
|
||
deleteImgTrade() {
|
||
this.form.tradeContractPath = '';
|
||
},
|
||
getRecyclePhoto(data) {
|
||
this.form.recyclePath = data.url
|
||
},
|
||
deleteImgRecycle() {
|
||
this.form.recyclePath = '';
|
||
},
|
||
},
|
||
computed: {
|
||
tradeTimeFormatShow(){
|
||
return this.form.tradeTime ? this.form.tradeTime?.substring(0,10) : '';
|
||
},
|
||
scrapTimeFormatShow(){
|
||
return this.form.scrapTime ? this.form.scrapTime?.substring(0,10) : '';
|
||
},
|
||
validationRules() {
|
||
return [
|
||
{required:true, value: this.form.salesChannel, name: '售出渠道不能为空' },
|
||
{required:this.form.salesChannel==3 ? false : true, value: this.form.purchaser, name: '购买方不能为空' },
|
||
{required:this.form.salesChannel==3 ? false : true, value: this.form.sellPrice, name: '售出价格不能为空' },
|
||
{required:this.form.salesChannel==3 ? false : true, value: this.form.tradeContractPath, name: '交易合同文件不能为空' },
|
||
{required:this.form.salesChannel==3 ? false : true, value: this.form.tradeTime, name: '交易年月不能为空' },
|
||
{required:this.form.salesChannel==3 ? true : false, value: this.form.recyclePath, name: '报废机动车回收证明不能为空' },
|
||
{required:this.form.salesChannel==3 ? true : false, value: this.form.scrapTime, name: '报废年月不能为空' },
|
||
];
|
||
},
|
||
},
|
||
components:{uploadCommon}
|
||
}
|
||
</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);
|
||
}
|
||
.title{
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
color: #203152;
|
||
}
|
||
.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;
|
||
}
|
||
.noReasonWrap{
|
||
height: calc(100% - 42px);
|
||
}
|
||
.hasReasonWrap{
|
||
height: calc(100% - 85px);
|
||
}
|
||
.contentWrap{
|
||
width: 100%;
|
||
overflow-y: auto;
|
||
@include sizingPadding(15px,15px);
|
||
@include flexBetween;
|
||
.btnWrap{
|
||
padding-bottom: 20px;
|
||
padding-top: 15px;
|
||
}
|
||
.commonBtn{
|
||
height: 46px;
|
||
line-height: 46px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
border-radius: 5px;
|
||
color: #FFFFFF;
|
||
cursor: pointer;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content{
|
||
width: 100%;
|
||
.item{
|
||
display: flex;
|
||
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;
|
||
}
|
||
}
|
||
.lastLine{
|
||
margin-top: 3px !important;
|
||
}
|
||
::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;
|
||
font-size: 12px;
|
||
border: none;
|
||
}
|
||
::v-deep .van-popup__close-icon--top-right{
|
||
display: none;
|
||
}
|
||
::v-deep .salesChannelRadio .van-radio__label{
|
||
margin-bottom: 8px !important;
|
||
}
|
||
::v-deep .radio .van-radio__label{
|
||
width: 80px !important;
|
||
}
|
||
</style>
|