shenze-sysMan/src/views/huifuMch/index.vue

<template>
  <!-- 备用提现账号 -->
  <div class="huifuPage flex-col">
    <s-header :name="$t('huifuMch.standbyWithdrawalAccountNo')" :noback="false"></s-header>
    <!-- 申请表单 -->
    <div class="huifuform flex-col" v-if="showStatus == null">
      <van-form @submit="onSubmit">
        <div class="huifuBox">
          <div class="van-cell van-field">
            <div class="van-cell__title van-field__label"><span>{{ $t('huifuMch.merchantType') }}</span></div>
            <div class="van-cell__value van-field__value radioBox">
              <van-radio-group v-model="type" direction="horizontal">
                <van-radio name="0" icon-size="18px">{{ $t('huifuMch.personal') }}</van-radio>
                <van-radio name="1" icon-size="18px">{{ $t('huifuMch.enterprise') }}</van-radio>
              </van-radio-group>
            </div>
          </div>
          <van-field v-model="regName" name="regName" :label="$t('huifuMch.huifuRegName')"
            :placeholder="$t('huifuMch.huifuRegNamePlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.huifuRegNamePlaceholder') }]" />
          <van-field v-model="shortName" name="shortName" :label="$t('huifuMch.shortNameLabel')"
            :placeholder="$t('huifuMch.shortNamePlaceholder')" />
          <div v-if="type == 1">
            <van-field v-model="registeredAddress" is-link readonly name="registeredAddress"
              :label="$t('huifuMch.huifuRegisteredAddress')"
              :placeholder="$t('huifuMch.huifuRegisteredAddressPlaceholder')"
              :rules="[{ required: true, message: $t('huifuMch.huifuRegisteredAddressPlaceholder') }]"
              @click="showReAddress = true" />
            <van-field v-model="regDetail" name="regDetail" :label="$t('huifuMch.huifuRegDetail')"
              :placeholder="$t('huifuMch.huifuRegDetailPlaceholder')"
              :rules="[{ required: true, message: $t('huifuMch.huifuRegDetailPlaceholder') }]" />
          </div>
        </div>
        <div class="huifuBox" v-if="type == 1">
          <van-field v-model="companyFoundDate" readonly name="companyFoundDate" :label="$t('huifuMch.companyFoundDate')"
            :placeholder="$t('huifuMch.companyFoundDatePlaceholder')" @click="showFoundDate = true"
            :rules="[{ required: true, message: $t('huifuMch.companyFoundDatePlaceholder') }]" />
          <van-field v-model="licenseCode" name="licenseCode" :label="$t('huifuMch.licenseCode')"
            :placeholder="$t('huifuMch.licenseCodePlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.licenseCodePlaceholder') }]" />
          <div class="van-cell van-field">
            <div class="van-cell__title van-field__label"><span>{{ $t('huifuMch.validityType') }}</span></div>
            <div class="van-cell__value van-field__value radioBox">
              <van-radio-group v-model="licenseValidityType" direction="horizontal">
                <van-radio name="1" icon-size="18px">{{ $t('huifuMch.permanent') }}</van-radio>
                <van-radio name="0" icon-size="18px">{{ $t('huifuMch.noPermanent') }}</van-radio>
              </van-radio-group>
            </div>
          </div>
          <van-field v-model="beginDateLicense" readonly name="beginDateLicense" :label="$t('huifuMch.beginDate')"
            :placeholder="$t('huifuMch.beginDatePlaceholder')" @click="showBeginDateLicense = true"
            :rules="[{ required: true, message: $t('huifuMch.beginDatePlaceholder') }]" />
          <van-field v-if="licenseValidityType == 0" v-model="endDateLicense" readonly name="endDateLicense"
            :label="$t('huifuMch.endDate')" :placeholder="$t('huifuMch.endDatePlaceholder')"
            @click="showEndDateLicense = true"
            :rules="[{ required: true, message: $t('huifuMch.endDatePlaceholder') }]" />
        </div>
        <div class="huifuBox">
          <van-field v-model="name" name="name" :label="$t('huifuMch.huifuContactName')"
            :placeholder="$t('huifuMch.huifuContactNamePlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.huifuContactNamePlaceholder') }]" />
          <van-field v-model="phone" name="phone" :label="$t('huifuMch.huifuContactMobile')"
            :placeholder="$t('huifuMch.huifuContactMobilePlaceholder')"
            :rules="[{ required: true, pattern: /^1[3456789]\d{9}$/, message: $t('huifuMch.huifuContactMobileMessage') }]" />
          <van-field v-model="email" name="email" :label="$t('huifuMch.huifuContactEmail')"
            :placeholder="$t('huifuMch.huifuContactEmailPlaceholder')"
            :rules="[{ required: true, pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: $t('huifuMch.huifuContactEmailMessage') }]" />
          <van-field v-model="businessAddress" is-link readonly name="businessAddress"
            :label="$t('huifuMch.huifuBusinessAddress')" :placeholder="$t('huifuMch.huifuBusinessAddressPlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.huifuBusinessAddressPlaceholder') }]"
            @click="showArea = true" />
          <van-field v-model="detailAddr" name="detailAddr" :label="$t('huifuMch.huifuOperatingAddress')"
            :placeholder="$t('huifuMch.huifuOperatingAddressPlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.huifuOperatingAddressPlaceholder') }]" />
          <van-field v-if="type == 1" v-model="servicePhone" name="servicePhone" :label="$t('huifuMch.huifuServicePhone')"
            :placeholder="$t('huifuMch.huifuServicePhonePlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.huifuServicePhonePlaceholder') }]" />
        </div>
        <div class="huifuBox">
          <div class="van-cell van-field" v-if="type == 1">
            <div class="van-cell__title van-field__label"><span>{{ $t('huifuMch.cardType') }}</span></div>
            <div class="van-cell__value van-field__value radioBox">
              <van-radio-group v-model="cardType" direction="horizontal">
                <van-radio name="1" icon-size="18px">{{ $t('huifuMch.personalAccount') }}</van-radio>
                <van-radio name="0" icon-size="18px">{{ $t('huifuMch.corporateAccount') }}</van-radio>
              </van-radio-group>
            </div>
          </div>
          <van-field v-model="cardName" name="cardName" :label="$t('huifuMch.huifuCardName')"
            :placeholder="$t('huifuMch.huifuCardNamePlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.huifuCardNamePlaceholder') }]" />
          <van-field v-model="cardNo" name="cardNo" :label="$t('huifuMch.huifuCardNo')"
            :placeholder="$t('huifuMch.huifuCardNoPlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.huifuCardNoPlaceholder') }]" />
          <van-field v-if="cardType == '1'" v-model="mp" name="mp" :label="$t('huifuMch.huifuMp')"
            :placeholder="$t('huifuMch.huifuMpPlaceholder')"
            :rules="[{ required: true, pattern: /^1[3456789]\d{9}$/, message: $t('huifuMch.huifuContactMobileMessage') }]" />
          <van-field v-if="cardType == 0" v-model="branchCode" name="branchCode" :label="$t('huifuMch.branchCode')"
            :placeholder="$t('huifuMch.branchCodePlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.branchCodePlaceholder') }]" />
          <van-field v-if="cardType == 0" v-model="openLicenceNo" name="openLicenceNo"
            :label="$t('huifuMch.openLicenceNo')" :placeholder="$t('huifuMch.openLicenceNoPlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.openLicenceNoPlaceholder') }]" />
          <van-field v-if="cardType == '1'" v-model="bankAddress" is-link readonly name="bankAddress"
            :label="$t('huifuMch.huifuBankAddress')" :placeholder="$t('huifuMch.huifuBankAddressPlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.huifuBankAddressPlaceholder') }]"
            @click="showBankAddress = true" />
          <van-field v-model="certNo" name="certNo" :label="$t('huifuMch.huifuCertNo')"
            :placeholder="$t('huifuMch.huifuCertNoPlaceholder')"
            :rules="[{ required: true, pattern: /^\d{17}[\dXx]$/, message: $t('huifuMch.huifuCertNoMessage') }]" />
          <van-field v-if="cardType == '0'" v-model="certAddress" name="certAddress" :label="$t('huifuMch.certAddress')"
            :placeholder="$t('huifuMch.certAddressPlaceholder')"
            :rules="[{ required: true, message: $t('huifuMch.certAddressPlaceholder') }]" />
          <div class="van-cell van-field">
            <div class="van-cell__title van-field__label"><span>{{ $t('huifuMch.certType') }}</span></div>
            <div class="van-cell__value van-field__value radioBox">
              <van-radio-group v-model="certValidityType" direction="horizontal">
                <van-radio name="1" icon-size="18px">{{ $t('huifuMch.permanent') }}</van-radio>
                <van-radio name="0" icon-size="18px">{{ $t('huifuMch.noPermanent') }}</van-radio>
              </van-radio-group>
            </div>
          </div>
          <van-field v-model="beginDate" readonly name="beginDate" :label="$t('huifuMch.beginDate')"
            :placeholder="$t('huifuMch.beginDatePlaceholder')" @click="showBeginDate = true"
            :rules="[{ required: true, message: $t('huifuMch.beginDatePlaceholder') }]" />
          <van-field v-if="certValidityType == 0" v-model="endDate" readonly name="endDate"
            :label="$t('huifuMch.endDate')" :placeholder="$t('huifuMch.endDatePlaceholder')" @click="showEndDate = true"
            :rules="[{ required: true, message: $t('huifuMch.endDatePlaceholder') }]" />
        </div>
        <!-- 地址弹窗 -->
        <van-popup v-model:show="showArea" position="bottom">
          <van-area :area-list="areaList" @confirm="onConfirm" @cancel="showArea = false" />
        </van-popup>
        <van-popup v-model:show="showBankAddress" position="bottom">
          <van-area :area-list="areaList" :columns-num="2" @confirm="onConfirmBankAddress"
            @cancel="showBankAddress = false" />
        </van-popup>
        <van-popup v-model:show="showReAddress" position="bottom">
          <van-area :area-list="areaList" @confirm="onConfirmReAddress" @cancel="showReAddress = false" />
        </van-popup>
        <!-- 时间弹窗 -->
        <van-popup v-model:show="showEndDateLicense" position="bottom">
          <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmEndDateLicense"
            @cancel="showEndDateLicense = false" />
        </van-popup>
        <van-popup v-model:show="showBeginDateLicense" position="bottom">
          <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmBeginDateLicense"
            @cancel="showBeginDateLicense = false" />
        </van-popup>
        <van-popup v-model:show="showFoundDate" position="bottom">
          <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmFoundDate"
            @cancel="showFoundDate = false" />
        </van-popup>
        <van-popup v-model:show="showBeginDate" position="bottom">
          <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmBeginDate"
            @cancel="showBeginDate = false" />
        </van-popup>
        <van-popup v-model:show="showEndDate" position="bottom">
          <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate" @confirm="onConfirmEndDate"
            @cancel="showEndDate = false" />
        </van-popup>
        <van-row justify="space-around" style="padding: 3em; background-color: #f6f7f9;">
          <van-button span="10" round type="primary" style=" padding: 0 5em" native-type="submit">{{
            $t('huifuMch.submit') }}
          </van-button>
        </van-row>
      </van-form>
    </div>
    <!-- 上传图片 -->
    <div class="upLoad flex-col" v-if="showStatus == '0'">
      <van-cell title="身份证" size="large" icon="contact" />
      <div class="uploader-container">
        <van-uploader v-model="certFrontPic" accept=".jpg,.png" :preview-size="[320, 180]"
          style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
          :after-read="upCertFrontPic" upload-text="点击上传身份证正面照片" capture="camera" image-fit="contain" :max-count="1" />
        <van-uploader v-model="certBackPic" accept=".jpg,.png" :preview-size="[320, 180]"
          style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
          :after-read="upCertBackPic" upload-text="点击上传身份证背面照片" capture="camera" image-fit="contain" :max-count="1" />
      </div>
      <div v-if="type == '1'">
        <van-cell title="营业执照" size="large" icon="contact" />
        <div class="uploader-container">
          <van-uploader v-model="licensePic" accept=".jpg,.png" :preview-size="[320, 180]"
            style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
            :after-read="upLicensePic" upload-text="点击上传营业执照" capture="camera" image-fit="contain" :max-count="1" />
        </div>
      </div>
      <div v-if="cardType == '1'">
        <van-cell title="结算卡" size="large" icon="debit-pay" />
        <div class="uploader-container">
          <van-uploader v-model="cardFrontPic" accept=".jpg,.png" :preview-size="[320, 180]"
            style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
            :after-read="upCardFrontPic" upload-text="点击上传结算卡正面照片" capture="camera" image-fit="contain" :max-count="1" />
        </div>
      </div>
      <div v-if="cardType == '0'">
        <van-cell title="开户许可证" size="large" icon="debit-pay" />
        <div class="uploader-container">
          <van-uploader v-model="regAcctPic" accept=".jpg,.png" :preview-size="[320, 180]"
            style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
            :after-read="upRegAcctPic" upload-text="点击上传开户许可证照片" capture="camera" image-fit="contain" :max-count="1" />
        </div>
      </div>
      <van-row justify="space-around" style="padding: 3em;">
        <van-button span="10" round type="primary" style=" padding: 0 5em" native-type="sumbit" @click="submitCheck">{{
          $t('huifuMch.submit') }}
        </van-button>
      </van-row>
    </div>
    <!-- 审核状态 -->
    <div v-if="showStatus == '1' || showStatus == '2' || showStatus == '3' || showStatus == '4'">
      <van-cell value="" size="large">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">审核状态: </span>
          <span v-if="showStatus == '1' || showStatus == '4'" class="custom-title" style="color: #FFA500;">审核中</span>
          <span v-if="showStatus == '2'" class="custom-title" style="color: #00FF00;">审核通过</span>
          <span v-if="showStatus == '3'" class="custom-title" style="color: #FF0000;">审核未通过</span>
        </template>
      </van-cell>
      <div class="parent-container" v-if="huifuMchCheck.type == '0'">
        <span>{{ $t('huifuMch.merchantType') }}：个人</span>
        <span>{{ $t('huifuMch.huifuRegName') }}：{{ huifuMchCheck.regName }}</span>
        <span>{{ $t('huifuMch.shortNameLabel') }}：{{ huifuMchCheck.shortName }}</span>
        <span>{{ $t('huifuMch.huifuContactName') }}：{{ huifuMchCheck.name }}</span>
        <span>{{ $t('huifuMch.huifuContactMobile') }}：{{ huifuMchCheck.phone }}</span>
        <span>{{ $t('huifuMch.huifuContactEmail') }}：{{ huifuMchCheck.email }}</span>
        <span>{{ $t('huifuMch.huifuBusinessAddress') }}：{{ huifuMchCheck.detailAddr }}</span>
        <span>{{ $t('huifuMch.huifuCardName') }}：{{ huifuMchCheck.cardName }}</span>
        <span>{{ $t('huifuMch.huifuCardNo') }}：{{ huifuMchCheck.cardNo }}</span>
        <span>{{ $t('huifuMch.huifuMp') }}：{{ huifuMchCheck.mp }}</span>
        <span>{{ $t('huifuMch.huifuCertNo') }}：{{ huifuMchCheck.certNo }}</span>
      </div>
      <div class="parent-container" v-if="huifuMchCheck.type == '1'">
        <span>{{ $t('huifuMch.merchantType') }}：企业</span>
        <span>{{ $t('huifuMch.huifuRegName') }}：{{ huifuMchCheck.regName }}</span>
        <span>{{ $t('huifuMch.shortNameLabel') }}：{{ huifuMchCheck.shortName }}</span>
        <span>{{ $t('huifuMch.companyFoundDate') }}：{{ huifuMchCheck.foundDate }}</span>
        <span>{{ $t('huifuMch.licenseCode') }}：{{ huifuMchCheck.licenseCode }}</span>
        <span>{{ $t('huifuMch.huifuRegDetail') }}：{{ huifuMchCheck.regDetail }}</span>
        <span>{{ $t('huifuMch.huifuContactName') }}：{{ huifuMchCheck.name }}</span>
        <span>{{ $t('huifuMch.huifuContactMobile') }}：{{ huifuMchCheck.phone }}</span>
        <span>{{ $t('huifuMch.huifuContactEmail') }}：{{ huifuMchCheck.email }}</span>
        <span>{{ $t('huifuMch.huifuBusinessAddress') }}：{{ huifuMchCheck.detailAddr }}</span>
        <span>{{ $t('huifuMch.huifuServicePhone') }}：{{ huifuMchCheck.servicePhone }}</span>
        <span>{{ $t('huifuMch.cardType') }}：{{ huifuMchCheck.cardType == '1' ?
          $t('huifuMch.personalAccount') : $t('huifuMch.corporateAccount') }}</span>
        <span>{{ $t('huifuMch.huifuCardName') }}：{{ huifuMchCheck.cardName }}</span>
        <span>{{ $t('huifuMch.huifuCardNo') }}：{{ huifuMchCheck.cardNo }}</span>
        <span v-if="huifuMchCheck.cardType == '1'">{{ $t('huifuMch.huifuMp') }}：{{ huifuMchCheck.mp }}</span>
        <span>{{ $t('huifuMch.huifuCertNo') }}：{{ huifuMchCheck.certNo }}</span>
        <span v-if="huifuMchCheck.cardType == '0'">{{ $t('huifuMch.openLicenceNo') }}：{{ huifuMchCheck.openLicenceNo
        }}</span>
        <span v-if="huifuMchCheck.cardType == '0'">{{ $t('huifuMch.branchCode') }}：{{ huifuMchCheck.branchCode }}</span>
      </div>
      <van-row v-if="showStatus == '2' || showStatus == '3'" justify="space-around" style="padding: 3em;">
        <van-button span="10" round type="primary" style=" padding: 0 5em" native-type="sumbit" @click="updateHuifu">{{
          $t('huifuMch.update') }}
        </van-button>
      </van-row>
      <van-row v-if="showStatus == '2' || showStatus == '3'" justify="space-around" style="padding: 1em;">
        <van-button span="5" round type="primary" style="padding: 0 3em" native-type="sumbit" @click="upload">{{
          $t('huifuMch.uploadPage') }}
        </van-button>
      </van-row>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import dateUtil from "@/utils/dateUtil";
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
import { saveHuifuMch, getHuifuMchCheck, uploadPic, submitHuifuCheck } from "@/service/huifuMch";
import { getLoginUser } from "@/common/js/utils";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

