BJ_web_developers / HSpark

Blame view

src/views/settings/index.vue 3.78 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
57
58
59
60
61
62
63
64
65
66
67
68
 
          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: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            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>