expressweb/src/components/personPage/user/AddInfo.vue

<template>
  <div class="addInformation">
    <person-title>当前位置 :: 个人中心 >> <em>完善个人信息</em></person-title>
    <div class="add-infor-cont">
      <el-form :model="personForm"
               :rules="rules" ref="personForm"
               label-position='left'
               @submit.native.prevent
               :status-icon='true'
               label-width="7rem" class="demo-ruleForm">
        <el-form-item label="用户名 : " prop="userName">
          <el-input
            placeholder="请输入用户名！"
            v-model.trim="personForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="性别 : " prop="gender">
          <el-radio-group v-model.number="personForm.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱 : " prop="personEmail">
          <el-input
            placeholder="请输入邮箱！"
            v-model="personForm.personEmail"></el-input>
        </el-form-item>
        <el-form-item label="生日 : " prop="birthday">
          <el-input
            placeholder="输入您的生日 格式为 2000-01-01"
            v-model="personForm.birthday"></el-input>
        </el-form-item>
        <el-form-item class="completed-info-btn">
          <el-button type="primary"
                     @click="submitForm()">修改
          </el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {personInfoEdit} from '../../../api/personInfoAdd'
import axios from 'axios'

export default {
  data () {
    let regexpPhoneNumber = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入邮箱!'))
      }
      // else if (!/^1[3-8][0-9]{9}$/.test(value)) {
      else if (!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(value)) {
        callback(new Error('邮箱格式不正确!'))
      } else {
        callback()
      }
    }
    let regexBirthday = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入生日!'))
      } else if (!/^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/.test(value)) {
        callback(new Error('生日格式不正确!'))
      } else {
        callback()
      }
    }
    return {
      personForm: {
        userName: '',
        personEmail: '',
        gender: 1,
        birthday: ''
      },
      rules: {
        userName: [
          {required: true, message: '请输入名字', trigger: 'blur'},
          {min: 2, max: 6, message: '长度在 3 到 6 个字符', trigger: 'change'},
          {min: 2, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur'},
          {pattern: /\D/, message: '不能为纯数字', trigger: 'change'},
          {pattern: /\D/, message: '不能为纯数字', trigger: 'blur'}
        ],
        personEmail: [
          {required: true, message: '请输入您的电子邮件'},
          {validator: regexpPhoneNumber, trigger: 'change'},
          {validator: regexpPhoneNumber, trigger: 'blur'}
        ],
        gender: [
          {required: true, type: 'number', message: '请选择性别', trigger: 'change'}
        ],
        birthday: [
          {required: true, message: '请输入生日 格式为 2000-01-01', trigger: 'blur'}
        ]
      }
    }
  },
  mounted () {
    // this.personForm.phoneNum = this.$store.state.user.userInfo.userId
  },
  methods: {
    submitForm () {
      this.$refs.personForm.validate((valid) => {
        if (valid) {

          let tip = this.personForm
          let addInfo = {
            username: this.personForm.userName,
            email: this.personForm.personEmail,
            sex: this.personForm.gender,
            birthday: this.personForm.birthday
          }
          console.log(tip)
          if (tip) {
            console.log('0000000')
            personInfoEdit(addInfo).then((res) => {
              console.log(res)
              console.log('11111')
              var data = res.data
              if (data.success) {
                this.$notify({
                  title: '提交成功',
                  duration: 2000,
                  type: 'success'
                })
                sessionStorage.clear()
                // this.$router.push({path: '/login'})
              } else {
                this.$notify({
                  title: '提交失败',
                  message: data.msg,
                  duration: 2000,
                  type: 'error'
                })
              }
            })
          } else {
            this.$message({
              message: tip,
              type: 'error'
            })
          }
        }
      })
    },
    resetForm () {
      this.$refs.personForm.resetFields()
    }
  }
}
</script>

<style lang='scss'>
.add-infor-cont {
  padding-left: 5rem;
  padding-top: 2rem;
  width: 40%;
  min-width: 20rem;

  .el-form-item {
    margin-bottom: 1.5rem;
  }
}

.completed-info-btn {
  margin: 2rem;
}

@media only screen and (max-width: 768px) {
  .add-infor-cont {
    width: 70%;
  }
}
</style>