index.vue

<template>
  <div class="full-page">
    <div class="container sign-page">
      <!-- <div class="head">
        <div class="head-bg"></div>
        <div class="head-block">
          <div class="table">
            <div class="tr">
              <div class="td picture">
                <div class="avatar" :style="{backgroundImage: 'url(' + orgInfo.picture + ')' }"></div>
              </div>
              <div class="td info">
                <div class="title">{{orgInfo.orgname}}</div>
                <div class="des">{{orgInfo.groupname}}</div>
              </div>
            </div>
          </div>
        </div>
      </div> -->
      <div class="p-title">
        <span class="label">准妈妈/妈妈基本信息</span>
        <span class="link">默认为户主</span>
      </div>
      <div class="form">
        <div class="table">
          <div class="tr">
            <div class="td label">姓名</div>
            <div class="td text-right">
              <input type="text" class="form-control" maxlength="15" v-model="BaseForm.name" @blur="BaseValidateName" placeholder="请输入姓名" :disabled="signStatus=='update'"/>
              <span v-show="!BaseValidate.nameState" class="small-hint">（只能是中文或英文,长度1~15位）</span>
            </div>
          </div>
          <div class="tr">
            <div class="td label">手机号</div>
            <div class="td text-right">
              <input type="text" class="form-control" maxlength="11" placeholder="请输入有效手机号" @blur="BaseValidatePhone" v-model="BaseForm.phone"/>
              <span v-show="!BaseValidate.phoneState" class="small-hint">请输入有效手机号</span>
            </div>
          </div>
          <div class="tr">
            <div class="td label">身份证号</div>
            <div class="td text-right">
              <input type="text" class="form-control" placeholder="请输入有效身份证" @blur="BaseValidateIdCard" v-model="BaseForm.idCard" :disabled="signStatus=='update'"/>
              <span v-show="!BaseValidate.idCardState" class="small-hint">请输入有效身份证</span>
            </div>
          </div>
          <div class="tr">
            <div class="td label">末次月经时间</div>
            <div class="td text-right">
              <div class="td-table" @click="openPickerLastMensesTime">
                <div class="td-table-cell text">
                  <span v-if="BaseForm.lastMensesTime === ''">请选择末次月经时间</span>
                  <span v-else class="light">{{BaseForm.lastMensesTime}}</span>
                  <!-- {{BaseForm.lastMensesTime !== '' ? BaseForm.lastMensesTime : '请选择末次月经时间'}} -->
                </div>
                <div class="td-table-cell icon">
                  <i class="glyphicon glyphicon-menu-right"></i>
                </div>
              </div>
              <span v-show="!BaseValidate.lastMensesTimeState" class="small-hint">请选择末次月经时间</span>
            </div>
          </div>
          <div class="tr">
            <div class="td label">现住址</div>
            <div class="td text-right">
              <div class="td-table" @click="openPopupAddress">
                <div class="td-table-cell text">
                  <p class="m-b-normal">
                    <span v-if="BaseForm.address === '' || BaseForm.address === ' '">请选择现在居住地址</span>
                    <span v-else class="light">{{BaseForm.address}}</span>
                    <!-- {{BaseForm.address==''? '请选择现在居住地址':BaseForm.address}} -->
                  </p>
                  <p class="m-b-normal" v-if="BaseForm.subAddress!=''" :class="BaseForm.subAddress!=''?'light':''">
                    {{BaseForm.subAddress}}
                  </p>
                </div>
                <div class="td-table-cell icon">
                  <i class="glyphicon glyphicon-menu-right"></i>
                </div>
              </div>
              <span v-show="!BaseValidate.addressState" class="small-hint">请选择现在居住地址</span>
            </div>
          </div>
          <div class="tr">
            <div class="td label">详细地址</div>
            <div class="td text-right">
              <input type="text" v-model="BaseForm.street" class="form-control" placeholder="请输入小区/楼栋/门牌号(最多25字)" maxlength="25" @blur="BaseValidateStreet" />
              <span v-if="!BaseValidate.streetState" class="small-hint">请输入详细地址</span>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="form">
        <div class="table">
          <div class="tr">
            <div class="td label">保健手册编码</div>
            <div class="td text-right">
              <div class="td-table">
                <div class="td-table-cell text">
                  <input class="form-control" v-model="BaseForm.code" placeholder="请扫描保健手册条形码"/>
                </div>
                <div class="td-table-cell icon text-orange">
                  <i class="glyphicon glyphicon-barcode"  @click="scanCode()"></i>
                </div>
              </div>
              <span v-show="!BaseValidate.lastMensesTimeState" class="small-hint">请扫描或手动输入保健手册条形码</span>
            </div>
          </div>
        </div>
      </div> -->
      <!-- <div class="form">
        <div class="table">
          <div class="tr">
            <div class="td label">社区卫生机构</div>
            <div class="td text-right">
              <div class="td-table" @click="openPopupOrg">
                <div class="td-table-cell text">
                  <p class="m-b-normal">{{BaseForm.orgName==''? '请选择所在社区卫生机构':BaseForm.orgName}}</p>
                </div>
                <div class="td-table-cell icon">
                  <i class="glyphicon glyphicon-menu-right"></i>
                </div>
              </div>
              <span v-show="!BaseValidate.orgState" class="small-hint">请选择所在社区卫生机构</span>
            </div>
          </div>
        </div>
      </div> -->
      <div class="p-title" v-if="pageType===0">
        <span class="label">上传身份证明资料：身份证正面/反面</span>
      </div>
      <div class="upload-list" v-if="pageType===0">
        <ul class="nav-pills">
          <li v-for="(item, index) in BaseForm.chooseImages" :key="index">
            <span>
              <img :src="item" @click="handelLightbox(item)" class="full-width"/>
            </span>
            <i class="close-btn glyphicon glyphicon-remove-circle" @click="removeChooseImgsByIndex('1', index)" v-if="signStatus==='create'"></i>
          </li>
          <li v-if="ChoosePlusVisible">
            <span class="upload-plus" @click="handelChooseImage(1)">
              <i class="glyphicon glyphicon-plus"></i>
            </span>
          </li>
        </ul>
      </div>
      <span v-show="!BaseValidate.chooseImg1State" class="text-danger">请选择身份证正反面两张图片</span>
      <div class="p-title" v-if="pageType===0">
        <span class="label" style="white-space: initial;">上传怀孕资料：早孕告知书、最近一次化验单（B照、肝功、肾功、血常规、尿常规、心电图）</span>
      </div>
      <div class="upload-list" v-if="pageType===0">
        <ul class="nav-pills">
          <li v-for="(item, index) in BaseForm.chooseImages2" :key="index">
            <span>
              <img :src="item" @click="handelLightbox(item)" class="full-width"/>
            </span>
            <i class="close-btn glyphicon glyphicon-remove-circle" @click="removeChooseImgsByIndex('2', index)" v-if="signStatus==='create'"></i>
          </li>
          <li v-if="Choose2PlusVisible">
            <span class="upload-plus" @click="handelChooseImage(2)">
              <i class="glyphicon glyphicon-plus"></i>
            </span>
          </li>
        </ul>
      </div>
      <div class="p-title hide">
        <span class="label">服务成员信息</span>
      </div>
      <div class="form hide" v-if="pageType===0">
        <div class="table">
          <div class="tr">
            <div class="td label">成员类型</div>
            <div class="td text-right">
              <input class="form-control" disabled placeholder="孕产妇"/>
            </div>
          </div>
          <div class="tr">
            <div class="td label">姓名</div>
            <div class="td text-right">
              <input class="form-control" v-model="tab1Form.name" disabled/>
            </div>
          </div>
          <div class="tr">
            <div class="td label">身份证</div>
            <div class="td text-right">
              <input class="form-control" v-model="tab1Form.IdCard" disabled/>
            </div>
          </div>
          <div class="tr">
            <div class="td label">年龄</div>
            <div class="td text-right">
              <input class="form-control" v-model="tab1Form.age" disabled/>
            </div>
          </div>
          <div class="tr">
            <div class="td label">性别</div>
            <div class="td text-right">
              <input class="form-control" v-model="tab1Form.sex" disabled/>
            </div>
          </div>
        </div>
      </div>
      <div class="p-title" v-if="pageType === 1">
        <span class="label">服务成员信息</span>
      </div>
      <div class="form" v-if="pageType===1" v-for="(item, index) in childrenArr" :key="index">
        <div class="table">
          <div class="tr">
            <div class="td label">属性</div>
            <div class="td text-right">
              <input class="form-control" disabled placeholder="儿童"/>
            </div>
          </div>
          <div class="tr">
            <div class="td label">姓名</div>
            <div class="td text-right">
              <input class="form-control" v-model="item.name" placeholder="请输入子女真实姓名" :disabled="!item.editor"/>
              <span v-if="!childrensValidate[index].nameState" class="small-hint">（只能是中文或英文,长度1~15位）</span>
            </div>
          </div>
          <div class="tr">
            <div class="td label">性别</div>
            <div class="td text-right">
              <mt-radio
                v-if="item.editor"
                v-model="item.sex"
                :options="['女孩', '男孩']">
              </mt-radio>
              <input class="form-control" v-model="item.sex" v-if="!item.editor" disabled placeholder="请选择子女性别"/>
            </div>
          </div>
          <div class="tr">
            <div class="td label">出生年月</div>
            <div class="td text-right">
              <div class="td-table" @click="openPickerBirth(index)" v-if="item.editor">
                <div class="td-table-cell text">
                  <p class="m-b-normal">
                    <span v-if="item.age === ''">请选择子女出生日期</span>
                    <span v-else class="light">{{item.age}}</span>
                  </p>
                </div>
                <div class="td-table-cell icon">
                  <i class="glyphicon glyphicon-menu-right"></i>
                </div>
              </div>
              <input class="form-control" v-model="item.age" v-if="!item.editor" placeholder="请选择子女出生日期" disabled/>
              <span v-show="!childrensValidate[index].ageState" class="small-hint">请选择子女出生日期</span>
            </div>
          </div>
        </div>
      </div>
      <div class="notice">
        <span>
          <mt-checklist
            v-model="noticeCheck"
            :options="noticeOptions">
          </mt-checklist>
          <span class="cell link" @click="noticePopupVisible=true">签约须知</span>
        </span>
      </div>
      <div class="footer">
        <button class="btn-default btn-block" @click="confirmSignature">确认签约</button>
      </div>
    </div>
    <mt-popup
      v-model="addressPopupVisible"
      class="full-width addressPopup"
      position="bottom">
      <div class="address-step">
        <ul class="step-list">
          <li>
            <div class="step-item" :class="addressForm.province!=='' && stepCurrent !=1? 'finish':stepCurrent==1?'process':''" @click="handleStep(1)">
              <span class="icon">
                <span class="ico">
                  <span class="glyphicon"><i class="glyphicon glyphicon-ok"></i></span>
                  <span class="number">1</span>
                </span>
                <span class="line"></span>
              </span>
              <span class="text" :class="addressForm.province===''?'text-red':''">
                {{addressForm.province !== '' ? addressForm.province : '请选择省会'}}
              </span>
            </div>
          </li>
          <li>
            <div class="step-item" :class="addressForm.city!=='' && stepCurrent !=2? 'finish':stepCurrent==2?'process':''" @click="handleStep(2)">
              <span class="icon">
                <span class="ico">
                  <span class="glyphicon"><i class="glyphicon glyphicon-ok"></i></span>
                  <span class="number">2</span>
                </span>
                <span class="line"></span>
              </span>
              <span class="text" :class="addressForm.city===''?'text-red':''">
                {{addressForm.city !== '' ? addressForm.city : '请选择城市'}}
              </span>
            </div>
          </li>
          <li>
            <div class="step-item" :class="addressForm.area!=='' && stepCurrent !=3? 'finish':stepCurrent==3?'process':''" @click="handleStep(3)">
              <span class="icon">
                <span class="ico">
                  <span class="glyphicon"><i class="glyphicon glyphicon-ok"></i></span>
                  <span class="number">3</span>
                </span>
                <span class="line"></span>
              </span>
              <span class="text" :class="addressForm.area===''?'text-red':''">
                {{addressForm.area !== '' ? addressForm.area : '请选择区域'}}
              </span>
            </div>
          </li>
          <li>
            <div class="step-item" :class="addressForm.street!=='' && stepCurrent !=4? 'finish':stepCurrent==4?'process':''" @click="handleStep(4)">
              <span class="icon">
                <span class="ico">
                  <span class="glyphicon"><i class="glyphicon glyphicon-ok"></i></span>
                  <span class="number">4</span>
                </span>
                <span class="line"></span>
              </span>
              <span class="text" :class="addressForm.street===''?'text-red':''">
                {{addressForm.street !== '' ? addressForm.street : '请选择街道'}}
              </span>
            </div>
          </li>
          <li>
            <div class="step-item" :class="addressForm.villages!=='' && stepCurrent !=5? 'finish':stepCurrent==5?'process':''" @click="handleStep(5)">
              <span class="icon">
                <span class="ico">
                  <span class="glyphicon"><i class="glyphicon glyphicon-ok"></i></span>
                  <span class="number">5</span>
                </span>
                <span class="line"></span>
              </span>
              <span class="text" :class="addressForm.villages===''?'text-red':''">
                {{addressForm.villages !== '' ? addressForm.villages : '请选择居委会'}}
              </span>
            </div>
          </li>
        </ul>
      </div>
      <div class="address-list">
        <div class="address-head">
          <div class="search-control">
            <input type="search" @keyup.enter="changesearch" v-model="addressSearchValue" placeholder="搜索"/>
          </div>
        </div>
        <div class="switch province-list" v-if="stepCurrent===1">
          <div class="title">选择省份</div>
          <ul>
            <template v-for="(item, index) in ProvinceData">
              <li v-if="item.disabled === false" @click="setProvince(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
            </template>
          </ul>
        </div>
        <div class="switch city-list" v-if="stepCurrent===2">
          <div class="title">选择城市</div>
          <ul>
            <template v-for="(item, index) in CityData">
              <li v-if="item.disabled === false" @click="setCity(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
            </template>
          </ul>
        </div>
        <div class="switch area-list" v-if="stepCurrent===3">
          <div class="title">选择区域</div>
          <ul>
            <template v-for="(item, index) in AreaData">
              <li v-if="item.disabled === false" @click="setArea(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
            </template>
          </ul>
        </div>
        <div class="switch street-list" v-if="stepCurrent===4">
          <div class="title">选择街道</div>
          <ul>
            <template v-for="(item, index) in StreetData">
              <li v-if="item.disabled === false" @click="setStreet(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
            </template>
          </ul>
        </div>
        <div class="switch villages-list" v-if="stepCurrent===5">
          <div class="title">选择居委会</div>
          <ul>
            <template v-for="(item, index) in VillagesData">
              <li v-if="item.disabled === false" @click="setVillages(item.adminAreaCode, item.adminAreaName)" :key="index">{{item.adminAreaName}}</li>
            </template>
          </ul>
        </div>
      </div>
      <div class="footer-btn">
        <button class="btn-block" @click="cancelPopupAddress">取消</button>
      </div>
    </mt-popup>
    <mt-popup
      v-model="orgPopupVisible"
      class="full-width addressPopup"
      position="bottom">
      <div class="">
        <div class="address-list">
          <div class="switch area-list">
            <div class="title">选择卫生服务机构</div>
            <ul>
              <li v-for="(item, index) in areaOrgs" @click="setOrgId(item)" :key="index">{{item.orgName}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-btn">
        <button class="btn-block" @click="cancelPopupOrg">取消</button>
      </div>
    </mt-popup>
    <mt-popup
      v-model="noticePopupVisible"
      class="full-width noticePopup"
      position="bottom">
      <div class="body">
        <img :src="noticePicture" class="full-width"/>
        <div class="footer-btn">
          <button class="btn-block" @click="noticePopupHandelClose">确定</button>
        </div>
      </div>
    </mt-popup>
    <div class="signPopup" :class="SignatureSheetVisible?'on':'off'">
      <div class="body">
        <div class="title">居民签约 <span class="close" @click="closeSignPopup"><i class="glyphicon glyphicon-remove-circle"></i></span></div>
        <div class="canvas" ref="signCanvasBlock" @touchstart.prevent="signChange">
          <vueSignature ref="signature" :sigOption="signOption" :h="signCanvasH" :waterMark="waterMarkOptions"></vueSignature>
        </div>
      </div>
      <div class="footer-btn">
        <button class="overwrite-btn" @click="handelOverwrite">重写</button>
        <button class="confirm-btn" :class="btnDisabled?'disabled':''" :disabled="btnDisabled" @click="handelSubmit">确认</button>
      </div>
    </div>
    <!-- <mt-popup
      v-model="SignatureSheetVisible"
      class="full-width signaturePopup"
      position="bottom">
      <div class="body">
        <div class="title">居民签约 <span class="close" @click="SignatureSheetVisible=false"><i class="glyphicon glyphicon-remove-circle"></i></span></div>
        <div class="canvas">
          <vueSignature ref="signature" :sigOption="signOption" :w="'400px'" :h="'400px'"></vueSignature>
        </div>
      </div>
      <div class="footer-btn">
        <button class="overwrite-btn" @click="handelOverwrite">重写</button>
        <button class="confirm-btn" @click="handelSubmit">确认</button>
      </div>
    </mt-popup> -->
    <!-- 出生年月picker -->
    <mt-datetime-picker
      v-model="pickerBirthDefault"
      ref="pickerBirth"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="pickerBirthConfirm"
      :endDate="pickerBirthEnd">
    </mt-datetime-picker>
    <!-- 末次月经时间picker -->
    <mt-datetime-picker
      v-model="pickerLastMensesTimeDefault"
      ref="pickerLastMensesTime"
      type="date"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      @confirm="lastMensesTimePickerConfirm"
      :startDate="pickerLastMensesTimeStart"
      :endDate="pickerLastMensesTimeEnd">
    </mt-datetime-picker>
    <div class="light-box" :class="lightBoxVisible?'show':'hide'" @click="handelLightBoxClose">
      <div class="table">
        <div class="cell">
          <img :src="lightBoxImage"/>
        </div>
      </div>
    </div>
    <div class="v-modal" v-show="modalVisible" style="z-index: 98"></div>
  </div>
</template>

<script>
import store from '@/store'
import { getOrgInfo, getSignInfo, getAreaList, getVillages, getOrgsByAreaCode, createSign } from '@/api/signing/signing'
import { validatename, cardid, isvalidatemobile } from '@/util/validate'
import { SubtractDay, getBirthByIdNumber, getSexByIdCard, getAgeByBirth } from '@/util/index'
import _defaultPicture from '../../assets/images/org-default-picture.png'
import _noticePicture from '../../assets/images/notice-img.png'
import _signatureBg from '../../assets/images/signature-bg.png'
// import { wxpermission } from '@/wxpermission'
const wx = require('weixin-js-sdk')

export default {
  name: 'Home',
  data () {
    return {
      userId: store.getters.user_id,
      pageType: this.$route.query.pageType ? parseInt(this.$route.query.pageType) : null, // 0=孕产妇 1=儿童
      orgId: this.$route.query.orgId ? parseInt(this.$route.query.orgId) : null,
      groupId: this.$route.query.groupId ? parseInt(this.$route.query.groupId) : null,
      accountId: this.$route.query.accountId ? this.$route.query.accountId : store.getters.accountId,
      slaveId: this.$route.query.slaveId ? this.$route.query.slaveId : null,
      from: this.$route.query.voucherFrom ? this.$route.query.voucherFrom : '',
      orgInfo: {
        picture: _defaultPicture,
        orgname: '',
        groupname: ''
      },
      signStatus: 'create',
      signState: '', // 0=待审核 1=审核通过 2=审核不通过 3=审核已取消
      alreadySignNum: 0, // 已签约服务人员数
      childrenArr: [
        {
          name: '',
          sex: '男孩',
          age: '',
          birth: '',
          editor: true,
          animate: '',
          state: '',
          signState: ''
        }
      ], // 签约（儿童）服务成员
      childrensValidate: [
        {
          nameState: true,
          sexState: true,
          birthState: true,
          ageState: true
        }
      ], // 签约（儿童）服务成员，姓名、性别、年龄校验合法性
      addChildrenBtnVisible: true,
      BaseForm: {
        name: '',
        idCard: '',
        phone: '',
        lastMensesTime: '', // 末次月经时间
        address: '',
        subAddress: '',
        street: '',
        code: '',
        orgName: '',
        chooseImages: [], // 身份证图片
        chooseImagesIds: [], // 身份证图片微信本地图片id
        chooseImages2: [], // 怀孕资料图片
        chooseImages2Ids: [] // 怀孕资料图片微信本地图片id
      },
      BaseValidate: { // 表单各个列是否合法状态
        nameState: true,
        idCardState: true,
        phoneState: true,
        lastMensesTimeState: true,
        addressState: true,
        streetState: true,
        orgState: true,
        chooseImg1State: true
      },
      btnDisabled: false,
      pickerLastMensesTimeDefault: new Date(), // 末次月经时间默认选中日期为当天
      pickerLastMensesTimeStart: SubtractDay(290), // 末次月经时间起始日期为当天日期前290天
      pickerLastMensesTimeEnd: new Date(), // 末次月经时间控件结束日期小于当天
      pickerBirthDefault: new Date(), // 出生年月默认选中日期为当天
      pickerBirthEnd: new Date(), // 出生年月控件结束日期小于当天
      pickerOpenIndex: 0, // 子女出生年月日期控件下标
      addressPopupVisible: false, // “现住址”popup显示状态
      orgPopupVisible: false, // “所在卫生服务机构”popup显示状态
      addressForm: {
        province: '',
        city: '',
        area: '',
        street: '',
        villages: '',
        ProvinceCode: '',
        CityCode: '',
        AreaCode: '',
        StreetCode: '',
        VillagesCode: ''
      },
      stepCurrent: 1, // 地址省市区街道步骤下标
      ProvinceData: [], // 省会列表数据
      CityData: [], // 城市列表数据
      AreaData: [], // 区域列表数据
      StreetData: [], // 街道列表数据
      VillagesData: [], // 居委会列表数据
      tab1Form: { // 签约（孕产妇）服务成员信息
        name: '',
        IdCard: '',
        age: '',
        type: '',
        sex: '',
        state: ''
      },
      noticePopupVisible: false,
      noticePicture: _noticePicture,
      noticeCheck: [],
      noticeOptions: [
        { label: '我已阅读并确认', value: '1' }
      ],
      areaOrgs: [], // 区域下所有机构
      SignatureSheetVisible: false,
      signatureImage: '',
      signCanvasW: '400px',
      signCanvasH: '220px',
      signOption: {
        penColor: 'rgb(0, 0, 0)',
        backgroundColor: '#efefef'
      },
      signBGdataUrl: _signatureBg,
      signWaterMarkState: true,
      waterMarkOptions: {
        text: '请在此处签名，字迹工整！', // watermark text, > default ''
        font: '16px Arial', // mark font, > default '20px sans-serif'
        style: 'fill', // fillText and strokeText,  'all'/'stroke'/'fill', > default 'fill
        fillStyle: '#333', // fillcolor, > default '#333'
        x: 100, // fill positionX, > default 20
        y: 100 // fill positionY, > default 20
      },
      lightBoxVisible: false,
      lightBoxImage: '',
      ChoosePlusVisible: true,
      Choose2PlusVisible: true,
      modalVisible: false, // 底层透明遮挡显示状态
      addressSearchValue: ''
    }
  },
  created () {
    console.log('created')
    // wxpermission(0, () => {})
    // this.getOrgInfoFn()
    // 根据来源，省市区联动相对应显示默认值
    if (this.from !== '') {
      switch (this.from) {
        case '320582':
          this.addressForm.province = '江苏省'
          this.addressForm.city = '苏州市'
          this.addressForm.area = '张家港市'
          this.addressForm.ProvinceCode = '320000'
          this.addressForm.CityCode = '320500'
          this.addressForm.AreaCode = '320582'
          this.stepCurrent = 4
          break
        default:
          this.stepCurrent = 1
          break
      }
    }
    this.getUserSignInfoFn() // 获取用户签约信息回显
  },
  mounted: function () {
    console.log('mounted')
  },
  computed: {
  },
  components: {
  },
  methods: {
    getOrgInfoFn () { // 获取机构及团队信息
      if (this.orgId === null || this.groupId === null) {
        this.$toast({
          message: '机构或团队标识为空！',
          position: 'center',
          duration: 3000
        })
        return
      }
      let params = {
        orgId: this.orgId,
        groupId: this.groupId
      }
      this.$Indicator.open()
      getOrgInfo(params).then(res => {
        console.log(res)
        if (res && res.records != null) {
          let records = res.records
          this.orgInfo.picture = records.groupImage
          this.orgInfo.orgname = records.orgName
          this.orgInfo.groupname = records.groupName
          this.getUserSignInfoFn() // 获取用户签约信息回显
        } else {
          this.$toast({
            message: res.message,
            position: 'center',
            duration: 3000
          })
          this.$Indicator.close()
        }
      }).catch(error => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
        this.$Indicator.close()
      })
    },
    getUserSignInfoFn () { // 获取用户签约信息
      if (this.accountId === null || this.accountId === '') {
        this.$toast({
          message: '用户account id不能为空！',
          position: 'center',
          duration: 3000
        })
        return
      }
      let params = {
        type: this.pageType,
        accountId: this.accountId
      }
      if (this.slaveId) {
        params.userId = this.slaveId
      }
      getSignInfo(params).then(res => {
        this.$Indicator.close()
        // if (res.code && res.code !== 0) {
        //   this.$toast({
        //     message: res.message,
        //     position: 'center',
        //     duration: 3000
        //   })
        //   return false
        // }
        let data = res.data.records
        console.log(data)
        if (data.signId && data.signId !== '') {
          this.signStatus = 'update'
          this.Choose2PlusVisible = false
          this.ChoosePlusVisible = false
        } else {
          this.signStatus = 'create'
          this.getSignInfoCookies() // 获取用户签约cookie信息
          return false
        }
        this.accountId = data.accountId
        this.fileUuid = data.fileUuid
        this.signId = data.signId
        this.userId = data.userId
        this.signState = data.state
        this.BaseForm.name = data.name
        this.BaseForm.idCard = data.idCard
        this.BaseForm.phone = data.phoneNumber
        if (data.shenName !== '' && data.shiName !== '' && data.xiaName !== '') {
          this.BaseForm.address = data.shenName + ' ' + data.shiName + ' ' + data.xiaName
        }
        if (data.townName !== '' && data.villageName !== '') {
          this.BaseForm.subAddress = data.townName + ' ' + data.villageName
        }
        this.BaseForm.lastMensesTime = data.pregnantDate && data.pregnantDate !== '' ? data.pregnantDate.split(' ')[0] : ''
        // this.BaseForm.code = data.healthCode
        this.addressForm.province = data.shenName
        this.addressForm.city = data.shiName
        this.addressForm.area = data.xiaName
        this.addressForm.street = data.townName
        this.addressForm.villages = data.villageName
        this.addressForm.ProvinceCode = data.shenBm
        this.addressForm.CityCode = data.shiBm
        this.addressForm.AreaCode = data.xiaBm
        this.addressForm.StreetCode = data.xngBm
        this.addressForm.VillagesCode = data.villageBm

        if (this.addressForm.ProvinceCode !== '') {
          this.stepCurrent = 1
        }
        if (this.addressForm.CityCode !== '') {
          this.stepCurrent = 2
        }
        if (this.addressForm.AreaCode !== '') {
          this.stepCurrent = 3
        }
        if (this.addressForm.StreetCode !== '') {
          this.stepCurrent = 4
        }
        if (this.addressForm.VillagesCode !== '') {
          this.stepCurrent = 5
        }

        this.BaseForm.street = data.userAdress

        this.BaseForm.chooseImages.push(data.signSfzz) // 身份证图片回显
        this.BaseForm.chooseImages.push(data.signSfzf)

        // 孕产资料图片回显
        if (data.hyzl1 !== '') {
          this.BaseForm.chooseImages2.push(data.hyzl1)
        }
        if (data.hyzl2 !== '') {
          this.BaseForm.chooseImages2.push(data.hyzl2)
        }
        if (data.hyzl3 !== '') {
          this.BaseForm.chooseImages2.push(data.hyzl3)
        }
        if (data.hyzl4 !== '') {
          this.BaseForm.chooseImages2.push(data.hyzl4)
        }

        if (this.pageType === 1) { // 签约（儿童）服务成员回显
          if (data.bs.length > 0) {
            this.alreadySignNum = data.bs.length
            this.childrenArr = []
            this.childrensValidate = []
            for (let i = 0; i < data.bs.length; i++) {
              this.childrenArr.push({
                name: data.bs[i].name,
                sex: data.bs[i].sex === '1' ? '男孩' : '女孩',
                age: data.bs[i].birth !== null ? getAgeByBirth(data.bs[i].birth) : '1',
                editor: false,
                state: data.bs[i].state,
                signState: data.bs[i].signState
              })
              this.childrensValidate.push({
                nameState: true,
                sexState: true,
                ageState: true
              })
            }
            console.log('childrenArr:' + this.childrenArr.length)
          }

          if (data.bs.length >= 3) { // 儿童签约服务成员最多添加三条
            this.addChildrenBtnVisible = false
          }
        } else if (this.pageType === 0) { // 孕产妇
          if (this.signStatus === 'update') { // 将基本信息赋值至服务成员
            this.BaseFormIntoTab1()
          }
          if (data.bs.length > 0) {
            this.tab1Form.state = data.bs[0].state
          }
        }
      }).catch((error) => {
        this.$Indicator.close()
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    BaseValidateHandle () { // 表单验证
      this.BaseValidateName()
      this.BaseValidateIdCard()
      this.BaseValidateMensesLastDate()
      this.BaseValidatePhone()
      this.BaseValidateAddress()
      this.BaseValidateStreet()
      // this.BaseValidateOrg()
      this.BaseValidateChooseImg()
    },
    BaseValidateName () { // 姓名验证
      if (validatename(this.BaseForm.name)) {
        this.BaseValidate.nameState = true
      } else {
        this.BaseValidate.nameState = false
      }
      if (this.pageType === 0) {
        this.BaseFormIntoTab1()
      }
      this.saveSignInfoToCookie() // 储存用户签约录入信息
    },
    BaseValidateIdCard () { // 身份证验证
      if (cardid(this.BaseForm.idCard)[0]) {
        this.BaseValidate.idCardState = false
      } else {
        this.BaseValidate.idCardState = true
      }
      if (this.pageType === 0) {
        this.BaseFormIntoTab1()
      }
      this.saveSignInfoToCookie() // 储存用户签约录入信息
    },
    // BaseValidateIdCardKid () { // 子女身份证验证
    //   if (cardid(this.userData.idCardKid)[0]) {
    //     this.BaseValidate.idCardKidState = false
    //   } else {
    //     this.BaseValidate.idCardKidState = true
    //   }
    // },
    BaseValidateMensesLastDate () { // 末次月经时间验证
      if (this.BaseForm.lastMensesTime === '') {
        this.BaseValidate.lastMensesTimeState = false
      } else {
        this.BaseValidate.lastMensesTimeState = true
      }
    },
    BaseValidatePhone () { // 手机号验证
      console.log('1')
      if (this.BaseForm.phone === '') {
        this.BaseValidate.phoneState = false
      } else if (isvalidatemobile(this.BaseForm.phone)[0]) {
        this.BaseValidate.phoneState = false
      } else {
        this.BaseValidate.phoneState = true
      }
      if (this.pageType === 0) {
        this.BaseFormIntoTab1()
      }
      this.saveSignInfoToCookie() // 储存用户签约录入信息
    },
    BaseValidateAddress () { // 现住址验证
      if (this.BaseForm.address === '') {
        this.BaseValidate.addressState = false
      } else {
        this.BaseValidate.addressState = true
      }
    },
    BaseValidateStreet () { // 详细地址
      if (this.BaseForm.street === '' && this.BaseForm.street.length > 25) {
        this.BaseValidate.streetState = false
      } else {
        this.BaseValidate.streetState = true
      }
      if (this.pageType === 0) {
        this.BaseFormIntoTab1()
      }
      this.saveSignInfoToCookie() // 储存用户签约录入信息
    },
    BaseValidateOrg () { // 所在社区服务机构验证
      if (!this.BaseForm.orgId || this.BaseForm.orgId === '') {
        this.BaseValidate.orgState = false
      } else {
        this.BaseValidate.orgState = true
      }
    },
    BaseValidateBirthKid () { // 出生日期验证
      if (this.BaseForm.birthKid === '') {
        this.BaseValidate.birthKidState = false
      } else {
        this.BaseValidate.birthKidState = true
      }
    },
    BaseValidateChooseImg () { // 上传身份证图片验证（最少两张）
      if (this.BaseForm.chooseImages.length < 2) {
        this.BaseValidate.chooseImg1State = false
      } else {
        this.BaseValidate.chooseImg1State = true
      }
    },
    tab2Validate (index) {
      this.tab2ValidateName(index)
      this.tab2ValidateAge(index)
    },
    tab2ValidateName (index) {
      if (validatename(this.childrenArr[index].name)) {
        this.childrensValidate[index].nameState = true
      } else {
        this.childrensValidate[index].nameState = false
      }
    },
    tab2ValidateAge (index) {
      if (this.childrenArr[index].birth === '') {
        this.childrensValidate[index].ageState = false
      } else {
        this.childrensValidate[index].ageState = true
      }
    },
    openPickerLastMensesTime () { // 打开末次月经时间日期控件
      this.$refs.pickerLastMensesTime.open()
    },
    lastMensesTimePickerConfirm (date) {
      const selectedDate = new Date(date)
      let month = selectedDate.getMonth() + 1
      if (selectedDate.getMonth() + 1 < 10) {
        month = '0' + month
      }
      let day = selectedDate.getDate()
      if (day < 10) {
        day = '0' + day
      }
      this.BaseForm.lastMensesTime = selectedDate.getFullYear() + '-' + month + '-' + day
      this.saveSignInfoToCookie() // 储存用户签约录入信息
    },
    openPickerBirth (index) { // 打开出生日期控件
      this.pickerOpenIndex = index
      this.$refs.pickerBirth.open()
    },
    pickerBirthConfirm (date) {
      this.BaseValidate.birthKidState = true
      const selectedDate = new Date(date)
      let month = selectedDate.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let day = selectedDate.getDate()
      if (day < 10) {
        month = '0' + day
      }
      let birth = selectedDate.getFullYear() + '-' + month + '-' + day
      this.childrenArr[this.pickerOpenIndex].birth = birth
      this.childrenArr[this.pickerOpenIndex].age = getAgeByBirth(birth)
    },
    openPopupAddress () { // 现住址picker
      this.addressPopupVisible = true
      console.log(this.stepCurrent)
      if (this.stepCurrent === 1) {
        this.getProvince()
      } else if (this.stepCurrent === 2) {
        this.getCity(this.addressForm.ProvinceCode)
      } else if (this.stepCurrent === 3) {
        this.getArea(this.addressForm.CityCode)
      } else if (this.stepCurrent === 4) {
        this.getStreet(this.addressForm.AreaCode)
      } else if (this.stepCurrent === 5) {
        this.getVillages(this.addressForm.StreetCode)
      }
    },
    cancelPopupAddress () {
      this.addressPopupVisible = false

      if (this.addressForm.province !== '') {
        this.BaseForm.address = this.addressForm.province
      }
      if (this.addressForm.city !== '') {
        this.BaseForm.address = this.BaseForm.address + ' ' + this.addressForm.city
      }
      if (this.addressForm.area !== '') {
        this.BaseForm.address = this.BaseForm.address + ' ' + this.addressForm.area
      }
      if (this.addressForm.street !== '') {
        this.BaseForm.subAddress = this.addressForm.street
      }
      if (this.addressForm.villages !== '') {
        this.BaseForm.subAddress = this.BaseForm.subAddress + ' ' + this.addressForm.villages
      }
    },
    openPopupOrg () {
      if (this.addressForm.AreaCode !== '') {
        this.orgPopupVisible = true
        let params = {
          countryId: this.addressForm.AreaCode
        }
        getOrgsByAreaCode(params).then(res => {
          this.areaOrgs = res.date
        })
      } else {
        this.$toast({
          message: '请先选择现住址',
          position: 'center',
          duration: 3000
        })
      }
    },
    cancelPopupOrg () {
      this.orgPopupVisible = false
    },
    noticePopupHandelClose () {
      this.noticePopupVisible = false
      this.noticeCheck.push(1)
    },
    BaseFormIntoTab1 () { // 将基本信息赋值至孕产妇服务成员
      if (this.BaseForm.name !== '' && this.BaseValidate.nameState && this.BaseForm.idCard !== '' && this.BaseValidate.idCardState) {
        this.tab1Form.name = this.BaseForm.name
        this.tab1Form.IdCard = this.BaseForm.idCard
        this.tab1Form.age = getAgeByBirth(getBirthByIdNumber(this.BaseForm.idCard))
        this.tab1Form.sex = getSexByIdCard(this.BaseForm.idCard) === '1' ? '男' : '女'
      }
    },
    confirmSignature () {
      if (parseInt(this.pageType) === 0) {
        if (this.signState === '1') { // 审核通过 跳转至首页
          this.$router.push({
            path: '/home'
          })
          return
        } else if (this.signState === '0') { // 未审核通过 关闭页面
          this.$toast({
            message: '审核周期约三天，请您耐心等待！',
            position: 'center',
            duration: 3000
          })
          setTimeout(function () {
            wx.closeWindow()
          }, 2500)
          return
        }
      } else if (parseInt(this.pageType) === 1) {
        console.log(this.childrenArr[0].signState)
        if (this.childrenArr[0].signState === '1') {
          this.$router.push({
            path: '/home'
          })
          return
        }
      }

      this.BaseValidateHandle()
      if (this.pageType === 1) { // 子女
        let downState = true
        for (let i = 0; i < this.childrenArr.length; i++) {
          this.tab2Validate(i)
          if (!this.childrensValidate[i].nameState || !this.childrensValidate[i].ageState) {
            downState = false
          }
        }
        if (!downState) {
          return false
        }
      } else if (this.pageType === 0) { // 配偶
        if (!this.BaseValidate.nameState || !this.BaseValidate.idCardState || !this.BaseValidate.lastMensesTimeState || !this.BaseValidate.chooseImg1State) {
          return false
        }
      }

      if (parseInt(this.noticeCheck[0]) !== 1) {
        this.$toast({
          message: '请预览签约须知后勾选',
          position: 'center',
          duration: 3000
        })
        return false
      }
      this.SignatureSheetVisible = true
      this.modalVisible = true
      this.signCanvasW = this.$refs.signCanvasBlock.offsetWidth
    },
    closeSignPopup () {
      this.SignatureSheetVisible = false
      this.modalVisible = false
    },
    handelSubmit () { // 签名无误提交
      this.signatureImage = this.$refs.signature.save()
      if (this.$refs.signature.isEmpty()) {
        this.$toast({
          message: '未获到签名信息，请先签名！',
          position: 'center',
          duration: 3000
        })
        return false
      }
      this.handelSave()
    },
    handelOverwrite () { // 签名重写
      this.$refs.signature.clear()
    },
    handelSave () {
      console.log('submit')
      let childrenArr = []
      if (this.pageType === 0) {
        childrenArr = [
          {
            birth: this.tab1Form.IdCard.substring(6, 10) + '-' + this.tab1Form.IdCard.substring(10, 12) + '-' + this.tab1Form.IdCard.substring(12, 14),
            idCard: this.tab1Form.IdCard,
            name: this.tab1Form.name,
            relation: '30', // 20:子女;30:本人(为孕妇)
            sex: this.tab1Form.sex === '男' ? '1' : this.tab1Form.sex === '女' ? '2' : '3',
            state: this.tab1Form.state
          }
        ]
      } else if (this.pageType === 1) {
        for (let i = 0; i < this.childrenArr.length; i++) { // 儿童签约只获取新增服务人员信息
          childrenArr.push({
            birth: this.childrenArr[i].birth,
            idCard: '',
            name: this.childrenArr[i].name,
            relation: '20', // 20:子女;30:本人(为孕妇)
            sex: this.childrenArr[i].sex === '男孩' ? '1' : this.childrenArr[i].sex === '女孩' ? '2' : '3'
          })
        }
      }
      let params = {
        bs: childrenArr,
        // 'accountId': this.accountId,
        // 'group_id': this.groupId,
        'orgId': this.orgId,
        'idCard': this.BaseForm.idCard,
        'pregnantDate': this.BaseForm.lastMensesTime,
        'imagedate': this.signatureImage,
        'name': this.BaseForm.name,
        'phoneNumber': this.BaseForm.phone,
        'type': this.pageType === 0 ? 0 : this.pageType,
        // 'healthCode': this.BaseForm.code,
        'userAdress': this.BaseForm.street,
        'shenBm': this.addressForm.ProvinceCode,
        'shiBm': this.addressForm.CityCode,
        'xiaBm': this.addressForm.AreaCode,
        'xngBm': this.addressForm.StreetCode,
        'villageBm': this.addressForm.VillagesCode,
        'voucherUserId': this.userId,
        'hyzl1': this.BaseForm.chooseImages2[0] ? this.BaseForm.chooseImages2[0] : '',
        'hyzl2': this.BaseForm.chooseImages2[1] ? this.BaseForm.chooseImages2[1] : '',
        'hyzl3': this.BaseForm.chooseImages2[2] ? this.BaseForm.chooseImages2[2] : '',
        'hyzl4': this.BaseForm.chooseImages2[3] ? this.BaseForm.chooseImages2[3] : '',
        'signSfzz': this.BaseForm.chooseImages[0] ? this.BaseForm.chooseImages[0] : '',
        'signSfzf': this.BaseForm.chooseImages[1] ? this.BaseForm.chooseImages[1] : '',
        'dq': 'zjg'
      }
      params.accountId = this.accountId
      if (this.signStatus === 'update') { // 如signId不为0或者为空则是修改签约信息
        params.fileUuid = this.fileUuid
        params.signId = this.signId
        params.userId = this.userId
      }
      this.btnDisabled = true
      this.$Indicator.open()
      // console.log('sign params:' + JSON.stringify(params))
      createSign(params).then(res => {
        this.btnDisabled = false
        this.$Indicator.close()
        if (res.code === 200 && res.value) {
          if (this.pageType === 0) {
            this.$toast({
              message: '审核周期约三天，请您耐心等待！',
              position: 'center',
              duration: 3000
            })
            if (this.signState === '2' || this.signState === '') { // 签约驳回、第一次签约
              setTimeout(function () {
                wx.closeWindow()
              }, 2500)
            }
          } else if (this.pageType === 1) {
            this.$toast({
              message: '签约成功！',
              position: 'center',
              duration: 3000
            })
            this.$router.push({
              path: '/home'
            })
          }
        } else {
          this.$toast({
            message: '保存失败',
            position: 'center',
            duration: 3000
          })
        }
      }).catch((error) => {
        this.btnDisabled = false
        this.$Indicator.close()
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    handleStep (index) {
      console.log('handleStep' + index)
      if (index === 1 && this.addressForm.province !== '') {
        this.stepCurrent = index
        this.getProvince()
      } else if (index === 2 && this.addressForm.city !== '') {
        this.stepCurrent = index
        this.getCity(this.addressForm.ProvinceCode)
      } else if (index === 3 && this.addressForm.region !== '') {
        this.stepCurrent = index
        this.getArea(this.addressForm.CityCode)
      } else if (index === 4 && this.addressForm.street !== '') {
        this.stepCurrent = index
        this.getStreet(this.addressForm.AreaCode)
      } else if (index === 5 && this.addressForm.villages !== '') {
        this.stepCurrent = index
        this.getVillages(this.addressForm.StreetCode)
      }
    },
    getProvince () { // 获取省会信息
      let params = {
        parentCode: 0,
        level: 0
      }
      this.getAreaListFn(params)
    },
    setProvince (code, val) {
      this.addressSearchValue = ''
      this.getCity(code)
      this.addressForm.province = val
      this.addressForm.ProvinceCode = code
      this.addressForm.city = ''
      this.addressForm.area = ''
      this.addressForm.street = ''
      this.addressForm.villages = ''
      this.addressForm.CityCode = ''
      this.addressForm.AreaCode = ''
      this.addressForm.StreetCode = ''
      this.addressForm.VillagesCode = ''
      this.stepCurrent = 2
      this.saveSignInfoToCookie() // 储存用户签约录入信息
    },
    getCity (parentCode) { // 根据省会code获取城市信息
      let params = {
        parentCode: parentCode,
        level: 1
      }
      this.getAreaListFn(params)
    },
    setCity (code, val) {
      this.addressSearchValue = ''
      this.getArea(code)
      this.addressForm.city = val
      this.addressForm.CityCode = code
      this.addressForm.area = ''
      this.addressForm.AreaCode = ''
      this.addressForm.street = ''
      this.addressForm.StreetCode = ''
      this.addressForm.villages = ''
      this.addressForm.VillagesCode = ''
      this.stepCurrent = 3
      this.saveSignInfoToCookie() // 储存用户签约录入信息
    },
    getArea (parentCode) { // 根据城市code获取区域信息
      let params = {
        parentCode: parentCode,
        level: 2
      }
      this.getAreaListFn(params)
    },
    setArea (code, val) {
      this.addressSearchValue = ''
      this.getStreet(code)
      this.addressForm.area = val
      this.addressForm.AreaCode = code
      this.addressForm.street = ''
      this.addressForm.StreetCode = ''
      this.addressForm.villages = ''
      this.addressForm.VillagesCode = ''
      this.stepCurrent = 4
      this.saveSignInfoToCookie() // 储存用户签约录入信息
    },
    getStreet (parentCode) { // 根据区域code获取街道信息
      let params = {
        parentCode: parentCode,
        level: 3
      }
      this.getAreaListFn(params)
    },
    setStreet (code, val) {
      this.addressSearchValue = ''
      this.getVillages(code)
      this.addressForm.street = val
      this.addressForm.StreetCode = code
      this.addressForm.villages = ''
      this.addressForm.VillagesCode = ''
      this.stepCurrent = 5
      this.saveSignInfoToCookie() // 储存用户签约录入信息
    },
    getVillages (parentCode) { // 根据街道code获取居委会信息
      let params = {
        parentCode: parentCode,
        level: 4
      }
      this.getVillagesFn(params)
    },
    setVillages (code, val) {
      this.addressSearchValue = ''
      this.addressForm.villages = val
      this.addressForm.VillagesCode = code
      // this.stepCurrent = 5
      this.saveSignInfoToCookie() // 储存用户签约录入信息
      this.cancelPopupAddress()
    },
    setOrgId (item) {
      this.BaseForm.orgId = item.orgId
      this.BaseForm.orgName = item.orgName
      this.cancelPopupOrg()
    },
    getAreaListFn (params) { // 获取全国省市区街
      getAreaList(params).then(res => {
        let records = res.data.records
        if (params.level === 0) {
          this.ProvinceData = []
          records.forEach(item => {
            item.disabled = false
            this.ProvinceData.push(item)
          })
        } else if (params.level === 1) {
          this.CityData = []
          records.forEach(item => {
            item.disabled = false
            this.CityData.push(item)
          })
        } else if (params.level === 2) {
          this.AreaData = []
          records.forEach(item => {
            item.disabled = false
            this.AreaData.push(item)
          })
        } else if (params.level === 3) {
          this.StreetData = []
          records.forEach(item => {
            item.disabled = false
            this.StreetData.push(item)
          })
        }
      })
    },
    getVillagesFn (params) { // 获取街道下居委会信息
      getVillages(params).then(res => {
        let records = res.data.records
        this.VillagesData = []
        records.forEach(item => {
          item.disabled = false
          this.VillagesData.push(item)
        })
      })
    },
    handelChooseImage (type) {
      let that = this
      if ((that.BaseForm.chooseImages.length < 2 && type === 1) || (that.BaseForm.chooseImages2.length < 4 && type === 2)) {
        let chooseImgCount = 0
        if (type === 1) { // 身份证明必传2张
          chooseImgCount = 2 - that.BaseForm.chooseImages.length
        } else if (type === 2) { // 产检证明最多传4张
          chooseImgCount = 4 - that.BaseForm.chooseImages2.length
        }

        wx.chooseImage({
          count: chooseImgCount, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            let localIds = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            console.log(localIds, type)
            if (type === 1) {
              that.BaseForm.chooseImagesIds.push(localIds)
            } else if (type === 2) {
              that.BaseForm.chooseImages2Ids.push(localIds)
            }
            that.saveSignInfoToCookie() // 储存用户签约录入信息
            that.wxGetLocalImgData(localIds, type)
          }
        })
      }
    },
    wxGetLocalImgData (localIds, type) {
      let that = this
      wx.getLocalImgData({
        localId: localIds.shift(), // 需要上传的图片的本地ID，由chooseImage接口获得
        success: function (res) {
          let localData = res.localData
          let imageBase64 = ''
          // 自处目的是为了解决android图片前没有“data:image/jpeg;base64,”图片无法显示问题
          if (localData.indexOf('data:image') === 0) {
            imageBase64 = localData
          } else {
            imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '')
          }
          if (type === 1) {
            that.BaseForm.chooseImages.push(imageBase64)
          } else if (type === 2) {
            that.BaseForm.chooseImages2.push(imageBase64)
          }
          if (localIds.length > 0) {
            that.wxGetLocalImgData(localIds, type)
          }
          that.uploadImgBtnHandel()
        }
      })
    },
    // async iosPreview (localIds) {
    //   for (let i = 0; i < localIds.length; i++) {
    //     await this.readImage(localIds[i])
    //   }
    // },
    // readImage (item) {
    //   let _this = this
    //   return new Promise((resolve, reject) => {
    //     wx.getLocalImgData({
    //       localId: item,
    //       success: function (res) {
    //         let localData = res.localData
    //         localData = localData.replace('jgp', 'jpeg')
    //         _this.BaseForm.chooseImages.push(localData)
    //         resolve('done!')
    //       },
    //       fail: function () {
    //       }
    //     })
    //   })
    // },
    uploadImgBtnHandel () {
      let that = this
      console.log('===1' + that.BaseForm.chooseImages.length)
      if (that.BaseForm.chooseImages.length >= 2) {
        that.ChoosePlusVisible = false
      } else {
        that.ChoosePlusVisible = true
      }
      console.log('===2' + that.BaseForm.chooseImages2.length)
      if (that.BaseForm.chooseImages2.length >= 4) {
        that.Choose2PlusVisible = false
      } else {
        that.Choose2PlusVisible = true
      }
    },
    removeChooseImgsByIndex (type, index) {
      if (type === '1') { // 身份证照片移除
        this.BaseForm.chooseImages.splice(index, 1)
        this.BaseForm.chooseImagesIds.splice(index, 1)
      } else if (type === '2') { // 产检资料照片移除
        this.BaseForm.chooseImages2.splice(index, 1)
        this.BaseForm.chooseImages2Ids.splice(index, 1)
      }
      this.saveSignInfoToCookie()
      this.uploadImgBtnHandel() // 上传图片按钮根据数量限制显示/隐藏
    },
    handelLightbox (image) { // 图片放大弹层预览
      this.lightBoxImage = image
      this.lightBoxVisible = true
    },
    handelLightBoxClose () {
      this.lightBoxImage = ''
      this.lightBoxVisible = false
    },
    saveSignInfoToCookie () { // 将签约信息存入cookie
      // if (this.signId === '' || !this.signId) {
      //   let signInfoJSON = {
      //     BaseForm: {
      //       name: this.BaseForm.name,
      //       idCard: this.BaseForm.idCard,
      //       phone: this.BaseForm.phone,
      //       lastMensesTime: this.BaseForm.lastMensesTime, // 末次月经时间
      //       address: this.BaseForm.address,
      //       subAddress: this.BaseForm.subAddress,
      //       street: this.BaseForm.street,
      //       chooseImagesIds: this.BaseForm.chooseImagesIds, // 身份证图片微信本地图片id
      //       chooseImages2Ids: this.BaseForm.chooseImages2Ids // 怀孕资料图片微信本地图片id
      //     },
      //     addressForm: this.addressForm
      //   }
      //   this.$cookies.set('signInfo', JSON.stringify(signInfoJSON), 60 * 60 * 24 * 1)
      //   // store.dispatch('setSignInfo', JSON.stringify(signInfoJSON))
      // }
    },
    getSignInfoCookies () { // 获取用户签约信息cookie
      // let signInfo = this.$cookies.get('signInfo')
      // if (signInfo !== '' && signInfo) {
      //   this.BaseForm.name = signInfo.BaseForm.name
      //   this.BaseForm.idCard = signInfo.BaseForm.idCard
      //   this.BaseForm.phone = signInfo.BaseForm.phone
      //   this.BaseForm.lastMensesTime = signInfo.BaseForm.lastMensesTime // 末次月经时间
      //   // this.BaseForm.address = signInfo.addressForm.province + ' ' + signInfo.addressForm.city + ' ' + signInfo.addressForm.area
      //   // this.BaseForm.subAddress = signInfo.addressForm.street + ' ' + signInfo.addressForm.villages
      //   console.log(this.addressForm.province)
      //   if (signInfo.addressForm.province !== '') {
      //     this.BaseForm.address = signInfo.addressForm.province
      //   }
      //   if (signInfo.addressForm.city !== '') {
      //     this.BaseForm.address = this.BaseForm.address + ' ' + signInfo.addressForm.city
      //   }
      //   if (signInfo.addressForm.area !== '') {
      //     this.BaseForm.address = this.BaseForm.address + ' ' + signInfo.addressForm.area
      //   }
      //   if (signInfo.addressForm.street !== '') {
      //     this.BaseForm.subAddress = signInfo.addressForm.street
      //   }
      //   if (signInfo.addressForm.villages !== '') {
      //     this.BaseForm.subAddress = this.BaseForm.subAddress + ' ' + signInfo.addressForm.villages
      //   }
      //   this.BaseForm.street = signInfo.BaseForm.street
      //   this.BaseForm.chooseImagesIds = signInfo.BaseForm.chooseImagesIds // 身份证图片微信本地图片id
      //   this.BaseForm.chooseImages2Ids = signInfo.BaseForm.chooseImages2Ids // 怀孕资料图片微信本地图片id
      //   if (this.BaseForm.chooseImagesIds.length > 0) {
      //     this.getWXLocalImgDataById(0, 1)
      //   }
      //   // this.wxGetLocalImgData(signInfo.BaseForm.chooseImages2Ids, 2)
      //   if (!this.from || this.from === '') {
      //     this.addressForm = signInfo.addressForm
      //   }
      //   // this.$toast({
      //   //   message: signInfo.BaseForm.chooseImagesIds,
      //   //   position: 'center',
      //   //   duration: 3000
      //   // })
      // }
    },
    getWXLocalImgDataById (index, type) {
      let that = this
      let localId = ''
      if (type === 1) {
        localId = that.BaseForm.chooseImagesIds[index]
      } else if (type === 2) {
        localId = that.BaseForm.chooseImages2Ids[index]
      }
      wx.getLocalImgData({
        localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
        success: function (res) {
          let localData = res.localData
          let imageBase64 = ''
          // 自处目的是为了解决android图片前没有“data:image/jpeg;base64,”图片无法显示问题
          if (localData.indexOf('data:image') === 0) {
            imageBase64 = localData
          } else {
            imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '')
          }
          if (type === 1) {
            that.BaseForm.chooseImages.push(imageBase64)
            if (index + 1 < that.BaseForm.chooseImagesIds.length) {
              that.getWXLocalImgDataById(index + 1, 1)
            } else {
              index = 0
              if (that.BaseForm.chooseImages2Ids.length > 0) {
                that.getWXLocalImgDataById(index, 2)
              }
            }
          } else if (type === 2) {
            that.BaseForm.chooseImages2.push(imageBase64)
            if (index + 1 < that.BaseForm.chooseImages2Ids.length) {
              that.getWXLocalImgDataById(index + 1, 2)
            }
          }
          that.uploadImgBtnHandel()
        }
      })
    },
    signChange (e) { // 第一次签名清除水印
      if (this.signWaterMarkState) {
        console.log('signChange')
        this.handelOverwrite()
        this.signWaterMarkState = false
      }
    },
    changesearch () {
      let searchVal = this.addressSearchValue
      switch (this.stepCurrent) {
        case 1:
          if (searchVal !== '') {
            this.ProvinceData.forEach(item => {
              if (item.adminAreaName.indexOf(searchVal) >= 0) {
                item['disabled'] = false
              } else {
                item['disabled'] = true
              }
            })
          } else {
            this.ProvinceData.forEach(item => {
              item['disabled'] = false
            })
          }
          break
        case 2:
          if (searchVal !== '') {
            this.CityData.forEach(item => {
              if (item.adminAreaName.indexOf(searchVal) >= 0) {
                item['disabled'] = false
              } else {
                item['disabled'] = true
              }
            })
          } else {
            this.CityData.forEach(item => {
              item['disabled'] = false
            })
          }
          break
        case 3:
          if (searchVal !== '') {
            this.AreaData.forEach(item => {
              if (item.adminAreaName.indexOf(searchVal) >= 0) {
                item['disabled'] = false
              } else {
                item['disabled'] = true
              }
            })
          } else {
            this.AreaData.forEach(item => {
              item['disabled'] = false
            })
          }
          break
        case 4:
          if (searchVal !== '') {
            // let newStreetData = []
            this.StreetData.forEach(item => {
              if (item.adminAreaName.indexOf(searchVal) >= 0) {
                item['disabled'] = false
              } else {
                item['disabled'] = true
              }
            })
            console.log(JSON.stringify(this.StreetData))
          } else {
            this.StreetData.forEach(item => {
              item['disabled'] = false
            })
          }
          break
        case 5:
          if (searchVal !== '') {
            this.VillagesData.forEach(item => {
              if (item.adminAreaName.indexOf(searchVal) >= 0) {
                item['disabled'] = false
              } else {
                item['disabled'] = true
              }
            })
          } else {
            this.VillagesData.forEach(item => {
              item['disabled'] = false
            })
          }
          break
      }
    }
  }
}
</script>
<style scoped>
  .full-page {
    background-color: #f5f6f7;
  }
  .sign-page .head{
    position:relative;
    height: 10em;
  }
  .sign-page .head > .head-bg {
    position:absolute;
    background-color:#43d1be;
    width:120%;
    height: 7em;
    left:-10%;
    top:0;
    z-index:1;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
  }
  .sign-page .head > .head-block {
    position:absolute;
    left:0;
    top: 3em;
    z-index:2;
    background-color:#fff;
    width:100%;
    color:#333;
    box-shadow:0 2px 8px #ccc;
    border-radius: 5px;
    padding: 0 0.5em;
  }
  .sign-page .head > .head-block > .table {
    margin-bottom: 0;
  }

  .sign-page .head > .head-block .td.picture {
    width: 6em;
  }

  .sign-page .head > .head-block .td.picture > .avatar{
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center center;
  }

  .sign-page .head > .head-block .info > .title{
    font-size: 1.1em;
    color:#35444f;
    margin-bottom: 0.5em;
  }

  .sign-page .head > .head-block .info > .des{
    font-size:80%;
  }

  .sign-page .p-title{
    padding: 1.2em 0 0 0;
  }

  .sign-page .form > .table > .tr > .td.label {
    color: #9aa0a4;
    font-weight: normal;
  }
  .addressPopup .address-step{
    padding: 0 1em;
  }

  .address-step .step-list{
    margin-bottom: 0;
    margin-top: 1em;
  }

  .address-step .step-list .step-item > .icon {
    display: inline-block;
    width: 2em;
    height: 2.7em;
    position: relative;
  }
  .address-step .step-list .step-item > .icon > .ico{
    display: inline-block;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em;
    border: 1px solid #dddee1;
    color: #333;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #fff;
    font-size: 0.9em;
  }
  .address-step .step-list .step-item > .icon > .ico > .glyphicon {
    display: none;
    line-height: initial;
  }
  .address-step .step-list .step-item > .icon > .ico > .number{
    display: block;
  }
  .address-step .step-list .step-item.finish > .icon > .ico{
    border:#2d8cf0 solid 1px;
    color:#2d8cf0;
  }
  .address-step .step-list .step-item.finish > .icon > .ico > .glyphicon{
    display: block;
  }
  .address-step .step-list .step-item.finish > .icon > .ico > .glyphicon > i {
    top: 2px;
  }
  .address-step .step-list .step-item.finish > .icon > .ico > .number{
    display: none;
  }
  .address-step .step-list .step-item.process > .icon > .ico{
    border:#2d8cf0 solid 1px;
    background-color: #2d8cf0;
    color:#ffffff;
  }
  .address-step .step-list .step-item > .icon > .line {
    position:absolute;
    height:100%;
    top:0;
    left:0;
    right: 0;
    margin:0 auto;
    width:1px;
    background:#dddee1;
  }
  .address-step .step-list .step-item.finish > .icon > .line{
    background:#2d8cf0;
  }
  .address-step .step-list > li:last-child .step-item > .icon > .line{
    display: none;
  }
  .address-step .step-list .step-item > .text{
    margin-left: 0.5em;
  }

  .addressPopup .address-list {
    padding: 0.5em 1em;
    background-color:#f5f6f7;
    height: 17em;
    overflow-y:auto;
  }

  .addressPopup .address-list .address-head {
    margin: 0.2em 0;
  }

  .addressPopup .address-list > .switch > .title {
    color: #9aa0a4;
  }

  .addressPopup .address-list > .switch > ul li {
    padding: 0.5em 0;
  }

  .addressPopup .footer-btn > button{
    width: 100%;
    padding: 1em 0;
    border: none;
    background-color: #fff;
    font-size: 1em;
  }

  .noticePopup .body {
    padding: 1em;
    overflow: auto;
    height: 100%;
    position: relative;
    padding-bottom: 60px;
  }
  .noticePopup .footer-btn {
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
  }
  .noticePopup .footer-btn > button {
    width: 100%;
    padding: 1em 0;
    border: none;
    background-color:#43d1be;
    color: #fff;
    font-size: 1em;
  }

  .signaturePopup .body .title{
    padding: 0.7em 0.5em;
    font-size: 1.2em;
    border-bottom: 1px solid #efefef;
  }

  .signaturePopup .body .title > .close {
    opacity: 1;
  }

  .signaturePopup .body .canvas {
    min-height: 240px;
    background-color: #dddee1;
  }
  .signaturePopup .footer-btn {
    overflow: hidden;
  }
  .signaturePopup .footer-btn > button {
    width: 50%;
    padding: 1em 0;
    border: none;
    background-color:#fff;
    font-size: 1em;
    float: left;
  }
  .signaturePopup .footer-btn > button.confirm-btn {
    background-color:#43d1be;
    color: #fff;
  }

  .upload-list{
    overflow: hidden;
    padding-top: 1.2em;
  }
  .upload-list ul li {
    padding-right: 5px;
    margin-left: 0;
    margin-bottom: 5px;
    position: relative;
  }
  .upload-list ul li > span{
    display: inline-block;
    width: 90px;
    height: 90px;
    max-height: 90px;
    position: relative;
    overflow: hidden;
  }
  .upload-list ul li > span.upload-plus {
    font-size: 3em;
    line-height: 90px;
    text-align: center;
    color: #9aa0a4;
    border: 1px dotted #9aa0a4;
    border-radius: 5px;
  }
  .upload-list ul li > .close-btn {
    position: absolute;
    right: 0;
    top: -5px;
    z-index: 1;
    color: #333;
    font-size: 1.2em;
  }
  .notice{
    margin: 1.1em 0;
    text-align: center;
  }
  .notice .link {
    color: #43d1be;
  }
  .notice > span {
    display: inline-block;
  }
  .notice .mint-checkbox-core::after {
    width: 5px;
  }

  .signPopup {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
  }
  .signPopup.on {
    top: initial;
    bottom: 0;
  }
  .signPopup.off {
    top: 100%;
    bottom: initial;
  }
  .signPopup .body{
    background-color: #fff;
  }
  .signPopup .body .title{
    padding: 0.7em 0.5em;
    font-size: 1.2em;
    border-bottom: 1px solid #efefef;
  }

  .signPopup .body .title > .close {
    opacity: 1;
  }

  .signPopup .body .canvas {
    min-height: 150px;
    padding: 0 1em;
    /* background-color: #dddee1; */
  }
  .signPopup .footer-btn {
    overflow: hidden;
    border-top: 1px solid #efefef;
  }
  .signPopup .footer-btn > button {
    width: 50%;
    padding: 1em 0;
    border: none;
    background-color:#fff;
    font-size: 1em;
    float: left;
  }
  .signPopup .footer-btn > button.confirm-btn {
    background-color:#43d1be;
    color: #fff;
  }
  .light-box {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .light-box > .table {
    width: 100%;
    height: 100%;
    display: table;
  }
  .light-box > .table > .cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .light-box > .table > .cell > img {
    max-width: 80%;
  }
  .footer {
    margin: 10px 0;
  }
</style>

<style>
  .noticePopup.mint-popup-bottom{
    top: 0 ;
  }
  .notice .mint-checklist {
    display: inline-block;
    float: left;
  }
  .notice .mint-checklist > .mint-checklist-title {
    display: none;
  }
  .notice .mint-checklist > .mint-cell {
    min-height: 0;
    background-image: none;
    background-color: transparent;
  }
  .notice .mint-checklist > .mint-cell .mint-cell-wrapper{
    font-size: 1em;
    background-image: none;
    padding: 0;
  }
  .notice .mint-checklist > .mint-cell .mint-cell-wrapper .mint-checklist-label{
    padding: 0;
  }
  .notice .mint-checklist .mint-checkbox-core::after {
    width: 5px;
  }
  .notice .mint-checkbox-input:checked + .mint-checkbox-core {
    background-color: #43d1be;
    border-color: #43d1be;
  }
  .sign-page .form .table .tr .td .mint-radiolist{
    width: 200px;
    float: right;
  }
</style>