BJ_web_developers / HSpark

Commit ec35bad6790d879225a5ff37b2c2148e388b463d

Authored by Andy
1 parent 4743da39

add 账户设置 前端页面

Inline Side-by-side
Showing 2 changed files with 199 additions and 122 deletions
src/views/mycar/index.vue
  View file @ec35bad
1 1 <template>
2   - <div class="app-container">
3   - <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
  2 + <div>
4 3  
5   - <el-tree
6   - ref="tree2"
7   - :data="data2"
8   - :props="defaultProps"
9   - :filter-node-method="filterNode"
10   - class="filter-tree"
11   - default-expand-all
12   - />
  4 + <div class="search-wrap">
  5 + <el-row :gutter="20">
  6 + <el-form ref="form" :model="form" label-width="60px" label-position="left">
  7 + <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">
  8 + <el-form-item label="我的账户">
  9 + <el-input v-model="form.email" maxlength="20" readonly />
  10 + </el-form-item>
  11 + </el-col>
  12 + </el-form>
  13 + </el-row>
  14 + </div>
13 15  
  16 + <el-card shadow="always" class="card-second-top">
  17 + <div slot="header" class="clearfix" style="line-height: 32px;">
  18 + <span>我的车牌</span>
  19 + <el-button type="primary" size="small" style="float: right" @click="dialogFormVisible = true">绑定车牌</el-button>
  20 + </div>
  21 + <el-form label-width="60px" style="margin-bottom: 55px;" label-position="left">
  22 + <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">
  23 + <el-form-item label="">
  24 + <el-select v-model="value" >
  25 + <el-option
  26 + v-for="item in region"
  27 + :key="item.value"
  28 + :label="item.label"
  29 + :value="item.value"
  30 + >
  31 + </el-option>
  32 + </el-select>
  33 + </el-form-item>
  34 + </el-col>
  35 + <el-col :xs="8" :sm="6" :md="3" :lg="3" :xl="1">
  36 + <el-button type="primary" @click="onSubmit">解绑</el-button>
  37 + </el-col>
  38 + </el-form>
  39 + </el-card>
  40 +
  41 + <el-dialog title="绑定车牌" :visible.sync="dialogFormVisible">
  42 + <el-form :model="problemform" label-width="60px" label-position="left">
  43 + <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">
  44 + <el-form-item label="车牌">
  45 + <el-input v-model="problemform.carnum" maxlength="20" />
  46 + </el-form-item>
  47 + </el-col>
  48 + </el-form>
  49 + <div slot="footer" class="dialog-footer">
  50 + <el-button @click="dialogFormVisible = false">取 消</el-button>
  51 + <el-button type="primary" @click="dialogFormVisible = false">绑定</el-button>
  52 + </div>
  53 + </el-dialog>
