冗余，不优雅

一般超过200行代码就要考虑拆分组件

我这都500+行。。。

<template>
  <div class="personal">
    <div class="grey_bg">
      <div class="content">
        <!-- 内容 -->
        <div class="container">
          <section class="list">
            <!-- 待循环 -->
            <div class="card">
              <div class="card-main">
                <ul class="card-inner essay-card">
                  <li>
                    <section class="section">
                      <div class="section-header">
                        <h1>我的账号</h1>
                      </div>
                      <div class="section-body">
                        <h2 class="section-title">欢迎, clover_1996!</h2>
                        <p class="section-lead">{{ e_mail }}</p>
                        <div class="row mt-sm-4">
                          <div class="col-lg-6">
                            <div class="card card-large-icons">
                              <div class="card-icon bg-primary text-white">
                                <i class="fas fa-lock"></i>
                              </div>
                              <div class="card-body">
                                <h4>修改密码</h4>
                                <p>定期修改为高强度密码以保护您的账号</p>
                                <a
                                  href="javascript:;"
                                  class="card-cta"
                                  @click="alterForm.dialogFormVisible = true"
                                >
                                  立即修改
                                  <i class="fas fa-chevron-right"></i>
                                </a>
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-6">
                            <div class="card card-large-icons">
                              <div class="card-icon bg-primary text-white">
                                <i class="fas fa-shield-alt"></i>
                              </div>
                              <div class="card-body">
                                <h4>个人信息</h4>
                                <p>个性化设置资料</p>
                                <a
                                  href="##"
                                  class="card-cta"
                                  data-toggle="modal"
                                  data-target="#ga-modal"
                                  @click="dialogPersonalVisible = true"
                                >
                                  立即设置
                                  <i class="fas fa-chevron-right"></i>
                                </a>
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-6">
                            <div class="card card-large-icons">
                              <div class="card-icon bg-primary text-white">
                                <i class="fas fa-skull"></i>
                              </div>
                              <div class="card-body">
                                <h4>删除账号</h4>
                                <p>您的所有数据都会被删除，无法找回</p>
                                <a
                                  href="##"
                                  class="card-cta"
                                  data-toggle="modal"
                                  data-target="#kill-modal"
                                  @click="removePass"
                                >
                                  申请删除
                                  <i class="fas fa-chevron-right"></i>
                                </a>
                              </div>
                            </div>
                          </div>
                          <div class="col-12">
                            <div class="card">
                              <div class="card-header">
                                <h4>最近使用服务</h4>
                              </div>
                              <div class="card-body">
                                <div id="main" style="width: 600px;height:400px"></div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </section>
                  </li>
                </ul>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <!-- 表单 修改密码 -->
    <el-dialog
      top="2%"
      width="35%"
      :close-on-click-modal="false"
      title="修改账号密码"
      custom-class="alertPwd"
      :visible.sync="alterForm.dialogFormVisible"
    >
      <el-form v-model="alterForm.form">
        <el-form-item id="labels" label="原密码">
          <el-input v-model="alterForm.originPass" autocomplete="off" clearable></el-input>
        </el-form-item>

        <el-form-item id="labels" label="新密码">
          <el-input v-model="alterForm.newPass" show-password clearable></el-input>
        </el-form-item>

        <el-form-item id="labels" label="再次输入新密码">
          <el-input v-model="alterForm.againPass" show-password clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="alterPass">确 定</el-button>
        <el-button @click="alterForm.dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 表单 个人信息 -->
    <el-dialog top="2%" width="50%" title="个人信息" :visible.sync="dialogPersonalVisible">
      <el-form :model="ruleForm" ref="ruleForm" :label-position="labelPosition" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item
              prop="nickname"
              :rules="{ required: true, message: '昵称不能为空' }"
              id="labels"
              label="昵称"
            >
              <el-input type="nickname" v-model="ruleForm.nickname" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item id="labels" label="性别">
          <el-radio v-model="ruleForm.sex" label="男" border size="small">男</el-radio>
          <el-radio v-model="ruleForm.sex" label="女" border size="small">女</el-radio>
        </el-form-item>
        <el-form-item label="生日">
          <el-col :span="12">
            <el-form-item prop="birthday">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.birthday"
                style="width: 85%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item id="labels" label="职业">
              <el-input v-model.trim="ruleForm.job" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item id="labels" label="家乡">
              <el-cascader
                :options="area.options"
                v-model="area.hometown"
                @change="handleChange"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="头像">
              <el-upload
                action="#"
                list-type="picture-card"
                :limit="1"
                show-file-list
                :before-upload="beforeupload"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-image width="80%" class="showPic" :src="ruleForm.url" alt>
                <div slot="error" class="image-slot">
                  <i style="fontSize:28px" class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="个性签名" id="labels" prop="desc">
          <el-input type="textarea" style="width: 91.5%" v-model="ruleForm.desc"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="setPersonal">提 交</el-button>
        <el-button @click="dialogPersonalVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { JSEncrypt } from 'jsencrypt'
import '../../../assets/css/personal.css'
import { regionData, CodeToText } from 'element-china-area-data'

