Customer-Service-Web/service/src/pages/PersonalInformation.vue

<template>
  <div class="row allAlignment">
    <leftNav />
    <div>
      <hader />
      <messageCenter></messageCenter>
      <div class="user_box scroll">
        <div>
          <!-- <div class="headPortrait">
            <div
              class="row item-center"
              
            >头像设置</div>
            <div style="height:180px;background:#fff;padding:20px;" class="row">
              <div style="width:50%;">
                <p style="font-size:14px;margin-top:35px;color:#666;">建议上传110px*110px，若不设置则使用系统默认头像</p>
                <input
                  type="file"
                  id="file"
                  @change="headPortraitChange($event)"
                  style="display:none;"
                />
                <label
                  for="file"
                  class="btn"
                  style="display:block;border:1px solid rgba(221,221,221,1);background:linear-gradient(180deg,rgba(245,245,245,1) 0%,rgba(238,238,238,1) 100%);width:120px;height:40px;color:#666;font-size:14px;margin-top:30px;"
                >上传图片</label>
              </div>
              <div style="width:50%;">
                <div class="row rightAlignment">
                  
                  <img :src="require('@/assets/img/userPortrait.png')" style="width:110px;height:110px;" />
                </div>
                <div class="row rightAlignment">
                  <p
                    class="row center"
                    style="width:110px;color:#999;font-size:12px;"
                  >{{serviceInfo.user_avatar?'您的头像':'默认头像'}}</p>
                </div>
              </div>
            </div>
          </div> -->
          
          <!-- 用户信息 -->
          <div class="userInfo">
            <div class="row item-center user_head">个人信息</div>
            <div class="userInfoBox " >
              <div class="row">
                <div>
                  <div>
                    <p class="title_text">分组</p>
                    <p>{{user_info.group}}</p>
                  </div>

                  <div>
                    <p class="title_text">工号</p>
                    <p>{{user_info.user_job_number}}</p>
                  </div>

                  <div>
                    <p class="title_text">姓名</p>
                    <input class="text_input" v-model="user_info.fullname" type="text" />
                  </div>
                </div>

                <div style="margin-left:200px">
                  <div>
                    <p class="title_text">昵称</p>
                    <input class="text_input" v-model="user_info.user_name" type="text" />
                  </div>
                  <div>
                    <p class="title_text">手机</p>
                    <input class="text_input" v-model="user_info.phone" type="text" />
                  </div>
                  <div>
                    <p class="title_text">邮箱</p>
                    <input class="text_input" v-model="user_info.user_email" type="text" />
                  </div>
                </div>
              </div>
              <div class="row allAlignment  text_box">
                <div class="row item-center">
                  <div style="width:84px;">
                   <p class="title_text">个性签名</p>
                  </div>
                  <input style="width:400px;height:40px;" v-model="user_info.signature" type="text"/>
                </div>
                <div @click="save_user_info()" class="user_btn">
                  <span>保存</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 密码模块 -->
          <div class="userInfo">
            <div class="row item-center user_head" >密码设置</div>
            <div class="userInfoBox" >
              <div class="password_style">
                <div class="row itme-center">
                  <div class="title_text">
                    <span>原密码</span>
                  </div>
                  <!-- @blur=" " -->
                  <div>
                    <input class="text_input"  v-model="originalPwd"   type="password" />
                    <span v-if="errorPwdState == 1" style="margin-left:10px;color:#f60">原密码不能未空</span>
                  </div>
                </div>

                <div class="row">
                  <div class="title_text">
                    <span>新密码</span>
                  </div>
                  <div>
                    <input  class="text_input" v-model="password" type="password" />
                  </div>
                </div>

                <div class="row  allAlignment">
                  <div class="row">
                    <div class="title_text">
                      <span>确认密码</span>
                    </div>
                    <div>
                      <input class="text_input" v-model="confirmPwd" type="password" />
                      <span v-if="errorPwdState ==2" style="margin-left: 10px;color:#f60">两次输入的新密码不相等,请重新输入</span>
                    </div>
                    <!-- <span v-if="errorTo.affirmPasswordInfoB" style="color:#f60">请先输入密码再确认</span> -->
                  </div>
                   <div @click="change_password()" class="row center" style="width:80px;height: 40px;background:rgba(83,153,245,1);color: #fff;border-radius:5px;">
                    <span>修改</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import "@/css/index.css";
