<style>
  .Person_Content {
    height: 96%;
    margin: 18px;
    overflow: hidden;
  }

  .PerSon_LeftNav {
    width: 418px;
    height: 96%;
    position: absolute;
    overflow-y: auto;
    background-color: #fff;
    display: inline-block;
  }

  .Person_Right {
    margin-left: 440px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #fff;
  }

  .PerSon_Edit {
    text-align: right;
    width: 100%;
    color: #BBBBBB;
    font-size: 12px;
    padding: 30px;
  }

  .PerSon_Edit span {
    cursor: pointer;
  }

  .PerSon_Edit i {
    font-size: 12px;
  }

  .Person_Header {
    width: 120px;
    height: 120px;
    margin: 30px auto;
    border: 1px solid #F4F4F4;
    padding: 3px;
    border-radius: 50%;
  }

  .Person_Header img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .Person_ComCenter {
    width: 100%;
    font-size: 14px;
    color: #333333;
    text-align: center;
  }

  .Person_MenuList {
    margin-top: 45px;
  }

  .Person_MenuList li {
    list-style-type: none;
    width: 100%;
    height: 54px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #F3F3F3;
  }

  .Person_MenuList li .Person_Pname {
    display: flex;
    align-items: center;
    width: 26%;
    height: 100%;
    font-size: 12px;
    color: #999999;
  }

  .Person_Jobs {
    display: inline-block;
    padding: 5px 8px;
    background-color: #007EFF;
    color: #fff;
    font-size: 12px;
    border-radius: 8px;
    margin-left: 10px;
  }

  .Person_Company {
    color: #333333;
    font-size: 14px;
    display: inline-block;
  }

  .Person_Wrong {
    color: #999999;
    font-size: 12px;
    text-align: right;
  }

  .Person_CenterList {
    display: inline-block;
    width: 72%;
    font-size: 14px;
  }

  .Per_Jiantou i {
    font-size: 12px;
    color: #999999;
  }

  .Person_menuCked li:hover {
    cursor: pointer;
    background-color: #F1F8FF;
  }

  .P_cked {
    background-color: #F1F8FF;
  }

  .Shouji_Top {
    width: 100%;
    height: 54px;
    line-height: 54px;
    padding: 0 30px;
    font-size: 14px;
    color: #333333;
    border-bottom: 1px solid #F3F3F3;
  }

  .Shouji_Conteng {
    margin: 70px 0 0 120px;
  }

  .phone_commonBotm {
    width: 400px;
    position: relative;
  }

  .phone_commonBotm .input {
    width: 400px;
    height: 44px;
    outline: none;
    padding-left: 17px;
    border: none;
    border: 1px solid #DCDFE6;
  }

  .phone_commonBotm .input::-webkit-input-placeholder {
    color: #D3D6DC;
  }

  .phone_commonBotm .validatCode {
    position: absolute;
    right: 10px;
    top: 16px;
    height: 12px;
    line-height: 12px;
    padding-left: 10px;
    color: #007EFF;
    font-size: 12px;
    letter-spacing: 2px;
    border-left: 1px solid #DCDFE6;
  }

  .phone_bangding {
    color: #333333;
    margin: 0 0 29px 100px;
    font-size: 16px;
  }

  .phone_bangding span {
    margin-left: 21px;
  }

  .Shouji_Conteng .el-input .el-input__inner {
    height: 44px;
  }

  .PI_qiehuan {
    font-size: 14px;
    color: #333333;
  }

  .PI_comMoshi {
    color: #999999
  }

  .PI_QiehuanImg {
    width: 370px;
    height: 174px;
    margin-top: 18px;
    cursor: pointer;
    margin-left: 20px;
    border: 4px solid #fff;
  }

  .ckedQieImg {
    border: 4px solid #007EFF;
  }

  .PI_QiehuanImg img {
    width: 100%;
    height: 100%;
  }

  .Account_NumList {
    margin-top: 68px;
    min-height: 80px;
    margin: 0 30px;
    border-bottom: 1px dashed #BBBBBB;
  }

  .Account_NumList table {
    padding: 30px 0 30px 160px;
    font-size: 16px;
  }

  .Account_NumList table td {
    height: 30px;
  }

  .AC_bankName {
    color: #333333;
    font-weight: bold;
    margin-right: 11px;
  }

  .AC_jeibang {
    width: 80px;
    text-align: right;
    color: #999999;
    font-size: 12px;
  }

  .bank_Count {
    position: absolute;
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #007EFF;
    color: #fff;
    border-radius: 50%;
    right: 25px;
    line-height: 14px;
    text-align: center;
    top: 20px;
  }

  .bind_Imidetly {
    color: rgb(0, 126, 255);
    cursor: pointer;
    display: inline-block;
    width: 70%;
    font-size: 14px;
  }

  .addAccountTitle {
    margin: 0 0 20px 97px;
    font-size: 14px;
  }

  .Person_Content .FPF_s {
    cursor: pointer;
  }

  #demo #button {
    position: absolute;
    right: 10px;
    width: 80px;
    height: 40px;
    border: none;
    cursor: pointer;
    color: #fff;
    border-radius: 5px;
    background: #E95252;
  }

  #demo .show {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 1px solid #d5d5d5;
  }

  #demo .picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  #demo .container {
    z-index: 9999999;
    position: fixed;
    padding-top: 60px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
  }

  #demo #image {
    max-width: 100%;
  }

  .cropper-view-box,
  .cropper-face {
    border-radius: 50%;
  }

  .cropper-container {
    font-size: 0;
    line-height: 0;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    direction: ltr;
    -ms-touch-action: none;
    touch-action: none
  }

  .cropper-container img {
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg
  }

  .cropper-wrap-box,
  .cropper-canvas,
  .cropper-drag-box,
  .cropper-crop-box,
  .cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .cropper-wrap-box {
    overflow: hidden;
  }

  .cropper-drag-box {
    opacity: 0;
  }

  .cropper-modal {
    opacity: .5;
  }

  .cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    outline: 1px solid #e95252;
    outline-color: #e95252;
  }

  .cropper-dashed {
    position: absolute;
    display: block;
    opacity: .5;
    border: 0 dashed #e95252
  }

  .cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
  }

  .cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
  }

  .cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    opacity: .75
  }

  .cropper-center:before,
  .cropper-center:after {
    position: absolute;
    display: block;
    content: ' ';
  }

  .cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px
  }

  .cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px
  }

  .cropper-face,
  .cropper-line,
  .cropper-point {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .1;
  }

  .cropper-face {
    top: 0;
    left: 0;
  }


  .cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
  }

  .cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
  }

  .cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
  }

  .cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
  }

  .cropper-point {
    width: 5px;
    height: 5px;
    opacity: .75;
  }

  .cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize
  }

  .cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
  }

  .cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize
  }

  .cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
  }

  .cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize
  }

  .cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize
  }

  .cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
  }

  .cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1
  }

  @media (min-width: 768px) {

    .cropper-point.point-se {
      width: 15px;
      height: 15px
    }
  }

  @media (min-width: 992px) {
    .cropper-point.point-se {
      width: 10px;
      height: 10px
    }
  }

  @media (min-width: 1200px) {
    .cropper-point.point-se {
      width: 5px;
      height: 5px;
      opacity: .75
    }
  }

  .cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: ' ';
    opacity: 0;
  }

  .cropper-invisible {
    opacity: 0;
  }

  .cropper-hide {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
  }

  .cropper-hidden {
    display: none !important;
  }

  .cropper-move {
    cursor: move;
  }

  .cropper-crop {
    cursor: crosshair;
  }

  .cropper-disabled .cropper-drag-box,
  .cropper-disabled .cropper-face,
  .cropper-disabled .cropper-line,
  .cropper-disabled .cropper-point {
    cursor: not-allowed;
  }

  .a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fff;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
  }

  .a-upload input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
  }

  .cancel_Btnn {
    background-color: #fff !important;
    border: 1px solid #e95252 !important;
    color: #e95252 !important;
  }

