BJ_web_developers / HSpark

Blame view

src/views/settings/index.vue 3.8 KB
Edit Raw Normal View History
613d2a9c   Andy   add icon 
1
 
  <template>
ec35bad6   Andy   add 账户设置 前端页面 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
    <div>
      <div class="search-wrap">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
          <el-form-item label="手机号" class="margin-bottom30" prop="tell">
            <el-input v-model="ruleForm.tell" style="width: 300px"></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="email">
            <el-input v-model="ruleForm.email" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="密码" class="margin-bottom30" prop="pwd">
            <el-input type="password" v-model="ruleForm.pwd" autocomplete="off" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="车牌号" class="margin-bottom30" prop="carnum">
            <el-input v-model="ruleForm.carnum" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="用户级别" class="margin-bottom30" prop="level">
            <el-input v-model="ruleForm.level" style="width: 300px" disabled></el-input>
          </el-form-item>
          <el-form-item label="注册时间" class="margin-bottom30" prop="starttime">
            <el-input v-model="ruleForm.starttime" style="width: 300px" disabled></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
613d2a9c   Andy   add icon 
32
33
 
    </div>
  </template>
613d2a9c   Andy   add icon 
34
35
 
  <script>
    export default {
613d2a9c   Andy   add icon 
36
37
 
      data() {
        return {
ec35bad6   Andy   add 账户设置 前端页面 
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
          ruleForm: {
            tell: '15143323434',
            username: '万八',
            email: '15143323434@163.com',
            pwd: '232342',
            carnum: '京A32345',
            starttime: '2019-08-17',
            level: '普通'
          },
          rules: {
            tell: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            username: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            email: [
c0534536   Andy   add 个人资料 前端页面 
57
58
 
              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
ec35bad6   Andy   add 账户设置 前端页面 
59
60
61
62
63
64
65
66
67
68
 
            ],
            pwd: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            carnum: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
613d2a9c   Andy   add icon 
69
70
71
 
          }
        }
      },
613d2a9c   Andy   add icon 
72
 
      methods: {
ec35bad6   Andy   add 账户设置 前端页面 
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
        onSubmit() {
          console.log('submit!');
        },
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              alert('submit!');
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
613d2a9c   Andy   add icon 
88
89
90
91
92
 
        }
      }
    }
  </script>
ec35bad6   Andy   add 账户设置 前端页面 
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
  <style lang="scss">
    .search-wrap{
      background-color: #FFF;
      padding: 15px;
    }
    .card-second-top{
      margin-top: 15px;
    }
    .el-card__header{
      padding: 10px 20px;
    }
    .el-radio{
      margin-right: 80px;
    }
    .el-radio.is-bordered+.el-radio.is-bordered{
      margin-left: 0px;
      margin-top: 15px;
    }
    .margin-bottom30{
      margin-bottom: 30px;
    }
  </style>