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.zcbiId" >
                  </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 } from "@/utils/auth";
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: "",
    };
  },
  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) => {
         console.log("data"+response.data)
        if(response.data) {
          this.form = response.data.list;
             if (response.data.list.scyEndTime != null) {
                if(response.data.list.scyEndTime=="长期"){
                  this.term = true
            }
          }
          console.log("list"+response.data.list)
          if (response.data.list.scyStatus == "03") {
              console.log("scyStatus"+response.data.scyStatus)
            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 = 1;
          }else if(response.data.list.scyStatus == "04"){
                     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;
          }
        }
      });
    },
      //查询银行名称
    getBankList(query){
        console.log(query)
        this.queryParams.pbaiBankName = query;
        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) {
          console.log(response.data)
          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) {
            this.$set(this.form, "scyEndTime", response.data.scyEndTime);
                if(response.data.scyEndTime=="长期"){
                  this.term = true
            }
          }
          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 = 5;  //倒计时60秒
      console.log(TIME_COUNT)
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.codeShow = false;
        console.log(this.count)
        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.$router.push({ path: this.redirect || "/" });
    },
    // 下一步
    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;
        if(this.term){
            this.form.scyEndTime="长期";
        }
        if(!this.legalHandle){
            this.form.legalHandle="1";
        }else{
           this.form.legalHandle="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();
            this.msgSuccess("验证成功");
            this.$set(this.form, "scyId", response.data.scyId);
            this.active++;
          })
          .catch((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) => {
            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>