export default {
  components: { sHeader },
  setup() {
    // 引入语言
    const { t } = useI18n();
    const router = useRouter();
    const user = getLoginUser();
    const huifuMchCheck = ref(null); // 审核信息
    const businessAddress = ref(''); //经营地址
    const registeredAddress = ref(''); //注册地址
    const bankAddress = ref(''); // 银行地址
    const showArea = ref(false); // 是否弹窗
    const showBankAddress = ref(false);
    const showReAddress = ref(false);
    const companyFoundDate = ref(''); // 成立日期
    const showFoundDate = ref(false);
    const beginDateLicense = ref(''); // 营业执照有效开始日期
    const showBeginDateLicense = ref(false);
    const endDateLicense = ref(''); // 营业执照有效截止日期
    const showEndDateLicense = ref(false);
    const beginDate = ref(''); // 有效期开始日期
    const showBeginDate = ref(false);
    const endDate = ref(''); // 有效期截日期
    const showEndDate = ref(false);
    const showStatus = ref(null);
    const certBackPic = ref();
    const certFrontPic = ref();
    const cardFrontPic = ref();
    const licensePic = ref();
    const regAcctPic = ref();
    let addParams = reactive({
      adminId: user.id, // 当前登录账户的id
      type: '0', // 类型 String 必填 对公企业:type=0; 个人:type=1
      regName: '', // 商户名称
      shortName: '', // 商户简称
      foundDate: '', // 成立时间
      licenseCode: '', // 营业执照编号
      licenseValidityType: "1", // 营业执照有效期类型
      licenseBeginDate: '', // 营业执照有效开始日期
      licenseEndDate: '', // 营业执照有效截止日期
      regProvId: '', // 注册省编码
      regAreaId: '', // 注册市编码
      regDistrictId: '', // 注册区编码
      regDetail: '', // 注册详细地址
      name: '', // 联系人姓名
      phone: '', // 联系人手机号码
      email: '', // 联系人邮箱
      provId: '', // 省编码
      areaId: '',  // 省编码
      districtId: '', // 市编码 
      detailAddr: '', // 经营地址
      servicePhone: '', // 客服电话
      cardName: '', // 卡户名
      cardType: '1', // 结算账户类型，“0”为对公账户，“1”为个人账户
      cardNo: '', // 银行卡号
      branchCode: '', // 联行号
      openLicenceNo: '', // 基本存款账户编号或核准号
      cardProvId: '', // 省编码
      cardAreaId: '', // 省编码
      mp: '', // 结算手机号
      certNo: '', // 身份证号
      certAddress: '', // 身份证地址
      certValidityType: '1', // 身份证有效期类型
      certBeginDate: '', // 有效期开始日期
      certEndDate: '', // 有效期截止日期
    });
    // 上传身份证正面
    const upCertFrontPic = async (file) => {
      file.status = 'uploading';
      file.message = '上传中...';
      const formData = new FormData();
      formData.append('file', file.file, file.file.name);
      formData.append('adminId', user.id);
      formData.append('fileType', "F40");
      // console.log(formData.get("file"));
      if (addParams.type === '1') {
        formData.append('fileType', "F02");
      }
      try {
        const { data } = await uploadPic(formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        if (addParams.type === '1') {
          const { data1 } = await uploadPic(formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          });
          if (data.code == "00000" && data1.code == "00000") {
            console.log(data);
            file.status = 'done';
          } else {
            file.status = 'failed';
            file.message = '上传失败';
          }
        } else {
          if (data.code == "00000") {
            console.log(data);
            file.status = 'done';
          } else {
            file.status = 'failed';
            file.message = '上传失败';
          }
        }
      } catch {
        file.status = 'failed';
        file.message = '上传失败';
      }
    };
    // 上传身份证背面
    const upCertBackPic = async (file) => {
      file.status = 'uploading';
      file.message = '上传中...';
      // 此时可以自行将文件上传至服务器
      // const fileObject = new File([file.content], file.file.name, { type: file.file.type });
      const formData = new FormData();
      formData.append('file', file.file, file.file.name);
      formData.append('adminId', user.id);
      formData.append('fileType', "F41");
      if (addParams.type == '1') {
        formData.append('fileType', "F03");
      }
      console.log(formData.get("file"));
      try {
        const { data } = await uploadPic(formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        if (addParams.type == '1') {
          const { data1 } = await uploadPic(formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
            },
          });
          if (data.code == "00000" && data1.code == "00000") {
            console.log(data1);
            file.status = 'done';
          } else {
            file.status = 'failed';
            file.message = '上传失败';
          }
        } else {
          if (data.code == "00000") {
            console.log(data);
            file.status = 'done';
          } else {
            file.status = 'failed';
            file.message = '上传失败';
          }
        }
      } catch {
        file.status = 'failed';
        file.message = '上传失败';
      }
    };
    // 上传结算卡正面
    const upCardFrontPic = async (file) => {
      file.status = 'uploading';
      file.message = '上传中...';
      // 此时可以自行将文件上传至服务器
      const formData = new FormData();
      formData.append('file', file.file, file.file.name);
      formData.append('adminId', user.id);
      formData.append('fileType', "F13");
      console.log(formData.get("file"));
      try {
        const { data } = await uploadPic(formData, 'multipart/form-data'
        );
        if (data.code == "00000") {
          console.log(data);
          file.status = 'done';
        } else {
          file.status = 'failed';
          file.message = '上传失败';
        }
      } catch {
        file.status = 'failed';
        file.message = '上传失败';
      }
    };
    // 上传营业执照
    const upLicensePic = async (file) => {
      file.status = 'uploading';
      file.message = '上传中...';
      // 此时可以自行将文件上传至服务器
      const formData = new FormData();
      formData.append('file', file.file, file.file.name);
      formData.append('adminId', user.id);
      formData.append('fileType', "F07");
      console.log(formData.get("file"));
      try {
        const { data } = await uploadPic(formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        if (data.code == "00000") {
          console.log(data);
          file.status = 'done';
        } else {
          file.status = 'failed';
          file.message = '上传失败';
        }
      } catch {
        file.status = 'failed';
        file.message = '上传失败';
      }
    };
    // 上传开户许可证
    const upRegAcctPic = async (file) => {
      file.status = 'uploading';
      file.message = '上传中...';
      // 此时可以自行将文件上传至服务器
      // const fileObject = new File([file.content], file.file.name, { type: file.file.type });
      // const formData = new FormData();
      // formData.append('file', fileObject);
      const formData = new FormData();
      formData.append('file', file.file, file.file.name);
      formData.append('adminId', user.id);
      formData.append('fileType', "F08");
      console.log(formData.get("file"));
      try {
        const { data } = await uploadPic(formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        if (data.code == "00000") {
          console.log(data);
          file.status = 'done';
        } else {
          file.status = 'failed';
          file.message = '上传失败';
        }
      } catch {
        file.status = 'failed';
        file.message = '上传失败';
      }
    };
    const onOversize = (file) => {
      console.log(file);
      Toast('文件大小不能超过 2MB');
    };
    // 地址选择
    const onConfirm = (areaValues) => {
      console.log(areaValues)
      showArea.value = false;
      businessAddress.value = areaValues
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      addParams.provId = areaValues[0]?.code || '';
      addParams.areaId = areaValues[1]?.code || '';
      addParams.districtId = areaValues[2]?.code || '';
      // addParams.detailAddr = areaValues[0].name + areaValues[1].name + areaValues[2].name;
    };
    const onConfirmBankAddress = (areaValues) => {
      console.log(areaValues)
      showBankAddress.value = false;
      bankAddress.value = areaValues
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      addParams.cardProvId = areaValues[0]?.code || '';
      addParams.cardAreaId = areaValues[1]?.code || '';
    };
    const onConfirmReAddress = (areaValues) => {
      showReAddress.value = false;
      registeredAddress.value = areaValues
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      addParams.regProvId = areaValues[0]?.code || '';
      addParams.regAreaId = areaValues[1]?.code || '';
      addParams.regDistrictId = areaValues[2]?.code || '';
    };
    // 时间选择
    const onConfirmEndDateLicense = (value) => {
      endDateLicense.value = dateUtil.formateDate(value, "yyyy-MM-dd");
      addParams.licenseEndDate = endDateLicense.value.replace(/-/g, "");
      showEndDateLicense.value = false;
    };
    const onConfirmBeginDateLicense = (value) => {
      beginDateLicense.value = dateUtil.formateDate(value, "yyyy-MM-dd");
      addParams.licenseBeginDate = beginDateLicense.value.replace(/-/g, "");
      showBeginDateLicense.value = false;
    };
    const onConfirmFoundDate = (value) => {
      companyFoundDate.value = dateUtil.formateDate(value, "yyyy-MM-dd");
      addParams.foundDate = companyFoundDate.value.replace(/-/g, "");
      showFoundDate.value = false;
    };
    const onConfirmBeginDate = (value) => {
      beginDate.value = dateUtil.formateDate(value, "yyyy-MM-dd");
      addParams.certBeginDate = beginDate.value.replace(/-/g, "");
      showBeginDate.value = false;
    };
    const onConfirmEndDate = (value) => {
      endDate.value = dateUtil.formateDate(value, "yyyy-MM-dd");
      addParams.certEndDate = endDate.value.replace(/-/g, "");
      showEndDate.value = false;
    };
    onMounted(async () => {
      const { data } = await getHuifuMchCheck({ adminId: user.id });
      console.log(data.data);
      if (data.data != null) {
        huifuMchCheck.value = data.data;
        showStatus.value = huifuMchCheck.value.status;
        addParams.type = huifuMchCheck.value.type;
        addParams.cardType = huifuMchCheck.value.cardType;
      }
    });
    // 提交审核
    const submitCheck = async () => {
      if (certBackPic.value == null) {
        Toast("请上传身份证正面照片");
        return;
      } else if (certFrontPic.value == null) {
        Toast("请上传身份证背面照片");
        return;
      }
      if (addParams.cardType == '1') {
        if (cardFrontPic.value == null) {
          Toast("请上传结算卡正面照片");
          return;
        }
      } else {
        if (licensePic.value == null) {
          Toast("请上传营业执照照片");
          return;
        }
        if (regAcctPic.value == null) {
          Toast("请上传开户许可证照片");
          return;
        }
      }

      const { data } = await submitHuifuCheck(addParams);
      if (data.code == "00000") {
        console.log(data);
        Toast.success(t('huifuMch.submittedSuccessfully'));
        setTimeout(() => {
          router.go(0);
        }, 1500);
      } else {
        Toast.fail(`${t('huifuMch.submitFailed')} ${data.message}`);
      }
    }
    // 跳转到修改页面
    const updateHuifu = async () => {
      router.push("/huifuMchEdit");
    }
    // 跳转到上传图片页面
    const upload = async () => {
      router.push("/upload");
    }

    // 提交审核表单
    const onSubmit = async () => {
      console.log('onSubmit', addParams);
      saveHuifuMchFun();
    };
    const saveHuifuMchFun = async () => {
      const { data } = await saveHuifuMch(addParams);
      if (data.code === "00000") {
        Toast.success(t('huifuMch.submittedSuccessfully'));
        setTimeout(() => {
          router.go(0);
        }, 1500);
      } else {
        Toast.fail(`${t('huifuMch.submitFailed')} ${data.message}`);
      }
      console.log("onSubmit", data);
    };
    return {
      ...toRefs(addParams),
      onSubmit,
      showStatus,
      businessAddress,
      bankAddress,
      registeredAddress,
      huifuMchCheck,
      areaList,

      beginDateLicense,
      endDateLicense,
      companyFoundDate,
      beginDate,
      endDate,

      showArea,
      showBankAddress,
      showReAddress,
      showBeginDateLicense,
      showEndDateLicense,
      showFoundDate,
      showBeginDate,
      showEndDate,

      onConfirm,
      onConfirmBankAddress,
      onConfirmReAddress,
      onConfirmBeginDateLicense,
      onConfirmEndDateLicense,
      onConfirmFoundDate,
      onConfirmBeginDate,
      onConfirmEndDate,

      minDate: new Date(2000, 0, 1),
      maxDate: new Date(2035, 11, 31),
      licensePic,
      regAcctPic,
      certBackPic,
      certFrontPic,
      upLicensePic,
      upRegAcctPic,
      upCertBackPic,
      upCertFrontPic,
      upCardFrontPic,
      cardFrontPic,
      submitCheck,
      onOversize,
      updateHuifu,
      upload,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../common/style/common.less";
@import "./index.less";
</style>