278 lines
9.4 KiB
Vue
278 lines
9.4 KiB
Vue
<template>
|
||
|
||
<!-- 开通业务 -->
|
||
<view class="title-center"> 开通业务 </view>
|
||
|
||
<view style="margin-bottom: 20px">
|
||
|
||
<JeePayForm text="商户类型">
|
||
{{ openService.merchantType == '1' ? '个人' : '企业' }}
|
||
</JeePayForm>
|
||
|
||
<template v-if="openService.merchantType != '1'">
|
||
|
||
<JeePayForm text="法人身份证人像面照片">
|
||
<JeepayUpLoad :imgUrl="openService.idcard1Img" @uploadSuccess="uploadSuccess($event, 'idcard1Img')" @clear="clear('idcard1Img')" />
|
||
</JeePayForm>
|
||
<JeePayForm text="法人身份证国徽面照片">
|
||
<JeepayUpLoad :imgUrl="openService.idcard2Img" @uploadSuccess="uploadSuccess($event, 'idcard2Img')" @clear="clear('idcard2Img')" />
|
||
</JeePayForm>
|
||
<JeePayForm text="营业执照照片">
|
||
<JeepayUpLoad :imgUrl="openService.licenseImg" @uploadSuccess="uploadSuccess($event, 'licenseImg')" @clear="clear('licenseImg')" />
|
||
</JeePayForm>
|
||
<JeePayForm text="门头照">
|
||
<JeepayUpLoad :imgUrl="openService.storeOuterImg" @uploadSuccess="uploadSuccess($event, 'storeOuterImg')" @clear="clear('storeOuterImg')" />
|
||
</JeePayForm>
|
||
<JeePayForm text="店内环境照">
|
||
<JeepayUpLoad :imgUrl="openService.storeInnerImg" @uploadSuccess="uploadSuccess($event, 'storeInnerImg')" @clear="clear('storeInnerImg')" />
|
||
</JeePayForm>
|
||
<JeePayForm text="收银台照">
|
||
<JeepayUpLoad :imgUrl="openService.storeCashierImg" @uploadSuccess="uploadSuccess($event, 'storeCashierImg')" @clear="clear('storeCashierImg')" />
|
||
</JeePayForm>
|
||
<JeePayForm text="开户许可证照片">
|
||
<JeepayUpLoad :imgUrl="openService.companyAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'companyAccountLicenseImg')" @clear="clear('companyAccountLicenseImg')" />
|
||
</JeePayForm>
|
||
</template>
|
||
|
||
<template v-if="openService.settAccountType == 'C'">
|
||
<JeePayForm text="结算卡正面照片">
|
||
<JeepayUpLoad :imgUrl="openService.settAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')" @clear="clear('settAccountLicenseImg')" />
|
||
</JeePayForm>
|
||
<JeePayForm text="结算卡反面照片">
|
||
<JeepayUpLoad :imgUrl="openService.settBankCardBackImg" @uploadSuccess="uploadSuccess($event, 'settBankCardBackImg')" @clear="clear('settBankCardBackImg')" />
|
||
</JeePayForm>
|
||
<JeePayForm text="结算人身份证人像照片">
|
||
<JeepayUpLoad :imgUrl="openService.settAccountIdcard1Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')" @clear="clear('settAccountIdcard1Img')" />
|
||
</JeePayForm>
|
||
<JeePayForm text="结算人身份证国徽面照片">
|
||
<JeepayUpLoad :imgUrl="openService.settAccountIdcard2Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')" @clear="clear('settAccountIdcard2Img')" />
|
||
</JeePayForm>
|
||
</template>
|
||
|
||
<JeePayForm text="授权委托书" v-if="openService.settAccountType == 'D'">
|
||
<JeepayUpLoad :imgUrl="openService.authEnturstPic" @uploadSuccess="uploadSuccess($event, 'authEnturstPic')" @clear="clear('authEnturstPic')" />
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="商务协议" v-if="openService.settAccountType == '3'" :start="false">
|
||
<JeepayUpLoad :imgUrl="openService.bankPic" @uploadSuccess="uploadSuccess($event, 'bankPic')" @clear="clear('bankPic')" />
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="支付宝商户经营类目">
|
||
<jeeDataPicker :localdata="aliMcc" :code="openService.aliFeeMcc" @change="publicSelect($event, 'aliFeeMcc')" paramType="oneLevel" />
|
||
</JeePayForm>
|
||
|
||
</view>
|
||
|
||
<!-- 费率组件 -->
|
||
<defaultRate ref="defaultRateRef" @autoPos="autoPosHandle" />
|
||
|
||
<view class="authentication-btn" @click="onSubmitWxRealName">发起认证</view>
|
||
|
||
<!-- 商户实名认证 -->
|
||
<view class="authentication">
|
||
<view class="title">
|
||
<text>商户实名认证</text>
|
||
<view v-if="vdata.wxOpenInfo.signUrl" @click="refreshWxOpenInfo" class="btn">刷新</view>
|
||
</view>
|
||
<view>{{vdata.wxOpenInfo.state || "异常[" + vdata.wxOpenInfo.errInfo + "]"}}</view>
|
||
</view>
|
||
|
||
<view class="reject" v-if="vdata.wxOpenInfo.errInfo">
|
||
<text class="title">驳回原因</text>
|
||
<view style="color: #fd2821">{{ vdata.wxOpenInfo.errInfo }}</view>
|
||
</view>
|
||
|
||
<view class="code-box" v-if="vdata.wxOpenInfo.signUrl">
|
||
<view>商户联系人使用已绑定银行卡的微信扫下面的二维码:</view>
|
||
<image :src="tool.drawQRcode(vdata.wxOpenInfo.signUrl)" />
|
||
<view class="jeepay-tip-text">(温馨提示:自助认证不限制谁来操作认证,但建议是商户联系人进行认证,以免后期需要扫码找不到微信认证管理员)</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import JeePayForm from "@/components/applyComponents/JeePayForm.vue"; // 通用左右结构布局
|
||
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
|
||
import { ref, reactive, inject, toRaw } from 'vue'
|
||
import { $mchApplymentsInfo, $getMchApplymentWxOpenInfo, $dgpayWxRealName, } from "@/http/apiManager.js";
|
||
import tool from "@/util/tool.js"; // 工具类函数
|
||
import jeeDataPicker from "@/components/applyComponents/dataPicker.vue"; // 通用级联选择
|
||
import wxMcc from "@/components/applyJson/jeepayMcc.json"; // 微信mcc
|
||
import defaultRate from "../../components/defaultRate.vue"; // 默认费率
|
||
|
||
/*
|
||
开通业务板块 只在进件成功后开启 state:2
|
||
*/
|
||
let vdata = reactive({
|
||
wxOpenInfo: {}, // 微信开户意愿信息
|
||
});
|
||
let openService = reactive({ // 进件信息
|
||
// aliConfList:[], // 支付宝业务
|
||
// wxConfList: [], // 微信业务
|
||
})
|
||
|
||
let defaultRateRef = ref(null); // 费率组件
|
||
|
||
const channelInfo = inject('channelInfo')
|
||
|
||
// 支付宝经营类目
|
||
const aliMcc = reactive([
|
||
{ value: '2015050700000000', text: '美食' },
|
||
{ value: '2015091000052157', text: '超市便利店' },
|
||
{ value: '2015062600004525', text: '休闲娱乐' },
|
||
{ value: '2015062600002758', text: '购物' },
|
||
{ value: '2016062900190124', text: '爱车' },
|
||
{ value: '2015063000020189', text: '生活服务' },
|
||
{ value: '2016042200000148', text: '教育培训' },
|
||
{ value: '2016062900190296', text: '医疗健康' },
|
||
{ value: '2015080600000001', text: '航旅' },
|
||
{ value: '2016062900190337', text: '专业销售/批发' },
|
||
{ value: '2016062900190371', text: '政府/社会组织' },
|
||
])
|
||
|
||
// 通用选择器回调
|
||
const publicSelect = (e, name) => {
|
||
openService[name] = e.detail.value
|
||
}
|
||
|
||
// 请求微信实名认证查询
|
||
const getWxOpenInfo = () => {
|
||
$getMchApplymentWxOpenInfo(channelInfo.applyId)
|
||
.then((res) => {
|
||
if (vdata.isRefresh) {
|
||
uni.showToast({ title: "已刷新", icon: "none" });
|
||
vdata.isRefresh = false;
|
||
}
|
||
vdata.wxOpenInfo = res.bizData;
|
||
})
|
||
};
|
||
|
||
// 刷新微信实名认证
|
||
const refreshWxOpenInfo = () => {
|
||
vdata.isRefresh = true;
|
||
getWxOpenInfo();
|
||
};
|
||
|
||
if (channelInfo.state == 2) {
|
||
// 请求非加密的进件信息
|
||
let originData = 1
|
||
$mchApplymentsInfo(channelInfo.applyId, originData)
|
||
.then(({ bizData }) => {
|
||
Object.assign(openService, JSON.parse(bizData.applyDetailInfo));
|
||
}).catch((err) => console.log(err));
|
||
|
||
// 请求微信实名认证查询
|
||
getWxOpenInfo();
|
||
}
|
||
|
||
// 上传图片成功 及OCR识别回显
|
||
const uploadSuccessOS = (res, name) => {
|
||
openService[name] = res.data;
|
||
if (res.ocrInfo && Object.keys(res.ocrInfo).length < 1) return false;
|
||
// OCR图片识别 idCard-身份证 idcard1Img，idcard2Img license-营业执照 licenseImg
|
||
if (name == "idcard1Img") {
|
||
openService.idcardName = res.ocrInfo.idcardName; // 法人身份证姓名
|
||
openService.idcardNo = res.ocrInfo.idcardNo; // 法人身份证号
|
||
}
|
||
};
|
||
|
||
// 清除图片 仅前端
|
||
const clear = (name, url) => openService[name] = ""
|
||
|
||
// 发起认证
|
||
const onSubmitWxRealName = () => {
|
||
// 有费率的进件渠道，要在发起进件之前，获取所选择的费率信息
|
||
openService.paywayFeeList = defaultRateRef.value.getList(false)
|
||
uni.showLoading({ title: "提交中..." });
|
||
$dgpayWxRealName(channelInfo.applyId, toRaw(openService)).then((res) => {
|
||
uni.hideLoading();
|
||
uni.showToast({ title: "提交成功", icon: "none" })
|
||
uni.navigateBack()
|
||
})
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "../../static/information.scss";
|
||
// 微信实名认证
|
||
.authentication {
|
||
padding: 35rpx 30rpx 35rpx 30rpx;
|
||
box-sizing: border-box;
|
||
border-bottom: 1rpx solid #e8e8e8;
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
|
||
// 驳回原因
|
||
.reject {
|
||
padding: 35rpx 30rpx 35rpx 30rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
border-bottom: 1rpx solid #e8e8e8;
|
||
.title {
|
||
margin-right: 30rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
|
||
// 发起认证
|
||
.authentication-btn {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 30rpx auto;
|
||
width: 380rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
border-radius: 10rpx;
|
||
background: #0041c4;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
// 图片
|
||
.code-box {
|
||
box-sizing: border-box;
|
||
padding: 35rpx 30rpx 35rpx 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
image {
|
||
margin: 40rpx auto;
|
||
width: 200px;
|
||
height: 200px;
|
||
}
|
||
}
|
||
.btn {
|
||
border-radius: 10rpx;
|
||
background: #3981FF;
|
||
color: #fff;
|
||
padding: 5rpx 15rpx;
|
||
}
|
||
.title-center {
|
||
padding: 30rpx;
|
||
text-align: center;
|
||
background-color: #fafbfc;
|
||
border-top: 1rpx solid #e8e8e8;
|
||
}
|
||
.business-title {
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.business-content {
|
||
margin: 0 30rpx 30rpx ;
|
||
border: 1rpx solid #e8e8e8;
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx;
|
||
}
|
||
</style> |