码农笔录博客源码
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 
 

140 linhas
4.7 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">昵称 :{{.User.NickName}}</p>
<p><a href="javascript:void(0)" style="text-decoration: none" id="editBtn">修改资料</a></p>
</div>
<p>邮箱 :{{.User.Email}}</p>
<p>手机 :{{.User.Mobile}}</p>
<p>简介 :{{.User.DescInfo}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- <el-dialog title="编辑个人信息" :visible.sync="dialogFormVisible">-->
<!-- <el-form :model="form">-->
<!-- <el-form-item label="活动名称" :label-width="150px">-->
<!-- <el-input v-model="form.nickName"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div slot="footer" class="dialog-footer">-->
<!-- <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!-- <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
</div>
</body>
<script>
var app = new Vue({
el: ".root-container",
delimiters: ['${', '}'],
data: {
dialogFormVisible: false,
imageUrl: '',
form: {
nickName: '',
email: '',
mobile: ''
}
},
created() {
console.log({{.User}})
this.imageUrl = {{.HeadImg}}
},
methods: {
editBtn(){
},
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
}
$(function () {
$("#editBtn").click(function () {
layer.open({
type: 2,
title: '修改个人资料',
shadeClose: true,
shade: 0.5,
area: ['450px', '415px'],
content: '/iframe/user.html' //iframe的url
});
})
})
</script>
</html>