FE-V2-PC/src/views/mine/indexOne.vue

<template>
  <div class="mine">
    <!--<navbar />-->
    <div class="mine-page">
      <div class="left-max-box">
        <p class="left-title">个人中心</p>
        <div class="left-user-img">
          <userAvatar :user="user" />
        </div>
        <p class="left-name">{{user.nickName}}</p>
        <p class="left-num">{{user.userType=='11'?'工号：':(user.userType=='22'?'学号：':'其他：')}}{{user.userName}}</p>
        <div class="left-text-max-box">
          <div class="left-text-big-box">
            <div class="left-text-big-box-left">
              <img v-if="user.userType == '22'" src="@/assets/ZDimages/mine/icon_grzx_xl.png">
              <img v-else src="@/assets/ZDimages/mine/icon_grzx_zc.png">
              <p>{{user.education?user.education:'未设置'}}</p>
            </div>
            <div class="left-text-big-box-right">
              <img class="img-two" v-if="user.userType == '22'" src="@/assets/ZDimages/mine/icon_grzx_zy.png">
              <img class="img-one" v-else src="@/assets/ZDimages/mine/icon_grzx_zw.png">
              <p>{{user.major?user.major:'未设置'}}</p>
            </div>
          </div>
          <div class="left-text-min-box">
            <img src="@/assets/ZDimages/mine/icon_grzx_sjh.png">
            <p>{{user.phonenumber?user.phonenumber:'未设置'}}</p>
          </div>
          <div class="left-text-min-box">
            <img src="@/assets/ZDimages/mine/icon_grzx_yx.png">
            <p>{{user.email?user.email:'未设置'}}</p>
          </div>
          <div class="left-text-min-box">
            <img src="@/assets/ZDimages/mine/icon_grzx_bgl.png">
            <p>{{user.deptName?user.deptName:'未设置'}}</p>
          </div>
        </div>
        <div class="left-type-text-max-box">
          <div>
            <p>手机号码</p>
            <p :class="user.phonenumber?'p-color-a':'p-color-b'">{{user.phonenumber?'已设置':'未设置'}}</p>
          </div>
          <div>
            <p>系统头像</p>
            <p :class="user.avatar?'p-color-a':'p-color-b'">{{user.avatar?'已设置':'未设置'}}</p>
          </div>
          <div>
            <p>人脸照片</p>
            <p :class="user.faceImg?'p-color-a':'p-color-b'">{{user.faceImg?'已设置':'未设置'}}</p>
          </div>
          <!--<div>-->
          <!--<p>电子签名</p>-->
          <!--<p :class="user.signature?'p-color-a':'p-color-b'">{{user.signature?'已设置':'未设置'}}</p>-->
          <!--</div>-->
        </div>
      </div>
      <div class="right-max-box">
        <div class="right-title-box">
          <div class="title-button-min-box">
            <p :class="buttonType == '1'?'bottomColor':''">基本资料</p>
            <p :class="buttonType == '1'?'bottomBack':''"></p>
          </div>
          <!--<div class="title-button-min-box" @click="buttonTypeClick(2)">-->
          <!--<p :class="buttonType == '2'?'bottomColor':''">安全设置</p>-->
          <!--<p :class="buttonType == '2'?'bottomBack':''"></p>-->
          <!--</div>-->
          <p class="right-null-p"></p>
          <!--<p class="reset-button-one right-out-button" @click="outButton">返回</p>-->
        </div>
        <div v-if="buttonType == 1">
          <el-form :model="userform" ref="userform" :rules="rules" :inline="true" >
            <div>
              <el-form-item class="form-item-min" label="手机号码：" prop="phonenumber" label-width="120px">
                <el-input
                  maxlength="11"
                  disabled
                  v-model="userform.phonenumber"
                  placeholder="未填写"
                  clearable
                  size="small"
                  onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                />
                <span style="color:#0183FA;margin-left:20px;cursor: pointer;" @click="showPhone(1)">修改手机号</span>
              </el-form-item>
              <el-form-item class="form-item-min" label="邮箱：" prop="email" label-width="120px">
                <el-input
                  maxlength="30"
                  v-model="userform.email"
                  placeholder="请输入邮箱"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item class="form-item-min" label="出生年月：" prop="dateBirth" label-width="120px">
                <el-date-picker
                  v-model="userform.dateBirth"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择出生日期">
                </el-date-picker>
              </el-form-item>
            </div>
            <div>
              <el-form-item class="form-item-min" label="人脸照片：" prop="searchValue" label-width="120px">
                <div class="up-data-box" style="width:210px;">
                  <div class="up-data-min-box" style="display: flex;">
                    <div class="up-data-button" v-if="!user.faceImg" @click="upFaceOpenClick(2)">
                      <p>+</p>
                      <p>上传</p>
                    </div>
                    <img class="img-one" :src="user.faceImg" v-if="user.faceImg" @click="upFaceOpenClick(2)">
                  </div>
                </div>
              </el-form-item>
              <!--<el-form-item class="form-item-min" label="电子签名：" prop="searchValue" label-width="120px">-->
              <!--<div class="up-data-box">-->
              <!--<div class="up-data-min-box" style="display: flex;">-->
              <!--<el-upload-->
              <!--class="position-button"-->
              <!--:action="uploadImgUrlTwo"-->
              <!--:show-file-list="false"-->
              <!--:auto-upload="false"-->
              <!--:on-change="signatureChange"-->
              <!--accept="image/jpeg,image/gif,image/png"-->
              <!--:headers="headers"-->
              <!--:before-upload="beforeAvatarUpload">-->
              <!--<div class="up-data-button" v-if="!user.signature">-->
              <!--<p>+</p>-->
              <!--<p>上传</p>-->
              <!--</div>-->
              <!--<img class="img-two" :src="user.signature" v-if="user.signature">-->
              <!--</el-upload>-->
              <!--</div>-->
              <!--</div>-->
              <!--</el-form-item>-->
            </div>
          </el-form>
          <p class="type-one-max-box add-button-one-120" @click="upDataProfile">保存</p>
        </div>
        <div v-if="buttonType == 2">
          <el-form :model="form" ref="form" :inline="true" :rules="rules">
            <div>
              <el-form-item class="form-item-min" label="原始密码：" prop="oldPassword" label-width="120px">
                <el-input
                  maxlength="16"
                  type="password"
                  v-model.trim="form.oldPassword"
                  placeholder="请输入原始密码"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item class="form-item-min" label="新密码：" prop="newPassword" label-width="110px">
                <el-input
                  maxlength="16"
                  type="password"
                  v-model.trim="form.newPassword"
                  placeholder="请输入新密码"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item class="form-item-min" label="确认密码：" prop="confirmPassword" label-width="120px">
                <el-input
                  maxlength="16"
                  type="password"
                  v-model.trim="form.confirmPassword"
                  placeholder="请确认密码"
                  clearable
                  size="small"
                />
              </el-form-item>
              <span class="type-one-max-box add-button-one-120" style="margin-left:20px;display: inline-block;" @click="submit">保存</span>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <!--电子签名-->
    <el-dialog class="up-img-box" title="上传电子签名" :visible.sync="upImgOpen" width="600px" append-to-body>
      <p>示例</p>
      <img class="img-one" src="@/assets/ZDimages/icon_scdzqm_sl.png">
      <p>正楷签名</p>
      <div class="cropper-box">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :canScale="option.canScale"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :full="option.full"
          :fixedBox="option.fixedBox"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :centerBox="option.centerBox"
          :height="option.height"
          :infoTrue="option.infoTrue"
          :maxImgSize="option.maxImgSize"
          :enlarge="option.enlarge"
          :mode="option.mode"
          @realTime="realTime"
          @imgLoad="imgLoad"
        ></vueCropper>
        <p class="cropper-button" @click="upImgButton">保存查看</p>
        <el-upload
          class="position-button"
          :action="uploadImgUrl"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="signatureChange"
          accept="image/jpeg,image/gif,image/png"
          :headers="headers"
          :before-upload="beforeAvatarUpload">
          <p style="position: absolute;right:100px;top:10px;z-index:1;color:#fff;background:#14AE10;cursor: pointer;padding:5px 10px;margin:0;border-radius:6px;">选择签名</p>
        </el-upload>
      </div>
      <p style="color:#999;">请将签名置于选择框内以便提高识别度</p>
      <img class="cropper-img" v-if="signatureData" :src="signatureData">
      <div slot="footer" class="dialog-footer">
        <el-button @click="upImgOpenClick(1)">取 消</el-button>
        <el-button type="primary" @click="upSignatureData">确 定</el-button>
      </div>
    </el-dialog>
    <!--上传照片-->
    <el-dialog class="up-img-box" title="上传照片" :visible.sync="upFaceOpen" width="600px" append-to-body>
      <el-upload
        ref="faceUpLoad"
        class="position-button"
        :action="uploadImgUrl"
        :show-file-list="false"
        :auto-upload="false"
        :on-change="faceChange"
        accept="image/jpeg,image/gif,image/png"
        :on-success="(res)=>handleAvatarSuccess(res)"
        :headers="headers"
        :before-upload="beforeAvatarUpload">
        <div v-if="!upFaceUrl" style="width:300px;height:300px;border: 1px dashed #E0E0E0;cursor: pointer;margin:20px 130px 0;">
          <p style="text-align: center;color:#999;font-weight:500;font-size: 20px;line-height:300px;margin:0;">+</p>
        </div>
        <div v-if="upFaceUrl" class="scrollbar-box" style="width:560px;margin:0 auto;max-height:700px;overflow-y: scroll">
          <img :src="upFaceUrl" style="max-width:560px;border: 1px dashed #E0E0E0;cursor: pointer;margin:0 auto;">
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="faceButton(1)">取 消</el-button>
        <el-button type="primary" @click="faceButton(2)">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改手机号-->
    <el-dialog class="revise-phone-box" @close="offPhone" title="修改手机号" :visible.sync="dialogPhoneType"
               v-if="dialogPhoneType" width="400px" append-to-body>
      <el-form ref="phoneForm" :model="phoneForm" :rules="rules" label-width="0px">
        <el-form-item label="" prop="phone">
          <div class="phone-box">
            <el-input
              maxlength="11"
              v-model.trim="phoneForm.phone"
              :placeholder="phoneState == 1?'请输入旧手机号':'请输入新手机号'"
              clearable>
              <template slot="prepend">+86</template>
            </el-input>
          </div>
        </el-form-item>
      </el-form>
      <el-form ref="codeForm" :model="phoneForm" :rules="rules" label-width="0px">
        <el-form-item label="" prop="code">
          <div class="code-box">
            <el-input
              maxlength="6"
              v-model.trim="phoneForm.code"
              placeholder="请输入验证码"
              clearable>
            </el-input>
            <p class="code-button" @click="getCode">{{codeTimeText}}</p>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="width:100px;" @click="showPhone(2)">取 消</el-button>
        <el-button style="width:100px;" type="primary" @click="revisePhone">{{phoneState==1?'下一步':(phoneState==2?'确定':'')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { Navbar } from '@/layout/components'
  import userAvatar from "./userAvatar";
  import { getUserProfile,updateUserPwd,changePhone,genSign,updateSignature,upDataProfile,
    getSendCode, phoneCheckCode, putPhone} from "@/api/system/user";
  import { getToken } from "@/utils/auth";
  export default {
    name: "mine",
    components: {
      Navbar,
      userAvatar
    },
    data(){
      const equalToPassword = (rule, value, callback) => {
        if (this.form.confirmPassword !== value) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      };
      const equalToPasswordTwo = (rule, value, callback) => {
        if (this.form.newPassword !== value) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      };
      const validatePass = (rule, value, callback) => {
        let reg = /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,16}$/
        console.log("reg.test(value)",reg.test(value))
        if(reg.test(value)){
          callback()
        }else{
          return callback(new Error('密码应在8-16位包括数字和字母与特殊字符'));
        }
      };
      return{
        buttonType:'1',
        uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/laboratory/studentinfo/commit/face", // 上传的图片服务器地址
        uploadImgUrlTwo: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        pageType:false,
        user: {},
        roleGroup: {},
        postGroup: {},
        activeTab: "resetPwd",
        form:{
          oldPassword:"",
          newPassword:"",
          confirmPassword:""
        },
        userform:{},
        userformData:{},
        open:false,
        // 表单校验
        rules: {
          oldPassword: [
            { required: true, message: "旧密码不能为空", trigger: "blur" },
          ],
          newPassword: [
            { required: true, message: "新密码不能为空", trigger: "blur" },
            { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" },
            { required: true, validator: equalToPassword, trigger: "blur" },
            { required: true, message: "请输入8-16位密码，不能输入连续性和重复性的密码，密码中需要包含：大写字母、小写字符、数字和字符", validator: validatePass, trigger: "blur" }
          ],
          confirmPassword: [
            { required: true, message: "确认密码不能为空", trigger: "blur" },
            { min: 8, max: 16, message: "长度在 8 到 16 个字符", trigger: "blur" },
            { required: true, validator: equalToPasswordTwo, trigger: "blur" },
            { required: true, message: "请输入8-16位密码，不能输入连续性和重复性的密码，密码中需要包含：大写字母、小写字符、数字和字符", validator: validatePass, trigger: "blur" }
          ],
          phone: [
            { required: true, message: "请输入手机号码", trigger: "blur" },
            { validator: this.checkPhone, trigger: 'blur' },
            { min: 11, max: 11, message: "请输入11位手机号码", trigger: "blur" },
            { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
          ],
          // phone: [
          //   { required: true, message: "请输入手机号码", trigger: "blur" },
          //   { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          code: [
            { required: true, message: "请输入验证码", trigger: "blur" },
            { required: true, message: "请输入验证码", validator: this.spaceJudgment, trigger: "blur" }
          ],
          // email: [
          //   { required: true, message: "请输入邮箱地址", trigger: "blur" },
          //   { required: true, message: "请输入正确的邮箱地址", type: 'email'},
          //   { required: true, message: "请输入邮箱地址", validator: this.spaceJudgment, trigger: "blur" }
          // ],
          // dateBirth: [
          //   { required: true, message: "请选择出生日期", trigger: "blur" }
          // ],
        },
        //上传签名开关
        upImgOpen:false,
        option:{
          img: '', // 裁剪图片的地址
          outputSize: 1,       //裁剪生成图片的质量(可选0.1 - 1)
          outputType: 'png',  //裁剪生成图片的格式（jpeg || png || webp）
          info: true,          //图片大小信息
          canScale: true,      //图片是否允许滚轮缩放
          autoCrop: true,      //是否默认生成截图框
          autoCropWidth: 240,  //默认生成截图框宽度
          autoCropHeight: 80, //默认生成截图框高度
          fixed: true,         //是否开启截图框宽高固定比例
          fixedNumber: [3, 1], //截图框的宽高比例
          full: false,         //false按原比例裁切图片，不失真
          fixedBox: true,      //固定截图框大小，不允许改变
          canMove: false,      //上传图片是否可以移动
          canMoveBox: true,    //截图框能否拖动
          original: false,     //上传图片按照原始比例渲染
          centerBox: false,    //截图框是否被限制在图片里面
          height: true,        //是否按照设备的dpr 输出等比例图片
          infoTrue: false,     //true为展示真实输出图片宽高，false展示看到的截图框宽高
          maxImgSize: 3000,    //限制图片最大宽度和高度
          enlarge: 1,          //图片根据截图框输出比例倍数
          mode: '560px 400px'  //图片默认渲染方式
        },
        previews:{},
        //上传人脸
        upFaceOpen:false,
        upFaceUrl:"",
        //临时签名数据
        signatureData:"",
        //修改手机号相关
        dialogPhoneType:false,
        phoneForm:{
          phone:"",
          code:"",
        },
        codeTime:"",
        codeTimeText:"获取验证码",
        phoneState:1,
        newPhoneData:{},
      }
    },
    created() {
      this.getUser();
    },
    methods: {
      //下一步/修改手机号码
      revisePhone(){
        this.$refs["phoneForm"].validate((valid) => {
          if (valid) {
            this.$refs["codeForm"].validate((valid) => {
              if (valid) {
                if(this.phoneState == 1){
                  let obj = JSON.parse(JSON.stringify(this.phoneForm))
                  phoneCheckCode(obj).then(response => {
                    if(response.data){
                      this.$set(this,'newPhoneData',JSON.parse(JSON.stringify(obj)));
                      clearInterval(this.codeTime);
                      this.$set(this,'phoneForm',{phone:"",code:""});
                      this.$set(this,'codeTime',"");
                      this.$set(this,'codeTimeText',"获取验证码");
                      this.$set(this,'phoneState',2);
                    }else{
                      this.msgError('验证码错误')
                    }
                  });
                }else{
                  let newObj = {
                    code:this.phoneForm.code,
                    newPhone:this.phoneForm.phone,
                    oldPhone:this.newPhoneData.phone,
                  }
                  putPhone(newObj).then(response => {
                    console.log('response',response);
                    if(response.code==200){
                      this.dialogPhoneType = false;
                      clearInterval(this.codeTime);
                      this.$set(this,'phoneForm',{phone:"",code:""});
                      this.$set(this,'codeTime',"");
                      this.$set(this,'codeTimeText',"获取验证码");
                      this.$set(this,'phoneState',1);
                      this.msgSuccess(response.msg)
                      this.getUser();
                    }else{
                      this.msgError(response.msg)
                    }
                  });
                }
              }
            });
          }
        });

      },
      //手机号验证
      checkPhone(rule, value, callback) {
        if (!value) {
          return callback(new Error('不能为空'))
        } else {
          const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/
          if (reg.test(value)) {
            callback()
          } else {
            return callback(new Error('请输入正确的手机号码'))
          }
        }
      },
      //开启修改手机号
      showPhone(type){
        if (type == 1){
          this.$set(this,'phoneForm',{phone:"",code:""});
          this.$set(this,'codeTimeText',"获取验证码");
          this.$set(this,'phoneState',1);
          this.dialogPhoneType = true;
        } else{
          this.dialogPhoneType = false;
        }
      },
      //关闭修改手机号
      offPhone(){
        clearInterval(this.codeTime);
        this.$set(this,'codeTime',"");
      },
      //获取验证码
      getCode(){
        this.$refs["phoneForm"].validate((valid) => {
          if (valid) {
            if(!this.codeTime){
              let obj = {
                phone:this.phoneForm.phone
              }
              getSendCode(obj).then(response => {
                console.log(response.data)
                this.$set(this,'codeTimeText',30);
                this.phoneTime();
              });
            }
          }
        });
      },
      //倒计时
      phoneTime(){
        let self = this;
        let num = 30;
        this.codeTime = setInterval(refreshCount, 1000);
        function refreshCount() {
          if(num<=1){
            console.log("结束")
            clearInterval(self.codeTime);
            self.$set(self,'codeTime',"");
            self.$set(self,'codeTimeText','获取验证码');
          }else{
            num--;
            self.$set(self,'codeTimeText',num);
            console.log("持续启动中",num)
          }
        }
      },
      //修改用户信息
      upDataProfile(){
        let self = this;
        this.$refs["userform"].validate(valid => {
          if (valid) {
            if(!this.userform.email&&!this.userform.dateBirth){
              this.msgError('邮箱/出生年月,请至少填写一项进行修改')
              return
            }
            if((this.userform.email == this.userformData.email)&&
              (this.userform.dateBirth == this.userformData.dateBirth)){
              this.msgError('邮箱/出生年月,请至少修改一项再进行保存操作')
              return
            }
            let obj = {};
            if(this.userform.email){
              let regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
              if(!regex.test(this.userform.email)){
                this.msgError('请输入正确的邮箱地址')
                return
              }else{
                obj.email = this.userform.email;
              }
            }else {
              obj.email = '';
            }
            if(this.userform.dateBirth){
              obj.dateBirth = this.userform.dateBirth;
            }else{
              obj.dateBirth = '';
            }
            obj.userId = this.user.userId;
            this.$confirm('确定要修改吗', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              upDataProfile(obj).then(response => {
                self.msgSuccess('操作成功');
                self.getUser();
              });
            }).then(() => {
            }).catch(() => {});
          }
        })
      },
      //修改按钮密码
      submit() {
        let self = this;
        self.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('确定要修改吗', "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
              self.updateUserPwd();
            }).then(() => {
            }).catch(() => {});
          }
        });
      },
      //修改密码接口
      updateUserPwd(){
        updateUserPwd(this.form.oldPassword, this.form.newPassword).then(
          response => {
            this.form.oldPassword = "";
            this.form.newPassword = "";
            this.form.confirmPassword = "";
            this.msgSuccess("修改成功");
          }
        );
      },
      //返回按钮
      outButton(){
        this.$router.back()
      },
      //页面按钮点击
      buttonTypeClick(type){
        if(this.buttonType != type){
          this.buttonType = type;
        }
      },
      //获取信息
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data;
          this.roleGroup = response.roleGroup;
          this.postGroup = response.postGroup;
          let obj = {
            phonenumber:response.data.phonenumber,
            email:response.data.email,
            dateBirth:response.data.dateBirth,
          }
          this.$set(this,'userform',JSON.parse(JSON.stringify(obj)));
          this.$set(this,'userformData',JSON.parse(JSON.stringify(obj)));
          this.pageType = true;
        });
      },
      //上传签名
      upSignatureData(){
        if(!this.signatureData){
          this.msgError('请先选择签名上传并保存查看')
        }
        var blob = this.dataURLtoBlob(this.signatureData);
        var file = this.blobToFile(blob, 'dx.jpg');
        let formData = new FormData();
        formData.append('file',file,"DX.jpg")
        console.log("formData",formData);
        updateSignature(formData).then(response => {
          if(response.code == 200){
            this.msgSuccess("操作成功");
            this.upImgOpen = false;
            this.getUser();
          }
        });
      },
      //照片页面开关
      upFaceOpenClick(type){
        if(type == 1){
          this.upFaceOpen = false;
        }else if (type == 2){
          this.upFaceUrl = this.user.faceImg;
          this.upFaceOpen = true;
        }
      },
      //签名页面开关
      upImgOpenClick(type){
        if(type == 1){
          this.upImgOpen = false;
        }else if (type == 2){
          this.option.img = this.user.signature;
          this.signatureData = this.user.signature;
          this.upImgOpen = true;
        }
      },
      //确定签名
      upImgButton(){
        let self = this;
        this.$refs.cropper.getCropBlob(async (data) => {
          let formData = new FormData();
          formData.append('file',data,"DX.jpg")
          genSign(formData).then(response => {
            if(response.code == 200){
              this.signatureData = 'data:image/png;base64,'+response.data;
            } else {
              this.msgError(response.msg)
            }
          });
        })
      },
      //照片选择
      faceChange(val){
        const windowURL = window.URL || window.webkitURL;
        this.upFaceUrl = windowURL.createObjectURL(val.raw)
      },
      //签名选择
      signatureChange(val){
        const windowURL = window.URL || window.webkitURL;
        this.option.img = windowURL.createObjectURL(val.raw)
        this.signatureData = "";
        this.upImgOpen = true;
      },
      // 照片上传按钮
      faceButton(type){
        if(type==1){
          this.upFaceOpen = false;
        }else if(type == 2){
          this.$refs.faceUpLoad.submit();
        }
      },
      //上传
      handleAvatarSuccess(res, type) {
        if(res.code == 200){
          this.user.faceImg = res.data.cardUrl;
          this.upFaceOpen = false;
          this.getUser();
          this.msgSuccess(res.msg)
          this.$forceUpdate()
        }else{
          this.msgError(res.msg)
        }
      },
      beforeAvatarUpload(file) {
        let type = false;
        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
          type = true;
        }else{
          this.$message.error('只能上传png/jpeg/gif格式图片');
          type = false;
        }
        return type;
      },
      // 实时预览函数
      realTime(data) {
        console.log("实时预览函数",data)
        this.previews = data;
      },
      //图片加载的回调 imgLoad 返回结果success, error
      imgLoad (msg) {
        console.log("图片加载的回调",msg)
        // console.log('imgLoad')
        // console.log(msg)
      },
      //将base64转换为blob
      dataURLtoBlob: function(dataurl) {
        var  arr = dataurl.split(',')
        var  mime = arr[0].match(/:(.*?);/)[1]
        var  bstr = atob(arr[1])
        var  n = bstr.length
        var  u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
      },
      //将blob转换为file
      blobToFile: function(theBlob, fileName){
        theBlob.lastModifiedDate = new Date();
        theBlob.name = fileName;
        return theBlob;
      },
    },
    beforeRouteLeave(to, from, next) {
      console.log("to",to);
      if(to.name == 'IndexHome'){
        this.$router.push({ path: "/redirect"+to.fullPath });
      }else{
        next();
      }
    }
  }
