源文件
This commit is contained in:
227
jeepay-ui-uapp-agent/pageApply/components/ownerCard.vue
Normal file
227
jeepay-ui-uapp-agent/pageApply/components/ownerCard.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user