14 54 </div>
15 55 </template>
16 56  
17 57 <script>
18 58 export default {
19   -
20 59 data() {
21 60 return {
22   - filterText: '',
23   - data2: [{
24   - id: 1,
25   - label: 'Level one 1',
26   - children: [{
27   - id: 4,
28   - label: 'Level two 1-1',
29   - children: [{
30   - id: 9,
31   - label: 'Level three 1-1-1'
32   - }, {
33   - id: 10,
34   - label: 'Level three 1-1-2'
35   - }]
36   - }]
37   - }, {
38   - id: 2,
39   - label: 'Level one 2',
40   - children: [{
41   - id: 5,
42   - label: 'Level two 2-1'
43   - }, {
44   - id: 6,
45   - label: 'Level two 2-2'
46   - }]
47   - }, {
48   - id: 3,
49   - label: 'Level one 3',
50   - children: [{
51   - id: 7,
52   - label: 'Level two 3-1'
53   - }, {
54   - id: 8,
55   - label: 'Level two 3-2'
56   - }]
57   - }],
58   - defaultProps: {
59   - children: 'children',
60   - label: 'label'
  61 + form: {
  62 + email: '13133415312',
  63 + },
  64 + value:'京A32323',
  65 + region: [
  66 + {
  67 + value: '京A32323',
  68 + label: '京A32323',
  69 + },{
  70 + value: '京A93323',
  71 + label: '京A93323',
  72 + },
  73 + ],
  74 + dialogFormVisible:false,
  75 + problemform:{
  76 + carnum:'',
61 77 }
62 78 }
63 79 },
64   - watch: {
65   - filterText(val) {
66   - this.$refs.tree2.filter(val)
67   - }
68   - },
69   -
70 80 methods: {
71   - filterNode(value, data) {
72   - if (!value) return true
73   - return data.label.indexOf(value) !== -1
74   - }
  81 + onSubmit() {
  82 + this.$message({
  83 + message: '解绑成功!',
  84 + type: 'success'
  85 + });
  86 + },
  87 + problemonSubmit() {
  88 + this.$message('提交成功!')
  89 + },
  90 + onCancel() {
  91 + this.$message({
  92 + message: 'cancel!',
  93 + type: 'warning'
  94 + })
  95 + },
75 96 }
76 97 }
77 98 </script>
78 99  
  100 +<style lang="scss">
  101 + .search-wrap{
  102 + background-color: #FFF;
  103 + padding: 15px;
  104 + }
  105 + .card-second-top{
  106 + margin-top: 15px;
  107 + }
  108 + .el-card__header{
  109 + padding: 10px 20px;
  110 + }
  111 + .el-radio{
  112 + margin-right: 80px;
  113 + }
  114 + .el-radio.is-bordered+.el-radio.is-bordered{
  115 + margin-left: 0px;
  116 + margin-top: 15px;
  117 + }
  118 +</style>
  119 +
... ...
src/views/settings/index.vue
  View file @ec35bad
1 1 <template>
2   - <div class="app-container">
3   - <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
4   -
5   - <el-tree
6   - ref="tree2"
7   - :data="data2"
8   - :props="defaultProps"
9   - :filter-node-method="filterNode"
10   - class="filter-tree"
11   - default-expand-all
12   - />
13   -
  2 + <div>
  3 + <div class="search-wrap">
  4 + <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
  5 + <el-form-item label="手机号" class="margin-bottom30" prop="tell">
  6 + <el-input v-model="ruleForm.tell" style="width: 300px"></el-input>
  7 + </el-form-item>
  8 + <el-form-item label="账户" class="margin-bottom30" prop="username">
  9 + <el-input v-model="ruleForm.username" style="width: 300px"></el-input>
  10 + </el-form-item>
  11 + <el-form-item label="邮箱" class="margin-bottom30" prop="email">
  12 + <el-input v-model="ruleForm.email" style="width: 300px"></el-input>
  13 + </el-form-item>
  14 + <el-form-item label="密码" class="margin-bottom30" prop="pwd">
  15 + <el-input type="password" v-model="ruleForm.pwd" autocomplete="off" style="width: 300px"></el-input>
  16 + </el-form-item>
  17 + <el-form-item label="车牌号" class="margin-bottom30" prop="carnum">
  18 + <el-input v-model="ruleForm.carnum" style="width: 300px"></el-input>
  19 + </el-form-item>
  20 + <el-form-item label="用户级别" class="margin-bottom30" prop="level">
  21 + <el-input v-model="ruleForm.level" style="width: 300px" disabled></el-input>
  22 + </el-form-item>
  23 + <el-form-item label="注册时间" class="margin-bottom30" prop="starttime">
  24 + <el-input v-model="ruleForm.starttime" style="width: 300px" disabled></el-input>
  25 + </el-form-item>
  26 + <el-form-item>
  27 + <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
  28 + <el-button @click="resetForm('ruleForm')">取消</el-button>
  29 + </el-form-item>
  30 + </el-form>
  31 + </div>
14 32 </div>
15 33 </template>
16   -
17 34 <script>
18 35 export default {
19   -
20 36 data() {
21 37 return {
22   - filterText: '',
23   - data2: [{
24   - id: 1,
25   - label: 'Level one 1',
26   - children: [{
27   - id: 4,
28   - label: 'Level two 1-1',
29   - children: [{
30   - id: 9,
31   - label: 'Level three 1-1-1'
32   - }, {
33   - id: 10,
34   - label: 'Level three 1-1-2'
35   - }]
36   - }]
37   - }, {
38   - id: 2,
39   - label: 'Level one 2',
40   - children: [{
41   - id: 5,
42   - label: 'Level two 2-1'
43   - }, {
44   - id: 6,
45   - label: 'Level two 2-2'
46   - }]
47   - }, {
48   - id: 3,
49   - label: 'Level one 3',
50   - children: [{
51   - id: 7,
52   - label: 'Level two 3-1'
53   - }, {
54   - id: 8,
55   - label: 'Level two 3-2'
56   - }]
57   - }],
58   - defaultProps: {
59   - children: 'children',
60   - label: 'label'
  38 + ruleForm: {
  39 + tell: '15143323434',
  40 + username: '万八',
  41 + email: '15143323434@163.com',
  42 + pwd: '232342',
  43 + carnum: '京A32345',
  44 + starttime: '2019-08-17',
  45 + level: '普通'
  46 + },
  47 + rules: {
  48 + tell: [
  49 + { required: true, message: '请输入活动名称', trigger: 'blur' },
  50 + { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  51 + ],
  52 + username: [
  53 + { required: true, message: '请输入活动名称', trigger: 'blur' },
  54 + { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  55 + ],
  56 + email: [
  57 + { required: true, message: '请输入活动名称', trigger: 'blur' },
  58 + { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  59 + ],
  60 + pwd: [
  61 + { required: true, message: '请输入活动名称', trigger: 'blur' },
  62 + { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  63 + ],
  64 + carnum: [
  65 + { required: true, message: '请输入活动名称', trigger: 'blur' },
  66 + { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
  67 + ],
  68 +
61 69 }
62 70 }
63 71 },
64   - watch: {
65   - filterText(val) {
66   - this.$refs.tree2.filter(val)
67   - }
68   - },
69   -
70 72 methods: {
71   - filterNode(value, data) {
72   - if (!value) return true
73   - return data.label.indexOf(value) !== -1
  73 + onSubmit() {
  74 + console.log('submit!');
  75 + },
  76 + submitForm(formName) {
  77 + this.$refs[formName].validate((valid) => {
  78 + if (valid) {
  79 + alert('submit!');
  80 + } else {
  81 + console.log('error submit!!');
  82 + return false;
  83 + }
  84 + });
  85 + },
  86 + resetForm(formName) {
  87 + this.$refs[formName].resetFields();
74 88 }
75 89 }
76 90 }
77 91 </script>
78 92  
  93 +<style lang="scss">
  94 + .search-wrap{
  95 + background-color: #FFF;
  96 + padding: 15px;
  97 + }
  98 + .card-second-top{
  99 + margin-top: 15px;
  100 + }
  101 + .el-card__header{
  102 + padding: 10px 20px;
  103 + }
  104 + .el-radio{
  105 + margin-right: 80px;
  106 + }
  107 + .el-radio.is-bordered+.el-radio.is-bordered{
  108 + margin-left: 0px;
  109 + margin-top: 15px;
  110 + }
  111 + .margin-bottom30{
  112 + margin-bottom: 30px;
  113 + }
  114 +</style>
... ...