源文件

2024-05-23 14:39:33 +08:00
commit a1128dd791
2997 changed files with 500069 additions and 0 deletions
--- a/jeepay-ui-uapp-agent/pageApply/channel/zftpay.vue
+++ b/jeepay-ui-uapp-agent/pageApply/channel/zftpay.vue
@@ -0,0 +1,545 @@
+<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>