源文件
This commit is contained in:
213
jeepay-ui-uapp-agent/pageApply/channel/fuiou/fuiouEvent.vue
Normal file
213
jeepay-ui-uapp-agent/pageApply/channel/fuiou/fuiouEvent.vue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<!-- 富有待签约
|
||||
富有签约分为两部分
|
||||
1. 如果状态为5 ，则展示签约地址 二维码 与失效时间等信息，签约后，在调用进件详细信息接口更新状态
|
||||
2. 若状态为6 ，则展示图片上传列表。
|
||||
-->
|
||||
<view class="box wx-open" v-if="(channelInfo.state == 5 || channelInfo.state == 6) && channelInfo.code == 'fuioupay'">
|
||||
|
||||
<template v-if="(channelInfo.state == 5) && (vdata.fuiouState != 6)">
|
||||
<view class="flex" style="margin-bottom: 20rpx">
|
||||
<view>协议编号</view>
|
||||
<view>{{ vdata.storeSuccResParameter.contractNo }}</view>
|
||||
</view>
|
||||
|
||||
<view class="flex" style="margin-bottom: 20rpx">
|
||||
<view>过期时间</view>
|
||||
<view>{{ vdata.storeSuccResParameter.expireTs }}</view>
|
||||
</view>
|
||||
|
||||
<view class="down-img">
|
||||
<image :src="vdata.contractImg" mode="aspectFit"></image>
|
||||
<view style="margin-top: 30rpx">请用微信扫描二维码，根据页面指引完成签约</view>
|
||||
<view class="down" @click="down(vdata.contractImg)">保存至相册</view>
|
||||
</view>
|
||||
|
||||
<view class="second-title">电子合同签约地址和二维码：</view>
|
||||
<view style="margin-top: 20rpx;white-space: pre-wrap; word-wrap: break-word; color: #3981ff" @click="toContract('fuioupay')">
|
||||
{{ vdata.storeSuccResParameter.signUrl }}
|
||||
</view>
|
||||
|
||||
<view class="down-img">
|
||||
<view class="down" @click="fuiouhandle()">确认签署</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 当点击上面的确认签署后，则展示图片上传列表 -->
|
||||
<template v-if="(channelInfo.state == 6) || (vdata.fuiouState == 6)">
|
||||
<JeePayForm text="营业执照照片" :start="false" v-if="vdata.applyDetailInfo.licenseImg">
|
||||
<image :src="vdata.applyDetailInfo.licenseImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.licenseImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证人像面照片" :start="false" v-if="vdata.applyDetailInfo.idcard1Img">
|
||||
<image :src="vdata.applyDetailInfo.idcard1Img" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.idcard1Img)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="法人身份证国徽面照片" :start="false" v-if="vdata.applyDetailInfo.idcard2Img">
|
||||
<image :src="vdata.applyDetailInfo.idcard2Img" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.idcard2Img)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="门头照" :start="false" v-if="vdata.applyDetailInfo.storeOuterImg">
|
||||
<image :src="vdata.applyDetailInfo.storeOuterImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.storeOuterImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="店内环境照" :start="false" v-if="vdata.applyDetailInfo.storeInnerImg">
|
||||
<image :src="vdata.applyDetailInfo.storeInnerImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.storeInnerImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="结算银行卡照片" :start="false" v-if="vdata.applyDetailInfo.settAccountLicenseImg">
|
||||
<image :src="vdata.applyDetailInfo.settAccountLicenseImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.settAccountLicenseImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="开户许可证照片" :start="false" v-if="vdata.applyDetailInfo.companyAccountLicenseImg">
|
||||
<image :src="vdata.applyDetailInfo.companyAccountLicenseImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.companyAccountLicenseImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="入账账户身份证人像照" :start="false" v-if="vdata.applyDetailInfo.settAccountIdcard1Img">
|
||||
<image :src="vdata.applyDetailInfo.settAccountIdcard1Img" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.settAccountIdcard1Img)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="入账账户身份证国徽面照片" :start="false" v-if="vdata.applyDetailInfo.settAccountIdcard2Img">
|
||||
<image :src="vdata.applyDetailInfo.settAccountIdcard2Img" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.settAccountIdcard2Img)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="入账非法人证明照片" :start="false" v-if="vdata.applyDetailInfo.acntArtifImg">
|
||||
<image :src="vdata.applyDetailInfo.acntArtifImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.acntArtifImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="组织机构代码证照片" :start="false" v-if="vdata.applyDetailInfo.organizationImg">
|
||||
<image :src="vdata.applyDetailInfo.organizationImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.organizationImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="税务登记证照片" :start="false" v-if="vdata.applyDetailInfo.taxRegistrationImg">
|
||||
<image :src="vdata.applyDetailInfo.taxRegistrationImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.taxRegistrationImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="手持证件照片" :start="false" v-if="vdata.applyDetailInfo.handCertificateImg">
|
||||
<image :src="vdata.applyDetailInfo.handCertificateImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.handCertificateImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<JeePayForm text="补充资料照片" :start="false" v-if="vdata.applyDetailInfo.additionImg">
|
||||
<image :src="vdata.applyDetailInfo.additionImg" mode="aspectFit" @click="openBackImg(vdata.applyDetailInfo.additionImg)" class="fuiou-img" />
|
||||
</JeePayForm>
|
||||
|
||||
<view class="down-img">
|
||||
<view class="down" @click="fuiouUpload()">提交审核</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, inject } from 'vue'
|
||||
import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局
|
||||
import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.vue' // 图片上传
|
||||
import { $elecContractGenerate, $elecContractSign, $fuiouUpload } from '@/http/apiManager.js'
|
||||
import qrcode from '@/util/qrcode.js'
|
||||
|
||||
const channelInfo = inject('channelInfo')
|
||||
|
||||
const vdata = reactive({
|
||||
storeSuccResParameter: {}, // 富友协议信息
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 调用富友签约接口，生成图片的操作，在接口返回的信息中进行
|
||||
if (channelInfo.state == 5) getFuiouInfo()
|
||||
})
|
||||
|
||||
// 富有进件专用， 用于获取签约信息
|
||||
const getFuiouInfo = () => {
|
||||
$elecContractGenerate(channelInfo.applyId).then(({bizData}) => {
|
||||
vdata.storeSuccResParameter = JSON.parse(bizData.storeSuccResParameter)
|
||||
vdata.contractImg = drawQRcode(vdata.storeSuccResParameter.signUrl) // 生成富友签约图片
|
||||
})
|
||||
}
|
||||
|
||||
// 富友确认签署
|
||||
const fuiouhandle = () => {
|
||||
$elecContractSign(channelInfo.applyId).then(res => {
|
||||
uni.showToast({ title: '签署成功', icon: 'none'})
|
||||
vdata.fuiouState = 6 // 切换富友的状态
|
||||
})
|
||||
}
|
||||
|
||||
// 富友提交审核
|
||||
const fuiouUpload = () => {
|
||||
$fuiouUpload(channelInfo.applyId).then(res => {
|
||||
uni.showToast({ title: '审核成功', icon: 'none'})
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转至电子合同页 盛付通 富友 会用到
|
||||
const toContract = () => {
|
||||
let uri = vdata.storeSuccResParameter.signUrl
|
||||
uni.navigateTo({ url: './contract?url=' + uri })
|
||||
}
|
||||
|
||||
// 制作图片
|
||||
const drawQRcode = url => {
|
||||
return qrcode.drawImg(url, {
|
||||
typeNumber: 4, // 密度
|
||||
errorCorrectLevel: 'Q', // 纠错等级
|
||||
size: 175, // 白色边框
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.box {
|
||||
height: auto;
|
||||
transition: .3s;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
background: #f5f6fc;
|
||||
padding: 10rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fuiou-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// 微信签约
|
||||
.wx-open {
|
||||
margin-top: 30rpx;
|
||||
padding: 40rpx;
|
||||
.first-title {
|
||||
font-size: 28rpx;
|
||||
color: #18191d;
|
||||
font-weight: bold;
|
||||
}
|
||||
.tips {
|
||||
font-size: 25rpx;
|
||||
color: #7e7e80;
|
||||
margin: 20rpx 0 40rpx;
|
||||
}
|
||||
.state {
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.second-title {
|
||||
font-size: 27rpx;
|
||||
color: #000;
|
||||
}
|
||||
.wx-img {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
margin: 30rpx 0 20rpx ;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user