add 个人资料前端页面

Andy
1 parent dde8f987
Showing 3 changed files with 140 additions and 62 deletions
src/styles/index.scss
src/views/information/index.vue
src/views/settings/index.vue
@@ -98,12 +98,18 @@ p{
   padding-left: 15px;
 }
 // 自定义 css
+.text-center{
+  text-align: center;
+}
 .common-color{
   color: rgb(64, 158, 255);
 }
 .font-size24{
   font-size: 24px;
 }
+.font-size12{
+  font-size: 12px;
+}
 .margin-top-24{
   margin-top: 24px;
 }
 <template>
-  <div class="app-container">
-    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
+  <div class="">
+        <!--卡片-->
+        <el-row :gutter="16" class="">
+          <el-col :span="8">
+            <el-card class="box-card">
+              <el-upload
+                class="avatar-uploader text-center"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :on-remove="handleRemove"
+                :before-upload="beforeAvatarUpload">
+                <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              </el-upload>
+              <!--<el-button  class="text-center" size="small" type="primary">点击上传</el-button>-->
+              <!--<div slot="tip" class="el-upload__tip"></div>-->
+              <div class="common-color text-center" style="line-height: 30px">15143234323</div>
  
-    <el-tree
-      ref="tree2"
-      :data="data2"
-      :props="defaultProps"
-      :filter-node-method="filterNode"
-      class="filter-tree"
-      default-expand-all
-    />
+              <div class="font-size12 text-center" style="line-height: 30px">支持JPG格式且小于5MB</div>
+              <div class="font-size12 text-center" style="height: 146px"> </div>
+            </el-card>
+          </el-col>
+          <el-col :span="16">
+            <el-card class="box-card">
+             <!-- <div slot="header" class="clearfix" style="line-height: 32px;">
+                <span>个人资料</span>
+              </div>-->
+              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
+                <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="sex">
+                  <el-select  v-model="ruleForm.sex" style="width: 300px">
+                    <el-option label="男" value="1"/>
+                    <el-option label="女" value="2"/>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="生日" class="margin-bottom30" prop="birthday">
+                  <el-date-picker
+                    v-model="ruleForm.birthday"
+                    type="date"
+                    placeholder="选择日期" style="width: 300px">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item label="年龄" class="margin-bottom30" prop="num">
+                  <el-input-number v-model="ruleForm.num" @change="handleChange" :min="1" :max="150"  style="width: 300px"></el-input-number>
+                </el-form-item>
+                <el-form-item label="位置" class="margin-bottom30" prop="address">
+                  <el-input type="text" v-model="ruleForm.address" style="width: 300px"></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>
+            </el-card>
+          </el-col>
+        </el-row>
   </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'
+        imageUrl: '',
+        ruleForm: {
+          username: '万八',
+          num: '23',
+          sex:'男',
+          birthday: '2019-08-17',
+          address: '普通'
+        },
+        rules: {
+          username: [
+            { required: true, message: '请输入活动名称', trigger: 'blur' },
+            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          ],
+
+          birthday: [
+            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+          ],
+         /* num: [
+            { required: true, message: '请输入活动名称', trigger: 'blur' },
+            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          ],*/
+          address: [
+            { required: true, message: '请输入活动名称', trigger: 'blur' },
+            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
+          ],
+
         }
-      }
+      };
     },
-    watch: {
-      filterText(val) {
-        this.$refs.tree2.filter(val)
-      }
-    },
-
     methods: {
-      filterNode(value, data) {
-        if (!value) return true
-        return data.label.indexOf(value) !== -1
+      handleRemove(res, file) {
+        console.log(res, file);
+      },
+      handleAvatarSuccess(res, file) {
+        this.imageUrl = URL.createObjectURL(file.raw);
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt5M = file.size / 1024 / 1024 < 5;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt5M) {
+          this.$message.error('上传头像图片大小不能超过 5MB!');
+        }
+        return isJPG && isLt5M;
       }
     }
   }
 </script>
+<style lang="scss" >
+
+  .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+  .margin-bottom30{
+    margin-bottom: 30px;
+  }
+</style>
  
@@ -54,8 +54,8 @@
             { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
           ],
           email: [
-            { required: true, message: '请输入活动名称', trigger: 'blur' },
-            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
           ],
           pwd: [
             { required: true, message: '请输入活动名称', trigger: 'blur' },