</style>

<template>
  <div class="Person_Content">
    <div class="PerSon_LeftNav">
      <div class="PerSon_Edit">
        <a href="javascript:;" class="a-upload">
          <i class="iconfont icon-Edit"></i>&nbsp;&nbsp;修改头像</span>
          <input type="file" id="change" accept="image" @change="change">
        </a>
      </div>
      <div class="Person_Header">
        <img v-if="dataList.EmPhoto" :src="dataList.EmPhoto" :onerror="defaultHeadImg" alt />
        <img v-else src="../assets/img/default_head_img.jpg" alt />
      </div>
      <div class="Person_ComCenter" style="margin-bottom:14px;">
        {{dataList.EmName}}
      </div>
      <div class="Person_ComCenter">
        <i class="iconfont icon-dianhua"></i>&nbsp;&nbsp;{{dataList.EmLoginMobile}}
      </div>
      <ul class="Person_MenuList">
        <li>
          <span class="Person_Pname">部门</span>
          <span class="Person_Company">
            {{u.BranchName}}
            <span class="Person_Jobs">{{u.PostName}}</span>
          </span>
        </li>
        <li>
          <span class="Person_Pname">用户名</span>
          <span class="Person_Company" style="width:43%;">{{dataList.EmName}}</span>
          <span class="Person_Wrong">如有错误请联系行政</span>
        </li>
      </ul>
      <ul class="Person_MenuList Person_menuCked" style="margin-top:0;">
        <li @click="ckedNum=1,resetPhoneNum()" :class="{'P_cked':ckedNum==1}">
          <span class="Person_Pname">绑定手机</span>
          <span class="Person_CenterList">
            {{getBangding(dataList.EmLoginMobile)}}
          </span>
          <span class="Per_Jiantou">
            <i class="iconfont icon-jiantouyou1"></i>
          </span>
        </li>
        <li @click="ckedNum=2" :class="{'P_cked':ckedNum==2}">
          <span class="Person_Pname">密码</span>
          <span class="Person_CenterList">
            ******
          </span>
          <span class="Per_Jiantou">
            <i class="iconfont icon-jiantouyou1"></i>
          </span>
        </li>
        <li @click="ckedNum=3" :class="{'P_cked':ckedNum==3}">
          <span class="Person_Pname" style="position:relative;">
            银行账户
            <span class="bank_Count">{{AccCount}}</span>
          </span>
          <span v-if="AccCount==0" class="bind_Imidetly">
            立即绑定
          </span>
          <span v-else class="Person_CenterList">
            {{AccDataList.BankName}}
            <span style="margin-left:10px;">{{getBankNum(AccDataList.CardNum)}}</span>
          </span>
          <span class="Per_Jiantou">
            <i class="iconfont icon-jiantouyou1"></i>
          </span>
        </li>
        <li @click="ckedNum=4" :class="{'P_cked':ckedNum==4}">
          <span class="Person_Pname">页面切换方式</span>
          <span class="Person_CenterList" v-if="openMode==1">
            单页面多标签模式
          </span>
          <span class="Person_CenterList" v-else>
            多页面单标签模式
          </span>
          <span class="Per_Jiantou">
            <i class="iconfont icon-jiantouyou1"></i>
          </span>
        </li>
        <li @click="ckedNum=5" :class="{'P_cked':ckedNum==5}">
          <span class="Person_Pname">绑定商城、微信</span>
          <span class="Person_CenterList" v-if="dataList.MallUserId>0">
            已绑定微信/店铺
          </span>
          <span class="Person_CenterList" v-else>
            未绑定微信
          </span>
          <span class="Per_Jiantou">
            <i class="iconfont icon-jiantouyou1"></i>
          </span>
        </li>
      </ul>
    </div>
    <div class="Person_Right">
      <!-- 绑定手机号 -->
      <div class="Per_Shouji" v-if="ckedNum==1">
        <div class="Shouji_Top">绑定手机</div>
        <div class="Shouji_Conteng">
          <div class="phone_bangding" v-if="dataList.EmLoginMobile">
            已绑定手机号 <span>{{getBangding(dataList.EmLoginMobile)}}</span>
          </div>
          <el-form :model="phoneMsg" ref="phoneMsg" label-position="right" :rules="rules" label-width="100px">
            <el-form-item label="新手机号" prop="LoginMobile" style="margin-bottom:40px;">
              <div class="phone_commonBotm">
                <input class="input" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')"
                  v-model="phoneMsg.LoginMobile" type="text" placeholder="11位数字" />
                <div class="validatCode">
                  <span v-show="showCode" @click="getCode" class="FPF_s">发送验证码</span>
                  <span v-show="!showCode" class="count FPF_s">{{count}}s重新获取</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input v-model="phoneMsg.code" class="w150" placeholder="4位验证码" maxlength="4"></el-input>
            </el-form-item>
          </el-form>
          <button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm1('phoneMsg')">确定</button>
        </div>
      </div>
      <!-- 修改密码 -->
      <div class="Per_Shouji" v-if="ckedNum==2">
        <div class="Shouji_Top">密码</div>
        <div class="Shouji_Conteng">
          <el-form :model="passWordMsg" ref="passWordMsg" label-position="right" :rules="rules2" label-width="100px">
            <el-form-item v-if="sureOldPwd" label="旧密码" prop="OldPwd" style="margin-bottom:30px;">
              <el-input type="password" class="w400" v-model="passWordMsg.OldPwd" maxlength="15">
                <i slot="suffix" title="显示密码" @click="changePassOld('show')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-yincang"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="旧密码" prop="OldPwd" style="margin-bottom:30px;">
              <el-input type="text" class="w400" v-model="passWordMsg.OldPwd" maxlength="15">
                <i slot="suffix" title="隐藏密码" @click="changePassOld('hide')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-xianshi"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-if="visible" label="新密码" style="margin-bottom:30px;" prop="Pwd">
              <el-input type="password" class="w400" v-model="passWordMsg.Pwd" maxlength="15" placeholder="密码格式：大写字母+小写字母+数字或?!&$%#_">
                <i slot="suffix" title="显示密码" @click="changePass('show')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-yincang"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="新密码" style="margin-bottom:30px;" prop="Pwd">
              <el-input type="text" class="w400" v-model="passWordMsg.Pwd" maxlength="15" placeholder="密码格式：大写字母+小写字母+数字或?!&$%#_">
                <i slot="suffix" title="隐藏密码" @click="changePass('hide')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-xianshi"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-if="SureVisible" label="确认密码" style="margin-bottom:30px;" prop="surePassword">
              <el-input type="password" class="w400" v-model="passWordMsg.surePassword" maxlength="15"
                placeholder="密码格式：大写字母+小写字母+数字或?!&$%#_">
                <i slot="suffix" title="显示密码" @click="changePass2('show')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-yincang"></i>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="确认密码" style="margin-bottom:30px;" prop="surePassword">
              <el-input type="text" class="w400" v-model="passWordMsg.surePassword" maxlength="15" placeholder="密码格式：大写字母+小写字母+数字或?!&$%#_">
                <i slot="suffix" title="隐藏密码" @click="changePass2('hide')" style="cursor:pointer;"
                  class="el-input__icon iconfont icon-xianshi"></i>
              </el-input>
            </el-form-item>
          </el-form>
          <button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm2('passWordMsg')">确定</button>
        </div>
      </div>
      <!-- 银行账户 -->
      <div class="Per_Shouji" v-if="ckedNum==3">
        <div class="Shouji_Top">银行账户</div>
        <div class="Account_NumList" v-if="AcountData.length>0">
          <table>
            <tr v-for="(item,index) in AcountData">
              <td style="width:100px">
                <template v-if="index==0">银行账户</template>
              </td>
              <td>
                <span class="AC_bankName">{{item.BankName}}</span><span>{{getBankNum(item.CardNum)}}</span>
              </td>
              <td class="AC_jeibang">
                <span style="cursor:pointer;color:#007EFF;" v-if='item.Status==0' @click="deleteData(item.ID)">冻结</span>
                <span style="cursor:pointer;color:#007EFF;" v-if='item.Status==1' @click="deleteData(item.ID)">启用</span>
              </td>
            </tr>
          </table>
        </div>
        <div class="Shouji_Conteng">
          <div class="addAccountTitle" v-if="AcountData.length>0">添加新银行账户</div>
          <el-form :model="addAccountMsg" ref="addAccountMsg" label-position="right" :rules="rules3"
            label-width="100px">
            <el-form-item label="账户分类" prop="oldPassword" style="margin-bottom:30px;">
              <el-select v-model='addAccountMsg.AccountClassify' class="w400" placeholder="请选择" @change='changeTitle'>
                <el-option label='银行' value='2' key='2'></el-option>
                <el-option label='虚拟账户' value='3' key='3'></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="addAccountMsg.AccountClassify==2" label="所属机构" prop="BankName">
              <el-input type="text" class="w400" v-model="addAccountMsg.BankName" placeholder="例如：中国建行"></el-input>
            </el-form-item>
            <el-form-item v-if='addAccountMsg.AccountClassify!=3' :label="nameA" prop="OpenBankName">
              <el-input type="text" class="w400" v-model="addAccountMsg.OpenBankName" placeholder="例如：锦江支行"></el-input>
            </el-form-item>
            <el-form-item v-if='addAccountMsg.AccountClassify!=3' :label="nameB" prop="AccountHolder">
              <el-input type="text" class="w400" v-model="addAccountMsg.AccountHolder"></el-input>
            </el-form-item>
            <el-form-item :label="nameC" prop="CardNum">
              <el-input type="text" class="w400" v-model="addAccountMsg.CardNum"
                @keyup.native="checkInteger(addAccountMsg,'CardNum'),resetAccountNum(addAccountMsg.CardNum)"></el-input>
            </el-form-item>
            <el-form-item :label="nameD" prop="AccountAlias">
              <el-input type="text" class="w400" v-model="addAccountMsg.AccountAlias"></el-input>
            </el-form-item>
          </el-form>
          <button class="normalBtn" style="margin:30px 0 0 100px;" @click="submitForm3('addAccountMsg')">确定</button>
        </div>
      </div>
      <!-- 页面切换方式 -->
      <div class="Per_Shouji" v-if="ckedNum==4">
        <div class="Shouji_Top">页面切换方式</div>
        <div class="Shouji_Conteng">
          <div class="phone_bangding" style="margin-left:25px;">
            当前切换方式
            <span style="font-weight:bold;" v-if="radio==1">单页面多标签模式</span>
            <span style="font-weight:bold;" v-else>多页面单标签模式</span>
          </div>
          <div class="PI_qiehuan" style="margin-bottom:50px;">
            <el-radio v-model="radio" :label="1">单页面多标签模式<span class="PI_comMoshi">（此模式适合电脑性能高的用户）</span>
              <div class="PI_QiehuanImg" :class="{'ckedQieImg':radio==1}" @click="radio=1">
                <img src='../assets/img/chosen_one.png' />
              </div>
            </el-radio>
          </div>
          <div class="PI_qiehuan">
            <el-radio v-model="radio" :label="2">多页面单标签模式<span class="PI_comMoshi">（此模式适合电脑性能较低的用户）</span>
              <div class="PI_QiehuanImg" :class="{'ckedQieImg':radio==2}" @click="radio=2">
                <img src='../assets/img/chosen_two.png' />
              </div>
            </el-radio>
          </div>
          <button class="normalBtn" style="margin:30px 0 20px 20px;" @click="SureType">确定</button>
        </div>
      </div>
      <!-- 绑定商城微信和商城 -->
      <div class="Per_Shouji" v-if="ckedNum==5">
        <div class="Shouji_Top">赞羊商城微信绑定</div>
        <div class="Shouji_Conteng">
          <el-form label-position="right" label-width="100px">
            <el-form-item label="已绑定" style="margin-bottom:30px;" v-if="dataList.WeChatName&&dataList.WeChatName!=''">
              <el-input :disabled="true" class="w210" v-model="dataList.WeChatName"></el-input>
            </el-form-item>
            <el-form-item :label="dataList.WeChatName&&dataList.WeChatName!=''?'重新绑定微信':'绑定微信'" style="margin-bottom:30px;" size="small">
              <el-select v-model="mallUserId" class="w210" filterable remote reserve-keyword placeholder="请输入微信昵称"
                :remote-method="getWechatData" @change="weChatChange">
                <el-option v-for="wItem in weChatData" :key="wItem.Id" :label="wItem.Name" :value="wItem.Id">
                  <span style="float: left">{{ wItem.Name }}
                    <template v-if="wItem.ShopId>0">
                      <span style="color:red;">【{{ wItem.ShopName }}】</span>
                    </template>
                  </span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <button class="normalBtn" style="margin:30px 0 0 100px;" @click="saveWechat()">确定</button>
        </div>
      </div>
    </div>
    <div id="demo">
      <div class="container" v-show="panel">
        <div style="width:400px;height:400px;margin:5% 0 0 36%;position:relative;background-color:#fff;">
          <img id="image" :src="url" alt="Picture">
          <button type="button" class="cancel_Btnn" id="button" style="bottom:-50px;right:105px;"
            @click="CancelUpImg">取消</button>
          <button type="button" id="button" style="bottom:-50px;" @click="crop">确定</button>
        </div>
      </div>
      <div style="padding:20px;display:none;">
        <div class="show">
          <div class="picture" :style="'backgroundImage:url('+headerImage+')'">
          </div>
        </div>
        <div style="margin-top:20px;">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import Cropper from "cropperjs"
  export default {
    data() {
      return {
        defaultHeadImg: 'this.src="' + require("../assets/img/default_head_img.jpg") + '"',
        //页面切换方式
        openMode: 0,
        u: {},
        outerVisible: false,
        nameA: '账户名称',
        nameB: '开户人',
        nameC: '卡号',
        nameD: '账户别名',
        //切换选项卡
        ckedNum: 1,
        showCode: true,
        count: "",
        //验证码参数
        phoneMsg: {
          LoginMobile: '',
          code: ''
        },
        //修改密码
        passWordMsg: {
          OldPwd: '',
          Pwd: '',
          surePassword: ''
        },
        sureOldPwd: true,
        visible: true,
        SureVisible: true,
        //切换方式
        radio: '1',
        msg: {},
        rules: {
          LoginMobile: [{
            required: true,
            message: '请输入新手机号',
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }]
        },
        rules2: {
          OldPwd: [{
            required: true,
            message: '请输入旧密码',
            trigger: 'blur'
          }],
          Pwd: [{
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
          }],
          surePassword: [{
            required: true,
            message: '请输入确认密码',
            trigger: 'blur'
          }]
        },
        rules3: {
          BankName: [{
            required: true,
            message: '请填写银行',
            trigger: 'blur'
          }],
          AccountHolder: [{
            required: true,
            message: '请填写开户人',
            trigger: 'blur'
          }],
          OpenBankName: [{
            required: true,
            message: '请填写账户名称',
            trigger: 'blur'
          }],
          CardNum: [{
            required: true,
            message: '请填写卡号',
            trigger: 'blur'
          }],
          AccountAlias: [{
            required: true,
            message: '请填写账户别名',
            trigger: 'blur'
          }],
        },
        //获取银行账户参数
        AccountMsg: {
          BranchId: '-1',
          EmpId: '-1',
          BankId: '',
          AccountHolder: '',
          AccountAlias: '',
          pageIndex: 1,
          pageSize: 15,
          Type: 9,
        },
        AccDataList: {},
        //银行所有账户
        AcountData: [],
        AccCount: 0,
        //添加银行账户参数
        addAccountMsg: {
          Id: '0',
          ObjID: '-1',
          BankId: '-1',
          OpenBankName: '',
          BankName: '',
          AccountHolder: '',
          CardNum: '',
          AccountAlias: '',
          AccountType: '1',
          AccountClassify: '2',
          Type: '9'
        },
        dataList: {},
        headerImage: '',
        picValue: '',
        cropper: '',
        croppable: false,
        panel: false,
        url: '',
        //暂时用户Id
        mallUserId: "",
        //赞羊商城对象
        weChatMsg: {
          MallUserId: 0, //赞羊商城用户Id
          MallSmallShopsId: 0, //赞羊用户商城Id
          WeChatName:"",//微信昵称
        },
        weChatData: [],
      };
    },
    methods: {
      //绑定手机
      submitForm1(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.doBind();
          }
        });
      },
      //修改密码
      submitForm2(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.changePwd();
          }
        });
      },
      //新增银行账户
      submitForm3(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addAccountNum();
          }
        });
      },
      //新增银行账户
      addAccountNum() {
        this.addAccountMsg.ObjID = this.dataList.EmployeeId;
        if (this.addAccountMsg.AccountClassify != '3') {
          if (this.addAccountMsg.OpenBankName == '') {
            this.Error('请填写' + this.nameA)
            return;
          }
          if (this.addAccountMsg.AccountHolder == '') {
            this.Error('请填写' + this.nameB)
            return;
          }
        }
        if (this.addAccountMsg.CardNum == '') {
          this.Error('请填写' + this.nameC)
          return;
        }
        if (this.addAccountMsg.AccountAlias == '') {
          this.Error('请填写' + this.nameD)
          return;
        }
        this.addAccountMsg.CardNum = this.addAccountMsg.CardNum.replace(/\s+/g, "");
        this.apipost("admin_post_SetEmpBankAccount", this.addAccountMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message)
            this.getList()
            this.resetAccountMsg();
          } else {
            this.Error(res.data.message)
          }
        }, err => {})
      },
      //重置信息
      resetAccountMsg() {
        this.addAccountMsg.OpenBankName = '';
        this.addAccountMsg.BankName = '';
        this.addAccountMsg.AccountHolder = '';
        this.addAccountMsg.CardNum = '';
        this.addAccountMsg.AccountAlias = '';
      },
      //修改密码方法
      changePwd() {
        if (this.passWordMsg.Pwd != this.passWordMsg.surePassword) {
          this.Error('新密码和确认密码不一致');
          return;
        }
        this.apipost('admin_get_MySelfResetPwd', this.passWordMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.passWordMsg.OldPwd = '';
            this.passWordMsg.Pwd = '';
            this.passWordMsg.surePassword = '';
            // //修改成功后退出登录
            setTimeout(() => {
              this.$store.dispatch("logout")
              localStorage.removeItem("userInfo");
              localStorage.removeItem("previousPathInfo");
              location.href = '/'
            }, 1000);
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      //获取银行账户信息
      getAccount() {
        this.AccountMsg.EmpId = this.dataList.EmployeeId;
        this.apipost("admin_get_GetEmpBankAccountPageList", this.AccountMsg, res => {
          if (res.data.resultCode == 1) {
            this.AcountData = res.data.data.pageData;
            this.AccDataList = res.data.data.pageData[0];
            this.AccCount = res.data.data.count;
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      //获取验证码
      getCode() {
        var phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
        //电话
        var phone = this.phoneMsg.LoginMobile.replace(/^\s+|\s+$/gm, "");
        if (!phoneReg.test(phone)) {
          this.nameErrorMsg = "请输入有效的手机号码！";
          return false;
        }
        const TIME_COUNT = 60;
        this.phoneMsg.code = "";
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.showCode = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.showCode = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
        let msg = {
          mobileNumber: this.phoneMsg.LoginMobile,
          mobileCodeType: 1
        };
        this.apipost("user_get_moblieNumber_code", msg, res => {
          if (res.data.resultCode == 1) {} else {
            this.$notify.error({
              title: "提示",
              customClass: "msgTips",
              message: res.data.message,
              showClose: false,
              duration: 3000
            });
          }
        });
      },
      //绑定手机号
      doBind() {
        if (this.phoneMsg.LoginMobile == "") {
          this.Error('请输入手机号');
          return;
        } else if (this.phoneMsg.code == "") {
          this.Error('请输入验证码');
          return;
        }
        this.apipost("admin_get_MySelfResetLoginMobile", this.phoneMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.getList();
            this.phoneMsg.LoginMobile = '';
            this.phoneMsg.code = '';
          } else {
            this.Error(res.data.message);
          }
        });
      },
      //重置手机
      resetPhoneNum() {
        this.phoneMsg.LoginMobile = '';
        this.phoneMsg.code = '';
      },
      changePassOld(value) {
        this.sureOldPwd = !(value === 'show');
      },
      changePass(value) {
        this.visible = !(value === 'show');
      }, //判断渲染，true:暗文显示，false:明文显示
      changePass2(value) {
        this.SureVisible = !(value === 'show');
      },
      //获取用户信息
      getList() {
        let userInfo = this.getLocalStorage();
        let msg = {
          Id: userInfo.EmployeeId
        }
        this.apipost('admin_get_EmployeeGet', msg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
            this.getAccount();
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      //过滤电话号码
      getBangding(val) {
        if (val) {
          return val.substr(0, 3) + "****" + val.substr(-4, 4)
        }
      },
      //过滤银行卡号
      getBankNum(bankNumber) {
        if (bankNumber) {
          return bankNumber.substr(0, 4) + "********" + bankNumber.substr(-4);
        }
      },
      //冻结启用银行账户
      deleteData(id) {
        this.$confirm('确认启用/冻结该账户信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apipost('admin_post_DelEmpBankAccount', {
            BAId: id
          }, res => {
            if (res.data.resultCode == 1) {
              this.Success('保存成功！')
              this.getList();
            }
          }, err => {})
        }).catch(() => {
          this.$message.info('已取消！')
        });
      },
      changeTitle() {
        if (this.addAccountMsg.AccountClassify == 1) {
          this.nameA = '平台名称'
          this.nameB = '用户名称'
          this.nameC = '平台账户'
          this.nameD = '账户别名'
          this.addAccountMsg.AccountType = '1'
        } else if (this.addAccountMsg.AccountClassify == 2) {
          this.nameA = '账户名称'
          this.nameB = '开户人'
          this.nameC = '卡号'
          this.nameD = '账户别名'
        } else {
          this.nameA = '平台名称'
          this.nameB = '用户名称'
          this.nameC = '平台账户'
          this.nameD = '账户别名'
        }
      },
      //确认方式
      SureType() {
        localStorage.openMode = this.radio;
        window.location.reload()
      },
      //重置卡号
      resetAccountNum(val) {
        this.addAccountMsg.CardNum = this.addAccountMsg.CardNum.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
      },
      getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
        }
        return url;
      },
      change(e) {
        let files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        this.panel = true;
        this.outerVisible = true;
        this.picValue = files[0];
        this.url = this.getObjectURL(this.picValue);
        //每次替换图片要重新得到新的url
        if (this.cropper) {
          this.cropper.replace(this.url);
        }
        this.panel = true;
      },
      crop() {
        this.panel = false;
        var croppedCanvas;
        var roundedCanvas;
        if (!this.croppable) {
          return;
        }
        // Crop
        croppedCanvas = this.cropper.getCroppedCanvas();
        // Round
        roundedCanvas = this.getRoundedCanvas(croppedCanvas);
        this.headerImage = roundedCanvas.toDataURL();
        let that = this;
        let blob = that.base64ToBlob(this.headerImage);
        let newArr = [];
        newArr.push(blob);
        var fileName = `${that.uuid(10,10)}.png`;
        var path = `/Upload/Temporary`;
        that.uploadSelfBlob(path, newArr, x => {
          let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath;
          this.postImg(allPath)
        })
      },
      base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
          type: contentType
        });
      },
      uuid(len, radix) {
        let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
        let uuid = [],
          i;
        radix = radix || chars.length;
        if (len) {
          for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
        } else {
          let r;
          uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
          uuid[14] = '4';
          for (i = 0; i < 36; i++) {
            if (!uuid[i]) {
              r = 0 | Math.random() * 16;
              uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r];
            }
          }
        }
        return uuid.join('');
      },
      getRoundedCanvas(sourceCanvas) {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var width = sourceCanvas.width;
        var height = sourceCanvas.height;
        canvas.width = width;
        canvas.height = height;
        context.imageSmoothingEnabled = true;
        context.drawImage(sourceCanvas, 0, 0, width, height);
        context.globalCompositeOperation = 'destination-in';
        context.beginPath();
        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
        context.fill();
        return canvas;
      },
      postImg(path) {
        //这边写图片的上传
        let msg = {
          icon: path
        }
        this.apipost('app_get_employee_modify_icon', msg, res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.getList();
          } else {
            this.Error(res.data.message);
          }
        }, err => {})

      },
      //取消上传
      CancelUpImg() {
        this.panel = false;
      },
      //获取微信用户列表
      getWechatData(keyWords) {
        this.weChatData = [];
        var qMsg = {
          Name: keyWords
        };
        this.mallapipost(
          "/api/User/GetMemberUserListExt",
          qMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.weChatData = res.data.data;
            }
          });
      },
      //选择切换
      weChatChange() {
        let obj = this.weChatData.find(item => item.Id == this.mallUserId);
        if (obj) {
          this.weChatMsg.MallUserId = obj.Id;
          this.weChatMsg.MallSmallShopsId = obj.ShopId;
          this.weChatMsg.WeChatName=obj.Name;
        }
      },
      //保存微信
      saveWechat() {
        this.apipost("admin_post_BindWeChat", this.weChatMsg, res => {
          if (res.data.resultCode == 1) {
            var oldUser = this.getLocalStorage();
            oldUser.MallUserId = this.weChatMsg.MallUserId;
            oldUser.MallSmallShopsId = this.weChatMsg.MallSmallShopsId;
            oldUser.WeChatName = this.weChatMsg.WeChatName;
            localStorage.userInfo = JSON.stringify(oldUser);
            this.Success(res.data.message);
            this.getList();
          } else {
            this.Error(res.data.message)
          }
        }, err => {})
      }
    },
    mounted() {
      this.u = this.getLocalStorage();
      this.getList();
      this.openMode = localStorage.openMode;
      this.radio = localStorage.openMode;
      //初始化这个裁剪框
      var self = this;
      var image = document.getElementById('image');
      this.cropper = new Cropper(image, {
        aspectRatio: 1,
        viewMode: 1,
        background: false,
        zoomable: false,
        ready: function () {
          self.croppable = true;
        }
      });
    }
  };

</script>