Commit ec35bad6790d879225a5ff37b2c2148e388b463d
1 parent
4743da39
add 账户设置 前端页面
Showing
2 changed files
with
199 additions
and
122 deletions
src/views/mycar/index.vue
| 1 | <template> | 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 | </div> | 54 | </div> |
| 15 | </template> | 55 | </template> |
| 16 | 56 | ||
| 17 | <script> | 57 | <script> |
| 18 | export default { | 58 | export default { |
| 19 | - | ||
| 20 | data() { | 59 | data() { |
| 21 | return { | 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 | methods: { | 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 | </script> | 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
| 1 | <template> | 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 | </div> | 32 | </div> |
| 15 | </template> | 33 | </template> |
| 16 | - | ||
| 17 | <script> | 34 | <script> |
| 18 | export default { | 35 | export default { |
| 19 | - | ||
| 20 | data() { | 36 | data() { |
| 21 | return { | 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 | methods: { | 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 | </script> | 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> |