front/front-vue/src/views/system/company/certification.vue

<template>
  <div class="myaqlDeploy">
    <!-- <div class="deplouTitle" style="margin-top: 3%; margin-bottom: 4%">
      <span style="margin-left: 6%">申请人:<span>翟鸡毛</span></span>
      <span style="margin-left: 8%">申请时间:</span><span>2021/8/17</span>
      <span></span>
    </div> -->
    <div class="deployBox">
      <el-steps align-center :active="active" show-icon finish-status="success">
        <el-step title="提交证件资料"></el-step>
        <el-step title="绑定对公账户"></el-step>
        <el-step title="打款验证"></el-step>
        <el-step title="实名审核"></el-step>
      </el-steps>
      <div class="basicInfo" v-if="active === 0">
        <el-container>
          <el-main>
            <el-row class="substance">
              <h4>资料准备：</h4>
              <p>1.统一社会信用代码证；</p>
              <p>2.企业法人身份证件；</p>
              <p>
                3.管理员身份证件：即当前经办人员身份证件，管理员与企业法人不是同一人时，需提供管理员身份证件，管理员将负责贵司账号的管理及操作员账号管理；
              </p>
              <p>
                4.管理员授权委托书：管理员与法人不是同一人时，需
                下载授权委托书模板并根据要求填写内容，加盖公章后上传，当前账户的小米ID为2345548738；
              </p>
              <p>
                5.CFCA数字证书申请表：需下载机构数字证书申请表模板并根据要求填写内容，加盖公章后上传。
              </p>
              <h4>资料上传要求：</h4>
              <p>
                1.
                营业执照及身份证请上传最新证件原件的彩色扫描件，如使用复印件请加盖公章上传；
              </p>
              <p>
                2. 图片支持格式：jpg /jpeg /png /bmp格式，图片大小不超过20M；
              </p>
              <p>
                3.
                经微信传输过的图片会导致图片失真，请避免使用经微信传输过的图片；
              </p>
              <p>
                4.
                上传图片后，系统将自动识别并填写相关信息，请核对系统识别结果是否准确；
              </p>
              <p>
                5.
                请一并准备证件盖章复印件，与开通单项业务时需提交的增信资料统一邮寄。
              </p>
            </el-row>
            <el-row style="margin-top: 3%">
              <span style="font-size: 14px"
                ><span class="separation"></span>营业执照</span
              ><span>(请您按下面流程进行操作)</span
              ><span style="color: #005cff">请核对系统识别结果是否正确</span>
            </el-row>
          </el-main>
          <el-container>
            <el-aside style="background-color: #fff">
              <el-upload
                class="ying"
                ref="upload"
                :class="{ uoloadSty: showBtnImg, disUoloadSty: yyzzBtnImg }"
                action=""
                accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
                :http-request="yyzzRequest"
                :on-preview="handlePictureCardPreview"
                :on-remove="beforeRemove"
                :on-change="dealImgChange"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                list-type="picture-card"
                :file-list="yyzzList"
                :auto-upload="true"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >点击选择</el-button
                >
              </el-upload>
              <!-- <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
                @click="submitUpload"
                >上传到服务器</el-button
              > -->
            </el-aside>
            <el-main>
              <el-row>
                <el-col :span="8" style="text-align: right; line-height: 35px"
                  >公司名称:
                </el-col>
                <el-col :span="16">
                  <el-input
                    v-model="form.scyName"
                    placeholder="请输入公司名称"
                    style="width: 40%"
                    maxlength="15"
                  ></el-input>
                </el-col>
              </el-row>
              <el-row style="margin-top: 2%">
                <el-col :span="8" style="text-align: right; line-height: 35px"
                  ><span style="width: 50px">统一社会信用代码/营业执照号:</span>
                </el-col>
                <el-col :span="16">
                  <el-input
                    v-model="form.scySocialCode"
                    placeholder="请输入统一社会信用代码"
                    maxlength="18"
                    style="width: 40%"
                  ></el-input>
                </el-col>
              </el-row>
              <el-row style="margin-top: 2%">
                <el-col :span="8" style="text-align: right; line-height: 35px"
                  >住所地:
                </el-col>
                <el-col :span="16">
                  <el-input
                    v-model="form.scyAddress"
                    placeholder="请输入住所地"
                    style="width: 40%"
                    maxlength="15"
                  ></el-input>
                </el-col>
              </el-row>
              <el-row style="margin-top: 2%">
                <el-col :span="8" style="text-align: right; line-height: 35px"
                  >法定代表人:
                </el-col>
                <el-col :span="16">
                  <el-input
                    v-model="form.scyLegal"
                    placeholder="请输入法定代表人"
                    style="width: 40%"
                    maxlength="15"
                  ></el-input>
                </el-col>
              </el-row>
              <el-row style="margin-top: 2%">
                <el-col :span="8" style="text-align: right; line-height: 35px"
                  >注册资本:
                </el-col>
                <el-col :span="16">
                  <el-input
                    v-model="form.scyRegisteredCapital"
                    placeholder="请输入注册资本"
                    style="width: 40%"
                    maxlength="15"
                  ></el-input>
                </el-col>
              </el-row>
              <el-row style="margin-top: 2%">
                <el-col :span="8" style="text-align: right; line-height: 35px"
                  ><span class="demonstration">成立时间:</span>
                </el-col>
                <el-col :span="16">
                  <div class="block">
                    <!-- <el-date-picker
                      v-model="form.scyStartTime"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="pickerOptions"
                    >
                    </el-date-picker> -->
                    <el-date-picker
                      v-model="form.scyStartTime"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择成立时间"
                      style="width: 206px"
                      type="date"
                    ></el-date-picker>
                  </div>
                </el-col>
              </el-row>
              <el-row style="margin-top: 2%">
                <el-col :span="8" style="text-align: right; line-height: 35px">
                  <span class="demonstration">营业期限(止): </span>
                </el-col>
                <el-col :span="16">
                  <div class="block">
                    <!-- <el-date-picker
                      v-model="form.scyEndTime"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="pickerOptions"
                    >
                    </el-date-picker> -->
                    <el-date-picker
                      v-if="!term"
                      :disabled="term"
                      :clearable="false"
                      v-model="form.scyEndTime"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择营业期限"
                      type="date"
                      style="width: 206px"
                    ></el-date-picker>
                    <el-date-picker
                      v-if="term"
                      :disabled="term"
                      :clearable="false"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择营业期限"
                      type="date"
                      style="width: 206px"
                    ></el-date-picker>
                    <el-checkbox v-model="term">长期有效</el-checkbox>
                  </div>
                </el-col>
              </el-row>
              <el-row style="margin-top: 2%">
                <el-col :span="8" style="text-align: right; line-height: 35px"
                  >企业电话:
                </el-col>
                <el-col :span="16">
                  <el-input
                    v-model="form.scyPhone"
                    placeholder="请输入企业电话"
                    style="width: 40%"
                    maxlength="15"
                  ></el-input>
                </el-col>
              </el-row>
            </el-main>
          </el-container>
          <el-main>
            <el-row style="margin-top: 3%">
              <span style="font-size: 14px"
                ><span class="separation"></span>法定代表人身份证件</span
              ><span>(请按照要求上传法定代表人身份证证件图片)</span
              ><span style="color: #005cff">请核对系统识别结果是否正确</span
              ><el-checkbox v-model="legalHandle">法人亲办</el-checkbox>
            </el-row>
            <el-container>
              <el-aside width="220px" style="background-color: #fff">
                <span style="font-size: 14px"
                  ><span class="separation"></span>身份证人像面</span
                >
                <el-upload
                  ref="fsfzzload"
                  class="upload-demo"
                  action=""
                  :class="{ fsfzzUoload: showBtnImg, Uoloadfsfzz: fsfzzBtnImg }"
                  :on-change="fsfzzImgChange"
                  accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
                  :http-request="fsfzzRequest"
                  :on-preview="fsfzzPictureCardPreview"
                  :on-remove="fsfzzRemove"
                  multiple
                  :limit="1"
                  :on-exceed="fsfzzExceed"
                  list-type="picture-card"
                  :file-list="fsfzzList"
                  :auto-upload="true"
                >
                  <el-button slot="trigger" size="small" type="primary"
                    >点击选择</el-button
                  >
                </el-upload>
                <!-- <el-button
                  style="margin-left: 10px"
                  size="small"
                  type="success"
                  @click="fsfzzUpload"
                  >上传到服务器</el-button
                > -->
                <span style="font-size: 14px"
                  ><span class="separation"></span>身份证国徽面</span
                >
                <el-upload
                  ref="fsfzfload"
                  class="upload-demo"
                  action=""
                  :class="{
                    uoloadfsfzf: showBtnImg,
                    fsfzfUoloadSty: fsfzfBtnImg,
                  }"
                  :on-change="fsfzfImgChange"
                  accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
                  :http-request="fsfzfRequest"
                  :on-preview="fsfzfPictureCardPreview"
                  :on-remove="fsfzfRemove"
                  multiple
                  :limit="1"
                  :on-exceed="fsfzfExceed"
                  list-type="picture-card"
                  :file-list="fsfzfList"
                  :auto-upload="true"
                >
                  <el-button slot="trigger" size="small" type="primary"
                    >点击选择</el-button
                  >
                </el-upload>
                <!-- <el-button
                  style="margin-left: 10px"
                  size="small"
                  type="success"
                  @click="fsfzfUpload"
                  >上传到服务器</el-button
                > -->
              </el-aside>

              <el-main>
                <el-row>
                  <el-col :span="8" style="text-align: right; line-height: 35px"
                    >姓名:
                  </el-col>
                  <el-col :span="16">
                    <el-input
                      v-model="form.scyLegal"
                      placeholder="请输入姓名"
                      style="width: 60%"
                      maxlength="15"
                    ></el-input>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 2%">
                  <el-col :span="8" style="text-align: right; line-height: 35px"
                    >身份证号:
                  </el-col>
                  <el-col :span="16">
                    <el-input
                      v-model="form.scyLegalId"
                      placeholder="请输入身份证号"
                      style="width: 60%"
                      maxlength="20"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-main>
            </el-container>
          </el-main>
          <el-main v-show="legalHandle == false">
            <el-row style="margin-top: 3%">
              <span style="font-size: 14px"
                ><span class="separation"></span>账号管理员身份证件</span
              ><span>(请按照要求上传经办人身份证证件图片)</span
              ><span style="color: #005cff">请核对系统识别结果是否正确</span>
            </el-row>
            <el-container>
              <el-aside width="220px" style="background-color: #fff">
                <span style="font-size: 14px"
                  ><span class="separation"></span>身份证人像面</span
                >
                <el-upload
                  ref="jsfzzload"
                  class="upload-demo"
                  action=""
                  :class="{
                    uoloadjsfzz: showBtnImg,
                    jsfzzUoloadSty: jsfzzBtnImg,
                  }"
                  :on-change="jsfzzImgChange"
                  accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
                  :http-request="jsfzzRequest"
                  :on-preview="jsfzzPictureCardPreview"
                  :on-remove="jsfzzRemove"
                  multiple
                  :limit="1"
                  :on-exceed="jsfzzExceed"
                  list-type="picture-card"
                  :file-list="jsfzzList"
                  :auto-upload="true"
                >
                  <el-button slot="trigger" size="small" type="primary"
                    >点击选择</el-button
                  >
                </el-upload>
                <!-- <el-button
                  style="margin-left: 10px"
                  size="small"
                  type="success"
                  @click="jsfzzUpload"
                  >上传到服务器</el-button
                > -->
                <span style="font-size: 14px"
                  ><span class="separation"></span>身份证国徽面</span
                >
                <el-upload
                  ref="jsfzfload"
                  class="upload-demo"
                  action=""
                  :class="{
                    uoloadjsfzf: showBtnImg,
                    jsfzfUoloadSty: jsfzfBtnImg,
                  }"
                  :on-change="jsfzfImgChange"
                  accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
                  :http-request="jsfzfRequest"
                  :on-preview="jsfzfPictureCardPreview"
                  :on-remove="jsfzfRemove"
                  multiple
                  :limit="1"
                  :on-exceed="jsfzfExceed"
                  list-type="picture-card"
                  :file-list="jsfzfList"
                  :auto-upload="true"
                >
                  <el-button slot="trigger" size="small" type="primary"
                    >点击选择</el-button
                  >
                </el-upload>
                <!-- <el-button
                  style="margin-left: 10px"
                  size="small"
                  type="success"
                  @click="jsfzfUpload"
                  >上传到服务器</el-button
                > -->
              </el-aside>
              <el-main>
                <el-row>
                  <el-col :span="8" style="text-align: right; line-height: 35px"
                    >姓名:
                  </el-col>
                  <el-col :span="16">
                    <el-input
                      v-model="form.handler"
                      placeholder="请输入姓名"
                      style="width: 60%"
                      maxlength="20"
                    ></el-input>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 2%">
                  <el-col :span="8" style="text-align: right; line-height: 35px"
                    >身份证号:
                  </el-col>
                  <el-col :span="16">
                    <el-input
                      v-model="form.handlerCard"
                      placeholder="请输入身份证号"
                      style="width: 60%"
                      maxlength="20"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-main>
            </el-container>
          </el-main>
          <el-main>
            <el-row style="margin-top: 3%">
              <span style="font-size: 14px"
                ><span class="separation"></span>人员信息</span
              >
            </el-row>
            <el-row v-if="legalHandle">
              <el-col :span="12"
                >复核人员:<el-input
                  v-model="form.scyLegal"
                  placeholder="请输入复核人员"
                  style="width: 45%"
                  maxlength="20"
                ></el-input>
              </el-col>
              <el-col :span="12"
                >联系电话：<el-input
                  v-model="form.phone"
                  placeholder="请输入联系电话"
                  style="width: 45%"
                  maxlength="20"
                ></el-input>
              </el-col>
            </el-row>
            <el-row v-if="!legalHandle">
              <el-col :span="12"
                >复核人员:<el-input
                  v-model="form.handler"
                  placeholder="请输入复核人员"
                  style="width: 45%"
                  maxlength="20"
                ></el-input>
              </el-col>
              <el-col :span="12"
                >联系电话：<el-input
                  v-model="form.phone"
                  placeholder="请输入联系电话"
                  style="width: 45%"
                  maxlength="20"
                ></el-input>
              </el-col>
            </el-row>
            <el-row style="margin-top: 3%">
              <el-col :span="12"
                >业务操作员：<el-input
                  v-model="form.operator"
                  placeholder="请输入业务操作员"
                  style="width: 45%"
                  maxlength="20"
                ></el-input>
              </el-col>
              <el-col :span="12"
                >联系电话：<el-input
                  v-model="form.number"
                  placeholder="请输入联系电话"
                  style="width: 45%"
                  maxlength="20"
                ></el-input>
              </el-col>
            </el-row>
          </el-main>
          <el-main>
            <el-row style="margin-top: 3%" v-if="!legalHandle">
              <span style="font-size: 14px"
                ><span class="separation"></span>法人授权书：</span
              >
            </el-row>
            <el-upload
              v-if="!legalHandle"
              ref="frsqsload"
              class="upload-demo"
              action=""
              :class="{ uoloadfrsqs: showBtnImg, frsqsUoloadSty: frsqsBtnImg }"
              :on-change="frsqsImgChange"
              accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
              :http-request="frsqsRequest"
              :on-preview="frsqsPictureCardPreview"
              :on-remove="frsqsRemove"
              multiple
              :limit="1"
              :on-exceed="frsqsExceed"
              list-type="picture-card"
              :file-list="frsqsList"
              :auto-upload="true"
            >
              <el-button slot="trigger" size="small" type="primary"
                >点击选择</el-button
              >
            </el-upload>
            <!-- <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="frsqsUpload"
              >上传到服务器</el-button
            > -->
          </el-main>
          <el-main>
            <el-row style="margin-top: 3%">
              <span style="font-size: 14px"
                ><span class="separation"></span>数字证书授权与承诺书:</span
              >
            </el-row>
            <el-upload
              ref="szzssqload"
              class="upload-demo"
              action=""
              :class="{
                uoloadszzssq: showBtnImg,
                szzssqUoloadSty: szzssqBtnImg,
              }"
              :on-change="szzssqImgChange"
              accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
              :http-request="szzssqRequest"
              :on-preview="szzssqPictureCardPreview"
              :on-remove="szzssqRemove"
              multiple
              :limit="1"
              :on-exceed="szzssqExceed"
              list-type="picture-card"
              :file-list="szzssqList"
              :auto-upload="true"
            >
              <el-button slot="trigger" size="small" type="primary"
                >点击选择</el-button
              >
            </el-upload>
            <!-- <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="szzssqUpload"
              >上传到服务器</el-button
            > -->
          </el-main>
          <el-main>
            <el-row style="margin-top: 3%">
              <span style="font-size: 14px"
                ><span class="separation"></span>其他附件上传：</span
              >
            </el-row>
            <el-row>
              <el-upload
                ref="qtfjload"
                class="upload-demo"
                action=""
                :class="{ uoloadqtfj: showBtnImg, qtfjUoloadSty: qtfjBtnImg }"
                :on-change="qtfjImgChange"
                accept=".jpg, .jpeg, .png, .JPG, .JPEG, .PNG"
                :http-request="qtfjRequest"
                :on-preview="qtfjPictureCardPreview"
                :on-remove="qtfjRemove"
                multiple
                :limit="1"
                :on-exceed="qtfjExceed"
                list-type="picture-card"
                :file-list="qtfjList"
                :auto-upload="true"
              >
                <el-button slot="trigger" size="small" type="primary"
                  >点击选择</el-button
                >
              </el-upload>
              <!-- <el-button
                style="margin-left: 10px"
                size="small"
                type="success"
                @click="qtfjUpload"
                >上传到服务器</el-button
              > -->
            </el-row>
          </el-main>

          <el-footer>
            <el-checkbox v-model="confirm">我已阅读并同意</el-checkbox
            ><a @click="handle">《xxxxxxxx融信协议》</a>
          </el-footer>
        </el-container>
        <el-dialog :visible.sync="yyzzVisible">
          <img width="100%" :src="yyzzImageUrl" alt="" />
        </el-dialog>
        <el-dialog :visible.sync="fsfzzVisible">
          <img width="100%" :src="fsfzzImageUrl" alt="" />
        </el-dialog>
        <el-dialog :visible.sync="fsfzfVisible">
          <img width="100%" :src="fsfzfImageUrl" alt="" />
        </el-dialog>
        <el-dialog :visible.sync="jsfzzVisible">
          <img width="100%" :src="jsfzzImageUrl" alt="" />
        </el-dialog>
        <el-dialog :visible.sync="jsfzfVisible">
          <img width="100%" :src="jsfzfImageUrl" alt="" />
        </el-dialog>
        <el-dialog :visible.sync="frsqsVisible">
          <img width="100%" :src="frsqsImageUrl" alt="" />
        </el-dialog>
        <el-dialog :visible.sync="szzssqVisible">
          <img width="100%" :src="szzssqImageUrl" alt="" />
        </el-dialog>
        <el-dialog :visible.sync="qtfjVisible">
          <img width="100%" :src="qtfjImageUrl" alt="" />
        </el-dialog>
      </div>
      <div class="basicInfo" v-if="active === 1">
        <el-container>
          <el-main>
            <el-row>
              <el-col :span="8"
                >银行开户名称:<el-input
                  v-model="form.scyName"
                  placeholder="请输入银行开户名称"
                  :disabled="disabled"
                  style="width: 65%"
                  maxlength="20"
                ></el-input>
              </el-col>
              <el-col :span="8"
                >开户银行:
                <el-select
                  v-model="form.pbaiBankName"
                  filterable
                  clearable
                  remote
                  reserve-keyword
                  placeholder="请选择银行姓名"
                  :remote-method="getBankList"
                >
                  <el-option
                    v-for="(item, index) in bankList"
                    :key="index"
                    :label="item.zcbiBankName"
                    :value="item.zcbiBankName"
                  >
                  </el-option>
                </el-select>
              </el-col>
              <el-col :span="8"
                >银行账号:<el-input
                  v-model="form.pbaiBankaccountId"
                  placeholder="请输入银行账号"
                  style="width: 65%"
                  maxlength="25"
                ></el-input>
              </el-col>
            </el-row>
          </el-main>
          <el-footer> </el-footer>
        </el-container>
      </div>
      <div class="basicInfo" v-if="active === 2">
        <el-container>
          <el-main>
            <el-row>
              <el-col :span="8"
                >打款金额(元):<el-input
                  v-model="form.amount"
                  placeholder="请输入打款金额(元)"
                  style="width: 65%"
                  maxlength="4"
                ></el-input>
              </el-col>
              <el-col :span="8"
                ><span style="color: red"
                  >打款金额有效期为三天，超过三天后重新打款</span
                >
              </el-col>
            </el-row>
          </el-main>
          <el-footer> </el-footer>
        </el-container>
      </div>
      <div class="basicInfo" v-if="active === 3">
        <el-container>
          <el-main>
            <el-row>
              <el-col :span="8" v-if="legalHandle"
                >经办人姓名:<el-input
                  v-model="form.scyLegal"
                  placeholder="请输入经办人姓名"
                  style="width: 62%"
                  :disabled="disabled"
                  maxlength="20"
                ></el-input>
              </el-col>
              <el-col :span="8" v-if="!legalHandle"
                >经办人姓名:<el-input
                  v-model="form.handler"
                  placeholder="请输入经办人姓名"
                  style="width: 62%"
                  :disabled="disabled"
                  maxlength="20"
                ></el-input>
              </el-col>
              <el-col :span="8" v-if="legalHandle"
                >身份证号码：<el-input
                  v-model="form.scyLegalId"
                  :disabled="disabled"
                  placeholder="请输入内容"
                  style="width: 62%"
                ></el-input>
              </el-col>
              <el-col :span="8" v-if="!legalHandle"
                >身份证号码：<el-input
                  v-model="form.handlerCard"
                  :disabled="disabled"
                  placeholder="请输入内容"
                  style="width: 62%"
                ></el-input>
              </el-col>
              <el-col :span="8"
                >手机号：<el-input
                  v-model="form.phone"
                  :disabled="disabled"
                  placeholder="请输入内容"
                  style="width: 62%"
                ></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" style="margin-top: 3%; margin-left: 2%"
                >验证码:<el-input
                  v-model="form.code"
                  placeholder="请输入内容"
                  style="width: 62%"
                ></el-input>
                <el-button
                  type="primary"
                  @click="submitForm"
                  v-if="!verification"
                  >获取验证码</el-button
                >
                <el-button v-if="verification">{{ count }}秒后重试</el-button>
              </el-col>
            </el-row>
          </el-main>
          <el-footer> </el-footer>
        </el-container>
      </div>

      <div class="deployBtn">
        <el-button
          style="float: right; margin-top: 12px; margin-right: 1%"
          @click="next"
          v-if="active == 0 || active == 1 || active == 2"
          >下一步</el-button
        >
        <el-button
          style="float: right; margin-top: 12px; margin-right: 1%"
          v-if="active == 2"
          @click="step"
          >上一步</el-button
        >
        <el-button
          style="float: right; margin-top: 12px"
          v-if="active == 2"
          @click="preservation"
          >保存</el-button
        >
        <el-button
          style="float: right; margin-top: 12px; margin-right: 1%"
          v-if="active == 3"
          @click="next"
          >提交</el-button
        >
      </div>
    </div>
    <!-- 合同 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getlicense,
  getCard,
  addAuthentication,
  addAccount,
  addVerification,
  verification,
  addCode,
  cashBack,
  listBank,
} from "@/api/system/authentication";
import { uploadFileNew } from "@/api/common/file";
import { getToken, removeToken } from "@/utils/auth";
import { getRepeatToken } from "@/utils/common";
export default {
  name: "GoodsAdd",
  data() {
    return {
      codeShow: true, //判断显示隐藏
      count: "", //显示时的文字内容
      timer: null,
      // 表单参数
      form: {},
      //法人经办
      legalHandle: false,
      //是否长期
      term: false,
      //是否确认
      confirm: false,
      //无法输入
      disabled: true,
      //验证码
      verification: false,
      // 完成跳转
      redirect: undefined,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //银行
      bankList: [],
      yyzzImageUrl: "",
      yyzzVisible: false,
      fsfzzImageUrl: "",
      fsfzzVisible: false,
      fsfzfImageUrl: "",
      fsfzfVisible: false,
      jsfzzImageUrl: "",
      jsfzzVisible: false,
      jsfzfImageUrl: "",
      jsfzfVisible: false,
      frsqsImageUrl: "",
      frsqsVisible: false,
      szzssqImageUrl: "",
      szzssqVisible: false,
      qtfjImageUrl: "",
      qtfjVisible: false,

      showBtnImg: false,
      noneBtnImg: false,
      yyzzBtnImg: false,
      fsfzzBtnImg: false,
      fsfzfBtnImg: false,
      jsfzzBtnImg: false,
      jsfzfBtnImg: false,
      frsqsBtnImg: false,
      szzssqBtnImg: false,
      qtfjBtnImg: false,
      limitCountImg: 1,

      contractNodeList: [],
      yyzzList: [],
      fsfzzList: [],
      fsfzfList: [],
      jsfzzList: [],
      jsfzfList: [],
      frsqsList: [],
      szzssqList: [],
      qtfjList: [],
      fileList: [{}],
      imageUrl: "",
      tabPosition: "left",
      active: 0,
      establish: "",
      amount: "",
      input: "",
      corporate: "",
      Bank: "",
      number: "",
      operator: "",
      Phone: "",
      reviewer: "",
      Cad: "",
      name: "",
      namea: "",
      umber: "",
      telephone: "",
      domicile: "",
      capital: "",
      representative: "",
      credit: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
        ],
      },
      value1: "",
      value2: "",
      value3: "",
      repeatToken: getRepeatToken(),
    };
  },
  created() {
    this.getList();
    this.getBankList();
  },
  methods: {
    // 表单重置
    reset() {
      this.form = {
        ssName: null,
        ssEmail: null,
        ssPhone: null,
        ssType: null,
        ssJobNum: null,
        ssSiteCompany: null,
        ssSiteDept: null,
        ssPlace: null,
        ssCurrentSalary: null,
        ssProjectManager: null,
        ssCurrentLevel: null,
        ssNation: null,
        ssBirthDate: null,
        ssPolitics: null,
        ssNative: null,
        ssWorkAddress: null,
        ssFamilyAddress: null,
        ssCardId: null,
        ssExpireDate: null,
        ssMarry: null,
        ssEntryDate: null,
        ssQuitDate: null,
        ssCollegesType: null,
        ssFinishSchool: null,
        ssMajor: null,
        ssEducation: null,
        ssDegree: null,
        ssContacts: null,
        ssContactsPhone: null,
        ssBankAcc: null,
        ssBank: null,
        ssState: null,
        roleIds: null,
        ssDeptId: null,
      };

      this.noneBtnImg = false;
      this.yyzzBtnImg = false;
      this.fsfzzBtnImg = false;
      this.fsfzfBtnImg = false;
      this.jsfzzBtnImg = false;
      this.jsfzfBtnImg = false;
      this.frsqsBtnImg = false;
      this.szzssqBtnImg = false;
      this.stfjBtnImg = false;
      this.contractNodeList = [];
      this.yyzzList = [];
      this.fsfzzList = [];
      this.fsfzfList = [];
      this.jsfzzList = [];
      this.jsfzfList = [];
      this.frsqsList = [];
      this.szzssqList = [];
      this.resetForm("form");
    },
    /** 查询企业状态 */
    getList() {
      cashBack()
        .then((response) => {
          if (response.data) {
            this.form = response.data.list;
            if (response.data.list.scyEndTime != null) {
              if (
                response.data.list.scyEndTime == "长期" ||
                response.data.list.scyEndTime == "永久"
              ) {
                this.term = true;
              }
            }
            if (response.data.yyzzUrl) {
              this.yyzzList.push({
                name: "营业执照",
                url: response.data.yyzzUrl + "/" + getToken(),
              });
              this.yyzzBtnImg = true;
            }
            if (response.data.fsfzzUrl) {
              this.fsfzzList.push({
                name: "法人身份证人像面",
                url: response.data.fsfzzUrl + "/" + getToken(),
              });
              this.fsfzzBtnImg = true;
            }
            if (response.data.fsfzzUrl) {
              this.fsfzfList.push({
                name: "法人身份证国徽面",
                url: response.data.fsfzfUrl + "/" + getToken(),
              });
              this.fsfzfBtnImg = true;
            }
            if (response.data.frsqsUrl) {
              this.frsqsList.push({
                name: "法人授权书",
                url: response.data.frsqsUrl + "/" + getToken(),
              });
              this.frsqsBtnImg = true;
            }
            if (response.data.szzssqUrl) {
              this.szzssqList.push({
                name: "数字证书授权与承诺书",
                url: response.data.szzssqUrl + "/" + getToken(),
              });
              this.szzssqBtnImg = true;
            }
            if (response.data.qtfjUrl) {
              this.qtfjList.push({
                name: "其他附件",
                url: response.data.qtfjUrl + "/" + getToken(),
              });
              this.qtfjBtnImg = true;
            }
            if (response.data.jsfzzUrl) {
              this.jsfzzList.push({
                name: "经办人身份证人像面",
                url: response.data.jsfzzUrl + "/" + getToken(),
              });
              this.jsfzzBtnImg = true;
            }
            if (response.data.jsfzfUrl) {
              this.jsfzfList.push({
                name: "经办人身份证国徽面",
                url: response.data.jsfzfUrl + "/" + getToken(),
              });
              this.jsfzfBtnImg = true;
            }
            if (response.data.userCompany) {
              this.$set(
                this.form,
                "handlerCard",
                response.data.userCompany[0].sucrCard
              );
            }
            if (response.data.user) {
              this.$set(this.form, "phone", response.data.user.userName);
              if (response.data.user.nickName == response.data.list.scyLegal) {
                this.legalHandle = true;
              }
              this.$set(this.form, "handler", response.data.user.nickName);
            }
            if (response.data.list.scyStatus == "03") {
                    this.active = 1;
            } else if (response.data.list.scyStatus == "04") {
              this.$set(
                this.form,
                "pbaiBankaccountId",
                response.data.data[0].pbaiBankaccountId
              );
              this.$set(
                this.form,
                "pbaiBankName",
                response.data.data[0].pbaiBankName
              );
              this.$set(this.form, "phone", response.data.user.userName);
              this.$set(this.form, "handler", response.data.user.nickName);
              this.$set(
                this.form,
                "handlerCard",
                response.data.userCompany[0].sucrCard
              );
              if (response.data) {
              }
              this.active = 2;
            } else if (response.data.list.scyStatus == "05") {
              this.$set(this.form, "phone", response.data.user.userName);
              this.$set(this.form, "handler", response.data.user.nickName);
              this.$set(
                this.form,
                "handlerCard",
                response.data.userCompany[0].sucrCard
              );
              this.active = 3;
            }
          }
        })
        .catch((response) => {
          if (response == "Error: 登录状态已过期") {
            this.$router.push({ path: this.redirect || "/" });
          }
        });
    },
    //查询银行名称
    getBankList(pbaiBankName) {
      this.queryParams.pbaiBankName = pbaiBankName;
      listBank(this.queryParams).then((response) => {
        this.bankList = response.data;
      });
    },
    //文件移除提示
    beforeRemove(file, yyzzList) {
      for (let i = 0; i < this.yyzzList.length; i++) {
        if (file.uid == this.yyzzList[i].uid) {
          this.yyzzList.splice(i, 1);
          break;
        }
      }
      this.yyzzBtnImg = yyzzList.length >= this.limitCountImg;
    },
    handleExceed(file, yyzzList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    fsfzzRemove(file, fsfzzList) {
      for (let i = 0; i < this.fsfzzList.length; i++) {
        if (file.uid == this.fsfzzList[i].uid) {
          this.fsfzzList.splice(i, 1);
          break;
        }
      }
      this.fsfzzBtnImg = fsfzzList.length >= this.limitCountImg;
    },
    fsfzzExceed(file, fsfzzList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    fsfzfRemove(file, fsfzfList) {
      for (let i = 0; i < this.fsfzfList.length; i++) {
        if (file.uid == this.fsfzfList[i].uid) {
          this.fsfzfList.splice(i, 1);
          break;
        }
      }
      this.fsfzfBtnImg = fsfzfList.length >= this.limitCountImg;
    },
    fsfzfExceed(file, fsfzfList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    jsfzzRemove(file, jsfzzList) {
      for (let i = 0; i < this.jsfzzList.length; i++) {
        if (file.uid == thisjsfzzList[i].uid) {
          this.jsfzzList.splice(i, 1);
          break;
        }
      }
      this.jsfzzBtnImg = jsfzzList.length >= this.limitCountImg;
    },
    jsfzzExceed(file, jsfzzList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    jsfzfRemove(file, jsfzfList) {
      for (let i = 0; i < this.jsfzfList.length; i++) {
        if (file.uid == this.jsfzfList[i].uid) {
          this.jsfzfList.splice(i, 1);
          break;
        }
      }
      this.jsfzfBtnImg = jsfzfList.length >= this.limitCountImg;
    },
    jsfzfExceed(file, jsfzfList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    frsqsRemove(file, frsqsList) {
      for (let i = 0; i < this.frsqsList.length; i++) {
        if (file.uid == this.frsqsList[i].uid) {
          this.frsqsList.splice(i, 1);
          break;
        }
      }
      this.frsqsBtnImg = frsqsList.length >= this.limitCountImg;
    },
    frsqsExceed(file, frsqsList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    szzssqRemove(file, szzssqList) {
      for (let i = 0; i < this.szzssqList.length; i++) {
        if (file.uid == this.szzssqList[i].uid) {
          this.szzssqList.splice(i, 1);
          break;
        }
      }
      this.szzssqBtnImg = szzssqList.length >= this.limitCountImg;
    },
    szzssqExceed(file, yyzzList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },

    qtfjRemove(file, qtfjList) {
      for (let i = 0; i < this.qtfjList.length; i++) {
        if (file.uid == this.qtfjList[i].uid) {
          this.qtfjList.splice(i, 1);
          break;
        }
      }
      this.qtfjBtnImg = qtfjList.length >= this.limitCountImg;
    },
    qtfjExceed(file, qtfjList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.yyzzImageUrl = file.url;
      this.yyzzVisible = true;
    },
    fsfzzPictureCardPreview(file) {
      this.fsfzzImageUrl = file.url;
      this.fsfzzVisible = true;
    },
    fsfzfPictureCardPreview(file) {
      this.fsfzfImageUrl = file.url;
      this.fsfzfVisible = true;
    },
    jsfzzPictureCardPreview(file) {
      this.jsfzzImageUrl = file.url;
      this.jsfzzVisible = true;
    },
    jsfzfPictureCardPreview(file) {
      this.jsfzfImageUrl = file.url;
      this.jsffzVisible = true;
    },
    frsqsPictureCardPreview(file) {
      this.frsqsImageUrl = file.url;
      this.frsqsVisible = true;
    },
    szzssqPictureCardPreview(file) {
      this.szzssqImageUrl = file.url;
      this.szzssqVisible = true;
    },
    qtfjPictureCardPreview(file) {
      this.qtfjImageUrl = file.url;
      this.qtfjVisible = true;
    },
    dealImgChange(file, yyzzList) {
      this.yyzzBtnImg = yyzzList.length >= this.limitCountImg;
    },
    fsfzzImgChange(file, fsfzzList) {
      this.fsfzzBtnImg = fsfzzList.length >= this.limitCountImg;
    },
    fsfzfImgChange(file, fsfzfList) {
      this.fsfzfBtnImg = fsfzfList.length >= this.limitCountImg;
    },
    jsfzzImgChange(file, jsfzzList) {
      this.jsfzzBtnImg = jsfzzList.length >= this.limitCountImg;
    },
    jsfzfImgChange(file, jsfzfList) {
      this.jsfzfBtnImg = jsfzfList.length >= this.limitCountImg;
    },
    frsqsImgChange(file, frsqsList) {
      this.frsqsBtnImg = frsqsList.length >= this.limitCountImg;
    },
    szzssqImgChange(file, szzssqList) {
      this.szzssqBtnImg = szzssqList.length >= this.limitCountImg;
    },
    qtfjImgChange(file, qtfjList) {
      this.qtfjBtnImg = qtfjList.length >= this.limitCountImg;
    },

    //营业执照上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    //法人身份证正面上传
    fsfzzUpload() {
      this.$refs.fsfzzload.submit();
    },
    //法人身份证反面上传
    fsfzfUpload() {
      this.$refs.fsfzfload.submit();
    },
    //经办人身份证正面上传
    jsfzzUpload() {
      this.$refs.jsfzzload.submit();
    },
    //经办人身份证反面上传
    jsfzfUpload() {
      this.$refs.jsfzfload.submit();
    },
    //法人授权书上传
    frsqsUpload() {
      this.$refs.frsqsload.submit();
    },
    //数字证书授权上传
    szzssqUpload() {
      this.$refs.szzssqload.submit();
    },
    //其他附件上传
    qtfjUpload() {
      this.$refs.qtfjload.submit();
    },

    //营业执照上传
    yyzzRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getlicense(fd).then((response) => {
        if (response) {
          this.$set(this.form, "scyName", response.data.scyName);
          this.$set(this.form, "scySocialCode", response.data.scySocialCode);
          this.$set(this.form, "scyAddress", response.data.scyAddress);
          this.$set(this.form, "scyLegal", response.data.scyLegal);
          this.$set(
            this.form,
            "scyRegisteredCapital",
            response.data.scyRegisteredCapital
          );
          if (response.data.scyStartTime != null) {
            this.$set(this.form, "scyStartTime", response.data.scyStartTime);
          }
          if (response.data.scyEndTime != null) {
            if (
              response.data.scyEndTime == "长期" ||
              response.data.scyEndTime == "永久"
            ) {
              this.term = true;
            }
            this.$set(this.form, "scyEndTime", response.data.scyEndTime);
          }
          this.$set(this.form, "scyLicenseFile", response.data.scyLicenseFile);
          setTimeout(() => {
            loading.close();
          }, 2000);
        }
      });
    },
    //法人身份证正面ocr识别
    fsfzzRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("fileType", "00"); // 文件类型
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getCard(fd).then((response) => {
        if (response) {
          this.$set(this.form, "scyLegalId", response.data.scyLegalId);
          this.$set(this.form, "scyLegal", response.data.scyLegal);
          this.$set(this.form, "fsfzzList", response.data.fsfzzList);
          setTimeout(() => {
            loading.close();
          }, 2000);
        }
      });
    },
    //法人身份证反面
    fsfzfRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("fileType", "00"); //文件类型
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      uploadFileNew(fd).then((response) => {
        if (response) {
          this.fsfzfList.push({
            uid: response.fileId,
            url: response.url + "/" + getToken(),
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
        }
      });
    },
    //经办人身份证正面
    jsfzzRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("fileType", "01"); // 文件类型
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getCard(fd).then((response) => {
        if (response) {
          this.$set(this.form, "handler", response.data.handler);
          this.$set(this.form, "handlerCard", response.data.handlerCard);
          this.$set(this.form, "jsfzzList", response.data.jsfzzList);
          setTimeout(() => {
            loading.close();
          }, 2000);
        }
      });
    },
    //经办人身份证反面
    jsfzfRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("fileType", "00"); //文件类型
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      uploadFileNew(fd).then((response) => {
        if (response) {
          this.jsfzfList.push({
            uid: response.fileId,
            url: response.url + "/" + getToken(),
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
        }
      });
    },
    //法人授权书
    frsqsRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("fileType", "00"); //文件类型
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      uploadFileNew(fd).then((response) => {
        if (response) {
          this.frsqsList.push({
            uid: response.fileId,
            url: response.url + "/" + getToken(),
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
        }
      });
    },
    //数字证书授权
    szzssqRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("fileType", "00"); //文件类型
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      uploadFileNew(fd).then((response) => {
        if (response) {
          this.szzssqList.push({
            uid: response.fileId,
            url: response.url + "/" + getToken(),
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
        }
      });
    },
    //其他附件
    qtfjRequest(param) {
      let fileObj = param.file; // 相当于input里取得的files
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("fileType", "00"); //文件类型
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      uploadFileNew(fd).then((response) => {
        if (response) {
          this.qtfjList.push({
            uid: response.fileId,
            url: response.url + "/" + getToken(),
          });
          setTimeout(() => {
            loading.close();
          }, 2000);
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 融信协议 */
    handle() {
      this.open = true;
      this.title = "融信协议";
    },
    /** 发送验证码 */
    submitForm() {
      //点击获取验证码
      const TIME_COUNT = 60; //倒计时60秒
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.codeShow = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            if (this.count == 0) {
              this.verification = false;
              clearInterval(this.timer);
              this.timer = null;
            }
          } else {
            this.codeShow = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
      this.verification = true;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      addCode(this.form)
        .then((response) => {
          loading.close();
          this.msgSuccess("发送成功");
        })
        .catch((response) => {
          loading.close();
        });
    },
    // 下载本地文件
    download() {
      window.location.href = "http://localhost:8080/template/template.xlsx";
    },
    //上一步
    step() {
      this.active = 1;
    },
    //保存
    preservation() {
      this.$store.dispatch("LogOut").then(() => {
        location.href = "/login";
      });
    },
    // 下一步
    next() {
      if (this.active == 0) {
        if (!this.confirm) {
          this.$message.error("融信协议未确认!");
        } else {
          this.form.yyzzList = this.yyzzList;
          this.form.fsfzfList = this.fsfzfList;
          this.form.jsfzfList = this.jsfzfList;
          this.form.frsqsList = this.frsqsList;
          this.form.szzssqList = this.szzssqList;
          this.form.qtfjList = this.qtfjList;
          this.form.repeatToken = this.repeatToken;

          if (this.term) {
            this.form.scyEndTime = "长期";
          }
          if (!this.legalHandle) {
            this.form.legalHandles = "1";
          } else {
            this.form.legalHandles = "2";
          }
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          addAuthentication(this.form)
            .then((response) => {
              loading.close();
              if (response.data == "skip") {
                this.$confirm("四要素未通过,是否跳过?", "提示", {
                  confirmButtonText: "跳过",
                  cancelButtonText: "不跳过",
                  type: "warning",
                }).then(() => {
                  this.form.skip = "00";
                  addAuthentication(this.form)
                    .then((response) => {
                      loading.close();
                      this.msgSuccess("验证成功");
                      this.$set(this.form, "scyId", response.data.scyId);
                      this.active++;
                    })
                    .catch((response) => {
                      loading.close();
                    });
                });
              } else {
                console.log(response);
                this.msgSuccess("验证成功");
                this.$set(this.form, "scyId", response.data.scyId);
                this.active++;
              }
            })
            .catch((response) => {
              console.log(response);
              loading.close();
            });
        }
      } else if (this.active == 1) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        addAccount(this.form)
          .then((response) => {
            loading.close();
            this.msgSuccess("开户成功");
            this.active++;
          })
          .catch((response) => {
            loading.close();
          });
      } else if (this.active == 2) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        addVerification(this.form)
          .then((response) => {
            loading.close();
            this.msgSuccess("认证成功");
            this.active++;
          })
          .catch((response) => {
            loading.close();
          });
      } else if (this.active == 3) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        verification(this.form)
          .then((response) => {
            console.log(response);
            loading.close();
            this.msgSuccess("验证成功");
            this.active++;
            this.$router.push({ path: this.redirect || "/" });
          })
          .catch((response) => {
            loading.close();
          });
      } else {
        this.active++;
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style>
.uoloadSty .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.disUoloadSty .el-upload--picture-card {
  display: none;
}

.fsfzzUoload .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.Uoloadfsfzz .el-upload--picture-card {
  display: none;
}

.uoloadfsfzf .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.fsfzfUoloadSty .el-upload--picture-card {
  display: none;
}

.uoloadjsfzz .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.jsfzzUoloadSty .el-upload--picture-card {
  display: none;
}

.uoloadfrsqs .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.frsqsUoloadSty .el-upload--picture-card {
  display: none;
}
.uoloadjsfzf .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.jsfzfUoloadSty .el-upload--picture-card {
  display: none;
}
.uoloadszzssq .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.szzssqUoloadSty .el-upload--picture-card {
  display: none;
}
.uoloadqtfj .el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
.qtfjUoloadSty .el-upload--picture-card {
  display: none;
}
.substance p {
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: normal;
  color: #666666;
  line-height: normal;
  margin: 0px;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
.substance h4 {
  font-family: "微软雅黑", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  letter-spacing: normal;
  color: #666666;
  line-height: normal;
  margin: 0px;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
.separation {
  width: 200px;
  height: 60px;
  margin-top: 10px;
  border-right: 5px solid #005cff;
}
.approved {
  height: 150px;
  width: 60%;
  /* background-color: #f2f2f2; */
  text-align: center;
  border: 1px solid #f2f2f2;
  margin-left: 20%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.div-label {
  padding: 20px 0;
  width: 100%;
}
.ying .el-upload--picture-card {
  width: 100% !important;
  height: 407px !important;
}
.ying.el-upload-list--picture-card .el-upload-list__item {
  width: 100% !important;
  height: 407px !important;
}
.ying.el-upload-list--picture-card {
  width: 100% !important;
  height: 407px !important;
}
</style>