BJ_web_developers / HSpark

  <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>

            <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="24">

          <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" style="width:450px;margin:0 auto;" :label-position="right">

              <el-form-item label="手机号" class="margin-bottom30" >
                <el-input  style="width: 300px" v-model="userPhone" :disabled="true" ></el-input>
              </el-form-item>

              <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);

        },
        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'){

                   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>