study_sm/src/containers/center/setting/index.vue

<template>
  <div class="m-right-block fr">
    <div class="right-block-bd">
      <div class="m-account">
        <div class="account-tit" style="height:30px">
          <a :class="{'current':show===1}" style="text-decoration: none;padding-bottom: 5px" @click="show=1" class="">基础资料</a>
          <a :class="{'current':show===2}" style="text-decoration: none;padding-bottom: 5px" @click="show=2" class="">实名认证</a>
          <a :class="{'current':show===3}" style="text-decoration: none;padding-bottom: 5px" @click="show=3" class="">额外信息</a>
          <!-- <a :class="{'current':show===4}" style="text-decoration: none;padding-bottom: 5px" @click="show=4" class="">密码修改</a> -->
          <!-- <a :class="{'current':show===5}" style="text-decoration: none;padding-bottom: 5px" @click="show=5" class="">手机修改</a> -->
        </div>

        <div v-if="show===1" class="lwh-ul-form">
          <form name="user">
            <div class="m-img tc"></div>

            <el-row :gutter="40" class="mt20">
              <el-col :span="6" class="col-normal tc">
                <img :src="userInfo.headImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.headImg)">
                <do-upload @onFinish="setHeadImg" placeholder="上传头像"> </do-upload>
              </el-col>

              <el-col :span="6" class="col-normal tc">
                <img :src="userInfo.graduateImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.graduateImg)">
                <do-upload @onFinish="setGraduateImg" placeholder="上传毕业证"> </do-upload>
              </el-col>
            </el-row>

            <ul class="ul-form">
              <li class="txt-r">
                <span class="l-t"></span>注：<i></i>只有头像、性别、毕业证可以修改
              </li>

              <li>
                <span class="l-t">姓名：</span>
                <input type="text" v-model="userInfo.nickname" class="ipt ng-pristine ng-valid ng-valid-required"
                  required="" placeholder="请输入用户名" disabled="disabled">
              </li>
              <li class="ng-binding">
                <span class="l-t">证件号：</span>{{userInfo.cardId||'未知'}}</li>
              <li>
                <span class="l-t"><i></i>性别：</span>

                <span class="sex">
                  <a href="javascript:void(0)" @click="userInfo.gender='男'" :class="{'selected':userInfo.gender=='男'}">
                    <span class="p-ico2 ico-man"></span>男
                  </a>
                  <a href="javascript:void(0)" @click="userInfo.gender='女'" :class="{'selected':userInfo.gender=='女'}">
                    <span  class="p-ico2 ico-woman"></span>女
                  </a>
                </span>
              </li>
              <li>
                <span class="l-t"><i></i>手机号码：</span>
                <input type="text" v-model="userInfo.phone"  class="ipt" disabled placeholder="请输入手机号码">

                <span class="tips ng-scope" v-if="!isPhone()">
                  <span class="p-ico2"></span>手机格式不对
                </span>
              </li>
              <li class="mt20">
                <span class="l-t"></span>
                <el-button type="primary" class="confirm" @click="doSaveBaseInfo()">保 存</el-button>
              </li>
            </ul>

          </form>
        </div>


        <div v-if="show===2" class="lwh-ul-form ng-scope">
          <form name="user" class="ng-pristine ng-valid">
            <div class="m-img tc"></div>

            <el-row :gutter="40" class="mt20">
              <el-col :span="6" class="col-normal tc">
                 <img :src="userInfo.cardImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardImg)">
                <do-upload @onFinish="setCardImg" placeholder="身份证正面"> </do-upload>
              </el-col>

              <el-col :span="6" class="col-normal tc">
                <img :src="userInfo.cardBackImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardBackImg)">
                <do-upload @onFinish="setCardBackImg" placeholder="身份证背面"> </do-upload>
              </el-col>
            </el-row>

            <ul class="ul-form mt50 ng-scope">
              <li>
                <span class="l-t">身份证：</span>
                 <input v-model="userInfo.cardId" class="ipt1" disabled></input>
              </li>
              <li>
                <span class="l-t">姓名：</span>
                <input v-model="userInfo.nickname" class="ipt1" disabled></input>
              </li>
              <li>
                <span class="l-t">手机号：</span>
                <input v-model="userInfo.phone" class="ipt1" disabled></input>
              </li>

              <li class="mt30">
                <span class="l-t"></span>
                <el-button type="primary" class="confirm" @click="identify()" v-if="!userInfo.identify">实名认证</el-button>
                <el-button type="text" v-else >已经完成实名认证</el-button>
              </li>
            </ul>
          </form>
        </div>


        <div v-if="show===3" >
          <el-form ref="elForm" :inline="false"  class="mt50">
            <el-form-item label="详细地址" label-width='150px' class="mt30" prop="address" >
               <el-input placeholder="详细地址" v-model="userInfo.address " class="pass-input">
               </el-input>
            </el-form-item>

            <el-form-item label="邮政编码" label-width='150px' class="mt30" prop="postalCode" >
               <el-input placeholder="邮政编码" v-model="userInfo.postalCode " class="pass-input">
               </el-input>
            </el-form-item>


            <el-form-item label="工作年限" label-width='150px' class="mt30" prop="years" >
               <el-input placeholder="工作年限" v-model="userInfo.years " class="pass-input">
               </el-input>
            </el-form-item>

            <el-form-item label="工作单位" label-width='150px' class="mt30" prop="company" >
               <el-input placeholder="工作单位" v-model="userInfo.company " class="pass-input">
               </el-input>
            </el-form-item>

            <el-form-item label="最高学历" label-width='150px' class="mt30" prop="oldPass" >
               <el-input placeholder="最高学历" v-model="userInfo.education " class="pass-input">
               </el-input>
            </el-form-item>

            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
               <el-button type="primary"  class="confirm" @click="saveMoreInfo()">
                 确认修改
                </el-button>
            </el-form-item>
          </el-form>

        </div>


        <div v-if="show===4" class="ng-scope">
          <el-form ref="elForm" :inline="false" :model="passForm" :rules="passRules" class="mt50">
            <el-form-item label="输入旧密码" label-width='150px' class="mt30" prop="oldPass" >
               <el-input placeholder="输入旧密码" v-model="passForm.oldPass " class="pass-input" type="password"
               show-password auto-complete="new-password">

               </el-input>
            </el-form-item>

            <el-form-item label="输入新密码" label-width='150px' class="mt30" prop="newPass" >
               <el-input placeholder="输入新密码" v-model="passForm.newPass" class="pass-input" type="password"
               show-password auto-complete="new-password">
               </el-input>
            </el-form-item>

            <el-form-item   label="确认新密码" label-width='150px' class="mt30" prop="rePass">
               <el-input placeholder="确认新密码" v-model="passForm.rePass" class="pass-input" type="password"
               show-password auto-complete="new-password">
               </el-input>
            </el-form-item>

            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
               <el-button type="primary"  class="confirm" @click="doSavePassword()">
                 确认修改
                </el-button>
            </el-form-item>

          </el-form>
        </div>

        <div v-if="show===5" class="ng-scope">
          <el-form ref="elFormPhone" :inline="false" :model="phoneForm" :rules="phoneRules" class="mt50">
            <el-form-item label="输入新手机" label-width='150px' class="mt30" prop="phone" >
               <el-input placeholder="输入新手机" v-model="phoneForm.phone " style="width: 300px;" :maxlength="11" show-word-limit>
               </el-input>
            </el-form-item>

            <el-form-item label="短信检验码" label-width='150px' class="mt30" prop="code" >
               <el-input placeholder="输入短信检验码" v-model="phoneForm.code" style="width: 180px;" :maxlength="6" show-word-limit>
               </el-input>
               <el-button style="width: 120px;" type="info" v-if="phoneForm.phone.length!=11" disabled>获取检验码</el-button>
               <el-button style="width: 120px;" type="primary" v-else-if="!count" @click="getCode()">获取检验码</el-button>
               <el-button style="width: 120px;" type="info" disabled v-else>剩余时间{{count}} s</el-button>
            </el-form-item>
            <el-form-item label="" label-width='150px' class="mt30" prop="code" >
              <span style="color: red;">注意：手机必须本人实名认证手机</span>
            </el-form-item>
            <el-form-item   label="" label-width='150px' class="mt30" prop="rePass">
               <el-button type="primary"  class="confirm" @click="doSavePhone()">
                 确认修改
                </el-button>
            </el-form-item>

          </el-form>
        </div>


      </div>
    </div>

    <el-dialog
        append-to-body
        close-on-click-modal
        :visible.sync="visible"
        :width="width">
        <img :src="imgUrl" @load="onLoad" alt="" />
    </el-dialog>
  </div>
