story#6932,增加售出信息页面及在发布列表添加按钮
This commit is contained in:
355
src/views/secondHandCar/sellingInfo.vue
Normal file
355
src/views/secondHandCar/sellingInfo.vue
Normal file
@ -0,0 +1,355 @@
|
||||
<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>
|
||||
<div class="contentWrap">
|
||||
<div>
|
||||
<div class="twoContent content">
|
||||
<div class="item vehicleTypeItem">
|
||||
<span> <span class="star">*</span>售出渠道 </span>
|
||||
<van-radio-group v-model="form.salesChannel" direction="horizontal" class="radioWrap">
|
||||
<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"
|
||||
:text="'回收证明'" :multiple="false" :files.sync="recyclePathList"/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span> <span class="star">*</span>报废年月</span>
|
||||
<el-date-picker
|
||||
v-model="form.scrapTime"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="item">
|
||||
<span> <span class="star">*</span>购买方 </span>
|
||||
<van-field
|
||||
class="radioWrap"
|
||||
v-model="form.purchaser"
|
||||
input-align="right"
|
||||
> </van-field>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span> <span class="star">*</span>售出价格 </span>
|
||||
<van-field
|
||||
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"
|
||||
:text="'交易合同'" :multiple="false" :files.sync="tradeContractPathList"/>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span> <span class="star">*</span>交易年月</span>
|
||||
<el-date-picker
|
||||
v-model="form.tradeTime"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
format="yyyy-MM-dd">
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnWrap">
|
||||
<div class="btn" @click="noMultipleClicks(submitHandle)">确认售出</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins"
|
||||
// carInfoDetail,
|
||||
import { usedCarRemove} from "@/api/secondHandCar"
|
||||
import uploadCommon from "@/views/secondHandCar/components/upload-common.vue";
|
||||
export default {
|
||||
name: "sellingInfo",
|
||||
mixins:[myMixins],
|
||||
data(){
|
||||
return{
|
||||
noClick:true,
|
||||
form:{
|
||||
id:'',
|
||||
downReason: '已售出',
|
||||
salesChannel:'',
|
||||
purchaser:'',
|
||||
sellPrice:'',
|
||||
tradeContractPath:'',
|
||||
tradeTime:'',
|
||||
recyclePath:'',
|
||||
scrapTime:'',
|
||||
},
|
||||
tradeContractPathList:[],
|
||||
recyclePathList:[],
|
||||
otherImgSrc:[],
|
||||
otherImgSrcList:[],
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
this.form.id=this.$route.query.id || urlParams.get('id');
|
||||
/*
|
||||
if( this.form.id){
|
||||
let res = await carInfoDetail({
|
||||
id:this.form.id,
|
||||
queryType:this.queryType ,
|
||||
})
|
||||
this.form={...res.data}
|
||||
this.tradeContractPathList=[{url:res.data?.vehicleLicensePhoto}]
|
||||
this.recyclePathList=[{url:res.data?.vehicleAnglePhoto}]
|
||||
}*/
|
||||
},
|
||||
methods:{
|
||||
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=''
|
||||
}
|
||||
await usedCarRemove({
|
||||
...this.form,
|
||||
salesChannel:Number(this.form.salesChannel)
|
||||
})
|
||||
this.$toast('操作成功')
|
||||
this.h5GoBack()
|
||||
} 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: {
|
||||
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: 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;
|
||||
}
|
||||
}
|
||||
.contentWrap{
|
||||
width: 100%;
|
||||
height: calc(100% - 42px);
|
||||
overflow-y: auto;
|
||||
@include sizingPadding(10px,15px);
|
||||
@include flexBetween;
|
||||
/* .radioWrap{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 15px;
|
||||
}*/
|
||||
.btnWrap{
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
@include flexBetCen;
|
||||
.btn{
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
width: 296px;
|
||||
background: #4A7FEB;
|
||||
margin: 0 auto;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 14px 0 20px;
|
||||
//padding:0 20px;
|
||||
}
|
||||
.twoContent{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
Reference in New Issue
Block a user