</script>

<style scoped lang="scss">
  .mine{
    height:100%;
    width:100%;
    display: flex;
    flex-direction: column;
    *{
      margin:0;
    }
    .mine-page{
      flex:1;
      display: flex;
      .left-max-box{
        width:300px;
        margin:5px 20px 20px 20px;
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
        border-radius:10px;
        .left-title{
          font-size:18px;
          text-align: center;
          line-height: 30px;
          margin-top:30px;
          color:#0045af;
        }
        .left-user-img{
          width:130px;
          height:130px;
          overflow: hidden;
          border-radius:50%;
          margin:30px auto 20px;
        }
        .left-name{
          font-size:20px;
          line-height:43px;
          text-align: center;
        }
        .left-num{
          font-size:16px;
          line-height:38px;
          text-align: center;
        }
        .left-text-max-box{
          border-top:1px dashed #dedede;
          border-bottom:1px dashed #dedede;
          margin:24px 10px 0;
          padding:20px 0;
          .left-text-big-box{
            display: flex;
            .left-text-big-box-left{
              width:100px;
              height:38px;
              display: flex;
              margin-right:10px;
              img{
                width:16px;
                height:16px;
                margin:11px 10px 0;
              }
              p{
                flex:1;
                font-size:14px;
                line-height:38px;
              }
            }
            .left-text-big-box-right{
              height:38px;
              flex:1;
              display: flex;
              .img-one{
                width:16px;
                height:14px;
                margin:12px 10px 0;
              }
              .img-two{
                width:16px;
                height:16px;
                margin:11px 10px 0;
              }
              p{
                flex:1;
                font-size:14px;
                line-height:38px;
              }
            }
          }
          .left-text-min-box{
            display: flex;
            height:38px;
            img{
              width:16px;
              height:16px;
              margin:11px 10px 0;
            }
            p{
              flex:1;
              font-size:14px;
              line-height:38px;
            }
          }
        }
        .left-type-text-max-box{
          padding:20px 0;
          div{
            display: flex;
            p{
              flex:1;
              font-size:14px;
              color:#333;
              line-height:40px;
            }
            p:nth-child(1){
              text-align: left;
              margin-left:32px;
            }
            p:nth-child(2){
              text-align: right;
              margin-right:48px;
            }
            .p-color-a{
              color:#06B924;
            }
            .p-color-b{
              color:#FF9735;
            }
          }
        }
      }
      .right-max-box{
        flex:1;
        margin:5px 20px 20px 0;
        box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
        border-radius:10px;
        display: flex;
        flex-direction: column;
        .right-title-box{
          display: flex;
          border-bottom:1px solid #dedede;
          .title-button-min-box{
            height:90px;
            margin:0 20px;
            cursor: pointer;
            p:nth-child(1){
              margin-top:6px;
              line-height:78px;
              font-size:16px;
            }
            p:nth-child(2){
              height:6px;
              border-radius:4px;
            }
            .bottomColor{
              color:#0045AF;
            }
            .bottomBack{
              background:#0045AF ;
            }
          }
          .right-null-p{
            flex:1;
          }
          .right-out-button{
            margin:20px;
          }
        }
        .type-one-max-box{
          width:100px;
          margin:40px auto 0;
        }
        .up-data-box{
          display: inline-block;
          width:380px;
          line-height:20px;
          margin-bottom:30px;
          .up-data-min-box{
            .up-data-title{
              font-size:15px;
              color:#333;
            }
            .up-data-button{
              width:120px;
              height:120px;
              border: 1px dashed #E0E0E0;
              cursor: pointer;
              p{
                text-align: center;
                color:#999;
                font-weight:500;
              }
              p:nth-child(1){
                font-size: 20px;
                line-height:40px;
                margin-top:20px;
              }
              p:nth-child(2){
                font-size: 16px;

              }
            }
            .img-one{
              width:120px;
              height:120px;
            }
            .img-two{
              width: 240px;
              height:80px;
            }
          }
        }
        .form-item-min{
          margin-top:40px;
        }
      }
    }
  }
</style>
<style lang="scss">
  .up-img-box{
    .el-dialog__body{
      padding-top:0;
    }
    .img-one{
      width:560px;
      height:150px;
    }
    .cropper-img{
      display: block;
      border:1px solid #e0e0e0;
      width:360px;
      height:120px;
      margin:0 auto;
    }
    .cropper-box{
      width:560px;
      height:270px;
      position: relative;
      .cropper-button{
        position: absolute;
        right:10px;top:10px;
        z-index:1;
        background: #0183FA;
        color:#fff;
        cursor: pointer;
        padding:5px 10px;
        margin:0;
        border-radius:6px;
      }
    }
  }
  .revise-phone-box{
    .phone-box{

    }
    .code-box{
      display: flex;
      .code-button{
        font-size:14px;
        margin:0 0 0 20px;
        width:140px;
        text-align: center;
        color:#0045AF;
        border:1px solid #0045AF;
        line-height:38px;
        border-radius:6px;
        cursor: pointer;
      }
    }
  }
</style>