546 lines
17 KiB
Vue
546 lines
17 KiB
Vue
<template>
|
||
<!-- 该页码为填写信息的组件 -->
|
||
<!-- 只读文件 -->
|
||
<readOnlyInfo
|
||
v-if="isDisable"
|
||
ref="applyInfoRef"
|
||
applyName="zftpay"
|
||
></readOnlyInfo>
|
||
|
||
<view v-if="!isDisable">
|
||
<uni-collapse ref="collapse">
|
||
<uni-collapse-item title="主体信息" class="coll-title" :open="true">
|
||
<view class="content">
|
||
<JeePayForm text="商户类型">
|
||
<uni-data-checkbox
|
||
v-model="applyDetailInfo.merchantType"
|
||
:localdata="merchantTypeList"
|
||
></uni-data-checkbox>
|
||
</JeePayForm>
|
||
|
||
<!-- 个人不需要营业执照 -->
|
||
<template v-if="applyDetailInfo.merchantType != 1">
|
||
<JeePayForm text="营业执照照片">
|
||
<JeepayUpLoad
|
||
ocrFlag="license"
|
||
:imgUrl="applyDetailInfo.licenseImg"
|
||
@uploadSuccess="uploadSuccess($event, 'licenseImg')"
|
||
@clear="clear('licenseImg')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm
|
||
text="营业执照编号"
|
||
v-model:value="applyDetailInfo.licenseNo"
|
||
/>
|
||
</template>
|
||
|
||
<JeePayForm
|
||
text="用户名称"
|
||
v-model:value="applyDetailInfo.mchFullName"
|
||
tipText="个体工商户请填写法人姓名"
|
||
/>
|
||
|
||
<JeePayForm text="法人身份证人像面照">
|
||
<JeepayUpLoad
|
||
ocrFlag="idCard"
|
||
:imgUrl="applyDetailInfo.idcard1Img"
|
||
@uploadSuccess="uploadSuccess($event, 'idcard1Img')"
|
||
@clear="clear('idcard1Img')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm
|
||
text="法人身份证姓名"
|
||
v-model:value="applyDetailInfo.idcardName"
|
||
/>
|
||
<JeePayForm
|
||
text="法人身份证号"
|
||
v-model:value="applyDetailInfo.idcardNo"
|
||
/>
|
||
|
||
<JeePayForm text="法人身份证国徽面照片">
|
||
<JeepayUpLoad
|
||
ocrFlag="idCard"
|
||
:imgUrl="applyDetailInfo.idcard2Img"
|
||
@uploadSuccess="uploadSuccess($event, 'idcard2Img')"
|
||
@clear="clear('idcard2Img')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="法人身份证起始有效期">
|
||
<termOfValidity
|
||
:defaultDate="applyDetailInfo.idcardEffectBegin"
|
||
@publicSelect="publicSelect($event, 'idcardEffectBegin')"
|
||
:isEnd="false"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="法人身份证结束有效期">
|
||
<termOfValidity
|
||
:defaultDate="applyDetailInfo.idcardEffectEnd"
|
||
@publicSelect="publicSelect($event, 'idcardEffectEnd')"
|
||
/>
|
||
</JeePayForm>
|
||
</view>
|
||
</uni-collapse-item>
|
||
<uni-collapse-item title="经营信息" class="coll-title">
|
||
<view class="content">
|
||
<JeePayForm text="经营类目">
|
||
<jeeDataPicker
|
||
:code="codeBack.mccCode"
|
||
:localdata="mccAli"
|
||
@change="publicSelect($event, 'mccCode')"
|
||
paramType="splicing"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="资质图片">
|
||
<JeepayUpLoad
|
||
:imgUrl="applyDetailInfo.industryQualificationImage"
|
||
@uploadSuccess="
|
||
uploadSuccess($event, 'industryQualificationImage')
|
||
"
|
||
@clear="clear('industryQualificationImage')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm
|
||
text="商户简称"
|
||
v-model:value="applyDetailInfo.mchShortName"
|
||
/>
|
||
<JeePayForm
|
||
text="商户联系人姓名"
|
||
v-model:value="applyDetailInfo.contactName"
|
||
/>
|
||
<JeePayForm
|
||
text="商户联系人手机号"
|
||
v-model:value="applyDetailInfo.contactPhone"
|
||
/>
|
||
|
||
<JeePayForm text="商户经营省市县">
|
||
<jeeDataPicker
|
||
:code="codeBack.areaCode"
|
||
:localdata="address"
|
||
@change="publicSelect($event, 'areaCode')"
|
||
paramType="arr"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="商户详细地址" v-model:value="applyDetailInfo.address" />
|
||
|
||
<JeePayForm text="门头照">
|
||
<JeepayUpLoad
|
||
:imgUrl="applyDetailInfo.storeOuterImg"
|
||
@uploadSuccess="uploadSuccess($event, 'storeOuterImg')"
|
||
@clear="clear('storeOuterImg')"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="店内环境照">
|
||
<JeepayUpLoad
|
||
:imgUrl="applyDetailInfo.storeInnerImg"
|
||
@uploadSuccess="uploadSuccess($event, 'storeInnerImg')"
|
||
@clear="clear('storeInnerImg')"
|
||
/>
|
||
</JeePayForm>
|
||
</view>
|
||
</uni-collapse-item>
|
||
<uni-collapse-item title="结算账户" class="coll-title">
|
||
<view class="content">
|
||
<JeePayForm text="结算类型">
|
||
<uni-data-checkbox
|
||
v-model="applyDetailInfo.defaultSettleType"
|
||
:localdata="defaultSettleTypeList"
|
||
></uni-data-checkbox>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm
|
||
text="结算支付宝账号"
|
||
v-model:value="applyDetailInfo.alipayLogonId"
|
||
v-if="applyDetailInfo.defaultSettleType == 'alipayAccount'"
|
||
/>
|
||
<template v-if="applyDetailInfo.defaultSettleType == 'bankCard'">
|
||
<JeePayForm text="账户类型">
|
||
<uni-data-checkbox
|
||
v-model="applyDetailInfo.settAccountType"
|
||
:localdata="settlementTypeList"
|
||
></uni-data-checkbox>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm
|
||
text="银行开户名"
|
||
v-model:value="applyDetailInfo.settAccountName"
|
||
/>
|
||
<JeePayForm
|
||
text="银行账号"
|
||
v-model:value="applyDetailInfo.settAccountNo"
|
||
/>
|
||
<JeePayForm
|
||
text="银行名称"
|
||
v-model:value="applyDetailInfo.settAccountBankName"
|
||
/>
|
||
<JeePayForm
|
||
text="银行简称"
|
||
v-model:value="applyDetailInfo.accountInstId"
|
||
/>
|
||
|
||
<JeePayForm text="开户行分支行所在地区">
|
||
<jeeDataPicker
|
||
:code="codeBack.bankCode"
|
||
:localdata="address"
|
||
@change="publicSelect($event, 'settAccountBankBranchAreaCode')"
|
||
paramType="arr"
|
||
/>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm
|
||
text="开户支行名称"
|
||
v-model:value="applyDetailInfo.settAccountBankBranchName"
|
||
/>
|
||
|
||
<JeePayForm text="授权函照">
|
||
<JeepayUpLoad
|
||
:imgUrl="applyDetailInfo.licenseAuthLetterImage"
|
||
@uploadSuccess="uploadSuccess($event, 'licenseAuthLetterImage')"
|
||
@clear="clear('licenseAuthLetterImage')"
|
||
/>
|
||
</JeePayForm>
|
||
</template>
|
||
</view>
|
||
</uni-collapse-item>
|
||
|
||
<uni-collapse-item title="签约信息站点资料" class="coll-title">
|
||
<view class="content">
|
||
<view class="item">
|
||
<view class="title"
|
||
><text class="require">*</text><text>签约支付宝账号</text></view
|
||
>
|
||
<input
|
||
type="text"
|
||
v-model="applyDetailInfo.bindingAlipayLogonId"
|
||
placeholder="请输入签约支付宝账号"
|
||
/>
|
||
</view>
|
||
|
||
<view class="check">
|
||
<checkbox-group
|
||
@change="publicSelect($event, 'zftService')"
|
||
class="check-box"
|
||
>
|
||
<label v-for="(item, index) in plainOptions" :key="index">
|
||
<view>
|
||
<checkbox
|
||
:value="item.value"
|
||
:checked="applyDetailInfo.zftService.includes(item.value)"
|
||
/>
|
||
</view>
|
||
<view>{{ item.label }}</view>
|
||
</label>
|
||
</checkbox-group>
|
||
</view>
|
||
|
||
<view class="site">
|
||
<text class="title">站点信息</text>
|
||
<view class="btn" @click="addSite">
|
||
<text>添加站点</text>
|
||
<text class="add">+</text>
|
||
</view>
|
||
</view>
|
||
|
||
<template v-if="applyDetailInfo.siteInfos.length > 0">
|
||
<view
|
||
class="site-list"
|
||
v-for="(item, index) in applyDetailInfo.siteInfos"
|
||
:key="index"
|
||
>
|
||
<view class="site-item" style="padding: 0">
|
||
<view class="title">站点类型</view>
|
||
<radio-group
|
||
class="radio-group"
|
||
@change="siteTypeChange($event, index)"
|
||
>
|
||
<!-- 注意这里也是一个v-for 不能与父元素的冲突 -->
|
||
<label
|
||
class="radio"
|
||
v-for="(siteTtem, siteIndex) in siteInfoList"
|
||
:key="index"
|
||
><radio
|
||
:value="siteTtem.value"
|
||
:checked="
|
||
applyDetailInfo.siteInfos[index].siteType ==
|
||
siteTtem.value
|
||
"
|
||
/>
|
||
{{ siteTtem.label }}
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
|
||
<view class="site-item">
|
||
<view class="title">站点地址</view>
|
||
<input
|
||
type="text"
|
||
v-model="item.siteUrl"
|
||
placeholder="请输入站点地址"
|
||
/>
|
||
</view>
|
||
|
||
<view class="site-item">
|
||
<view class="title">站点名称</view>
|
||
<input
|
||
type="text"
|
||
v-model="item.siteName"
|
||
placeholder="请输入站点名称"
|
||
/>
|
||
</view>
|
||
|
||
<view class="site-item">
|
||
<view class="title">测试账号</view>
|
||
<input
|
||
type="text"
|
||
v-model="item.account"
|
||
placeholder="请输入测试账号"
|
||
/>
|
||
</view>
|
||
|
||
<view class="site-item">
|
||
<view class="title">测试密码</view>
|
||
<input
|
||
type="text"
|
||
v-model="item.password"
|
||
placeholder="请输入测试密码"
|
||
/>
|
||
</view>
|
||
|
||
<view class="site-del" @click="siteDel(index)"> 删除 </view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, toRaw, onMounted, inject } from "vue";
|
||
import address from "@/components/applyJson/address.json"; // 地址
|
||
import mccAli from "@/components/applyJson/zftMcc.json"; // 行业
|
||
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
|
||
import readOnlyInfo from "../components/readOnlyInfo.vue"; // 只读文件
|
||
import JeePayForm from "@/components/applyComponents/JeePayForm.vue"; // 通用左右结构布局
|
||
import tool from "@/util/tool.js"; // 工具类函数
|
||
import termOfValidity from "@/components/applyComponents/termOfValidity.vue"; // 选择证件有效期
|
||
import JeeDataPicker from "@/components/applyComponents/dataPicker.vue"; // 通用级联选择
|
||
import { filterDcit } from "@/hooks/dict"; // 字典
|
||
const merchantTypeList = reactive(filterDcit(["A0", "A1", "A2"])); // 商户类型
|
||
const defaultSettleTypeList = reactive(filterDcit(["F0", "F1"])); // 结算类型
|
||
const settlementTypeList = reactive(filterDcit(["B0", "B1"])); // 账户类型
|
||
|
||
const channelInfo = inject('channelInfo')
|
||
|
||
const emit = defineEmits(["applyHandle"]);
|
||
// 商户进件详细信息（JSON类型字符串）
|
||
const applyDetailInfo = reactive({
|
||
merchantType: 3, // 商户类型 默认为3 代表企业
|
||
productType: 1, //产品类型
|
||
defaultSettleType: "bankCard", // 结算类型
|
||
siteInfos: [], // 选择站点
|
||
zftService: [], // 选择服务
|
||
});
|
||
|
||
// 状态: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
|
||
// 状态为 1,2,4,5 开启disable (也就是状态不为 0 3)
|
||
let isDisable = ref(false);
|
||
if (!["0", "3", "8"].includes(channelInfo.state)) isDisable.value = true;
|
||
|
||
// 通用radio checkbox选择事件 回调函数
|
||
const publicSelect = (e, key) => {
|
||
applyDetailInfo[key] = e.detail.value;
|
||
if (key == "merchantType") applyDetailInfo[key] = Number(e.detail.value);
|
||
};
|
||
|
||
// 服务选项
|
||
const plainOptions = ref([
|
||
{ label: "当面付", value: "当面付" },
|
||
{ label: "APP支付", value: "app支付" },
|
||
{ label: "WAP支付", value: "wap支付" },
|
||
{ label: "电脑支付", value: "电脑支付" },
|
||
{ label: "小程序支付", value: "小程序支付" },
|
||
]);
|
||
|
||
// 选择站点下拉选择内容
|
||
const siteInfoList = ref([
|
||
{ value: "01", label: "微信" },
|
||
{ value: "02", label: "APP" },
|
||
{ value: "03", label: "服务窗" },
|
||
{ value: "04", label: "公众号" },
|
||
{ value: "05", label: "其他" },
|
||
{ value: "06", label: "支付宝小程序" },
|
||
]);
|
||
|
||
// 添加站点
|
||
const addSite = () => {
|
||
applyDetailInfo.siteInfos.push({
|
||
siteType: "", // 站点类型
|
||
siteUrl: "", // 站点地址
|
||
siteName: "", // 站点名称
|
||
account: "", // 站点账号
|
||
password: "", // 站点密码
|
||
});
|
||
};
|
||
|
||
// 删除站点
|
||
const siteDel = (index) => applyDetailInfo.siteInfos.splice(index, 1);
|
||
|
||
// 切换站点类型
|
||
const siteTypeChange = (e, index) =>
|
||
(applyDetailInfo.siteInfos[index].siteType = e.detail.value);
|
||
|
||
// 上传图片成功
|
||
const uploadSuccess = (res, name) => {
|
||
applyDetailInfo[name] = res.data;
|
||
if (name === "licenseImg") {
|
||
applyDetailInfo.licenseNo = res.ocrInfo.licenseNo;
|
||
applyDetailInfo.licenseEffectEnd = res.ocrInfo.licenseEffectEnd; // 有效期end
|
||
} else if (name == "idcard1Img") {
|
||
applyDetailInfo.idcardName = res.ocrInfo.idcardName; // 法人身份证姓名
|
||
applyDetailInfo.idcardNo = res.ocrInfo.idcardNo; // 法人身份证号
|
||
} else if (name == "idcard2Img") {
|
||
applyDetailInfo.idcardEffectBegin = res.ocrInfo.idcardEffectBegin; // 有效期
|
||
applyDetailInfo.idcardEffectEnd = res.ocrInfo.idcardEffectEnd; // 有效期end
|
||
}
|
||
};
|
||
|
||
// 清除图片 仅前端
|
||
const clear = (name) => (applyDetailInfo[name] = "");
|
||
|
||
// 发起进件
|
||
const launchApply = (isTempData) => {
|
||
emit("applyHandle", {
|
||
name: "zftpay",
|
||
isTempData,
|
||
applyDetailInfo,
|
||
formCheck: [
|
||
applyDetailInfo.defaultSettleType,
|
||
applyDetailInfo.merchantType,
|
||
],
|
||
});
|
||
};
|
||
|
||
// 行业类型，地理位置回显
|
||
let codeBack = reactive({
|
||
areaCode: "", // 商户地理位置回显
|
||
bankCode: "", // 银行地址回显
|
||
mccCode: "", // 行业回显
|
||
});
|
||
|
||
const applyInfoRef = ref();
|
||
|
||
// 合并信息方法, 智能读取，和信息回显，通过此方法合并
|
||
const assignObj = (obj) => {
|
||
// 开启只读模式
|
||
if (isDisable.value) {
|
||
// 开启只读默认需要将 mcc码，地址码，银行地址码转为文字
|
||
let mccCodeText, areaCodeText, bankCodeText, code, mccInfo;
|
||
|
||
// mcc文字回显
|
||
if (obj.mccCode) code = obj.mccCode.split("_")[1];
|
||
for (var i = 0; i < mccAli.length; i++) {
|
||
mccInfo = mccAli[i].children.find((val) => val.value == code);
|
||
if (mccInfo) break;
|
||
}
|
||
obj.mccCodeText = obj.mccCode.split("_")[0] + "/" + mccInfo.text;
|
||
|
||
obj.areaCodeText = tool.addressBack(obj.areaCode, address); // 地理位置文字回显
|
||
obj.bankCodeText = tool.addressBack(
|
||
obj.settAccountBankBranchAreaCode,
|
||
address
|
||
); // 银行地理位置文字回显
|
||
|
||
// 传给只读组件
|
||
applyInfoRef.value.getApplyInof(obj);
|
||
}
|
||
|
||
Object.assign(applyDetailInfo, obj);
|
||
|
||
codeBack.mccCode = obj.mccCode;
|
||
obj.areaCode ? (codeBack.areaCode = obj.areaCode[2]) : null;
|
||
applyDetailInfo.mccCode
|
||
? (codeBack.mccCode = applyDetailInfo.mccCode.split("_")[1])
|
||
: null;
|
||
};
|
||
|
||
defineExpose({ launchApply, assignObj });
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "../static/information.scss";
|
||
.check-box {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 35rpx 30rpx 35rpx 30rpx;
|
||
}
|
||
.uni-label-pointer {
|
||
margin-right: 20rpx;
|
||
}
|
||
.site {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 30rpx;
|
||
color: #666f80;
|
||
.title {
|
||
font-size: 28rpx;
|
||
}
|
||
.btn {
|
||
.add {
|
||
border: 1px dashed #ddd;
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 16px;
|
||
text-align: center;
|
||
line-height: 16px;
|
||
margin-left: 10px;
|
||
color: #666f80;
|
||
}
|
||
}
|
||
}
|
||
.site-list {
|
||
border: 1px solid #ddd;
|
||
border-radius: 20rpx;
|
||
margin: 30rpx;
|
||
padding: 30rpx;
|
||
.site-item {
|
||
display: flex;
|
||
padding: 20rpx 0;
|
||
.title {
|
||
text-align: left;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666f80;
|
||
margin-right: 20rpx;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
.site-del {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
width: 280rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
border-radius: 10rpx;
|
||
background: #f00;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
input,
|
||
textarea {
|
||
flex-grow: 1;
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
}
|
||
</style>
|