You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
6.1 KiB
165 lines
6.1 KiB
{{template "header" .}}
|
|
<title>我的资料 - 码农随笔</title>
|
|
<style>
|
|
.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;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="background-color: #f9f9f9">
|
|
<div class="root-container">
|
|
{{template "nav" .}}
|
|
{{template "memenu" .}}
|
|
<div class="me-blog-root">
|
|
<div class="me-blog-list">
|
|
<div class="breadcrumb-container">
|
|
<span class="layui-breadcrumb">
|
|
<a href="/">首页</a>
|
|
<a href="">个人中心</a>
|
|
<a href="/me/info">我的资料</a>
|
|
<a><cite>个人信息</cite></a>
|
|
</span>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div style="width: 200px;margin-top: 10px">
|
|
<el-upload
|
|
class="avatar-uploader"
|
|
action="/himg/upload"
|
|
:show-file-list="false"
|
|
:on-success="handleAvatarSuccess">
|
|
<img v-if="imageUrl" :src="imageUrl" class="avatar">
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
</el-upload>
|
|
</div>
|
|
<div class="info-header">
|
|
<div style="display: flex">
|
|
<p style="flex: 1;color: #888">ID: {{.User.UserName}}</p>
|
|
<p><a href="/u/{{.User.Id}}" style="text-decoration: none">个人主页 ></a></p>
|
|
</div>
|
|
<div>
|
|
<span>博客 {{.User.BlogCount}}</span>
|
|
<span>浏览量 {{.User.BlogBrowes}}</span>
|
|
</div>
|
|
<hr style="height:1px;border:none;border-top:1px solid #EEE;margin: 10px 0 5px 0;"/>
|
|
<div>
|
|
<div style="display: flex">
|
|
<p style="flex: 1">昵称 ：${form.nickName}</p>
|
|
<p><a href="javascript:void(0)" style="text-decoration: none" @click="dialogFormVisible = true">修改资料</a></p>
|
|
</div>
|
|
<p>邮箱 ：${form.email}</p>
|
|
<p>手机 ：${form.mobile}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-dialog title="编辑个人信息" :visible.sync="dialogFormVisible" width="500px">
|
|
<div>
|
|
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
|
<el-form-item label="昵称" prop="nickName">
|
|
<el-input v-model="form.nickName"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱" prop="email">
|
|
<el-input v-model="form.email"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="手机号" prop="mobile">
|
|
<el-input v-model="form.mobile"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="saveHandler">确 定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
var app = new Vue({
|
|
el: ".root-container",
|
|
delimiters: ['${', '}'],
|
|
data: {
|
|
dialogFormVisible: false,
|
|
imageUrl: '',
|
|
form: {
|
|
nickName: '',
|
|
email: '',
|
|
mobile: ''
|
|
},
|
|
rules: {
|
|
nickName: [
|
|
{required: true, message: '请输入昵称', trigger: 'blur'},
|
|
{min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
|
|
],
|
|
email: [
|
|
{required: true, message: '请输入邮箱', trigger: 'blur'},
|
|
],
|
|
mobile: [
|
|
{required: true, message: '请输入手机号码', trigger: 'blur'},
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
console.log({{.User}})
|
|
this.imageUrl = {{.HeadImg}}
|
|
this.form.nickName = {{.User.NickName}}
|
|
this.form.email = {{.User.Email}}
|
|
this.form.mobile = {{.User.Mobile}}
|
|
},
|
|
methods: {
|
|
saveHandler(){
|
|
const _this = this
|
|
this.$refs['ruleForm'].validate((valid) => {
|
|
if (valid) {
|
|
$.post('/api/user/edit', _this.form,
|
|
function (data) {
|
|
if (data.Status == 0) {
|
|
_this.$message.success('修改成功')
|
|
_this.dialogFormVisible = false
|
|
} else if (data.Status == 401) {
|
|
window.location.href = "/login"
|
|
} else {
|
|
_this.$message.error('服务器异常')
|
|
}
|
|
}, 'json')
|
|
}
|
|
})
|
|
},
|
|
handleAvatarSuccess(res, file){
|
|
if(res.Status === 0){
|
|
this.imageUrl = res.Data
|
|
this.$message.success('上传成功')
|
|
} else if(res.Status === 401){
|
|
window.location.href = "/login"
|
|
} else {
|
|
this.$message.error('上传成功')
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
function refresh() {
|
|
window.location.href = window.location.href
|
|
}
|
|
</script>
|
|
</html>
|