</template>

<script>
  import { httpServer } from "@/components/httpServer/httpServer.js";
  import UploadImage from "@/components/upload/index.vue";
  import ImgView from '@/components/upload/imgView.vue';
  import DoUpload from '@/components/upload/index.vue'
  import rules from "@/utils/rules.js";
  import { mapGetters,mapActions } from "vuex";
  export default {
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.passForm.newPass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };

      return {
        show: 1,
        width: "",
        visible: false,
        timer: false,
        count: 0,
        imgUrl:'',
        passForm:{
          oldPass:'',
          newPass:'',
          rePass:'',
        },
        passRules:{
          oldPass: rules.defaultFun("请输入密码"),
          newPass: rules.passwordItem,
          rePass: [
            { required: true, validator: validatePass2, trigger: "blur" },
          ],
        },
        phoneForm:{
          phone:'',
          code:''
        },
        phoneRules:{
          phone: rules.defaultFun("请输入新手机"),
          code: rules.defaultFun("请输入短信校验码")
        },
        errorImg: 'this.src="' + require('../../../assets/images/default-photo_hash88f70f5253.jpg') + '"'
      }
    },
    computed: {
    	...mapGetters("user", ["userInfo"])
    },
    components:{DoUpload,UploadImage,ImgView},
    methods: {
       ...mapActions("user", ["saveBaseInfo"]),
      isPhone( ){
        let phone = this.userInfo.phone;
        return !phone||/^1[0-9]{10}$/.test(phone)
      },
      checkPhone() {
        let phone = this.phoneForm.phone;
        if (!/^1[3456789]\d{9}$/.test(phone)) {
          this.$message.error("请填写正确的手机号");
          return false;
        }
        return true
      },
      showImg( url ){
        this.imgUrl = url;
        this.visible = true;
      },
      setHeadImg( imgUrl ){
        this.userInfo.headImg = imgUrl;
        this.saveBaseInfo(this.userInfo)
      },
      setCardImg( url ){
        httpServer("User.addCardImg", {url}).then( res=>{
          if( res.code == 200){
            this.userInfo.cardImg = res.url;
            this.userInfo.nickname = res.nickanme
            this.userInfo.address = res.address;
            this.saveBaseInfo(this.userInfo)
          }
        })
      },
      setCardBackImg( url  ){
        httpServer("User.addCardBackImg", {url}).then( res=>{
          if( res.code == 200){
            this.userInfo.cardBackImg = url;
            this.saveBaseInfo(this.userInfo)
           }
        })
      },
      setGraduateImg( url  ){
        httpServer("User.addGraduateImg", {url}).then( res=>{
          if( res.code == 200){
            this.userInfo.graduateImg = url;
            this.saveBaseInfo(this.userInfo);
           }
        })
      },
      identify(){
        httpServer("User.identify", {}).then( res=>{
          if( res.code == 200){
            this.userInfo.identify = 1;
            this.saveBaseInfo(this.userInfo)
            this.$message.success( "实名认证成功")
           }
        })
      },
      doSaveBaseInfo(){
        let param = {
           headImg:this.userInfo.headImg,
           gender:this.userInfo.gender,
         }
        httpServer("User.saveBaseInfo", param).then( res=>{
          if( res.code == 200){
            this.$message.success("保存成功")
            this.saveBaseInfo(this.userInfo)
          }
        })
      },
      doSavePhone(){
        let {phone, code}  = this.phoneForm;
        this.$refs["elFormPhone"].validate((valid) => {
          if (!valid) return;
          let param = {
             phone: phone,
             code: code
           }
          httpServer("User.ChangePhone", param).then( res=>{
            if( res.code == 200){
              this.userInfo.phone = phone;
              this.$message.success("修改手机成功");
              this.saveBaseInfo(this.userInfo);
              this.$refs["elFormPhone"].resetFields()
            }
          })
        })
      },
      getCode() {
        if (!this.checkPhone()) return;
        let phone = this.phoneForm.phone
        this.startTimer()
        let type = "changePhone"
        httpServer("Auth.getCode", { phone, type}).then(res => {
          if (res.code == 200) {
            this.$message.successMsg("发送成功", 1)
            this.startTimer()
          }
        })
      },
      startTimer() {
        const TIME_COUNT = 60; //更改倒计时时间
        if (this.timer) clearInterval(this.timer);
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0) {
            this.count--;
          } else {
            clearInterval(this.timer); // 清除定时器
            this.timer = null;
            this.count = 0;
          }
        }, 1000)
      },
      doSavePassword(){
        let {oldPass, newPass}  = this.passForm;
        this.$refs["elForm"].validate((valid) => {
          console.log(" valid")
          if (!valid) return;
          let param = {
             oldPass:this.$md5(oldPass),
             newPass:this.$md5(newPass)
           }
          httpServer("User.ResetPass", param).then( res=>{
            if( res.code == 200){
              this.passForm = {oldPass:'', newPass:'', rePass:''};
              this.$message.success("密码修改成功")
              this.$refs["elForm"].resetField();
            }
          })
        })
      },
      onLoad(e) {
        const img = e.target;
        let width = 0;
        if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
            width = img.width + 40;
        }
        this.width = width + "px";
        console.log( this.width )
      },
      saveMoreInfo(){
         let param = {
           education:this.userInfo.education,
           address:this.userInfo.address,
           years:+this.userInfo.years,
           company: this.userInfo.company,
           address: this.userInfo.address,
           education: this.userInfo.education,
           postalCode:this.userInfo.postalCode,
         }
        httpServer("User.saveMoreInfo", param).then( res=>{
          if( res.code == 200){
            this.$message.success( "编辑成功")
          }

        })
      }
    }
  }
</script>

<style>
  @import url("./index.css");
  @import url("../../../assets/css/m-account.css");
  .pass-input{
    width: 296px;
  }
  .confirm{
    width: 296px;
  }
</style>