Du kan inte välja fler än 25 ämnen
Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
140 rader
4.7 KiB
140 rader
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>
|