import leftNav from "@/components/leftNav";
import hader from "@/components/hader";
import messageCenter from "@/components/messageCenter";
export default {
  name: "PersonalInformation",
  data() {
    return {
      account: "", //账号
      password: "", //密码
      confirmPwd: "", //确认密码
      originalPwd: "", //原密码
      user_info:'', //客服基本信息
      errorPwdState:100,//密码错误状态
      time: "",
      token: ""
    };
  },
  methods: {
    
    /******************修改密码******************/
    updatepwdAjax() {
      let obj = {
        headers: {
          apiToken: this.$md5("updatepwd" + "customer-service" + "services" + this.time[0] + "service"),
          userToken: this.token
        }
      };
      this.post("api"+ this.$ports.userInfo.updatepwd, {
        token:this.token,
        password:this.originalPwd,
        new_password:this.password,
      },obj).then(res => {
        if(res.data.code == 1){
          this.$notify({
            title: '成功',
            message: '密码修改成功',
            type: 'success'
          });
          this.$router.push('/login')
        }else{
          this.$notify.error({
            title: '错误',
            message: res.data.msg,
            type:'error'
          });
        }
      });
    },

    /********************修改用户信息*********************/
    userInfoAjax(){
      let obj = {
        headers: {
          apiToken: this.$md5("updateinfo" + "customer-service" + "services" + this.time[0] + "service"),
          userToken: this.token
        }
      };
      this.post("api"+ this.$ports.userInfo.updateinfo, {
        token:this.token,
        user_name:this.user_info.user_name,
        user_email:this.user_info.user_email,
        phone:this.user_info.phone,
        fullname:this.user_info.fullname,
        signature:this.user_info.signature,
      },obj).then(res => {
        this.$notify({
          title: '成功',
          message: '个人信息修改成功',
          type: 'success'
        });

        //console.log(res)
      });
    },

    /********************保存个人信息********************/
    save_user_info() {
      this.userInfoAjax();
    },

    // // 
    /***********************更改密码*************************/
    change_password() {     
      if(this.originalPwd.length == 0){
        this.errorPwdState = 1;
        return
      }
      if(this.confirmPwd != this.password){
        this.errorPwdState = 2;
        return
      }
      this.updatepwdAjax();
    }
  },
  mounted() {
    this.user_info = this.$store.getters.get_user_info;
    console.log(this.user_info);
    this.token = this.user_info.token;
    this.time = sessionStorage.getItem("time");
  },
  components: {
    leftNav,
    hader,
    messageCenter
  }
};
</script>
<style scoped>
.user_box {
  padding: 20px;
  /* height: 67%; */
  overflow-x: hidden;
  overflow-y: auto;
  background: #f6f8ff;
}
.headPortrait {
  border: 1px solid #d5e5ff;
}
.btn {
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}
.userInfo {
  border: 1px solid #d5e5ff;
  margin-top: 20px;
  
}
.userInfoBox{
  height:260px;
  background:#fff;
  padding:20px;
  font-size:14px;
}

.userInfoBox div div div{
  height: 55px;
  color: #666;
  display: flex;
  align-items: center;
}
input {
  border: 1px solid #ddd;
  color: #999;
  padding-left: 17px;
}
input:focus {
  outline: none;
}
.user_btn{
  width:80px;
  text-align: center;
  line-height: 40px;
  background:rgba(83,153,245,1);
  color: #fff;
  border-radius:5px;
}
.text_input{
  width:200px;
  height:40px;
}
.text_box{
  height: 55px;
  color: #666;
  display: flex;
  align-items: center;
}
.title_text{
  width:84px;
}
.user_head{
  height:50px;
  padding:0 20px;
  font-size:14px;
  color:#666;
  border-bottom:1px solid #D5E5FF;
}
.password_style div{
  line-height: 55px;
  color: #666;
}
</style>