<template>
  <view class="content">
    <div class="img_cen" v-if="hasRegin">
      <div class="status-img">
        <img src="@/static/images/status3.png" />
      </div>
      <div class="status-size bolds">{{ '已认证' }}</div>
    </div>
    <view class="theform" v-else>
      <u--form
        labelPosition="left"
        :model="dataForm"
        :rules="rules"
        ref="uForm"
      >
        <u-form-item required
                     label-width="180rpx"
                     :label="'证件(正面)'">
          <uploadImg :ifsfz='true'
                     @imageUploaded='imageUploaded1'
                     prop="idFront"
                     ref="uploadImg1"
                     style="margin-right: 30rpx;"
                     :bgimg="`../../../static/images/idCard1.png`"
                     v-model="dataForm.idFront"></uploadImg>

        </u-form-item>
        <u-form-item required
                     label-width="180rpx"
                     :label="'证件(反面)'">
          <uploadImg :ifsfz='true'
                     @imageUploaded='imageUploaded2'
                     prop="idBack"
                     ref="uploadImg2"
                     style="margin-right: 30rpx;"
                     :bgimg="`../../../static/images/idCard2.png`"
                     v-model="dataForm.idBack"></uploadImg>

        </u-form-item>
        <u-form-item
          required
          label-width="180rpx"
          :label="'真实姓名'"
          prop="accountName"
          ref="item1"
        >
          <u--input
            :placeholder="'请输入'"
            v-model="dataForm.accountName"
          ></u--input>
        </u-form-item>
        <u-form-item
          required
          label-width="180rpx"
          :label="'性别'"
          prop="sex"
          ref="item1"
        >
          <u-radio-group v-model="dataForm.sex" @change="radioGroupChange">
            <u-radio
              :customStyle="{ marginRight: '16rpx' }"
              v-for="(item, index) in sexList"
              :key="index"
              :name="item.value"
              >{{ item.label }}</u-radio
            >
          </u-radio-group>
        </u-form-item>
        <!-- </u-form-item> -->
        <u-form-item
          required
          label-width="180rpx"
          :label="'证件类型'"
          prop="idName"
          @click="showCtype = true"
          ref="item1"
        >
          <u--input
            suffixIcon="arrow-right"
            readonly
            v-model="dataForm.idName"
            disabled
            :placeholder="'请选择'"
          >
          </u--input>
        </u-form-item>
        <u-form-item
          required
          label-width="180rpx"
          :label="'证件号码'"
          prop="idCard"
          ref="item1"
        >
          <u--input
            :placeholder="'请输入'"
            v-model="dataForm.idCard"
          ></u--input>
        </u-form-item>
        <u-form-item
          required
          label-width="180rpx"
          :label="'银行名称'"
          @click="showAmount = true"
          prop="bankName"
          ref="item1"
        >
          <u--input
            suffixIcon="arrow-right"
            readonly
            v-model="dataForm.bankName"
            disabledColor="#ffffff"
            :placeholder="'请选择'"
          >
          </u--input>
        </u-form-item>
        <u-form-item
          required
          label-width="180rpx"
          :label="'银行卡号'"
          prop="cardNumber"
          ref="item1"
        >
          <u--input
            :placeholder="'请输入'"
            v-model="dataForm.cardNumber"
            disabledColor="#F5F5F5;"
          ></u--input>
        </u-form-item>

        <u-form-item
          required
          label-width="180rpx"
          :label="'开户支行'"
          prop="subBankName"
          ref="item1"
        >
          <u--input
            :placeholder="'请输入'"
            v-model="dataForm.subBankName"
            disabledColor="#F5F5F5;"
          ></u--input>
        </u-form-item>
        <u-form-item
          required
          @click="getDiqu"
          :label="'所在地区'"
          label-width="180rpx"
          prop="theaddress"
        >
          <u--input
            v-model="dataForm.theaddress"
            readonly
            suffixIcon="arrow-right"
            disabledColor="#ffffff"
            :placeholder="'请选择'"
          >
          </u--input>
        </u-form-item>

        <view class="view-class">
          <u-form-item
            required
            :label="'详细地址'"
            class="label-style"
            label-width="180rpx"
            prop="address"
          >
            <u-textarea
              v-model="dataForm.address"
              placeholder-class="place-class"
              class="border-color"
              maxlength="200"
              :placeholder="'请输入'"
            />
          </u-form-item>
        </view>
        <u-form-item
          required
          label-width="180rpx"
          :label="'联系方式'"
          prop="phone"
          ref="item1"
        >
          <u--input v-model="dataForm.phone" :placeholder="'请输入'"></u--input>
        </u-form-item>
        <u-form-item
          required
          label-width="180rpx"
          :label="'验证码'"
          prop="verificationCode"
          ref="item1"
        >
          <u--input v-model="dataForm.verificationCode" :placeholder="'请输入'">
            <template slot="suffix">
              <text style="color: #18acff" @tap="getCode">{{ tips }}</text>
            </template>
          </u--input>
        </u-form-item>
        

        <u-code
          :seconds="seconds"
          @end="end"
          @start="start"
          ref="uCode"
          @change="codeChange"
        ></u-code>
        <u-picker
          @cancel="showAmount = false"
          :show="showAmount"
          ref="uPicker"
          :columns="bankCardChioceList"
          @confirm="confirm"
          keyName="bankName"
        ></u-picker>
        <!-- <u-picker @cancel='showCtype=false' :show="showCtype" ref="uPicker2" :columns="cardTypeList"
					@confirm="confirm2" keyName='label'></u-picker> -->
      </u--form>
      <!-- <view class="footer_l">
        <u-checkbox-group v-model="agreementShow"
                          shape="circle"
                          activeColor="#005BAC">
          <u-checkbox @change="toCheck"
                      :name="1">
          </u-checkbox>
        </u-checkbox-group>
        <view class="tit3">{{'我已阅读并同意以上协议'}}</view>
        <view class="tit2"
              @click="toAgree"> 《推广人员服务协议》</view>
      </view> -->
      <view class="btnbox" style="padding-bottom: 180rpx;">
        <u-button class="subbtn" @click="submit">{{ '确定' }}</u-button>
      </view>
    </view>
    <u-popup
      :show="agreeMent"
      :closeable="true"
      @close="agreeMent = false"
      :round="10"
      class="popAll"
      mode="center"
    >
      <view class="popList">
        <view class="pop_box">
          <view v-html="context"></view>
          <view class="disflx">
            <u-button
              type="success"
              class="uBtn"
              shape="circle"
              color="linear-gradient(to right, #005BAC, #005BAC )"
              @tap="((agreeMent = false), (isRead = 1))"
              >{{ '我已阅读并同意以上协议' }}</u-button
            >
          </view>
        </view>

        <!-- <view class="footer">
        

        </view> -->
      </view>
    </u-popup>
    <u-toast ref="uToast"></u-toast>
    <v-address
      ref="address"
      @getAddressData="AddressData"
      :defaultCode="defaultCode"
      @addressData="addressData"
    ></v-address>
  </view>
