1
This commit is contained in:
38
src/views/profile/components/Account.vue
Normal file
38
src/views/profile/components/Account.vue
Normal file
@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<el-form>
|
||||
<el-form-item label="Name">
|
||||
<el-input v-model.trim="user.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Email">
|
||||
<el-input v-model.trim="user.email" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit">Update</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
name: '',
|
||||
email: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$message({
|
||||
message: 'User information has been updated successfully',
|
||||
type: 'success',
|
||||
duration: 5 * 1000
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
185
src/views/profile/components/Activity.vue
Normal file
185
src/views/profile/components/Activity.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<div class="user-activity">
|
||||
<div class="post">
|
||||
<div class="user-block">
|
||||
<img class="img-circle" :src="'https://wpimg.wallstcn.com/57ed425a-c71e-4201-9428-68760c0537c4.jpg'+avatarPrefix">
|
||||
<span class="username text-muted">Iron Man</span>
|
||||
<span class="description">Shared publicly - 7:30 PM today</span>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum represents a long-held tradition for designers,
|
||||
typographers and the like. Some people hate it and argue for
|
||||
its demise, but others ignore the hate as they create awesome
|
||||
tools to help create filler text for everyone from bacon lovers
|
||||
to Charlie Sheen fans.
|
||||
</p>
|
||||
<ul class="list-inline">
|
||||
<li>
|
||||
<span class="link-black text-sm">
|
||||
<i class="el-icon-share" />
|
||||
Share
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="link-black text-sm">
|
||||
<svg-icon icon-class="like" />
|
||||
Like
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="post">
|
||||
<div class="user-block">
|
||||
<img class="img-circle" :src="'https://wpimg.wallstcn.com/9e2a5d0a-bd5b-457f-ac8e-86554616c87b.jpg'+avatarPrefix">
|
||||
<span class="username text-muted">Captain American</span>
|
||||
<span class="description">Sent you a message - yesterday</span>
|
||||
</div>
|
||||
<p>
|
||||
Lorem ipsum represents a long-held tradition for designers,
|
||||
typographers and the like. Some people hate it and argue for
|
||||
its demise, but others ignore the hate as they create awesome
|
||||
tools to help create filler text for everyone from bacon lovers
|
||||
to Charlie Sheen fans.
|
||||
</p>
|
||||
<ul class="list-inline">
|
||||
<li>
|
||||
<span class="link-black text-sm">
|
||||
<i class="el-icon-share" />
|
||||
Share
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="link-black text-sm">
|
||||
<svg-icon icon-class="like" />
|
||||
Like
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="post">
|
||||
<div class="user-block">
|
||||
<img class="img-circle" :src="'https://wpimg.wallstcn.com/fb57f689-e1ab-443c-af12-8d4066e202e2.jpg'+avatarPrefix">
|
||||
<span class="username">Spider Man</span>
|
||||
<span class="description">Posted 4 photos - 2 days ago</span>
|
||||
</div>
|
||||
<div class="user-images">
|
||||
<el-carousel :interval="6000" type="card" height="220px">
|
||||
<el-carousel-item v-for="item in carouselImages" :key="item">
|
||||
<img :src="item+carouselPrefix" class="image">
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
<ul class="list-inline">
|
||||
<li><span class="link-black text-sm"><i class="el-icon-share" /> Share</span></li>
|
||||
<li>
|
||||
<span class="link-black text-sm">
|
||||
<svg-icon icon-class="like" /> Like</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const avatarPrefix = '?imageView2/1/w/80/h/80'
|
||||
const carouselPrefix = '?imageView2/2/h/440'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
carouselImages: [
|
||||
'https://wpimg.wallstcn.com/9679ffb0-9e0b-4451-9916-e21992218054.jpg',
|
||||
'https://wpimg.wallstcn.com/bcce3734-0837-4b9f-9261-351ef384f75a.jpg',
|
||||
'https://wpimg.wallstcn.com/d1d7b033-d75e-4cd6-ae39-fcd5f1c0a7c5.jpg',
|
||||
'https://wpimg.wallstcn.com/50530061-851b-4ca5-9dc5-2fead928a939.jpg'
|
||||
],
|
||||
avatarPrefix,
|
||||
carouselPrefix
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-activity {
|
||||
.user-block {
|
||||
|
||||
.username,
|
||||
.description {
|
||||
display: block;
|
||||
margin-left: 50px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.username{
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.img-circle {
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
font-size: 14px;
|
||||
border-bottom: 1px solid #d2d6de;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
color: #666;
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.user-images {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-inline {
|
||||
padding-left: 0;
|
||||
margin-left: -5px;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.link-black {
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.box-center {
|
||||
margin: 0 auto;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #777;
|
||||
}
|
||||
</style>
|
||||
43
src/views/profile/components/Timeline.vue
Normal file
43
src/views/profile/components/Timeline.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="block">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(item,index) of timeline" :key="index" :timestamp="item.timestamp" placement="top">
|
||||
<el-card>
|
||||
<h4>{{ item.title }}</h4>
|
||||
<p>{{ item.content }}</p>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timeline: [
|
||||
{
|
||||
timestamp: '2019/4/20',
|
||||
title: 'Update Github template',
|
||||
content: 'PanJiaChen committed 2019/4/20 20:46'
|
||||
},
|
||||
{
|
||||
timestamp: '2019/4/21',
|
||||
title: 'Update Github template',
|
||||
content: 'PanJiaChen committed 2019/4/21 20:46'
|
||||
},
|
||||
{
|
||||
timestamp: '2019/4/22',
|
||||
title: 'Build Template',
|
||||
content: 'PanJiaChen committed 2019/4/22 20:46'
|
||||
},
|
||||
{
|
||||
timestamp: '2019/4/23',
|
||||
title: 'Release New Version',
|
||||
content: 'PanJiaChen committed 2019/4/23 20:46'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
134
src/views/profile/components/UserCard.vue
Normal file
134
src/views/profile/components/UserCard.vue
Normal file
@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<el-card style="margin-bottom:20px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>About me</span>
|
||||
</div>
|
||||
|
||||
<div class="user-profile">
|
||||
<div class="box-center">
|
||||
<pan-thumb :image="user.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
|
||||
<div>Hello</div>
|
||||
{{ user.role }}
|
||||
</pan-thumb>
|
||||
</div>
|
||||
<div class="box-center">
|
||||
<div class="user-name text-center">{{ user.name }}</div>
|
||||
<div class="user-role text-center text-muted">{{ user.role | uppercaseFirst }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-bio">
|
||||
<div class="user-education user-bio-section">
|
||||
<div class="user-bio-section-header"><svg-icon icon-class="education" /><span>Education</span></div>
|
||||
<div class="user-bio-section-body">
|
||||
<div class="text-muted">
|
||||
JS in Computer Science from the University of Technology
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="user-skills user-bio-section">
|
||||
<div class="user-bio-section-header"><svg-icon icon-class="skill" /><span>Skills</span></div>
|
||||
<div class="user-bio-section-body">
|
||||
<div class="progress-item">
|
||||
<span>Vue</span>
|
||||
<el-progress :percentage="70" />
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>JavaScript</span>
|
||||
<el-progress :percentage="18" />
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>Css</span>
|
||||
<el-progress :percentage="12" />
|
||||
</div>
|
||||
<div class="progress-item">
|
||||
<span>ESLint</span>
|
||||
<el-progress :percentage="100" status="success" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PanThumb from '@/components/PanThumb'
|
||||
|
||||
export default {
|
||||
components: { PanThumb },
|
||||
props: {
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
name: '',
|
||||
email: '',
|
||||
avatar: '',
|
||||
roles: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-center {
|
||||
margin: 0 auto;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
.user-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.box-center {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
padding-top: 10px;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.box-social {
|
||||
padding-top: 30px;
|
||||
|
||||
.el-table {
|
||||
border-top: 1px solid #dfe6ec;
|
||||
}
|
||||
}
|
||||
|
||||
.user-follow {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-bio {
|
||||
margin-top: 20px;
|
||||
color: #606266;
|
||||
|
||||
span {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.user-bio-section {
|
||||
font-size: 14px;
|
||||
padding: 15px 0;
|
||||
|
||||
.user-bio-section-header {
|
||||
border-bottom: 1px solid #dfe6ec;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
121
src/views/profile/index.vue
Normal file
121
src/views/profile/index.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<BasicLayout>
|
||||
<template #wrapper>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6" :xs="24">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<userAvatar :user="user" />
|
||||
</div>
|
||||
<ul class="list-group list-group-striped">
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="user" />用户名称
|
||||
<div class="pull-right">{{ user.username }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="phone" />手机号码
|
||||
<div class="pull-right">{{ user.phone }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="email" />用户邮箱
|
||||
<div class="pull-right">{{ user.email }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="tree" />所属部门
|
||||
<div class="pull-right">{{ deptName }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="peoples" />所属角色
|
||||
<div class="pull-right">{{ roleName }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<svg-icon icon-class="date" />创建日期
|
||||
<div class="pull-right">{{ user.createdAt }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="18" :xs="24">
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本资料</span>
|
||||
</div>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="基本资料" name="userinfo">
|
||||
<userInfo :user="user" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="修改密码" name="resetPwd">
|
||||
<resetPwd :user="user" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</BasicLayout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userAvatar from './userAvatar'
|
||||
import userInfo from './userInfo'
|
||||
import resetPwd from './resetPwd'
|
||||
import { getUserProfile } from '@/api/admin/sys-user'
|
||||
|
||||
export default {
|
||||
name: 'Profile',
|
||||
components: { userAvatar, userInfo, resetPwd },
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
roleGroup: {},
|
||||
postGroup: {},
|
||||
deptGroup: {},
|
||||
activeTab: 'userinfo',
|
||||
roleIds: undefined,
|
||||
postIds: undefined,
|
||||
roleName: undefined,
|
||||
postName: undefined,
|
||||
dept: {},
|
||||
deptName: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getUser()
|
||||
},
|
||||
methods: {
|
||||
getUser() {
|
||||
getUserProfile().then(response => {
|
||||
this.user = response.data.user
|
||||
this.roleIds = response.data.user.roleIds
|
||||
this.roleGroup = response.data.roles
|
||||
|
||||
if (this.roleIds[0]) {
|
||||
for (const key in this.roleGroup) {
|
||||
if (this.roleIds[0] === this.roleGroup[key].roleId) {
|
||||
this.roleName = this.roleGroup[key].roleName
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.roleName = '暂无'
|
||||
}
|
||||
this.dept = response.data.user.dept
|
||||
this.deptName = this.dept.deptName
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-group-item{
|
||||
padding: 18px 0;
|
||||
}
|
||||
.svg-icon{
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
76
src/views/profile/resetPwd.vue
Normal file
76
src/views/profile/resetPwd.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
|
||||
<el-form-item label="旧密码" prop="oldPassword">
|
||||
<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" />
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
||||
<el-button type="danger" size="mini" @click="close">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateUserPwd } from '@/api/admin/sys-user'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const equalToPassword = (rule, value, callback) => {
|
||||
if (this.user.newPassword !== value) {
|
||||
callback(new Error('两次输入的密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
test: '1test',
|
||||
user: {
|
||||
oldPassword: undefined,
|
||||
newPassword: undefined,
|
||||
confirmPassword: undefined
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
oldPassword: [
|
||||
{ required: true, message: '旧密码不能为空', trigger: 'blur' }
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, message: '新密码不能为空', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: '确认密码不能为空', trigger: 'blur' },
|
||||
{ required: true, validator: equalToPassword, trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
|
||||
response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess(response.msg)
|
||||
} else {
|
||||
this.msgError(response.msg)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$store.dispatch('tagsView/delView', this.$route)
|
||||
this.$router.push({ path: '/index' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
137
src/views/profile/userAvatar.vue
Normal file
137
src/views/profile/userAvatar.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div>
|
||||
<img :src="options.img" title="点击上传头像" class="img-circle img-lg" @click="editCropper()">
|
||||
<el-dialog :title="title" :visible.sync="open" width="800px" :close-on-click-modal="false">
|
||||
<el-row>
|
||||
<el-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||
<vue-cropper
|
||||
ref="cropper"
|
||||
:img="options.img"
|
||||
:info="true"
|
||||
:auto-crop="options.autoCrop"
|
||||
:auto-crop-width="options.autoCropWidth"
|
||||
:auto-crop-height="options.autoCropHeight"
|
||||
:fixed-box="options.fixedBox"
|
||||
@realTime="realTime"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :md="12" :style="{height: '350px'}">
|
||||
<div class="avatar-upload-preview">
|
||||
<img :src="previews.url" :style="previews.img">
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<br>
|
||||
<el-row>
|
||||
<el-col :lg="2" :md="2">
|
||||
<el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
|
||||
<el-button size="small">
|
||||
上传
|
||||
<i class="el-icon-upload el-icon--right" />
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</el-col>
|
||||
<el-col :lg="{span: 1, offset: 2}" :md="2">
|
||||
<el-button icon="el-icon-plus" size="small" @click="changeScale(1)" />
|
||||
</el-col>
|
||||
<el-col :lg="{span: 1, offset: 1}" :md="2">
|
||||
<el-button icon="el-icon-minus" size="small" @click="changeScale(-1)" />
|
||||
</el-col>
|
||||
<el-col :lg="{span: 1, offset: 1}" :md="2">
|
||||
<el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()" />
|
||||
</el-col>
|
||||
<el-col :lg="{span: 1, offset: 1}" :md="2">
|
||||
<el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()" />
|
||||
</el-col>
|
||||
<el-col :lg="{span: 2, offset: 6}" :md="2">
|
||||
<el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import store from '@/store'
|
||||
import { VueCropper } from 'vue-cropper'
|
||||
import { uploadAvatar } from '@/api/admin/sys-user'
|
||||
|
||||
export default {
|
||||
components: { VueCropper },
|
||||
props: {
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
user: { type: Object }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 弹出层标题
|
||||
title: '修改头像',
|
||||
options: {
|
||||
img: store.getters.avatar, // 裁剪图片的地址
|
||||
autoCrop: true, // 是否默认生成截图框
|
||||
autoCropWidth: 200, // 默认生成截图框宽度
|
||||
autoCropHeight: 200, // 默认生成截图框高度
|
||||
fixedBox: true // 固定截图框大小 不允许改变
|
||||
},
|
||||
previews: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 编辑头像
|
||||
editCropper() {
|
||||
this.open = true
|
||||
},
|
||||
// 覆盖默认的上传行为
|
||||
requestUpload() {
|
||||
},
|
||||
// 向左旋转
|
||||
rotateLeft() {
|
||||
this.$refs.cropper.rotateLeft()
|
||||
},
|
||||
// 向右旋转
|
||||
rotateRight() {
|
||||
this.$refs.cropper.rotateRight()
|
||||
},
|
||||
// 图片缩放
|
||||
changeScale(num) {
|
||||
num = num || 1
|
||||
this.$refs.cropper.changeScale(num)
|
||||
},
|
||||
// 上传预处理
|
||||
beforeUpload(file) {
|
||||
if (file.type.indexOf('image/') === -1) {
|
||||
this.msgError('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。')
|
||||
} else {
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
reader.onload = () => {
|
||||
this.options.img = reader.result
|
||||
}
|
||||
}
|
||||
},
|
||||
// 上传图片
|
||||
uploadImg() {
|
||||
this.$refs.cropper.getCropBlob(data => {
|
||||
const formData = new FormData()
|
||||
formData.append('upload[]', data)
|
||||
uploadAvatar(formData).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.open = false
|
||||
this.options.img = process.env.VUE_APP_BASE_API + response.data
|
||||
this.msgSuccess(response.msg)
|
||||
} else {
|
||||
this.msgError(response.msg)
|
||||
}
|
||||
this.$refs.cropper.clearCrop()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 实时预览
|
||||
realTime(data) {
|
||||
this.previews = data
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
79
src/views/profile/userInfo.vue
Normal file
79
src/views/profile/userInfo.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
|
||||
<el-form-item label="用户昵称" prop="nickName">
|
||||
<el-input v-model="user.nickName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phone">
|
||||
<el-input v-model="user.phone" maxlength="11" />
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="user.email" maxlength="50" />
|
||||
</el-form-item>
|
||||
<el-form-item label="性别">
|
||||
<el-radio-group v-model="user.sex">
|
||||
<el-radio label="0">男</el-radio>
|
||||
<el-radio label="1">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="mini" @click="submit">保存</el-button>
|
||||
<el-button type="danger" size="mini" @click="close">关闭</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateUser } from '@/api/admin/sys-user'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
// eslint-disable-next-line vue/require-default-prop
|
||||
user: { type: Object }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 表单校验
|
||||
rules: {
|
||||
nickName: [
|
||||
{ required: true, message: '用户昵称不能为空', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: '邮箱地址不能为空', trigger: 'blur' },
|
||||
{
|
||||
type: 'email',
|
||||
message: "'请输入正确的邮箱地址",
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '手机号码不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: '请输入正确的手机号码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs['form'].validate(valid => {
|
||||
if (valid) {
|
||||
updateUser(this.user).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.msgSuccess(response.msg)
|
||||
} else {
|
||||
this.msgError(response.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.$store.dispatch('tagsView/delView', this.$route)
|
||||
this.$router.push({ path: '/index' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user