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

<template>
  <div class="m-right-block">
    <div class="right-block-bd tc">
      <el-row style="margin: 0 auto;">
        <el-col :span="8">
          <div style="margin: 10px auto;">
            <img :src="userInfo.headImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.headImg)">
            <do-upload @onFinish="setHeadImg" placeholder="上传头像"> </do-upload>
          </div>

          <div style="margin: 10px auto;">
            <img :src="userInfo.cardImg" :onerror="errorImg" class="setting-img" @click="showImg(userInfo.cardImg)">
            <do-upload @onFinish="setCardImg" placeholder="身份证正面"> </do-upload>
            <span style="color: red;text-align: center;margin-top: 10px;">必须本人身份证</span>
          </div>
        </el-col>
        <el-col :span="8">
          <el-form ref="elForm" :inline="false" style="width: 500px;margin: 0 auto;" label-width='160px' label-position="center">
            <el-form-item label="详细地址"  class="mt30" prop="address">
              <el-input placeholder="详细地址" v-model="userInfo.address " class="pass-input">
              </el-input>
            </el-form-item>

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


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

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

            <el-form-item label="最高学历" 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='0' class="mt30" prop="rePass">
              <el-button type="primary" @click="saveMoreInfo()">
                确认修改
              </el-button>
              <el-button type="warning" @click="passwdDialog=true">修改密码</el-button>
              <el-button type="danger" @click="openPhoneDialog()">修改手机</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-dialog :visible.sync="passwdDialog" title="修改密码" center :close-on-click-modal="false"
        :modal-append-to-body="false" :append-to-body="true" :show-close="false">
        <el-form ref="passForm" :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" @click="passwdDialog=false">
              取消修改
            </el-button>
            <el-button type="warning" @click="doSavePassword()">
              确认修改
            </el-button>
          </el-form-item>

        </el-form>
      </el-dialog>


      <el-dialog :visible.sync="phoneDialog" title="修改手机" center :close-on-click-modal="false"
        :modal-append-to-body="false" :append-to-body="true" :show-close="false">

        <el-form ref="phoneForm" :inline="false" :model="phoneForm" :rules="phoneRules" class="mt50">

          <el-form-item label="用户身份证" label-width='150px' class="mt30" prop="cardId">
            <el-input placeholder="输入用户身份证" v-model="phoneForm.cardId " style="width: 300px;" :maxlength="18" disabled />
          </el-form-item>

          <el-form-item label="用户的姓名" label-width='150px' class="mt30" prop="nickname">
            <el-input placeholder="输入姓名" v-model="phoneForm.nickname " style="width: 300px;" :maxlength="11">
            </el-input>
          </el-form-item>
          <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" @click="phoneDialog=false">
              取消修改
            </el-button>

            <el-button type="warning"  @click="doSavePhone()">
              确认修改
            </el-button>
          </el-form-item>

        </el-form>
      </el-dialog>


    </div>

    <el-dialog append-to-body close-on-click-modal :visible.sync="visible" :width="width">
      <img :src="imgUrl" @load="onLoad" alt="" />
    </el-dialog>
  </div>
  </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: '',
        },
        passwdDialog: false,
        phoneDialog: false,
        passRules: {
          oldPass: rules.defaultFun("请输入密码"),
          newPass: rules.passwordItem,
          rePass: [{
            required: true,
            validator: validatePass2,
            trigger: "blur"
          }, ],
        },
        phoneForm: {
          cardId:'',
          nickname:'',
          phone: '',
          code: ''
        },
        phoneRules: {
          phone: rules.defaultFun("请输入新手机"),
          code: rules.defaultFun("请输入短信校验码")
        },
        errorImg: 'this.src="' + require('../../../assets/images/no-data_hash5abcd2ef62.png') + '"'
      }
    },
    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) {
        console.log('setHeadImg', imgUrl)
        this.userInfo.headImg = imgUrl;
      },
      setCardImg(url) {
        httpServer("User.addCardImg", {
          url
        }).then(res => {
          if (res.code == 200) {
            this.userInfo.cardImg = res.url;
            this.userInfo.nickname = res.nickname
            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("保存成功")
          }
        })
      },
      openPhoneDialog(){
        this.phoneForm.phone = ''
        this.phoneForm.code = ''
        this.phoneForm.cardId = this.userInfo.cardId
        this.phoneForm.nickname = this.userInfo.nickname
        this.phoneDialog = true
      },
      doSavePhone() {
        let {
          phone,
          code
        } = this.phoneForm;
        this.$refs["phoneForm"].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.phoneDialog = false
              this.$message.success("修改手机成功");
              this.saveBaseInfo(this.userInfo);
            }
          })
        })
      },
      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;
        console.log({
          oldPass,
          newPass
        })
        this.$refs["passForm"].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.passwdDialog = false
              this.$message.success("密码修改成功")
            }
          })
        })
      },
      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>