个人设置页面的组件

一 预览

二前端代码

profile.vue

<template>
  <div class="proflie">
      <div style="font-size:25px">Profile</div>
      <search style="width:100%;margin-bottom:20px"></search>
      <el-card class="personInf">
            <img :src="userInf.userpic?this.$baseImg+userInf.userpic:img" alt="">
            <div>
              <span class="personName">{{userInf.username}}</span>
            </div>
      </el-card>
      <el-card class="personInfdetail" style="height:300px">
          <div class="personInfdetailFa">
               <div class="detailLeft">
                    <span style="color: #C0C5CA;font-size:13px" >
                       学校
                    </span>
                    <span class="countyr">{{userInf.scholl}}</span>
               </div>
               <span class="icon iconfont icon-dc-icon-guojiagongchengyanjiuzhongxin"></span>
          </div>
          <div class="personInfdetailFa">
               <div class="detailLeft">
                    <span style="color: #C0C5CA;font-size:13px" >
                       个性签名
                    </span>
                    <span class="countyr">{{userInf.introduce}}</span>
               </div>
               <span class="icon iconfont icon-dc-icon-guojiagongchengyanjiuzhongxin"></span>
          </div>
          <div class="personInfdetailFa">
               <div class="detailLeft">
                    <span style="color: #C0C5CA;font-size:13px" >
                       邮箱
                    </span>
                    <span class="countyr">{{userInf.email}}</span>
               </div>
               <span class="icon iconfont icon-dc-icon-guojiagongchengyanjiuzhongxin"></span>
          </div>
          <div class="personInfdetailFa">
               <div class="detailLeft">
                    <span style="color: #C0C5CA;font-size:13px" >
                       身份
                    </span>
                    <span class="countyr">{{userInf.role}}</span>
               </div>
               <span class="icon iconfont icon-dc-icon-guojiagongchengyanjiuzhongxin"></span>
          </div>
      </el-card>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
     components:{
       search:(resolve)=>require(['../common/search'],resolve)
     },
     computed: {
        ...mapState({
            userInf:state=>state.user.userInfo
        })
    },
    methods:{
       
    },
    data(){
      return{
        img:"http://localhost:8015/img/12.jpg",
      }
    }
     
}
</script>

<style lang="less" scoped>
      .proflie{
         width: 45%;
         margin-left: 5%;
         height: 100%;
         background-color: #F5F6FA;
         padding: 10px;
         box-sizing: border-box;
       }
       .personInf{
          height: 200px;
          /deep/.el-card__body{
          display: flex;
          height: 100%;
          flex-direction: column;
          align-items: center;
          text-align: center;
          img{
             width: 55px;
             height: 55px;
             margin-top: 15%;
             border-radius: 50%;
          }
          div{
            span{
              display: block;
              margin: 10px 0;
            }
            .personDesc{
              color: #C7CBD0;
            }
          }
        }
       }
       .personInfdetail{
         height: 48%;
         margin-top:2% ;
        
         .personInfdetailFa{
           height: 50px;
           display: flex;
           margin: 20px 0;
           justify-content: space-between;
           .detailLeft{
             display: flex;
             flex-direction: column;
            
           }
           span{
             color:#AAABB3;
           }
         }
       }
</style>

settingForm.vue

