<template>
<view class="page1_content">
<TopBar title="金融分期"/>
<view class="page1_top">
<view>
<view class="apply_title">企业信息</view>
<view class="apply_desc">请填写企业的详细信息</view>
</view>
<!-- <text class="unline_btn">申请线下审核</text> -->
</view>
<view class="apply_data_content">
<view :style="{'margin-top':'40rpx'}">
<view class="apply_title">街道/门头照片</view>
<view class="apply_desc">请上传所在街道与企业门头清晰照片，以便顺利帮您认证</view>
</view>
<view class="apply_data_item">
<view v-if="!params.business_street" class="apply_upload" @click="uploadImage('business_street')">
<text class="eosfont icons"></text>
<text class="upload_font">所在街道照片</text>
</view>
<view v-if="params.business_street" class="apply_upload">
<text class="close_icon" @click="clearParams('business_street')"></text>
<image class="preview_img" :src="params.business_street"></image>
</view>
<view v-if="!params.business_premises" class="apply_upload" @click="uploadImage('business_premises')">
<text class="eosfont icons"></text>
<text class="upload_font">企业门头照片</text>
</view>
<view v-if="params.business_premises" class="apply_upload">
<text class="close_icon" @click="clearParams('business_premises')"></text>
<image class="preview_img" :src="params.business_premises"></image>
</view>
</view>
<view :style="{'margin-top':'60rpx'}">
<view class="apply_title">动物诊疗证/兽医证照片</view>
<view class="apply_desc">请上传动物诊疗证与兽医证照片清晰照片，以便顺利帮您认证</view>
</view>
<view class="apply_data_item">
<view v-if="!params.animal_certificate" class="apply_upload" @click="uploadImage('animal_certificate')">
<text class="eosfont icons"></text>
<text class="upload_font">动物诊疗证(含公章) 照片</text>
</view>
<view v-if="params.animal_certificate" class="apply_upload">
<text class="close_icon" @click="clearParams('animal_certificate')"></text>
<image class="preview_img" :src="params.animal_certificate"></image>
</view>
<view v-if="!params.vet_certificate" class="apply_upload" @click="uploadImage('vet_certificate')">
<text class="eosfont icons"></text>
<text class="upload_font">兽医证(含公章) 照片</text>
</view>
<view v-if="params.vet_certificate" class="apply_upload">
<text class="close_icon" @click="clearParams('vet_certificate')"></text>
<image class="preview_img" :src="params.vet_certificate"></image>
</view>
</view>
<view :style="{'margin-top':'60rpx'}">
<view class="apply_title">营业执照/经营场所证明照片</view>
<view class="apply_desc">请上传营业执照与经营场所清晰照片，以便顺利帮您认证</view>
</view>
<view class="apply_data_item">
<view v-if="!params.business_license" class="apply_upload" @click="uploadImage('business_license')">
<text class="eosfont icons"></text>
<text class="upload_font">营业执照(含公章) 照片</text>
</view>
<view v-if="params.business_license" class="apply_upload">
<text class="close_icon" @click="clearParams('business_license')"></text>
<image class="preview_img" :src="params.business_license"></image>
</view>
<view v-if="!params.certification_materials" class="apply_upload" @click="uploadImage('certification_materials')">
<text class="eosfont icons"></text>
<text class="upload_font">经营场所证明材料照片</text>
</view>
<view v-if="params.certification_materials" class="apply_upload">
<text class="close_icon" @click="clearParams('certification_materials')"></text>
<image class="preview_img" :src="params.certification_materials"></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" @click="uploadZip('bank_card_record')">
<view class="apply_upload" v-if="!params.bank_card_record">
<text class="eosfont icons"></text>
<text class="upload_font">企业半年银行流水</text>
</view>
<view class="apply_upload" style="line-height: 200rpx;" v-if="params.bank_card_record">
<text class="upload_font">{{compressName}}</text>
</view>
</view>
</view>
<text class="next_step_btn">下一步</text>
</view>
</template>
<script>
import TopBar from '@/components/TopBar/TopBar.vue';
export default {
data() {
return {
params: {
business_street: '', //所在街道
business_premises: '', //企业门头
animal_certificate: '' ,//动物诊疗证
vet_certificate: '', //兽医证
business_license: '', //营业执照
certification_materials: '', //经营场所
bank_card_record: '', //企业银行流水
},
compressName: ''
}
},
onLoad() {
uni.request({
url: '/uni/app/userqualification/GetUserQualification',
method: 'GET',
success: (res) => {
console.log(res)
}
})
},
methods: {
uploadImage(key) {
uni.chooseImage({
success: (res) => {
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;
}
});
}
})
},
uploadZip(key) {
// #ifdef H5
const _input = document.createElement('input');
_input.type = 'file';
_input.accept = 'application/x-zip-compressed,application/x-rar-compressed';
_input.click();
_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.uploadFile({
url: '/uni/api/resources',
filePath: url,
name: 'file',
success: (uploadFileRes) => {
const data = JSON.parse(uploadFileRes.data)
this.params[key] = data.data;
this.compressName = fileName;
}
});
}
// #endif
},
clearParams(key) {
this.params[key] = '';
},
submit() {
if(!this.params.business_street) {
uni.showToast({
title: '请上传所在街道照片',
icon: 'none'
});
return
}
if(!this.params.business_premises) {
uni.showToast({
title: '请上传企业门头照片',
icon: 'none'
});
return
}
if(!this.params.animal_certificate) {
uni.showToast({
title: '请上传动物诊疗证照片',
icon: 'none'
});
return
}
if(!this.params.vet_certificate) {
uni.showToast({
title: '请上传兽医证照片',
icon: 'none'
});
return
}
if(!this.params.business_license) {
uni.showToast({
title: '请上传营业执照照片',
icon: 'none'
});
return
}
if(!this.params.business_premises) {
uni.showToast({
title: '请上传经营场所材料照片',
icon: 'none'
});
return
}
if(!this.params.bank_card_record) {
uni.showToast({
title: '请上传企业银行流水',
icon: 'none'
});
return
}
uni.request({
url: ''
})
}
},
components: {
TopBar
}
}
</script>
<style lang="less" scoped>
.page1_content {
padding-top: 80rpx;
.apply_title {
font-size:32rpx;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
line-height: 44rpx;
color: #212121;
}
.apply_desc {
font-size:24rpx;
line-height: 34rpx;
color: #979797;
margin-top: 8rpx;
}
.page1_top {
background-color: #F8F8F8;
height: 150rpx;
padding: 28rpx 36rpx 26rpx 36rpx;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.unline_btn {
width: 200rpx;
height: 64rpx;
line-height: 64rpx;
border: 1px solid #DCDCDC;
background: #fff;
border-radius: 16rpx;
color: #212121;
font-size: 24rpx;
text-align: center;
}
}
.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;
}
}
}
}
.next_step_btn {
width: 678rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #FFCD00;
margin: 63rpx auto 42rpx;
display: block;
border-radius: 16rpx;
font-size: 28rpx;
}
}
</style>