源文件

jeepay-ui-uapp-agent/pageApply/channel/ysfpay.vue

@@ -0,0 +1,428 @@
+<template>
+  <!-- 只读文件 -->
+  <readOnlyInfo
+    v-if="isDisable"
+    ref="applyInfoRef"
+    applyName="ysfpay"
+  ></readOnlyInfo>
+  <!-- 盛付通进件模板 -->
+  <view v-if="!isDisable">
+    <uni-collapse ref="collapse">
+      <uni-collapse-item
+        :show-animation="false"
+        title="基础项"
+        class="coll-title"
+        :open="true"
+      >
+        <view class="content">
+          <JeePayForm text="商户类型">
+            <uni-data-checkbox
+              v-model="applyDetailInfo.merchantType"
+              :localdata="merchantTypeList"
+              @change="mchTypeInfo"
+            ></uni-data-checkbox>
+          </JeePayForm>
+
+          <JeePayForm text="机构类型">
+            <uni-data-checkbox
+              v-model="applyDetailInfo.acqOrgType"
+              :localdata="acqOrgTypeList"
+              @change="mchTypeInfo"
+            ></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"
+            />
+
+            <JeePayForm text="营业执照有效期截止">
+              <termOfValidity
+                :defaultDate="applyDetailInfo.licenseEffectEnd"
+                @publicSelect="publicSelect($event, 'licenseEffectEnd')"
+                @endHandle="endHandle"
+              />
+            </JeePayForm>
+          </template>
+
+          <JeePayForm
+            text="用户名称"
+            v-model:value="applyDetailInfo.mchFullName"
+          />
+
+          <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
+              :imgUrl="applyDetailInfo.idcard2Img"
+              @uploadSuccess="uploadSuccess($event, 'idcard2Img')"
+              @clear="clear('idcard2Img')"
+            />
+          </JeePayForm>
+        </view>
+      </uni-collapse-item>
+      <uni-collapse-item
+        :show-animation="false"
+        title="经营信息"
+        class="coll-title"
+      >
+        <view class="content">
+          <JeePayForm text="经营类目">
+            <jeeDataPicker
+              :code="applyDetailInfo.mccCode"
+              :localdata="mcc"
+              @change="publicSelect($event, 'mccCode')"
+              paramType="oneLevel"
+            />
+          </JeePayForm>
+
+          <JeePayForm
+            text="商户联系人姓名"
+            v-model:value="applyDetailInfo.contactName"
+          />
+          <JeePayForm
+            text="商户联系人手机号"
+            v-model:value="applyDetailInfo.contactPhone"
+          />
+          <JeePayForm
+            text="客服电话"
+            v-model:value="applyDetailInfo.serviceTel"
+          />
+
+          <JeePayForm
+            text="邮箱地址"
+            v-model:value="applyDetailInfo.contactEmail"
+          />
+          <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.storeOuter2Img"
+              @uploadSuccess="uploadSuccess($event, 'storeOuter2Img')"
+              @clear="clear('storeOuter2Img')"
+            />
+          </JeePayForm>
+
+          <JeePayForm text="店内环境照">
+            <JeepayUpLoad
+              :imgUrl="applyDetailInfo.storeInnerImg"
+              @uploadSuccess="uploadSuccess($event, 'storeInnerImg')"
+              @clear="clear('storeInnerImg')"
+            />
+          </JeePayForm>
+
+          <JeePayForm text="收银台照">
+            <JeepayUpLoad
+              :imgUrl="applyDetailInfo.storeCashierImg"
+              @uploadSuccess="uploadSuccess($event, 'storeCashierImg')"
+              @clear="clear('storeCashierImg')"
+            />
+          </JeePayForm>
+        </view>
+      </uni-collapse-item>
+      <uni-collapse-item
+        :show-animation="false"
+        title="结算账户"
+        class="coll-title"
+      >
+        <view class="content">
+          <JeePayForm text="账户类型">
+            <uni-data-checkbox
+              v-model="applyDetailInfo.settAccountType"
+              :localdata="settlementTypeList"
+            ></uni-data-checkbox>
+          </JeePayForm>
+
+          <JeePayForm text="结算周期">
+            <uni-data-picker
+              :localdata="settleArray"
+              @change="publicSelect($event, 'settlePeriod')"
+              v-slot:default="{ data }"
+              >{{ settleText ? settleText : "请选择" }}</uni-data-picker
+            >
+          </JeePayForm>
+
+          <JeePayForm text="银行卡正面照">
+            <JeepayUpLoad
+              ocrFlag="bankCard"
+              :imgUrl="applyDetailInfo.settAccountLicenseImg"
+              @uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')"
+              @clear="clear('settAccountLicenseImg')"
+            />
+          </JeePayForm>
+
+          <JeePayForm
+            text="银行开户名"
+            v-model:value="applyDetailInfo.settAccountName"
+          />
+          <JeePayForm
+            text="银行预留手机号"
+            v-model:value="applyDetailInfo.openBankReservePhone"
+          />
+          <JeePayForm
+            text="银行账号"
+            v-model:value="applyDetailInfo.settAccountNo"
+          />
+          <JeePayForm
+            text="银行名称"
+            v-model:value="applyDetailInfo.settAccountBankName"
+          />
+          <JeePayForm
+            text="开户支行名称"
+            v-model:value="applyDetailInfo.settAccountBankBranchName"
+          />
+          <JeePayForm
+            text="联行行号"
+            v-model:value="applyDetailInfo.openBankCode"
+          />
+          <template v-if="applyDetailInfo.settleAccountType == 3">
+            <JeePayForm text="被授权人证件人像照">
+              <JeepayUpLoad
+                ocrFlag="idCard"
+                :imgUrl="applyDetailInfo.settAccountIdcard1Img"
+                @uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')"
+                @clear="clear('settAccountIdcard1Img')"
+              />
+            </JeePayForm>
+
+            <JeePayForm text="被授权人证件国徽照">
+              <JeepayUpLoad
+                :imgUrl="applyDetailInfo.settAccountIdcard2Img"
+                @uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')"
+                @clear="clear('settAccountIdcard2Img')"
+              />
+            </JeePayForm>
+
+            <JeePayForm
+              text="被授权人身份证号"
+              v-model:value="applyDetailInfo.settAccountIdcardNo"
+            />
+
+            <JeePayForm text="结算授权证书">
+              <JeepayUpLoad
+                :imgUrl="applyDetailInfo.applymentDetailInfo"
+                @uploadSuccess="uploadSuccess($event, 'applymentDetailInfo')"
+                @clear="clear('applymentDetailInfo')"
+              />
+            </JeePayForm>
+          </template>
+
+          <JeePayForm
+            text="开户许可证"
+            v-if="applyDetailInfo.settleAccountType == 1"
+          >
+            <JeepayUpLoad
+              :imgUrl="applyDetailInfo.companyAccountLicenseImg"
+              @uploadSuccess="uploadSuccess($event, 'companyAccountLicenseImg')"
+              @clear="clear('companyAccountLicenseImg')"
+            />
+          </JeePayForm>
+
+          <JeePayForm text="商户收单协议">
+            <JeepayUpLoad
+              :imgUrl="applyDetailInfo.acquiringAgreementPhoto"
+              @uploadSuccess="uploadSuccess($event, 'acquiringAgreementPhoto')"
+              @clear="clear('acquiringAgreementPhoto')"
+            />
+          </JeePayForm>
+
+          <JeePayForm text="拓展资料" :start="false">
+            <JeepayUpLoad
+              :imgUrl="applyDetailInfo.reserve1"
+              @uploadSuccess="uploadSuccess($event, 'reserve1')"
+              @clear="clear('reserve1')"
+            />
+          </JeePayForm>
+        </view>
+      </uni-collapse-item>
+
+      <!-- 盛付通费率组件 -->
+      <defaultRate ref="defaultRateRef" />
+    </uni-collapse>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive, inject } from "vue";
+import address from "@/components/applyJson/ysfAddress.json"; // 地址
+import mcc from "@/components/applyJson/mccYsf.json"; // 行业
+import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
+import defaultRate from "../components/defaultRate.vue"; // 默认费率
+import readOnlyInfo from "../components/readOnlyInfo.vue"; // 只读文件
+import tool from "@/util/tool.js"; // 工具类函数
+import JeePayForm from "@/components/applyComponents/JeePayForm.vue"; // 通用左右结构布局
+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 acqOrgTypeList = reactive(filterDcit(["E0", "E1", "E2"])); // 机构类型
+const settlementTypeList = reactive(filterDcit(["B3", "B4", "B5"])); // 结算类型
+
+const channelInfo = inject('channelInfo')
+
+const emit = defineEmits(["applyHandle"]);
+
+// 状态分类: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
+// 当状态为 1 2 4 5 时要开启只读模式，1 3 不开启
+let isDisable = ref(false);
+if (!["0", "3", "8"].includes(channelInfo.state)) isDisable.value = true;
+
+// 商户进件详细信息（JSON类型字符串）
+let applyDetailInfo = reactive({
+  merchantType: 3, // 商户类型 默认为3 代表企业
+  settleAccountType: "", // 结算账号类型 默认为B 对公
+});
+
+// 结算周期
+let settleText = ref("");
+const settleArray = [
+  { value: "1", text: "T+1" },
+  { value: "2", text: "D+0" },
+  { value: "3", text: "T+0" },
+  { value: "4", text: "D+1" },
+];
+
+/* 
+	
+	云闪付的地址JSON不是国标码, 直辖市的一级和二级是一样的value, 在uni的级联选择器中存在bug,可以做到无限分级, 所以要手动改一下json, 把其中一个字符串类型,改为数字类型即可
+  
+ */
+// 通用选择函数
+const publicSelect = (e, key) => {
+  applyDetailInfo[key] = e.detail.value;
+
+  if (key == "settlePeriod") {
+    // 结算周期文字回显
+    applyDetailInfo.settlePeriod = e.detail.value[0].value;
+    settleText.value = settleArray.find(
+      (item) => item.value == e.detail.value[0].value
+    ).text;
+  }
+};
+
+// 上传图片成功
+const uploadSuccess = (res, name) => {
+  applyDetailInfo[name] = res.data;
+  if (res.ocrInfo && Object.keys(res.ocrInfo).length < 1) return false;
+  // OCR图片识别  idCard-身份证 idcard1Img，idcard2Img  license-营业执照 licenseImg
+  if (name == "idcard1Img") {
+    applyDetailInfo.idcardName = res.ocrInfo.idcardName; // 法人身份证姓名
+    applyDetailInfo.idcardNo = res.ocrInfo.idcardNo; // 法人身份证号
+  } else if (name == "licenseImg") {
+    applyDetailInfo.licenseEffectEnd = res.ocrInfo.licenseEffectEnd; // 有效期end
+    applyDetailInfo.mchFullName = res.ocrInfo.mchFullName; // 全称
+    applyDetailInfo.licenseNo = res.ocrInfo.licenseNo; // 编号
+    applyDetailInfo.address = res.ocrInfo.address;
+  } else if (name == "settAccountLicenseImg") {
+    applyDetailInfo.settAccountNo = res.ocrInfo.settAccountNo; // 银行卡号
+  } else if (name == "settAccountIdcard1Img") {
+    applyDetailInfo.settAccountIdcardNo = res.ocrInfo.idcardNo; // 被授权人身份证号
+  }
+};
+// 清除图片  仅前端
+const clear = (name, url) => (applyDetailInfo[name] = "");
+
+const defaultRateRef = ref(); // 获取费率组件
+// 发起进件  注意后面的formCheck参数，表单校验要用
+const launchApply = (isTempData) => {
+  // 有费率的进件渠道，要在发起进件之前，获取所选择的费率信息
+  applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData)
+  emit("applyHandle", {
+    name: "ysfpay",
+    isTempData,
+    applyDetailInfo,
+    formCheck: [
+      applyDetailInfo.merchantType,
+      applyDetailInfo.settleAccountType,
+    ],
+  });
+};
+
+// 只读组件信息
+let applyInfoRef = ref(null);
+
+// 行业类型，地理位置回显
+let codeBack = reactive({
+  areaCode: "", // 商户地理位置回显
+});
+
+// 合并信息方法, 职能读取，和信息回显，通过此方法合并
+const assignObj = (obj) => {
+  Object.assign(applyDetailInfo, obj);
+
+  if (!isDisable.value) {
+    codeBack.areaCode = obj.areaCode ? obj.areaCode[2] : obj.areaCode; // 地址码，取最后一个
+    // 各类文字回显 结算周期
+    if (obj.settlePeriod)
+      settleText.value = settleArray.find(
+        (item) => item.value == obj.settlePeriod
+      ).text;
+  } else {
+    // 以下用于只读信息页
+    obj.mccText = obj.mccCode.split("_")[0]; // 行业码转文字
+    obj.areaText = tool.addressBack(obj.areaCode, address); // 地址码转文字
+    obj.settAccountText = obj.settAccountType == "C" ? "对私" : "对公";
+    obj.merchantText =
+      obj.merchantType == 1
+        ? "个人"
+        : obj.merchantType == 2
+        ? "个体工商户"
+        : "企业";
+
+    // 传值给只读组件
+    if (applyInfoRef.value) applyInfoRef.value.getApplyInof(obj);
+  }
+};
+
+defineExpose({ launchApply, assignObj });
+</script>
+
+<style scoped lang="scss">
+@import "../static/information.scss";
+</style>