<template>
|
<div class="loan-info-box">
|
<x-header slot="header"
|
style="width:100%;height:46px;background-color: #ec6758"
|
title="照片上传"
|
:left-options="{backText: '', preventGoBack:true}"
|
@on-click-back="goBackPage"
|
></x-header>
|
<flow class="progressState">
|
<flow-state state="1" title="填写资料" class="currentStep porcolor"></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="2" title="绑定银行卡" class="currentStep porcolor"></flow-state>
|
<flow-line is-done></flow-line>
|
<flow-state state="3" title="照片上传" class="currentStep porcolor"></flow-state>
|
<flow-line></flow-line>
|
<flow-state state="4" title="三方授权"></flow-state>
|
<flow-line></flow-line>
|
<flow-state state="5" title="提交申请"></flow-state>
|
</flow>
|
<div class="picture_li">
|
<ul>
|
<li>
|
<!--<i class="iconfont icon-tianjia idPicture"></i>-->
|
<img :src="picture.idFrontImage" alt="">
|
<UploadIMG butName=" " defaultImg=""
|
:currentImg="picture.idFrontImage"
|
v-on:select-complete="secelted('01', $event)"></UploadIMG>
|
</li>
|
<li>
|
<img :src="picture.idBackImage" alt="">
|
<UploadIMG butName=" " defaultImg=""
|
:currentImg="picture.idFrontImage"
|
v-on:select-complete="secelted('02', $event)"></UploadIMG>
|
</li>
|
<li>
|
<img :src="picture.handIdImage" alt="">
|
<UploadIMG butName=" " defaultImg=""
|
:currentImg="picture.idFrontImage"
|
v-on:select-complete="secelted('03', $event)"></UploadIMG>
|
</li>
|
<li>
|
<img :src="picture.faceImage" alt="">
|
<UploadIMG butName=" " defaultImg=""
|
:currentImg="picture.idFrontImage"
|
v-on:select-complete="secelted('17', $event)"></UploadIMG>
|
</li>
|
</ul>
|
</div>
|
<div style="height: 20px"></div>
|
<box gap="0 15px">
|
<x-button type="primary" @click.native="handleNextStep">提交</x-button>
|
</box>
|
<div style="height: 20px"></div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
Flow,
|
FlowState,
|
FlowLine,
|
XHeader,
|
Group,
|
GroupTitle,
|
Cell,
|
XInput,
|
Selector,
|
XButton,
|
Box,
|
Actionsheet
|
} from 'vux';
|
|
import FSpace from '../../../components/common/FSpace.vue';
|
import validate from '../../../tool/validator';
|
import SysApi from '../../../api/api';
|
import statusCodeManage from '../../../api/statusCodeManage';
|
import UploadIMG from '../../../components/upload/uploadImg';
|
|
export default {
|
name: 'idPicture',
|
data() {
|
return {
|
isLastStep: false, // 是否是最后一步
|
activePageItem: 0, // 激活当前页
|
pageList: [], // 一共有几页
|
|
picture: {
|
idFrontImage: '',
|
idBackImage: '',
|
handIdImage: '',
|
faceImage: ''
|
},
|
|
};
|
},
|
components: {
|
Group,
|
GroupTitle,
|
Cell,
|
XInput,
|
Selector,
|
XHeader,
|
XButton,
|
Box,
|
Flow,
|
FlowState,
|
FlowLine,
|
Actionsheet,
|
FSpace,
|
UploadIMG
|
},
|
methods: {
|
//初始化证件照
|
initPhoto() {
|
let _this = this;
|
let prodId = {
|
prodId: this.$route.query.prodId,
|
};
|
SysApi.initPhoto(prodId).then(
|
res => {
|
console.log(res)
|
_this.picture.idFrontImage = res.body.idFrontImage;
|
_this.picture.idBackImage = res.body.idBackImage;
|
_this.picture.handIdImage = res.body.handIdImage;
|
_this.picture.faceImage = res.body.faceImage;
|
|
}, error => {
|
statusCodeManage.showTipOfStatusCode(error)
|
}
|
)
|
},
|
// 图片上传
|
secelted: function (index, event) {
|
let _this = this;
|
console.log(event);
|
let _par = {
|
prodId: this.$route.query.prodId,
|
file: event.file.split(',')[1],
|
extName: event.extName,
|
fileType: index,
|
oldFileUrl: ''
|
};
|
if (index == '01') {
|
_par.oldFileUrl = _this.picture.idFrontImage;
|
} else if (index == '02') {
|
_par.oldFileUrl = _this.picture.idBackImage;
|
} else if (index == '03') {
|
_par.oldFileUrl = _this.picture.handIdImage;
|
} else if (index == '17') {
|
_par.oldFileUrl = _this.picture.faceImage;
|
}
|
|
//TODO 发送请求
|
SysApi.savePhoto(_par).then(
|
res => {
|
if (index == '01') {
|
_this.picture.idFrontImage = res.body.fileUrl;
|
} else if (index == '02') {
|
_this.picture.idBackImage = res.body.fileUrl;
|
} else if (index == '03') {
|
_this.picture.handIdImage = res.body.fileUrl;
|
} else if (index == '17') {
|
_this.picture.faceImage = res.body.fileUrl;
|
}
|
|
}
|
), error => {
|
statusCodeManage.showTipOfStatusCode(error)
|
}
|
|
},
|
|
//下一步跳转路由
|
handleNextStep() {
|
let _this = this;
|
let prodId = {
|
prodId: this.$route.query.prodId,
|
};
|
SysApi.submitPhoto(prodId).then(
|
res => {
|
_this.$router.push({
|
path: '/bnd/credit/pictureUp', query: {prodId: this.$route.query.prodId,}
|
});
|
}, error => {
|
statusCodeManage.showTipOfStatusCode(error)
|
}
|
)
|
|
},
|
// 得到选项列表统一的方法
|
getOptionsList(optionList) {
|
let tmpList = [];
|
if (optionList instanceof Array) {
|
optionList.forEach(function (item) {
|
tmpList.push({
|
key: item.code,
|
value: item.name
|
});
|
});
|
}
|
return tmpList;
|
},
|
//返回
|
goBackPage() {
|
// 如果是第一步的话，那么返回到上一个页面
|
if (this.activePageItem <= 1) {
|
this.$router.back();
|
// 不是的话，那么显示上一步
|
} else {
|
this.activePageItem--;
|
this.isLastStep = this.pageList.length === this.activePageItem;
|
}
|
},
|
},
|
activated: function () {
|
this.initPhoto()
|
}
|
};
|
</script>
|
<style lang="less">
|
@import "../../../style/mixin.less";
|
|
|
.loan-info-box {
|
background-color: @color-background-default;
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
|
}
|
}
|
}
|
.progressState div p {
|
font-size: @font-size-tiny;
|
}
|
.weui-wepay-flow__state {
|
width: 16px;
|
height: 16px;
|
top: -1px;
|
padding-top: 1px;
|
}
|
.currentStep .weui-wepay-flow__state {
|
width: 16px;
|
height: 16px;
|
padding-top: 1px;
|
border: 1px solid @color-primary;
|
color: @color-primary;
|
border-radius: 50%;
|
background-color: @color-white;
|
}
|
.weui-input {
|
height: 28px;
|
line-height: 28px;
|
}
|
.weui-wepay-flow, .weui-wepay-flow-auto {
|
padding: 10px 40px 30px;
|
background: @color-white;
|
}
|
.weui-wepay-flow__li_done .weui-wepay-flow__state,
|
.weui-wepay-flow__process {
|
background-color: @color-primary;
|
}
|
}
|
|
.weui-wepay-flow {
|
background-color: @color-white;
|
}
|
|
.left-arrow:before {
|
border-color: @color-white;
|
}
|
|
.weui-cells__title {
|
margin: 0 !important;
|
font-size: 16PX !important;
|
}
|
|
.weui-input, .weui-cell__bd {
|
font-size: @font-size-base;
|
}
|
|
.weui-label {
|
font-size: @font-size-base;
|
}
|
|
.personInfo ::-webkit-input-placeholder { /* WebKit browsers */
|
color: #bfbfbf;
|
}
|
|
.personInfo :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
color: #bfbfbf;
|
}
|
|
.personInfo ::-moz-placeholder { /* Mozilla Firefox 19+ */
|
color: #bfbfbf;
|
}
|
|
.personInfo :-ms-input-placeholder { /* Internet Explorer 10+ */
|
color: #bfbfbf;
|
}
|
|
.header-space {
|
height: 46px;
|
}
|
|
.loan-info-box .weui-cell_select .weui-select {
|
padding-right: 2.5rem;
|
direction: rtl;
|
}
|
|
.loan-info-box .weui-input {
|
text-align: right;
|
}
|
|
.loan-info-box .weui-btn_primary {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
}
|
|
.loan-info-box .weui-btn_primary:not(.weui-btn_disabled):active {
|
color: rgba(255, 255, 255, 0.6);
|
background-color: rgb(241, 95, 79);;
|
}
|
|
/*------------------------------*/
|
.vux-no-group-title {
|
margin-top: 0.77rem !important;
|
}
|
|
.loan-info-box .currentStep .weui-wepay-flow__state {
|
background-color: @color-primary;
|
color: @color-white !important;
|
line-height: 1rem;
|
}
|
|
.weui-wepay-flow__li.weui-wepay-flow__li .weui-wepay-flow__state {
|
width: 1.33333rem;
|
height: 1.33333rem;
|
border-radius: 1.58333rem;
|
color: @color-text-third;
|
line-height: 1.33333rem;
|
}
|
|
.porcolor p {
|
color: @color-primary;
|
}
|
|
.picture_li {
|
li {
|
list-style: none;
|
text-align: center;
|
width: 77%;
|
margin: 0 auto;
|
height: 14rem;
|
/*border: 1px dashed #999999;*/
|
margin-top: 1rem;
|
border-radius: 5px;
|
position: relative;
|
}
|
li:nth-child(1) {
|
background: url("../../../assets/imgs/shenfenzheng01.jpg") no-repeat;
|
background-size: 100% 100%;
|
}
|
li:nth-child(2) {
|
background: url("../../../assets/imgs/shenfenzheng02.jpg") no-repeat;
|
background-size: 100% 100%;
|
}
|
li:nth-child(3) {
|
background: url("../../../assets/imgs/shenfenzheng03.jpg") no-repeat;
|
background-size: 100% 100%;
|
}
|
li:nth-child(4) {
|
background: url("../../../assets/imgs/shenfenzheng04.jpg") no-repeat;
|
background-size: 100% 100%;
|
}
|
.upload {
|
height: 100%;
|
> div {
|
display: none;
|
}
|
.IDCardUpLoadBut {
|
display: none;
|
}
|
.fileUploadInput {
|
height: 100%;
|
}
|
}
|
img {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
.idPicture {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
font-size: 45Px;
|
color: @color-gradient-darkBlue-right;
|
opacity: 0.9;
|
}
|
}
|
|
.loan-info-box .weui-wepay-flow, .loan-info-box .weui-wepay-flow-auto {
|
padding: 0.83333rem 2.33333rem 2.5rem;
|
}
|
|
.weui-btn:after {
|
border: none !important;
|
}
|
|
.weui-btn {
|
font-size: @font-size-primary !important;
|
}
|
</style>
|
