src/views/information/index.vue

<template>
  <div class="">
    <!--卡片-->
    <el-row :gutter="16" class="">
      <el-col :span="8">
        <el-card class="box-card" style="height: 364px">
          <el-form status-icon :rules="rules" ref="fileUploadForm">
            <el-upload
              class="avatar-uploader text-center"
              action="#"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form>
          <!--<el-button  class="text-center" size="small" type="primary">点击上传</el-button>-->
          <!--<div slot="tip" class="el-upload__tip"></div>-->
          <div class="common-color text-center" style="line-height: 60px;font-size: 24px">{{userPhone}}</div>
          <div class="font-size12 text-center" style="line-height: 30px">支持JPG格式且小于5MB</div>
          <div class="font-size12 text-center" style="height: 146px"></div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="box-card">
          <!-- <div slot="header" class="clearfix" style="line-height: 32px;">
             <span>个人资料</span>
           </div>-->
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
            <el-form-item label="姓名" class="margin-bottom30" prop="username">
              <el-input v-model="ruleForm.username" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item label="性别" class="margin-bottom30" prop="sex">
              <el-select v-model="ruleForm.sex" style="width: 300px">
                <el-option label="男" value="1"/>
                <el-option label="女" value="2"/>
                <el-option label="未知" value="3"/>
              </el-select>
            </el-form-item>
            <el-form-item label="生日" class="margin-bottom30" prop="birthday">
              <el-date-picker
                v-model="ruleForm.birthday"
                type="date"
                placeholder="选择日期" style="width: 300px">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="位置" class="margin-bottom30" prop="address">
              <el-input type="text" v-model="ruleForm.address" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {uploadUserPic,updatePersonByCustId} from '@/api/user.js';
  export default {
    data() {
      return {
        imageUrl: '',
        ruleForm: {
          username: '',
          num: '',
          sex: '',
          birthday: '',
          address: '',
          custId: '',
        },
        userPhone:'',
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 1, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          birthday: [
            {required: true, message: '请输入日期', trigger: 'blur'}
          ],
          address: [
            {required: true, message: '请输入地址信息', trigger: 'blur'},
            {min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur'}
          ],
        }
      };
    },
    methods: {
      handleRemove(res, file) {
        console.log(res, file);
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        debugger
      },
      beforeAvatarUpload(file) {
       let that = this;
        const isJPG = file.type === 'image/jpeg';
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt5M) {
          this.$message.error('上传头像图片大小不能超过 5MB!');
        }
        let userInfo = this.$store.state.user.userInfo;
        let fd = new FormData();
        fd.append('custId', userInfo.custId)
        fd.append('file', file)
        uploadUserPic(fd).then(response => {
           if(response.code ='8888'){
             that.imageUrl=response.data;
           }
        });
        return isJPG && isLt5M;
      },
      submitForm: function (formName) {
        let username = this.ruleForm.username;
        let sex = this.ruleForm.sex;
        let birthday = this.ruleForm.birthday
        let address = this.ruleForm.address;
        let custId = this.ruleForm.custId;
        this.$refs[formName].validate((valid) => {
          if (valid) {
              let req ={
                custName:username,
                sex:sex,
                birthDate:birthday,
                address:address,
                custId:custId
              };
            updatePersonByCustId(req).then(response =>{
               if(response.code ='8888'){
                 debugger
                 let userInfo = this.$store.state.user.userInfo;
                 userInfo.custName=username;
                 userInfo.sex=sex;
                 userInfo.birthDate=birthday;
                 userInfo.address=address;
                 this.$message({
                   type: 'success',
                   message: '更新用户信息成功！'
                 });
               }
            });
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      queryUserInfo: function () {
        let userInfo = this.$store.state.user.userInfo;
          this.userPhone=userInfo.userPhone;
        this.ruleForm = {
          username: userInfo.custName,
          //num: '',
          sex: userInfo.sex + "",
          birthday: userInfo.birthDate,
          address: userInfo.address,
          custId: userInfo.custId
        }
      }
    },
    mounted: function () {
      this.queryUserInfo();
    }
  }
</script>
<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .margin-bottom30 {
    margin-bottom: 30px;
  }
</style>