|
|
|
@ -1,6 +1,30 @@ |
|
|
|
{{template "header" .}} |
|
|
|
<title>我的资料 - 码农随笔</title> |
|
|
|
<script type="text/javascript" src="/static/js/upload.js"></script> |
|
|
|
<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"> |
|
|
|
@ -17,9 +41,15 @@ |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<div style="display: flex"> |
|
|
|
<div style="width: 160px"> |
|
|
|
<img src="{{.HeadImg}}" alt="头像" class="img-circle img-circle-large"> |
|
|
|
<div id="drop_area" style="margin-top: 15px"></div> |
|
|
|
<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"> |
|
|
|
@ -29,8 +59,6 @@ |
|
|
|
<div> |
|
|
|
<span>博客 {{.User.BlogCount}}</span> |
|
|
|
<span>浏览量 {{.User.BlogBrowes}}</span> |
|
|
|
<span>博客 {{.User.BlogCount}}</span> |
|
|
|
<span>博客 {{.User.BlogCount}}</span> |
|
|
|
</div> |
|
|
|
<hr style="height:1px;border:none;border-top:1px solid #EEE;margin: 10px 0 5px 0;"/> |
|
|
|
<div> |
|
|
|
@ -38,54 +66,61 @@ |
|
|
|
<p style="flex: 1">昵称 ：{{.User.NickName}}</p> |
|
|
|
<p><a href="javascript:void(0)" style="text-decoration: none" id="editBtn">修改资料</a></p> |
|
|
|
</div> |
|
|
|
<p>生日 ：{{.User.Birthday.Format "2006-01-02"}}</p> |
|
|
|
<p>邮箱 ：{{.User.Email}}</p> |
|
|
|
<p>手机 ：{{.User.Mobile}}</p> |
|
|
|
<p>Q Q ：{{.User.QQ}}</p> |
|
|
|
{{if eq 0 .User.Sex}} |
|
|
|
<p>性别 ：女</p> |
|
|
|
{{else}} |
|
|
|
<p>性别 ：男</p> |
|
|
|
{{end}} |
|
|
|
<p>简介 ：{{.User.DescInfo}}</p> |
|
|
|
</div> |
|
|
|
</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 dragImgUpload = new DragImgUpload("#drop_area",{ |
|
|
|
callback:function (files) { |
|
|
|
//回调函数，可以传递给后台等等 |
|
|
|
var file = files[0]; |
|
|
|
console.log(file.name); |
|
|
|
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(){ |
|
|
|
|
|
|
|
var formData = new FormData(); |
|
|
|
formData.append("imgfile",file ); |
|
|
|
if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) |
|
|
|
{ |
|
|
|
return false; |
|
|
|
}else{ |
|
|
|
$.ajax({ |
|
|
|
url: '/himg/upload', |
|
|
|
type:'POST', |
|
|
|
contentType: false, |
|
|
|
processData: false, |
|
|
|
data: formData, |
|
|
|
success:function(data,textstatus){ |
|
|
|
if (data.Status == 0){ |
|
|
|
this.$message.success("上传成功") |
|
|
|
}else{ |
|
|
|
this.$message.error("上传失败") |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
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 |
|
|
|
} |
|
|
|
|
