227 lines
6.9 KiB
Vue
227 lines
6.9 KiB
Vue
<template>
|
||
<!-- 折叠面版存在BUG，所以收益人卡片也采取了 手写的折叠面板 所用样式和 费率板块一致 -->
|
||
<view class="rate-title" @click="rateHeightHandle">
|
||
<view style="font-size: 28rpx; font-weight: 700;">受益人卡片</view>
|
||
<text class="svg" :class="{trans:(rateheight != '0px')}"></text>
|
||
</view>
|
||
|
||
<view class="rate-list" ref="rateListRef" :style="{height: rateheight}">
|
||
|
||
<view @click="addOwner" class="add-owner">新增企业受益人</view>
|
||
|
||
<view class="owner-box" v-for="(item, index) in vdata.companyBeneficiaryList" :key="index">
|
||
<view class="owner-title">
|
||
<view>企业受益人信息{{ index + 1 }}</view>
|
||
<view>
|
||
<view v-if="props.legalBtn" @click="emits('setLegalInfo', index)" class="owner-del" style="margin-bottom: 20rpx;">将法人设置为受益人</view>
|
||
<view @click="delOwnerCard(index)" class="owner-del">删除该受益人</view>
|
||
</view>
|
||
</view>
|
||
|
||
<JeePayForm text="受益人身份证人像面照" backColor="#fff" :start="!props.isOwner">
|
||
<JeepayUpLoad ocrFlag="idCard" :imgUrl="vdata.companyBeneficiaryList[index].idcard1Img" @uploadSuccess="uploadSucOwner($event, index, 'idcard1Img')" @clear="clearOwner('idcard1Img', index)" />
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="受益人身份证国徽面照" backColor="#fff" :start="!props.isOwner">
|
||
<JeepayUpLoad ocrFlag="idCard" :imgUrl="vdata.companyBeneficiaryList[index].idcard2Img" @uploadSuccess="uploadSucOwner($event, index, 'idcard2Img')" @clear="clearOwner('idcard2Img', index)" />
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="受益人身份证姓名" v-model:value="vdata.companyBeneficiaryList[index].idcardName" backColor="#fff" :start="!props.isOwner" />
|
||
<JeePayForm text="受益人身份证号" v-model:value="vdata.companyBeneficiaryList[index].idcardNo" backColor="#fff" :start="!props.isOwner" />
|
||
|
||
<JeePayForm text="受益人身份证起始有效期" backColor="#fff" :start="!props.isOwner">
|
||
<termOfValidity :defaultDate="vdata.companyBeneficiaryList[index].idcardEffectBegin" @publicSelect="publicSelect($event, 'idcardEffectBegin')" :isEnd="false" />
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="受益人身份证结束有效期" backColor="#fff" :start="!props.isOwner">
|
||
<termOfValidity :defaultDate="vdata.companyBeneficiaryList[index].idcardEffectEnd" @publicSelect="publicSelect($event, 'idcardEffectEnd')" />
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="受益人身份证居住地址" backColor="#fff" v-model:value="vdata.companyBeneficiaryList[index].idcardAddress" :start="!props.isOwner" />
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
import { ref, reactive, watch, onMounted, toRaw, nextTick } from 'vue'
|
||
import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.vue' // 图片上传
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局
|
||
import termOfValidity from '@/components/applyComponents/termOfValidity.vue' // 选择证件有效期
|
||
|
||
const props = defineProps({
|
||
isOwner: { type: Boolean, default: false }, // 法人是否为收益人，是收益人可以删除最后一个卡片，不是则不能删除最后一个
|
||
legalBtn: { type: Boolean, default: false }, // 法人设置为收益人按钮
|
||
isShengft: { type: Boolean, default: false }, // 盛付通页面 会自动生成一个卡片
|
||
})
|
||
|
||
const emits = defineEmits(['setLegalInfo'])
|
||
|
||
let rateheight = ref('0px') // 费率板块的高度
|
||
function rateHeightHandle () {
|
||
rateheight.value == '0px' ? rateheight.value = 'auto' : rateheight.value = '0px'
|
||
}
|
||
|
||
const vdata = reactive({
|
||
companyBeneficiaryList: []
|
||
})
|
||
|
||
// 盛付通进件 受益人信息必填一项
|
||
onMounted(() => {
|
||
if (props.isShengft && vdata.companyBeneficiaryList.length == 0) {
|
||
addOwner()
|
||
}
|
||
})
|
||
|
||
// 信息回显
|
||
const ownerInfoBack = info => Object.assign(vdata.companyBeneficiaryList, info)
|
||
|
||
// 新增受益人卡片
|
||
const addOwner = () => {
|
||
nextTick(() => {
|
||
// 法人是受益人，最多数组最多3项， 不是，数组最多4项
|
||
let len = vdata.companyBeneficiaryList.length
|
||
if (props.owner && len >= 3) {
|
||
return uni.showToast({ title: '最多新增三个企业受益人', icon: 'none' })
|
||
}
|
||
if (!props.owner && len >= 4) {
|
||
return uni.showToast({ title: '最多新增四个企业受益人', icon: 'none' })
|
||
}
|
||
vdata.companyBeneficiaryList.push({
|
||
idcard1Img: '',
|
||
idcardNo: '',
|
||
idcardName: '',
|
||
idcardAddress: '',
|
||
idcard2Img: '',
|
||
idcardEffectEnd: '',
|
||
idcardEffectBegin: '',
|
||
})
|
||
})
|
||
}
|
||
|
||
// 删除卡片
|
||
const delOwnerCard = i => {
|
||
if (vdata.companyBeneficiaryList.length == 1 && !props.isOwner) {
|
||
return uni.showToast({ title: '最后一项不可删除', icon: 'none' })
|
||
}
|
||
vdata.companyBeneficiaryList.splice(i, 1)
|
||
}
|
||
|
||
// 受益人身份证图片上传成功
|
||
const uploadSucOwner = (res, index, name) => {
|
||
vdata.companyBeneficiaryList[index][name] = res.data // 图片回显
|
||
// ocr信息回显
|
||
Object.assign(vdata.companyBeneficiaryList[index], res.ocrInfo)
|
||
}
|
||
|
||
// 删除收益人图片
|
||
const clearOwner = (name, index) => vdata.companyBeneficiaryList[index][name] = ''
|
||
|
||
// 父组件进件时，会调用该方法获取参数
|
||
const ownerInfo = () => toRaw(vdata.companyBeneficiaryList)
|
||
|
||
defineExpose({ ownerInfo, ownerInfoBack })
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
// 新建受益人卡片
|
||
.add-owner {
|
||
width: 320rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
border-radius: 0.3125rem;
|
||
text-align: center;
|
||
background: #0041c4;
|
||
font-weight: 500;
|
||
font-size: 0.9375rem;
|
||
color: #fff;
|
||
margin: 20rpx auto;
|
||
}
|
||
.owner-box {
|
||
border: 1rpx solid #e8e8e8;
|
||
margin: 20rpx;
|
||
padding: 30rpx 30rpx 3rpx 30rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx;
|
||
.item {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
.owner-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.owner-del {
|
||
border-radius: 0.3125rem;
|
||
background: #0041c4;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
text-align: center;
|
||
padding: 8rpx 20rpx;
|
||
}
|
||
}
|
||
|
||
.rate-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
color:#000;
|
||
font-weight: 550;
|
||
border-bottom: 1px solid #ebeef5;
|
||
image {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
.svg {
|
||
font-family: uniicons;
|
||
text-decoration: none;
|
||
text-align: center;
|
||
color: rgb(187, 187, 187);
|
||
font-size: 14px;
|
||
&::before {
|
||
content: "\e6b8";
|
||
}
|
||
}
|
||
}
|
||
.trans{
|
||
transform: rotate(180deg);
|
||
}
|
||
.rate-list {
|
||
// height: 600rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.list-item {
|
||
border-bottom: 1px solid #ebeef5;
|
||
padding: 35rpx 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 28rpx;
|
||
|
||
input {
|
||
border: 1px solid #ebeef5;
|
||
display: inline-block;
|
||
width: 180rpx;
|
||
margin: 0 10rpx;
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style> |