export default {
  name: 'personal',
  data() {
    return {
      //修改密码表单
      alterForm: {
        dialogFormVisible: false,
        originPass: '',
        newPass: '',
        againPass: '',
        form: ''
      },
      //个人信息表单
      ruleForm: {
        username: '',
        nickname: '',
        sex: '',
        hometown: [],
        job: '',
        birthday: '',
        desc: '',
        url: ''
      },
      area: {
        options: regionData
      },
      param: new FormData(),
      labelPosition: 'right',
      dialogPersonalVisible: false
    }
  },
  methods: {
    //地区处理
    handleChange(value) {
      this.ruleForm.hometown = value
    },
    //修改密码
    alterPass() {
      let { originPass, againPass, newPass } = this.alterForm
      if (originPass == '' || againPass == '' || newPass == '') {
        swal({
          title: '有未输入内容!',
          text: '请重新输入',
          icon: 'warning',
          button: 'OK'
        })
      } else if (originPass == newPass && originPass != '') {
        swal({
          title: '修改密码失败!',
          text: '原密码与新密码相同',
          icon: 'warning',
          button: 'OK'
        })
      } else if (newPass == againPass && newPass != '') {
        this.$axios.get('/api/getPublicKey').then(res => {
          //先获取公钥
          if (res.data.status === 0) {
            let encryptor = new JSEncrypt() //实例化
            encryptor.setPublicKey(res.data.resultmap) //设置公钥

            let PwdData = {
              e_mail: this.e_mail,
              originPass: encryptor.encrypt(originPass),
              againPass: encryptor.encrypt(againPass)
            }
            this.$axios.post('/api/userPassAlter', PwdData).then(res => {
              if (res.data.status == '0') {
                swal({
                  title: '修改密码成功!',
                  text: '请重新登录',
                  icon: 'success',
                  button: 'OK'
                })
                  .then(() => {
                    delete localStorage.token
                    this.$router.go(0)
                  })
                  .then(() => {
                    this.$store.commit('settingList', {
                      username: this.ruleForm.username,
                      mode: 'alterPass',
                      data: 1
                    })

                    this.$axios.post('/api/optionStatistical', this.statistical)
                  })
              } else if (res.data.status === '1') {
                swal({
                  title: '修改密码失败!',
                  text: '原密码错误',
                  icon: 'error',
                  button: 'OK'
                })
              } else if (res.date.status == '2') {
                swal({
                  title: '修改密码失败!',
                  text: '网络好像有点问题～',
                  icon: 'warn',
                  button: 'OK'
                })
              }
            })
          } else {
            //网络问题
          }
        })
      } else if (newPass != againPass) {
        swal({
          title: '修改密码失败!',
          text: '两次输入不符合',
          icon: 'error',
          button: 'OK'
        })
      }
    },
    //设置个人资料
    setPersonal() {
      if (this.ruleForm.hometown.length === 0) {
        this.ruleForm.hometown = this.area.hometown
      }
      this.param.append('message', JSON.stringify(this.ruleForm))
      this.$axios.post('/api/userInfoAdd', this.param).then(res => {
        if (res.data == '0') {
          swal({
            title: '设置成功!',
            icon: 'success',
            button: 'Aww yiss!'
          }).then(() => {
            this.$router.go(0)
          })
        } else if (res.data == '1') {
          swal({
            title: '更新成功!',
            icon: 'success',
            button: 'Aww yiss!'
          })
            .then(() => {
              this.$router.go(0)
            })
            .then(() => {
              this.$store.commit('settingList', {
                username: this.ruleForm.username,
                mode: 'updateData',
                data: 1
              })

              this.$axios.post('/api/optionStatistical', this.statistical)
            })
        } else {
          swal({
            title: '设置失败!',
            text: '网络好像有点问题',
            icon: 'error',
            button: 'yiss Aww!'
          })
        }
      })
    },
    //获取个人资料显示在表单
    getPersonal() {
      let getPersonalData = this.$axios
        .get('/api/userInfoData', {
          params: {
            username: this.ruleForm.username
          }
        })
        .then(res => {
          this.ruleForm.url = res.data.uploadUrl
          this.area.hometown = res.data.hometown
          delete res.data._id
          delete res.data.uploadUrl
          Object.assign(this.ruleForm, { ...res.data })
        })
    },
    //删除账号
    removePass() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let removeData = {
            params: {
              username: this.username,
              e_mail: this.e_mail
            }
          }
          this.$axios.get('/api/userRemove', removeData).then(res => {
            if (res.data.status == '0') {
              swal({
                title: '删除成功!',
                icon: 'success',
                button: 'Aww yiss!'
              }).then(() => {
                delete localStorage.token
                this.$router.go(0)
              })
            } else {
              swal({
                title: '删除失败,网络好像出了小差～',
                icon: 'error',
                button: 'yiss Aww!'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    //阻止upload的自动上传，进行再操作
    beforeupload(file) {
      //创建临时的路径来展示图片
      var windowURL = window.URL || window.webkitURL
      this.ruleForm.url = windowURL.createObjectURL(file)
      //重新写一个表单上传的方法
      this.param.append('file', file, file.name)
      return false
    },
    //覆盖默认的上传行为
    httprequest() {}
  },
  created() {},
  computed: {}
}
</script>
<style>
.el-form-item__label {
  font-weight: 800;
  color: #34395e;
  font-size: 12px;
  letter-spacing: 0.5px;

  font-family: none;
}
.el-dialog__body {
  padding: 25px;
  padding-top: 15px;
}
.el-dialog {
  border-radius: 0.3rem;
}
.el-dialog__title {
  font-size: 18px;
  margin-bottom: 0;
  line-height: 1.5;
  font-weight: 700;
  color: #6c757d;
}
.swal-button {
  padding: 7px 19px;
  border-radius: 5px;
  background-color: #3085d6;
  font-size: 1.1rem;
  font-family: none;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3);
  padding: 10px 25px;
}
.swal-footer {
  text-align: center;
}
</style>