new-cashier/jeepay-ui-uapp-agent/pageApply/channel/yspay/ysEvent.vue

205 lines
8.1 KiB
Vue

<template>
<!-- 上传图片&提交审核 状态4 出现-->
<view v-if="channelInfo.state == 4">
<view class="title">上传图片</view>
<JeePayForm text="营业执照照片" v-if="applyInfo.merchantType != '1'">
<JeepayUpLoad :imgUrl="applyInfo.idcard1Img" @uploadSuccess="uploadSuccess($event, 'idcard1Img')" @clear="clear('idcard1Img')" />
</JeePayForm>
<JeePayForm text="法人身份证国徽面照片" >
<JeepayUpLoad :imgUrl="applyInfo.idcard1Img" @uploadSuccess="uploadSuccess($event, 'idcard1Img')" @clear="clear('idcard1Img')" />
</JeePayForm>
<JeePayForm text="法人身份证人像面照片" >
<JeepayUpLoad :imgUrl="applyInfo.idcard2Img" @uploadSuccess="uploadSuccess($event, 'idcard2Img')" @clear="clear('idcard2Img')" />
</JeePayForm>
<JeePayForm text="手持证件照片" >
<JeepayUpLoad :imgUrl="applyInfo.idcardInHandImg" @uploadSuccess="uploadSuccess($event, 'idcardInHandImg')" @clear="clear('idcardInHandImg')" />
</JeePayForm>
<JeePayForm text="门头照" >
<JeepayUpLoad :imgUrl="applyInfo.storeOuterImg" @uploadSuccess="uploadSuccess($event, 'storeOuterImg')" @clear="clear('storeOuterImg')" />
</JeePayForm>
<JeePayForm text="店内环境照" >
<JeepayUpLoad :imgUrl="applyInfo.storeInnerImg" @uploadSuccess="uploadSuccess($event, 'storeInnerImg')" @clear="clear('storeInnerImg')" />
</JeePayForm>
<JeePayForm text="收银台照" >
<JeepayUpLoad :imgUrl="applyInfo.storeCashierImg" @uploadSuccess="uploadSuccess($event, 'storeCashierImg')" @clear="clear('storeCashierImg')" />
</JeePayForm>
<JeePayForm text="结算银行卡正面照片" >
<JeepayUpLoad :imgUrl="applyInfo.settAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')" @clear="clear('settAccountLicenseImg')" />
</JeePayForm>
<JeePayForm text="结算银行卡反面照片" >
<JeepayUpLoad :imgUrl="applyInfo.settAccountBankImg2" @uploadSuccess="uploadSuccess($event, 'settAccountBankImg2')" @clear="clear('settAccountBankImg2')" />
</JeePayForm>
<JeePayForm text="开户许可证照片" v-if="applyInfo.merchantType == '3'">
<JeepayUpLoad :imgUrl="applyInfo.companyAccountLicenseImg" @uploadSuccess="uploadSuccess($event, 'companyAccountLicenseImg')" @clear="clear('companyAccountLicenseImg')" />
</JeePayForm>
<JeePayForm text="入账账户身份证人像面照片" v-if="applyInfo.codeLegalPersonAcc == 0">
<JeepayUpLoad :imgUrl="applyInfo.settAccountIdcard1Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')" @clear="clear('settAccountIdcard1Img')" />
</JeePayForm>
<JeePayForm text="入账账户身份证国徽面照片" v-if="applyInfo.codeLegalPersonAcc == 0">
<JeepayUpLoad :imgUrl="applyInfo.settAccountIdcard2Img" @uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')" @clear="clear('settAccountIdcard2Img')" />
</JeePayForm>
<JeePayForm text="结算授权证书照片" v-if="applyInfo.codeLegalPersonAcc == 0">
<JeepayUpLoad :imgUrl="applyInfo.settleAuthLetterPhoto" @uploadSuccess="uploadSuccess($event, 'settleAuthLetterPhoto')" @clear="clear('settleAuthLetterPhoto')" />
</JeePayForm>
<JeePayForm text="收单协议盖章页照片" :start="false">
<JeepayUpLoad :imgUrl="applyInfo.acquiringAgreementPhoto" @uploadSuccess="uploadSuccess($event, 'acquiringAgreementPhoto')" @clear="clear('acquiringAgreementPhoto')" />
</JeePayForm>
<JeePayForm text="其他材料照片" :start="false">
<JeepayUpLoad :imgUrl="applyInfo.other1" @uploadSuccess="uploadSuccess($event, 'other1')" @clear="clear('other1')" />
</JeePayForm>
<view class="submit" @tap="onSubmit">提交审核</view>
</view>
<!-- 自主签约 -->
<signing v-if="['2','5'].includes(channelInfo.state)" />
<!-- 费率组件 与按钮 -->
<template v-if="(channelInfo.state == 2)&&(vdata.paywayFeeList.length>0)" >
<defaultRate ref="defaultRateRef" />
<view class="exhibition">请展开费率列表进行配置,已经配置过费率商户的不需重复配置</view>
<view v-if="channelInfo.channelVar1" class="exhibition">
<view>错误信息:</view>
{{ channelInfo.channelVar1 }}
</view>
<view class="submit" @tap="rateSubmit">费率配置</view>
</template>
</template>
<script setup>
import {ref ,reactive, toRaw, inject, onMounted } from 'vue';
import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.vue' // 图片上传
import { $yspayUpload ,$ysPayRateConfig, $mchApplymentsInfo } from '@/http/apiManager.js'
import graceChecker from '@/util/graceChecker.js'//引入表单校验工具函数
import signing from '../../components/signing.vue' // 自主签约组件
import defaultRate from '../../components/defaultRate.vue' // 费率
import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局
const channelInfo = inject('channelInfo')
const applyInfo = ref({}) // 本页面的进件信息
const vdata = reactive({
paywayFeeList: [] // 费率
})
const defaultRateRef = ref(null) // 费率组件
// 提交审核
const onSubmit = () => {
let check = JSON.parse(JSON.stringify(rules)) // 深拷贝一份
if (applyInfo.value.merchantType != 1) {
check.push(
{name: "licenseImg",checkType: "notnull",errorMsg: "请上传营业执照照片"}
)
}
if (applyInfo.value.merchantType == 3) {
check.push(
{name: "companyAccountLicenseImg",checkType: "notnull",errorMsg: "请上传开户许可证照片"}
)
}
if (applyInfo.value.codeLegalPersonAcc == 0) {
check.push(
{name: "settAccountIdcard1Img",checkType: "notnull",errorMsg: "请上传入账账户身份证人像面照片"},
{name: "settAccountIdcard2Img",checkType: "notnull",errorMsg: "请上传入账账户身份证国徽面照片"},
{name: "settleAuthLetterPhoto",checkType: "notnull",errorMsg: "请上传结算授权证书照片"},
)
}
let checkRes = graceChecker.check(applyInfo.value, check);
if (!checkRes) return uni.showToast({ title: graceChecker.error, icon: "none"})
uni.showLoading({ title: '提交中' })
$yspayUpload(channelInfo.applyId, toRaw(applyInfo.value)).then(res => {
uni.hideLoading()
uni.showToast({ title: '操作成功', icon: 'none' })
uni.navigateBack({})
})
}
const rules = [
{name: "idcard1Img",checkType: "notnull",errorMsg: "请上传法人身份证人像面照片"},
{name: "idcard2Img",checkType: "notnull",errorMsg: "请上传法人身份证国徽面照片"},
{name: "idcardInHandImg",checkType: "notnull",errorMsg: "请上传手持证件照片"},
{name: "storeOuterImg",checkType: "notnull",errorMsg: "请上传门头照"},
{name: "storeInnerImg",checkType: "notnull",errorMsg: "请上传店内环境照"},
{name: "storeCashierImg",checkType: "notnull",errorMsg: "请上传收银台照"},
{name: "settAccountLicenseImg",checkType: "notnull",errorMsg: "请上传结算银行卡正面照片"},
{name: "settAccountBankImg2",checkType: "notnull",errorMsg: "请上传结算银行卡反面照片"},
{name: "settAccountBankImg2",checkType: "notnull",errorMsg: "请上传结算银行卡反面照片"},
]
// 调用进件查询接口
const mchApplyInfoHandle = () => {
let originData = 1
$mchApplymentsInfo(channelInfo.applyId, originData).then( ({bizData}) => {
applyInfo.value = JSON.parse(bizData.applyDetailInfo)
})
}
const setApplyInfo = () => mchApplyInfoHandle()
// 上传图片成功
const uploadSuccess = (res, name) => applyInfo.value[name] = res.data
// 清除图片 仅前端
const clear = (name, url) => applyInfo.value[name] = ''
// 配置费率
const rateSubmit = () => {
uni.showLoading({title: '提交中'})
vdata.paywayFeeList = defaultRateRef.value.getList(false)
$ysPayRateConfig(channelInfo.applyId, { paywayFeeList: vdata.paywayFeeList }).then((res) => {
uni.hideLoading()
uni.navigateBack({})
uni.showToast({title: '提交成功', icon: 'none'})
})
}
defineExpose({ setApplyInfo })
</script>
<style scoped lang="scss">
.title {
text-align: center;
margin: 30rpx;
}
.submit{
display: flex;
justify-content: center;
margin: 30rpx auto;
width: 380rpx;
height: 90rpx;
line-height: 90rpx;
border-radius: 10rpx;
background: #3981FF;
font-weight: 500;
font-size: 30rpx;
color: #fff;
}
.exhibition {
margin: 30rpx;
}
</style>