Commit c05345367d0bc8671d674092cee9ae4fed638e4f
1 parent
dde8f987
add 个人资料 前端页面
Showing
3 changed files
with
140 additions
and
62 deletions
src/styles/index.scss
| @@ -98,12 +98,18 @@ p{ | @@ -98,12 +98,18 @@ p{ | ||
| 98 | padding-left: 15px; | 98 | padding-left: 15px; |
| 99 | } | 99 | } |
| 100 | // 自定义 css | 100 | // 自定义 css |
| 101 | +.text-center{ | ||
| 102 | + text-align: center; | ||
| 103 | +} | ||
| 101 | .common-color{ | 104 | .common-color{ |
| 102 | color: rgb(64, 158, 255); | 105 | color: rgb(64, 158, 255); |
| 103 | } | 106 | } |
| 104 | .font-size24{ | 107 | .font-size24{ |
| 105 | font-size: 24px; | 108 | font-size: 24px; |
| 106 | } | 109 | } |
| 110 | +.font-size12{ | ||
| 111 | + font-size: 12px; | ||
| 112 | +} | ||
| 107 | .margin-top-24{ | 113 | .margin-top-24{ |
| 108 | margin-top: 24px; | 114 | margin-top: 24px; |
| 109 | } | 115 | } |
src/views/information/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 class=""> |
| 3 | + <!--卡片--> | ||
| 4 | + <el-row :gutter="16" class=""> | ||
| 5 | + <el-col :span="8"> | ||
| 6 | + <el-card class="box-card"> | ||
| 7 | + <el-upload | ||
| 8 | + class="avatar-uploader text-center" | ||
| 9 | + action="https://jsonplaceholder.typicode.com/posts/" | ||
| 10 | + :show-file-list="false" | ||
| 11 | + :on-success="handleAvatarSuccess" | ||
| 12 | + :on-remove="handleRemove" | ||
| 13 | + :before-upload="beforeAvatarUpload"> | ||
| 14 | + <img v-if="imageUrl" :src="imageUrl" class="avatar"> | ||
| 15 | + <i v-else class="el-icon-plus avatar-uploader-icon"></i> | ||
| 16 | + </el-upload> | ||
| 17 | + <!--<el-button class="text-center" size="small" type="primary">点击上传</el-button>--> | ||
| 18 | + <!--<div slot="tip" class="el-upload__tip"></div>--> | ||
| 19 | + <div class="common-color text-center" style="line-height: 30px">15143234323</div> | ||
| 4 | 20 | ||
| 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 | - /> | 21 | + <div class="font-size12 text-center" style="line-height: 30px">支持JPG格式且小于5MB</div> |
| 22 | + <div class="font-size12 text-center" style="height: 146px"> </div> | ||
| 23 | + </el-card> | ||
| 24 | + </el-col> | ||
| 25 | + <el-col :span="16"> | ||
| 26 | + <el-card class="box-card"> | ||
| 27 | + <!-- <div slot="header" class="clearfix" style="line-height: 32px;"> | ||
| 28 | + <span>个人资料</span> | ||
| 29 | + </div>--> | ||
| 30 | + <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px"> | ||
| 31 | + <el-form-item label="姓名" class="margin-bottom30" prop="username"> | ||
| 32 | + <el-input v-model="ruleForm.username" style="width: 300px"></el-input> | ||
| 33 | + </el-form-item> | ||
| 34 | + <el-form-item label="性别" class="margin-bottom30" prop="sex"> | ||
| 35 | + <el-select v-model="ruleForm.sex" style="width: 300px"> | ||
| 36 | + <el-option label="男" value="1"/> | ||
| 37 | + <el-option label="女" value="2"/> | ||
| 38 | + </el-select> | ||
| 39 | + </el-form-item> | ||
| 40 | + <el-form-item label="生日" class="margin-bottom30" prop="birthday"> | ||
| 41 | + <el-date-picker | ||
| 42 | + v-model="ruleForm.birthday" | ||
| 43 | + type="date" | ||
| 44 | + placeholder="选择日期" style="width: 300px"> | ||
| 45 | + </el-date-picker> | ||
| 46 | + </el-form-item> | ||
| 47 | + <el-form-item label="年龄" class="margin-bottom30" prop="num"> | ||
| 48 | + <el-input-number v-model="ruleForm.num" @change="handleChange" :min="1" :max="150" style="width: 300px"></el-input-number> | ||
| 49 | + </el-form-item> | ||
| 50 | + <el-form-item label="位置" class="margin-bottom30" prop="address"> | ||
| 51 | + <el-input type="text" v-model="ruleForm.address" style="width: 300px"></el-input> | ||
| 52 | + </el-form-item> | ||
| 13 | 53 | ||
| 54 | + <el-form-item> | ||
| 55 | + <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> | ||
| 56 | + <el-button @click="resetForm('ruleForm')">取消</el-button> | ||
| 57 | + </el-form-item> | ||
| 58 | + </el-form> | ||
| 59 | + </el-card> | ||
| 60 | + </el-col> | ||
| 61 | + </el-row> | ||
| 14 | </div> | 62 | </div> |
| 15 | </template> | 63 | </template> |
| 16 | 64 | ||
| 17 | <script> | 65 | <script> |
| 18 | export default { | 66 | export default { |
| 19 | - | ||
| 20 | data() { | 67 | data() { |
| 21 | return { | 68 | 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' | 69 | + imageUrl: '', |
| 70 | + ruleForm: { | ||
| 71 | + username: '万八', | ||
| 72 | + num: '23', | ||
| 73 | + sex:'男', | ||
| 74 | + birthday: '2019-08-17', | ||
| 75 | + address: '普通' | ||
| 76 | + }, | ||
| 77 | + rules: { | ||
| 78 | + username: [ | ||
| 79 | + { required: true, message: '请输入活动名称', trigger: 'blur' }, | ||
| 80 | + { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } | ||
| 81 | + ], | ||
| 82 | + | ||
| 83 | + birthday: [ | ||
| 84 | + { required: true, message: '请输入邮箱地址', trigger: 'blur' }, | ||
| 85 | + { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } | ||
| 86 | + ], | ||
| 87 | + /* num: [ | ||
| 88 | + { required: true, message: '请输入活动名称', trigger: 'blur' }, | ||
| 89 | + { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } | ||
| 90 | + ],*/ | ||
| 91 | + address: [ | ||
| 92 | + { required: true, message: '请输入活动名称', trigger: 'blur' }, | ||
| 93 | + { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' } | ||
| 94 | + ], | ||
| 95 | + | ||
| 61 | } | 96 | } |
| 62 | - } | 97 | + }; |
| 63 | }, | 98 | }, |
| 64 | - watch: { | ||
| 65 | - filterText(val) { | ||
| 66 | - this.$refs.tree2.filter(val) | ||
| 67 | - } | ||
| 68 | - }, | ||
| 69 | - | ||
| 70 | methods: { | 99 | methods: { |
| 71 | - filterNode(value, data) { | ||
| 72 | - if (!value) return true | ||
| 73 | - return data.label.indexOf(value) !== -1 | 100 | + handleRemove(res, file) { |
| 101 | + console.log(res, file); | ||
| 102 | + }, | ||
| 103 | + handleAvatarSuccess(res, file) { | ||
| 104 | + this.imageUrl = URL.createObjectURL(file.raw); | ||
| 105 | + }, | ||
| 106 | + beforeAvatarUpload(file) { | ||
| 107 | + const isJPG = file.type === 'image/jpeg'; | ||
| 108 | + const isLt5M = file.size / 1024 / 1024 < 5; | ||
| 109 | + | ||
| 110 | + if (!isJPG) { | ||
| 111 | + this.$message.error('上传头像图片只能是 JPG 格式!'); | ||
| 112 | + } | ||
| 113 | + if (!isLt5M) { | ||
| 114 | + this.$message.error('上传头像图片大小不能超过 5MB!'); | ||
| 115 | + } | ||
| 116 | + return isJPG && isLt5M; | ||
| 74 | } | 117 | } |
| 75 | } | 118 | } |
| 76 | } | 119 | } |
| 77 | </script> | 120 | </script> |
| 121 | +<style lang="scss" > | ||
| 122 | + | ||
| 123 | + .avatar-uploader .el-upload { | ||
| 124 | + border: 1px dashed #d9d9d9; | ||
| 125 | + border-radius: 6px; | ||
| 126 | + cursor: pointer; | ||
| 127 | + position: relative; | ||
| 128 | + overflow: hidden; | ||
| 129 | + } | ||
| 130 | + .avatar-uploader .el-upload:hover { | ||
| 131 | + border-color: #409EFF; | ||
| 132 | + } | ||
| 133 | + .avatar-uploader-icon { | ||
| 134 | + font-size: 28px; | ||
| 135 | + color: #8c939d; | ||
| 136 | + width: 178px; | ||
| 137 | + height: 178px; | ||
| 138 | + line-height: 178px; | ||
| 139 | + text-align: center; | ||
| 140 | + } | ||
| 141 | + .avatar { | ||
| 142 | + width: 178px; | ||
| 143 | + height: 178px; | ||
| 144 | + display: block; | ||
| 145 | + } | ||
| 146 | + .margin-bottom30{ | ||
| 147 | + margin-bottom: 30px; | ||
| 148 | + } | ||
| 149 | +</style> | ||
| 78 | 150 |
src/views/settings/index.vue
| @@ -54,8 +54,8 @@ | @@ -54,8 +54,8 @@ | ||
| 54 | { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } | 54 | { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } |
| 55 | ], | 55 | ], |
| 56 | email: [ | 56 | email: [ |
| 57 | - { required: true, message: '请输入活动名称', trigger: 'blur' }, | ||
| 58 | - { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } | 57 | + { required: true, message: '请输入邮箱地址', trigger: 'blur' }, |
| 58 | + { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } | ||
| 59 | ], | 59 | ], |
| 60 | pwd: [ | 60 | pwd: [ |
| 61 | { required: true, message: '请输入活动名称', trigger: 'blur' }, | 61 | { required: true, message: '请输入活动名称', trigger: 'blur' }, |