<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-25 14:42:58
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-07-06 09:30:49
|
* @Description: 图像上传页面
|
-->
|
<template>
|
<div class="image-upload-page">
|
<v-navbar title="订单申请" :back="url"></v-navbar>
|
<div class="steps-box">
|
<div class="steps">
|
<p></p>
|
<div class="step-3">3</div>
|
<div class="step-4">4</div>
|
<div class="step-5">5</div>
|
<div class="step-6">6</div>
|
</div>
|
<div class="zanwei"></div>
|
</div>
|
<div class="mation-box">
|
<p>图片资料上传</p>
|
<p>请确保图片清晰可见，以便顺利申请</p>
|
</div>
|
<div class="upload-box">
|
<UploadFile
|
:fileType="1"
|
title="首付凭证"
|
:hasTips="true"
|
:typeId="this.$route.query.typeId"
|
:sourceType="this.$route.query.zfbVersion"
|
:picList="uploadObj.contImgUrls"
|
></UploadFile>
|
<UploadFile
|
:fileType="2"
|
title="现场合照"
|
:hasTips="true"
|
:typeId="this.$route.query.typeId"
|
:sourceType="this.$route.query.zfbVersion"
|
:picList="uploadObj.localeImgUrls"
|
></UploadFile>
|
<UploadFile
|
:fileType="3"
|
title="资料证明"
|
:hasTips="false"
|
:typeId="this.$route.query.typeId"
|
:sourceType="this.$route.query.zfbVersion"
|
:picList="uploadObj.proofImgUrls"
|
></UploadFile>
|
</div>
|
<div class="btn-box">
|
<button @click="submitApp">提交申请</button>
|
</div>
|
</div>
|
</template>
|
<script>
|
import UploadFile from "../../components/upload/uploadImg";
|
export default {
|
components:{
|
UploadFile
|
},
|
data() {
|
return {
|
url:'',
|
uploadObj: {
|
contImgUrls:[],//首付凭证
|
localeImgUrls:[],//现场合照
|
proofImgUrls:[],//证明资料
|
}
|
};
|
},
|
beforeRouteEnter (to, from, next) {
|
// ...
|
next(vm=>{
|
if(from.path=='/order-handling/contract-signing'){
|
vm.url = '/order-handling/contract-signing'
|
//window.sessionStorage.backUrl = '/order-handling/image-upload'
|
}
|
})
|
},
|
methods:{
|
submitApp(){
|
let v = this.$tool
|
if(this.uploadObj.contImgUrls.length == 0){
|
v.toast('请上传首付凭证')
|
return
|
}
|
if(this.uploadObj.localeImgUrls.length == 0){
|
v.toast('请上现场合照')
|
return
|
}
|
this.$api.saveImgInfo({
|
...this.uploadObj
|
}).then(res=>{
|
this.$router.push('/order-handling/approval-results')
|
})
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.image-upload-page {
|
& {
|
min-height: 100vh;
|
}
|
.steps-box {
|
& {
|
}
|
.steps {
|
width: 70%;
|
height: 65px;
|
position: relative;
|
|
p {
|
border-bottom: 1px dashed #b3b3b3;
|
height: 32px;
|
}
|
.step-3 {
|
text-align: center;
|
line-height: 30px;
|
color: #fff;
|
width: 30px;
|
height: 30px;
|
background: rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
position: absolute;
|
left: 18px;
|
top: 19px;
|
}
|
.step-4 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(113, 123, 133, 1);
|
border: 0;
|
border-radius: 50%;
|
color: #fff;
|
position: absolute;
|
left: 90px;
|
top: 19px;
|
}
|
.step-5 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(81, 148, 254, 1);
|
box-shadow: 0px 0px 8px 0px rgba(81, 148, 254, 0.64);
|
border-radius: 50%;
|
position: absolute;
|
left: 170px;
|
top: 19px;
|
color: #fff;
|
}
|
.step-6 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
position: absolute;
|
left: 240px;
|
top: 19px;
|
}
|
}
|
}
|
.mation-box {
|
padding: 16px 18px;
|
box-sizing: border-box;
|
width: 343px;
|
height: 79px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 0px 10px 0px rgba(47, 103, 192, 0.1);
|
border-radius: 5px;
|
margin: auto;
|
p:nth-of-type(1) {
|
margin-bottom: 10px;
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
}
|
p:nth-of-type(2) {
|
font-size: 13px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
}
|
}
|
.upload-box{
|
padding: 16px;
|
}
|
.btn-box{
|
&{
|
text-align: center;
|
padding-bottom: 32px;
|
}
|
button{
|
width:325px;
|
height:44px;
|
background:rgba(81,148,254,1);
|
border-radius:22px;
|
outline: none;
|
border: 0;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