</template>

<script>
import * as ban from '@/config/balance.js'
import address from '@/components/address.vue'
import uploadImg from '@/components/uploadImg.vue'
export default {
  components: {
    'v-address': address,
    uploadImg,
  },
  data() {
    return {
      isRead: 0,
      agreeMent: false,
      agreementShow: [],
      showAmount: false,
      showCtype: false,
      dataForm: {
        bankName: '',
        cardNumber: '',
        pkBank: '',
        subBankName: '',
        accountName: '',
        idCard: '',
        pkProvince: '',
        pkCity: '',
        pkCounty: '',
        theaddress: '',
        idFront: '',
        idBack: '',
        idName: '身份证',
        idType: 1,
        sex: 1,
      },
      sexRadio: 1,
      address: '',
      defaultCode: [],
      bankCardChioceList: [], //银行选择
      cardTypeList: [], //证件类型
      sexList: [
        {
          label: '男',
          value: 1,
        },
        {
          label: '女',
          value: 2,
        },
      ],
      rules: {
        accountName: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        sexRadio: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        idName: [
          {
            type: 'string',
            required: true,
            message: '请选择',
            trigger: ['change'],
          },
        ],
        idCard: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        pkBank: [
          {
            type: 'string',
            required: true,
            message: '请选择',
            trigger: ['change'],
          },
        ],
        address: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        cardNumber: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        subBankName: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        theaddress: [
          {
            type: 'string',
            required: true,
            message: '请选择',
            trigger: ['change'],
          },
        ],
        idFront: [
          {
            required: true,
            message: '请上传',
          },
        ],
        idBack: [
          {
            required: true,
            message: '请上传',
          },
        ],
        phone: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        verificationCode: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
      },
      tips: '',
      // refCode: null,
      seconds: 60,
      hasRegin: false,
      context:
        '<p>\t</p><p class="ql-align-center" style="text-align:center;font-size:18px"><span class="ql-size-large">\t</span><strong style="color: rgb(35, 31, 32);text-align:center" class="ql-size-large">推广服务协议</strong></p><p>&nbsp;</p><p><br></p><p><strong style="color: rgb(35, 31, 32);">甲方：青岛海之圣生物工程有限公司</strong></p><p><strong style="color: rgb(35, 31, 32);">乙方：</strong></p><p><strong style="color: rgb(35, 31, 32);">身份证号: </strong></p><p><strong style="color: rgb(35, 31, 32);">手机号:</strong></p><p><br></p><p><span style="color: rgb(35, 31, 32);">甲乙双方经平等协商一致，乙方愿意就甲方所有或经销的产品批发及&nbsp;/ 或零售的业务提供促销推广服务，双方自愿签署并遵守本协议。</span></p><p><strong style="color: rgb(35, 31, 32);">一&nbsp;、定义</strong></p><p><span style="color: rgb(35, 31, 32);">《营业守则》：指甲方提供给乙方的关于权利和责任的声明，其为本协议的重要组成部分。《营业守则》详细规定了乙方提供服务的有关政策、程 序及双方的权利义务。甲方拥有对《营业守则》的排他的解释权和修改权。</span></p><p><span style="color: rgb(35, 31, 32);">产品：指甲方的产品，包括甲方在中国大陆地区销售或者生产的所有种类的产品及就其产品提供的相关服务。</span></p><p><strong>二、 协议期限与延续 </strong>&nbsp;&nbsp;<span style="color: rgb(35, 31, 32);">&nbsp;&nbsp;&nbsp;&nbsp;</span></p><p><span style="color: rgb(35, 31, 32);">1.本协议有效期为十二个月。首个协议期限是以会员注册日起至会员身份到期日为止。</span></p><p><span style="color: rgb(35, 31, 32);">2.乙方应切实履行本协议规定，于本协议到期前三个月向甲方申请延续本协议，甲方将按收到申请时的制度予以审查。若审核合格，视为原协议有效期限的变更，其他协议内容不变。</span></p><p>\t<span style="color: rgb(35, 31, 32);">乙方未按时提出申请，甲方保留不予延续本协议效力的权利。</span></p><p><span style="color: rgb(35, 31, 32);">3.推广服务人员服务协议到期、个人退出或因违规处分等原因被海之圣公司终止资格，普通会员自退出之日起六个月之后，可以重新注册；拥有主任级别以上的经销商自退出之日起十二</span></p><p>\t<span style="color: rgb(35, 31, 32);">个月之后，可以重新注册。并且海之圣公司保留是否接受重新申请的权利。</span></p><p><strong style="color: rgb(35, 31, 32);">三&nbsp;、服务内容</strong></p><p><span style="color: rgb(35, 31, 32);">甲方委托乙方为顾客提供协助订货、产品使用示范、产品功能特点、使用方法介绍、产品满意度调查以及解答顾客对产品所提出问题等售前售后服务；为甲方推广产品， 协助甲方拓展市场， 建立忠实的顾客消费群。乙方同意履行本条所规定的服务。</span></p><p><strong style="color: rgb(35, 31, 32);">四&nbsp;、</strong><strong>服务方式</strong></p><p><span style="color: rgb(35, 31, 32);">1. 乙方作为独立法律主体为甲方提供服务，就其在本协议项下为甲方提供的服务做出独立的判断和决定，并承担相应的风险；由于乙方自身原因所导致的法律责任，由乙方自行承担。</span></p><p><span style="color: rgb(35, 31, 32);">2. 双方同意并了解双方之间不存在劳动关系，乙方不受甲方员工规章制度的管理和支配。在任何情况下，乙方均不应视为甲方的员工，无权享受任何中国法律或者甲方规章制度中规定</span></p><p><span style="color: rgb(35, 31, 32);">甲方应当向其员工提供的福利，亦不受限于甲方员工应当向甲方承担的义务。</span></p><p><span style="color: rgb(35, 31, 32);">3. 乙方应该自行完成本协议项下的服务，不得以任何方式转让或者委托给第三方。</span></p><p><strong style="color: rgb(35, 31, 32);">五&nbsp;、推广&nbsp;服务费</strong></p><p><span style="color: rgb(35, 31, 32);">1. 甲方根据乙方的业务量、服务质量等，向乙方支付相应的推广服务费。本条规定的推广服务费不属于工资性质而是乙方提供本协议项下服务所得的全部报酬。除此之外，甲方不再向 乙方支付其他任何费用。</span></p><p><span style="color: rgb(35, 31, 32);">2. 甲方支付给乙方的全部推广服务费以人民币结算。</span></p><p><span style="color: rgb(35, 31, 32);">3. 如果乙方未能及时向甲方提供其收款账户信息，甲方有权拒绝向乙方支付推广服务费。</span></p><p><span style="color: rgb(35, 31, 32);">4. 本条中约定的乙方推广服务费全部为税前收入。乙方应就其取得的推广服务费依据中国的相关法律法规在中国境内缴纳相关税款。甲方将根据中国相关法律法规的规定为乙方代扣代 缴相关税款。</span></p><p><strong style="color: rgb(35, 31, 32);">六&nbsp;、协议性质</strong></p><p>\t<span style="color: rgb(35, 31, 32);">1.&nbsp;本协议不构成双方之间合伙、合资或类似关系。&nbsp;&nbsp;除非甲方明确书面同意或授权，乙方不应以甲方或者甲方员工的名义签订合同、协议或合同性文件或者从事其他事项。&nbsp;2. 在任何情形下，本协议均不应解释为一份劳动合同，或者意图在甲乙双方之间建立任何劳动关系。</span></p><p><strong style="color: rgb(35, 31, 32);">七&nbsp;、权利及义务</strong></p><p><span style="color: rgb(35, 31, 32);">1. 《营业守则》是本协议的有效组成部分，乙方已阅读了解并同意接受《营业守则》的约束。</span></p><p><span style="color: rgb(35, 31, 32);">2. 甲方拥有依其自身业务判断随时修订《营业守则》及相关的规章制度；制定及修改产品价格，增加、减少、改进或停止经销或生产某些产品；制定修改市场激励及 折扣优惠计划的权利；前述修改不需要取得乙方的同意，甲方通过官方网站将修改后的《营业守则》及其他相关规章制度进行公示。甲方通过官方网站公示后即视 为已经通知了乙方，乙方需随时关注甲方的官方网站信息。甲方修改后的规章制度一经官方网站公告即视为乙方已了知并接受其内容的约束。乙方必须接受并遵守所有修订的条款； 乙方不同意接受甲方所修改的，则甲乙双方任意一方都有权解除本协议。</span></p><p><span style="color: rgb(35, 31, 32);">3. 甲方根据业务需求自主向乙方提供产品信息、推广和促销资料及相应的业务培训和咨询。</span></p><p><span style="color: rgb(35, 31, 32);">4. 甲方有权为推广其产品或者业务无偿使用甲方拍摄或者乙方提供的乙方照片或者相关录音录像。</span></p><p><span style="color: rgb(35, 31, 32);">5. 乙方应当遵守国家法律、法规，遵守本协议、甲方制定的《营业守则》及其他相关规章制度，包括但不限于以下规定：</span></p><p><span style="color: rgb(35, 31, 32);">5.1 遵守国家法律法规，尊重社会公德，遵循自愿、公平、诚实、信用的原则开展业务活动。严禁在开展业务过程中涉及政治、宗教、迷信、传销及其他不正当或不道德的言行。</span></p><p><span style="color: rgb(35, 31, 32);">5.2 遵守甲方颁布的关于推广服务人员的各项业务政策及甲方在协议期内所作之修正变更、补充的规定。</span></p><p><span style="color: rgb(35, 31, 32);">5.3 推广服务人员及经销商不得以任何方式宣称自己或其他经销商或推广服务人员为海之圣公司或相关机构的雇员；或使人误解经销商或推广服务人员与海之圣公司或相关机构存在雇佣关系；不得以任何方式宣称自己为海之圣公司或相关机构的“代理人"、“代言人"或“海之圣公司代表" ；未经允许，不得借“海之圣公司的名义进行宣传推广。</span></p><p><span style="color: rgb(35, 31, 32);">5.4 不得利用甲方的资源推广销售非甲方提供的产品、活动或服务，也不可从事与甲方存在利益冲突或有悖于商德法规的其他产品或服务的营销活动。</span></p><p><span style="color: rgb(35, 31, 32);">5.5 不得自行建立网站或在任何其他网站从事授权业务以及与授权业务相关的任何宣传、推广活动；或自行建立网站（网店）或在任何其他网站（网店）从事批发、零售、竞拍、转 卖或以其他任何形式销售甲方产品或提供任何销售或服务。</span></p><p><span style="color: rgb(35, 31, 32);">5.6 严格按照甲方制定的价格对产品进行介绍推广，不得擅自收取附加费用；严禁以不当竞争的方式进行推广服务，包括但不限于：在推广中为争取客户承诺给予折扣或变相折扣等 不正当推广行为。</span></p><p><span style="color: rgb(35, 31, 32);">5.7 不得在客户或推广人员中传播任何虚假、负面、有损甲方和他人声誉的谣言和信息。乙方如有违反，甲方有权给予处罚，包括但不限于口头 / 书面告诫、中止乙方行使本协议项下&nbsp;的权利、缓发 / 扣除部分或全部乙方本应取得的推广服务费或解除协议等， 前述处罚事项甲方可以分别行使， 也可以合并行使。如果乙方上述行为给甲方造成任何损失， 乙方应当赔偿。</span></p><p><span style="color: rgb(35, 31, 32);">6. 推广宣传中，不得将产品介绍为有“治病”、“疗效”等的表述。</span></p><p><span style="color: rgb(35, 31, 32);">7. 推广中不得有以下行为：</span></p><p><span style="color: rgb(35, 31, 32);">7.1 含有表示产品功效的断言或者保证，含有使用该产品能够获得健康的表述；</span></p><p><span style="color: rgb(35, 31, 32);">7.2 通过渲染、夸大某种健康状况或者疾病，或者通过描述某种疾病容易导致的身体危害，使公众对自身健康产生担忧、恐惧，误解不使用广告宣传的保健食品会患某种疾病或者导 致身体健康状况恶化；</span></p><p><span style="color: rgb(35, 31, 32);">7.3 用公众难以理解的专业化术语、神秘化语言、表示科技含量的语言等描述该产品的作用、特征和机理；</span></p><p><span style="color: rgb(35, 31, 32);">7.4 利用和出现国家机关及其事业单位、医疗机构、学术机构、行业组织的名义和形象，或者以专家、医务人员和消费者的名义和形象为甲方经销的产品功效作证明；</span></p><p><span style="color: rgb(35, 31, 32);">7.5 含有无法证实的所谓“科学或研究发现”、“实验或数据证明”等方面的内容，含有最新技术、最高科学、最先进制法等绝对化的用语和表述；</span></p><p><span style="color: rgb(35, 31, 32);">7.6 夸大保健食品功效或扩大适宜人群范围，明示或者暗示适合所有症状及所有人群；</span></p><p><span style="color: rgb(35, 31, 32);">7.7 含有与药品相混淆的用语，直接或者间接地宣传治疗作用，或者借助宣传某些成分的作用来明示或者暗示该保健食品具有疾病治疗的作用；</span></p><p><span style="color: rgb(35, 31, 32);">7.8 与其他保健食品或者药品、医疗器械等产品进行对比，贬低其它产品；</span></p><p><span style="color: rgb(35, 31, 32);">7.9 利用封建迷信进行宣传，宣称产品为祖传秘方；</span></p><p><span style="color: rgb(35, 31, 32);">7.10 含有无效退款、保险公司保险等内容，含有安全、无毒副作用、无依赖等承诺，含有有效率、治愈率、评比、获奖等综合评价内容；</span></p><p><span style="color: rgb(35, 31, 32);">7.11 声称或者暗示保健食品为正常生活或者治疗病症所必需，直接或者间接怂恿任意、过量食用保健食品。</span></p><p><span style="color: rgb(35, 31, 32);">8. 乙方应根据甲方的售后服务政策并结合当地的市场情况制定产品服务计划，严格执行甲方服务的各项相关规定：</span></p><p>\t<span style="color: rgb(35, 31, 32);">&nbsp;8.1包括为用户提供售前指导、售后服务。乙方应及时解决客户问题，以客户满意为原则，维护甲方的企业形象和信誉;</span></p><p><span style="color: rgb(35, 31, 32);">8.2乙方在接到客户投诉后首先应自行设法尽快为客户解决。如果出现客户售后问题没有积极主动协商解决，或在处理投诉过程中不配合、不作为、逃避责任，甲方有权追加对乙方行为的处罚;</span></p><p><span style="color: rgb(35, 31, 32);">&nbsp;8.3乙方对其服务人员在履行本协议过程中的人身安全负有相关责任。</span></p><p><strong style="color: rgb(35, 31, 32);">八&nbsp;、适用 法 律 及 争 议&nbsp;解 决</strong></p><p>\t<span style="color: rgb(35, 31, 32);">本协议受中华人民共和国法律管辖并据此解释。如果因本协议而发生争议， 双方应通过友好协商的方式解决。如无法达成协商意见， 双方同意应当通过甲方住所地有管辖权的法院诉讼解决。&nbsp;</span><strong style="color: rgb(35, 31, 32);">九&nbsp;、其他</strong></p><p><span style="color: rgb(35, 31, 32);">1. 本协议自甲方盖合同章和乙方本人签字后生效。本协议原件一式两份，甲乙双方各执一份。</span></p><p><span style="color: rgb(35, 31, 32);">2. 本协议的任何规定被认定为无效或不可强制执行，不影响本协议任何其他规定的有效性或可强制执行性。</span></p><p><span style="color: rgb(35, 31, 32);">3. 本协议是双方就所涉事项的全部协议，本协议代替双方之前或同期所有关于此等事项的口头及书面协议。乙方没有单方修改本协议的权利。</span></p><p><span style="color: rgb(35, 31, 32);">4. 不可抗力事件是指任何一方不能合理控制、不可预见或即使预见亦无法避免的事件，&nbsp;该事件妨碍、影响或延误任何一方根据本协议履行其全部或部分义务。该事件包括但不限于地震、&nbsp;台风、洪水、火灾或其他自然灾害、战争、骚乱、罢工、国家相关法律、法规、政策的变化或任何其他类似事件。任何一方由于受到不可抗力的影响而延误或不能履行本协议项下的 义务不承担违约责任。不可抗力事件持续发生超过 30 天的，任何一方可以提前解除本协议。</span></p><p><span style="color: rgb(35, 31, 32);">5. 本协议中，甲方不赋予乙方享有任何甲方拥有的商标、专利、商业秘密、版权或其他知识产权的所有权，未经甲方许可也不享有前述权力的使用权。</span></p><p><span style="color: rgb(35, 31, 32);">6. 本协议期满或提前终止后，本协议项下乙方享有的权利应终止，乙方应立即停止本协议项下的所有授权活动。在本协议履行期间如果乙方取得个体工商户经营资格，或另行成立法人 主体取得法人资格的，则本协议自动终止，双方之间未来的任何业务关系应由双方另行签订书面协议。</span></p><p><span style="color: rgb(35, 31, 32);">7. 任何一方对于其权利的放弃或对于对方责任的豁免均应以书面形式作出。&nbsp;一方暂不行使或暂时没有全面行使其在本协议下的权利并不妨碍其日后对权利的进一步行使。</span></p><p><br></p><p><strong style="color: rgb(35, 31, 32);">甲&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方：</strong><span style="color: rgb(35, 31, 32);">青岛海之圣生物工程有限公司</span></p><p><strong style="color: rgb(35, 31, 32);">乙&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;方：</strong></p><p><strong style="color: rgb(35, 31, 32);">服务&nbsp;中心：</strong></p><p><strong style="color: rgb(35, 31, 32);">签&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字：</strong></p><p><strong style="color: rgb(35, 31, 32);">经&nbsp;办&nbsp;人：</strong></p><p><strong style="color: rgb(35, 31, 32);">签订 日期：</strong></p>',
    }
  },
  onLoad() {
    this.getDetail()
    this.getList()
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },

  methods: {
    toAgree() {
      this.agreeMent = true
    },
    getDetail() {
      ban.authenticationDetails().then(res => {
        if (res.data) {
          this.hasRegin = true
        } else {
          this.hasRegin = false
        }
      })
    },
    
    getIdCardInfo(n) {
      ban
        .ocrIdCard({
          idCardUrl: n,
        })
        .then(res => {
          if (res.code == 200) {
            this.$set(this.dataForm, 'accountName', res.data.name)
            this.$set(this.dataForm, 'idCard', res.data.idCard)
            this.$set(this.dataForm, 'sex', res.data.sex)
          } else {
            this.$nextTick(() => {
              this.$refs.uploadImg1.deletePic({ index: 0 })
              this.$set(this.dataForm, 'accountName', '')
              this.$set(this.dataForm, 'idCard', '')
              this.$set(this.dataForm, 'sex', '')
              this.$set(this.dataForm, 'idFront', '')
            })
          }
        })
    },
    idBackChange(e) {
      if (e) {
        ban
          .ocrIdCardBack({
            idCardBackUrl: e,
          })
          .then(res => {
            if (res.code == 200) {
            } else {
              this.$nextTick(() => {
                this.$refs.uploadImg2.deletePic({ index: 0 })
                this.$set(this.dataForm, 'idBack', '')
              })
            }
          })
      }
    },
    imageUploaded1(url) {
      this.dataForm.idFront = url
    },
    imageUploaded2(url) {
      this.dataForm.idBack = url
    },
    // radio选择发生变化
    radioGroupChange(e) {
      this.dataForm.sex = e
      // console.log('🌈eeee',e)
    },
    AddressData(name) {
      this.dataForm.theaddress = name
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    addressData(diqu, obj) {
      this.dataForm.theaddress = diqu
      this.dataForm.pkProvince = obj.province
      this.dataForm.pkCity = obj.city
      this.dataForm.pkCounty = obj.county
      this.$forceUpdate()
    },

    codeChange(text) {
      this.tips = text
    },
    getCode() {
      if (this.dataForm.phone && this.$u.test.mobile(this.dataForm.phone)) {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码',
          })
          ban
            .getVerification({
              phone: this.dataForm.phone,
            })
            .then(res => {
              uni.hideLoading()
              // 这里此提示会被this.start()方法中的提示覆盖
              uni.$u.toast('验证码已发送')
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start()
            })
        } else {
          uni.$u.toast('倒计时结束后再发送')
        }
      } else {
        uni.$u.toast(this.dataForm.phone ? '手机号格式不正确' : '请先输入手机号')
        return
      }
    },
    end() {},
    start() {},
    getList() {
      ban.getBankCardChoiceList().then(res => {
        this.bankCardChioceList = [res.data]
      })
      //证件类型
      ban.getCardType().then(res => {
        this.cardTypeList = [res.data]
      })
    },

    submit() {
      this.$refs.uForm
        .validate()
        .then(res => {
          ban
            .addAuthentication(this.dataForm)
            .then(res => {
              if (res.code == 200) {
                uni.$u.toast(res.msg)
                setTimeout(() => {
                  uni.navigateBack()
                }, 1500)
              } else {
                uni.$u.toast(res.msg)
              }
            })
            .catch(err => {})
        })
        .catch(errors => {
          uni.$u.toast('校验失败')
          return false
        })
    },
    confirm2(e) {
      this.dataForm.idName = e.value[0].label
      this.dataForm.idType = e.value[0].value
      this.showCtype = false
    },
    confirm(e) {
      this.dataForm.bankName = e.value[0].bankName
      this.dataForm.pkBank = e.value[0].pkId
      this.showAmount = false
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .u-input--radius,
.u-input--square {
  border-radius: 12rpx;
  // border:2rpx solid #cccccc;
}

.content {
  padding: 0 20rpx;
  background: #fff;

  .uni-textarea {
    height: 100rpx;
  }

  .theform {
    margin-top: 6rpx;
    background: #ffffff;
    padding: 20rpx 23rpx 48rpx 23rpx;

    .contentye {
      font-size: 28rpx;
      margin-left: 200rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
    }
  }

  .btnbox {
    margin-top: 38rpx;
    padding: 0 20rpx;

    .subbtn {
      background: #005BAC;
      border-radius: 46rpx;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .getcodes {
    background: #2fbc42;
    border-radius: 38rpx;
    color: #fff;
  }
}
.img_cen {
  padding: 100px 0;
  margin: 0 auto;
  text-align: center;
}
.status-img img {
  width: 80px;
  height: 80px;
}
.footer_l {
  display: flex;
  justify-content: center;

  .tit2 {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #005BAC;
  }

  .tit3 {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
  }
  margin: 30rpx 0 40rpx 0;
}
.popAll ::v-deep .u-popup__content {
  width: 90%;
}
.pop_box {
  max-height: 70vh;
  overflow-y: scroll;
  padding: 40rpx;
  img {
    width: 100%;
    margin-bottom: 20px;
  }
}
.footer {
  margin-bottom: 40rpx;
  padding: 20rpx;
}
.disflx {
  margin-top: 10px;
}
</style>
