{{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>