<template>
  <div class="groupInfForm">
    <div class="groupInfFormFa">
      <div class="formItem1">
        <div class="title">avatar</div>
        <el-upload
          class="upload-demo"
          drag
          action="http://localhost:8090/day/chat/modifyGroup"
          :auto-upload="false"
          :http-request="uploadFile"
          ref="upload"
          :before-upload="beforeAvatarUpload"
          :multiple="false"
          list-type="picture"
        >
          <i class="el-icon-upload" style="color:#0176FF"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png/jpeg文件，且不超过4MB
          </div>
        </el-upload>
      </div>
      <div class="formItem2">
        <div class="title">学校</div>
        <input type="text" placeholder="请输入学校" v-model="form.scholl" />
      </div>
      <div class="formItem2">
        <div class="title">个性签名</div>
        <input
          type="text"
          placeholder="请输入个性签名"
          v-model="form.introduce"
        />
      </div>
      <div class="formItem3">
        <div class="title">邮箱</div>
        <textarea
          type="text"
          placeholder="请输入邮箱"
          v-model="form.email"
        ></textarea>
      </div>
      <div class="formItem4">
        <button class="submit" @click="upload">save</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      form: {
        scholl: "",
        introduce: "",
        email: "",
      },
      imgsArr: [],
    };
  },
  computed: {
    ...mapState({
      userInf: (state) => state.user.userInfo,
    }),
  },
  inject: ["reload"],
  methods: {
    beforeAvatarUpload(file) {
      const isLt = file.size / 1024 / 1024 < 4;
      const testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type);
      if (!isLt) {
        this.$message.error("上传头像图片大小不能超过 4MB!");
        return;
      }
      if (!testmsg) {
        this.$message.error("上传图片格式不对!");
        return;
      }
      return isLt && testmsg;
    },
    uploadFile(file) {
      this.imgsArr.push(file.file); //往一个数组中添加图片数据
    },
    upload() {
      var formdate = new FormData();
      this.$refs.upload.submit();
      if (this.imgsArr.length > 1) {
        this.$message.error("只能上传一张头像");
        return;
      }
      if (this.imgsArr.length > 0) {
        this.imgsArr.forEach((img, index) => {
          formdate.append(`file`, img); //这里用到index++,防止前面添加的图片被后面的覆盖,下面后端代码有讲如何循环这个数组
          console.log(img);
        });
      } else {
        formdate.append("file", []);
      }
      formdate.append("uid", this.userInf.uid);
      formdate.append("scholl", this.form.scholl);
      formdate.append("introduce", this.form.introduce);
      formdate.append("email", this.form.email);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };

      this.$http.post("/user/modifyUser", formdate, config).then((inf) => {
        console.log(inf.data);
        let data=inf.data;
        if(data.status==0){
            this.$message.success("保存成功");
            sessionStorage.setItem("userInfo",JSON.stringify(data.data))
            this.$router.go(0);
        }else{
            this.$messgae.error("保存失败,系统鼓掌");
        }
        //this.$router.go(0);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.groupInfForm {
  height: 85%;
  width: 100%;

  .groupInfFormFa {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
    height: 100%;
  }
  .formItem1 {
    /deep/.el-upload {
      width: 90%;
    }
    /deep/.el-upload-dragger {
      width: 100%;
      height: 100%;
      background-color: #edeef6;
    }
    /deep/.el-upload-list__item {
      width: 90%;
    }
  }
  .formItem2 {
    input {
      width: 90%;
      height: 30px;
      background-color: #edeef6;
      outline: none;
      border: none;
      box-sizing: border-box;
      padding: 3px;
      color: #b8bdc3;
    }
  }
  .formItem3 {
    textarea {
      resize: none;
      width: 90%;
      height: 60px;
      outline: none;
      border: none;
      background-color: #edeef6;
      box-sizing: border-box;
      padding: 3px;
      color: #b8bdc3;
    }
  }
  .formItem4 {
    button {
      color: white;
      outline: none;
      border: none;
      width: 90%;
      height: 30px;
      cursor: pointer;
      border-radius: 15px;
      background-color: #0176ff;
    }
    button:hover {
      opacity: 0.8;
    }
  }
  .title {
    color: #b1b2ba;
    font-size: 13px;
  }
}
textarea::-webkit-input-placeholder {
  color: #b8bdc3;
}
input::-webkit-input-placeholder {
  color: #b8bdc3;
}
</style>

myinfo.vue

<template>
    <el-card>
          <div class="setting">
          <profile></profile>
          <div class="settingLeft">
                    <span style="font-size:20px">Setting</span>
                    
                    <span style="font-size:13px;color:#BDBDC3">update you profile details</span>
                    
          </div>
          <div class="settingRight">
               <div class="settingRightTop">
                    <div class="settingRightTopLeft">
                           <span>Account</span>
                           <span style="font-size:13px;color:#BDBDC3">Update your profile details</span>
                    </div>
                   
               </div>
               <settingForm ></settingForm>
          </div>
          </div>
    </el-card>
</template>

<script>
export default {
   components:{
        settingForm:resolve=>require(['./settingForm'],resolve),
        profile:resolve=>require(["./profile"],resolve)
   },
   
}
</script>

<style lang="less" scoped>
      .setting{
           height: 100%;
           display: flex;
           margin-right: 5%;
           .settingLeft{
                width: 35%;
                display: flex;
                height: 10%;
                flex-direction: column;
                justify-content: space-around;
                
           }
           .settingRight{
                box-sizing: border-box;
                padding-top: 5%;
                width: 60%;
                .settingRightTop{
                     display: flex;
                     margin-bottom: 10%;
                     justify-content: space-between;
                     .settingRightTopLeft{
                          display: flex;
                          flex-direction: column;
                     }
                }
           }
      }
</style>