From ec35bad6790d879225a5ff37b2c2148e388b463d Mon Sep 17 00:00:00 2001
From: chenbiao <chenbiao@zte-its.com>
Date: Sat, 29 Jun 2019 17:06:55 +0800
Subject: [PATCH] add 账户设置 前端页面

---
 src/views/mycar/index.vue    | 161 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------
 src/views/settings/index.vue | 160 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------
 2 files changed, 199 insertions(+), 122 deletions(-)

diff --git a/src/views/mycar/index.vue b/src/views/mycar/index.vue
index 980ccec..5648780 100644
--- a/src/views/mycar/index.vue
+++ b/src/views/mycar/index.vue
@@ -1,78 +1,119 @@
 <template>
-  <div class="app-container">
-    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
+  <div>
 
-    <el-tree
-      ref="tree2"
-      :data="data2"
-      :props="defaultProps"
-      :filter-node-method="filterNode"
-      class="filter-tree"
-      default-expand-all
-    />
+    <div class="search-wrap">
+      <el-row :gutter="20">
+        <el-form ref="form" :model="form" label-width="60px" label-position="left">
+          <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">
+            <el-form-item label="我的账户">
+              <el-input v-model="form.email" maxlength="20" readonly />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+    </div>
 
+    <el-card shadow="always" class="card-second-top">
+      <div slot="header" class="clearfix" style="line-height: 32px;">
+        <span>我的车牌</span>
+        <el-button type="primary" size="small"  style="float: right" @click="dialogFormVisible = true">绑定车牌</el-button>
+      </div>
+      <el-form label-width="60px" style="margin-bottom: 55px;" label-position="left">
+        <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">
+        <el-form-item label="">
+          <el-select v-model="value" >
+            <el-option
+              v-for="item in region"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        </el-col>
+        <el-col :xs="8" :sm="6" :md="3" :lg="3" :xl="1">
+          <el-button type="primary" @click="onSubmit">解绑</el-button>
+        </el-col>
+      </el-form>
+    </el-card>
+
+    <el-dialog title="绑定车牌" :visible.sync="dialogFormVisible">
+      <el-form :model="problemform" label-width="60px" label-position="left">
+        <el-col :xs="8" :sm="6" :md="7" :lg="7" :xl="1">
+          <el-form-item label="车牌">
+            <el-input v-model="problemform.carnum" maxlength="20"  />
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false">绑定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
   export default {
-
     data() {
       return {
-        filterText: '',
-        data2: [{
-          id: 1,
-          label: 'Level one 1',
-          children: [{
-            id: 4,
-            label: 'Level two 1-1',
-            children: [{
-              id: 9,
-              label: 'Level three 1-1-1'
-            }, {
-              id: 10,
-              label: 'Level three 1-1-2'
-            }]
-          }]
-        }, {
-          id: 2,
-          label: 'Level one 2',
-          children: [{
-            id: 5,
-            label: 'Level two 2-1'
-          }, {
-            id: 6,
-            label: 'Level two 2-2'
-          }]
-        }, {
-          id: 3,
-          label: 'Level one 3',
-          children: [{
-            id: 7,
-            label: 'Level two 3-1'
-          }, {
-            id: 8,
-            label: 'Level two 3-2'
-          }]
-        }],
-        defaultProps: {
-          children: 'children',
-          label: 'label'
+        form: {
+          email: '13133415312',
+        },
+        value:'京A32323',
+        region: [
+          {
+            value: '京A32323',
+            label: '京A32323',
+          },{
+            value: '京A93323',
+            label: '京A93323',
+          },
+        ],
+        dialogFormVisible:false,
+        problemform:{
+          carnum:'',
         }
       }
     },
-    watch: {
-      filterText(val) {
-        this.$refs.tree2.filter(val)
-      }
-    },
-
     methods: {
-      filterNode(value, data) {
-        if (!value) return true
-        return data.label.indexOf(value) !== -1
-      }
+      onSubmit() {
+        this.$message({
+          message: '解绑成功!',
+          type: 'success'
+        });
+      },
+      problemonSubmit() {
+        this.$message('提交成功!')
+      },
+      onCancel() {
+        this.$message({
+          message: 'cancel!',
+          type: 'warning'
+        })
+      },
     }
   }
 </script>
 
+<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;
+  }
+</style>
+
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 980ccec..709ca8a 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -1,78 +1,114 @@
 <template>
-  <div class="app-container">
-    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
-
-    <el-tree
-      ref="tree2"
-      :data="data2"
-      :props="defaultProps"
-      :filter-node-method="filterNode"
-      class="filter-tree"
-      default-expand-all
-    />
-
+  <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>
   </div>
 </template>
-
 <script>
   export default {
-
     data() {
       return {
-        filterText: '',
-        data2: [{
-          id: 1,
-          label: 'Level one 1',
-          children: [{
-            id: 4,
-            label: 'Level two 1-1',
-            children: [{
-              id: 9,
-              label: 'Level three 1-1-1'
-            }, {
-              id: 10,
-              label: 'Level three 1-1-2'
-            }]
-          }]
-        }, {
-          id: 2,
-          label: 'Level one 2',
-          children: [{
-            id: 5,
-            label: 'Level two 2-1'
-          }, {
-            id: 6,
-            label: 'Level two 2-2'
-          }]
-        }, {
-          id: 3,
-          label: 'Level one 3',
-          children: [{
-            id: 7,
-            label: 'Level two 3-1'
-          }, {
-            id: 8,
-            label: 'Level two 3-2'
-          }]
-        }],
-        defaultProps: {
-          children: 'children',
-          label: 'label'
+        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' }
+          ],
+
         }
       }
     },
-    watch: {
-      filterText(val) {
-        this.$refs.tree2.filter(val)
-      }
-    },
-
     methods: {
-      filterNode(value, data) {
-        if (!value) return true
-        return data.label.indexOf(value) !== -1
+      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();
       }
     }
   }
 </script>
 
+<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>
--
libgit2 0.21.4