<template>
<view class="page2_content">
<TopBar title="采购分期"/>
<view class="apply_data_content">
<view :style="{'margin-top':'40rpx'}">
<view class="apply_title">法人信息<text class="mustbe">(<text class="mustbe_star">*</text>为必填项)</text></view>
<view class="apply_desc">请填写企业法人的详细信息</view>
</view>
<view :style="{'margin-top':'40rpx'}">
<view class="apply_title"><text class="mustbe_star">*</text>法人身份证照片</view>
<view class="apply_desc">请上传法人手持身份证清晰照片，以便顺利帮您认证</view>
</view>
<view class="apply_data_item">
<view v-if="!params.card_positive" class="apply_upload" @click="uploadImage('card_positive')">
<text class="eosfont icons"></text>
<text class="upload_font">手持身份证 (人像面)</text>
</view>
<view v-if="params.card_positive" class="apply_upload">
<text class="close_icon" @click="clearParams('card_positive')"></text>
<image class="preview_img" :src="params.card_positive"></image>
</view>
<view v-if="!params.card_reverse" class="apply_upload" @click="uploadImage('card_reverse')">
<text class="eosfont icons"></text>
<text class="upload_font">手持身份证 (国徽面)</text>
</view>
<view v-if="params.card_reverse" class="apply_upload">
<text class="close_icon" @click="clearParams('card_reverse')"></text>
<image class="preview_img" :src="params.card_reverse"></image>
</view>
</view>
<view :style="{'margin-top':'60rpx'}">
<view class="apply_title"><text class="mustbe_star">*</text>补充照片</view>
<view class="apply_desc">请上传企业法人相关证明清晰照片，以便顺利帮您认证</view>
</view>
<view class="apply_data_item">
<view v-if="!params.legal_business_img" class="apply_upload" @click="uploadImage('legal_business_img')">
<text class="eosfont icons"></text>
<text class="upload_font">法人在企业内照片</text>
</view>
<view v-if="params.legal_business_img" class="apply_upload">
<text class="close_icon" @click="clearParams('legal_business_img')"></text>
<image class="preview_img" :src="params.legal_business_img"></image>
</view>
<view v-if="!params.bank_credit_report" class="apply_upload" @click="uploadImage('bank_credit_report')">
<text class="eosfont icons"></text>
<text class="upload_font">法人银行征信报告</text>
</view>
<view v-if="params.bank_credit_report" class="apply_upload">
<text class="close_icon" @click="clearParams('bank_credit_report')"></text>
<image class="preview_img" :src="params.bank_credit_report"></image>
</view>
</view>
<view :style="{'margin-top':'60rpx'}">
<view class="apply_title">法人半年银行流水（需含户名）</view>
<view class="apply_desc">支持（zip/rar）格式</view>
</view>
<view class="apply_data_item">
<view class="apply_upload" v-if="!params.legal_card_record" ref="compress">
<text class="eosfont icons"></text>
<text class="upload_font">法人半年银行流水</text>
</view>
<view class="apply_upload" style="line-height: 200rpx;" v-if="params.legal_card_record">
<text class="close_icon" @click="clearParams('legal_card_record')"></text>
<text class="upload_font">{{compressName}}</text>
</view>
</view>
<view class="apply_btn_box">
<view class="apply_btn" @click="backup()">上一步</view>
<view class="apply_btn next_btn" @click="submit()">下一步</view>
</view>
</view>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
export default {
data() {
return {
params: {
card_positive: '', //身份证正面
card_reverse: '', //身份证反面
legal_business_img: '', //在企业内照片
bank_credit_report: '', //征信报告
legal_card_record: '' //个人流水
},
compressName: '',
data: null,
submitFlag: true,
contract_no: '',
qualification_id: ''
}
},
onLoad(option) {
this.contract_no = option.contract_no || '';
const d = uni.getStorageSync('installment');
uni.request({
url: `/uni/api/userqualification/GetUserQualification/${d.property_id}/${d.equipment_id}`,
method: 'GET',
success: (res) => {
const s = res.data.data;
Object.keys(this.params).forEach((item, index) => {
this.params[item] = s[item]
});
this.data = {
equipment_id: s.equipment_id || d.equipment_id,
property_id: s.property_id || d.property_id
}
this.qualification_id = s.qualification_id;
}
});
},
mounted() {
// #ifdef H5
const _input = document.createElement('input');
_input.type = 'file';
_input.accept = 'application/x-zip-compressed,application/x-rar-compressed';
_input.style.position = 'absolute';
_input.style.top = '0';
_input.style.width = '100%';
_input.style.height = '100%';
_input.style.opacity = '0';
this.$refs.compress.$el.append(_input);
_input.onchange = (e) => {
let file = e.target.files[0];
let fileName = file.name;
let pos = fileName.lastIndexOf(".");
let lastName = fileName.substring(pos, fileName.length);
if ((lastName.toLowerCase() != ".zip" ) && (lastName.toLowerCase() != ".rar")) {
uni.showToast({
title: "文件必须为.zip或.rar类型",
icon: 'none',
duration: 2000
})
return;
}
let url = null;
if (window.createObjectURL != undefined) {
// basic
url = window.createObjectURL(file);
} else if (window.webkitURL != undefined) {
// webkit or chrome
url = window.webkitURL.createObjectURL(file);
} else if (window.URL != undefined) {
// mozilla(firefox)
url = window.URL.createObjectURL(file);
}
uni.showLoading({
title: '上传中'
})
uni.uploadFile({
url: '/uni/api/resources',
filePath: url,
name: 'file',
formData: {
name: file.name
},
success: (uploadFileRes) => {
const data = JSON.parse(uploadFileRes.data)
this.params['legal_card_record'] = data.data;
this.compressName = fileName;
uni.hideLoading();
}
});
}
// #endif
},
methods: {
uploadImage(key) {
uni.chooseImage({
sizeType: ['compress'],
count:1,
success: (res) => {
uni.showLoading({
title: '上传中',
duration:90000
})
const tempFilePaths = res.tempFilePaths
uni.uploadFile({
url: '/uni/api/resources',
filePath: tempFilePaths[0],
name: 'file',
success: (uploadFileRes) => {
const data = JSON.parse(uploadFileRes.data)
this.params[key] = data.data;
uni.hideLoading();
}
});
}
})
},
clearParams(key) {
this.params[key] = '';
},
backup() {
this.$backup();
},
submit() {
if(!this.submitFlag) return
if(!this.params.card_positive) {
uni.showToast({
title: '请上传法人手持身份证正面',
icon: 'none'
});
return
}
if(!this.params.card_reverse) {
uni.showToast({
title: '请上传法人手持身份证反面',
icon: 'none'
});
return
}
if(!this.params.legal_business_img) {
uni.showToast({
title: '请上传法人在企业内照片',
icon: 'none'
});
return
}
if(!this.params.bank_credit_report) {
uni.showToast({
title: '请上传法人银行征信报告',
icon: 'none'
});
return
}
this.submitFlag = false;
uni.showToast({
title: '提交中',
icon: 'none',
duration: 90000
})
uni.request({
url: '/uni/api/userqualification/EditUserQualification/second',
method: 'PUT',
data: {
...this.params,
...this.data,
qualification_id: this.qualification_id
},
success: (res) => {
this.submitFlag = true;
if(res.data.code === 0) {
uni.navigateTo({
url: `/pages/apply/applypage3?contract_no=${this.contract_no}`
});
} else {
uni.hideToast();
uni.showToast({
icon: 'none',
title: res.data.message
})
}
}
});
}
},
components: {
TopBar
}
}
</script>
<style lang="less" scoped>
.page2_content {
background: #fff;
padding-top: 80rpx;
.mustbe_star {
color: red;
}
.apply_title {
font-size:32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
line-height: 44rpx;
color: #212121;
.mustbe {
font-size: 28rpx;
line-height: 40rpx;
color: #212121;
margin-left: 10rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
}
.apply_desc {
font-size:24rpx;
line-height: 34rpx;
color: #979797;
margin-top: 8rpx;
}
.apply_data_content {
background: #fff;
padding: 0 36rpx;
box-sizing: border-box;
width: 100%;
.apply_data_item {
display: flex;
justify-content: space-between;
.apply_upload {
margin-top: 40rpx;
width: 328rpx;
height: 200rpx;
background: rgba(248,248,248,1);
border-radius: 16rpx;
position: relative;
.icons {
width: 36rpx;
height: 36rpx;
color: #AEAEAE;
display: block;
margin: 72rpx auto 10rpx;
}
.upload_font {
font-size: 24rpx;
color: #AEAEAE;
display: block;
text-align: center;
}
.preview_img {
width: 100%;
height: 100%;
}
.close_icon {
width: 28rpx;
height: 28rpx;
position: absolute;
top: -14rpx;
right: -14rpx;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAYFBMVEUhISFVSRlWSRlpWBZxXxWfgw6jhg30xAH38Ob38ef38ej49O369vH69vL7+PT8+/n+/v3+/v7/zQD/zQL/1Cb/2T7/4GT/43H/43L/54f/88P/9Mj/+eX//ff//v7///+7HAjXAAAA3ElEQVQoz4XSWRKDIAwAUKFW4tIqQS2uvf8tK4iAojZ/5DFMEhJ9byLyD9M4TufYy1ogilr2AQ4N2miGHc6dQC9ENzucWzxEO1vsMIhuw0GEKAaDupYkZmuaxYmuasVe5+KIaGUkinWi1yjRJJUyai6h1FijU2dYK5y2cpQSayimBUdb4aLOEMc/yP1n6eFZ7hVEGSO7gkrXCmW2I9NKYYdAtyE87BAyHozvaccH75vBQ1pdfxlAzi8/GwBel2sCSvnFgimEvHKr+fFWUyOkb3621GAiK0q+XOA+/gCtlj2I+YoKDQAAAABJRU5ErkJggg==') no-repeat;
background-size: 100% 100%;
z-index: 10;
}
}
}
.apply_btn_box {
display: flex;
justify-content: space-between;
width: 678rpx;
margin: 60rpx 0;
.apply_btn {
width:328rpx;
height:80rpx;
background:rgba(245,245,245,1);
border-radius:16rpx;
background: #f5f5f5;
line-height: 80rpx;
font-size: 28rpx;
text-align: center;
}
.next_btn {
background: #FFCD00;
}
}
}
}
</style>