beeblog/views/uinfo.html

{{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>
seo优化 6 lat temu			`{{template "header" .}}`
layui 版本 6 lat temu			`<title>我的资料 - 码农随笔</title>`
博客列表完善 & bug修复 3 lat temu			`<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>`
个人中心布局完成 6 lat temu			`</head>`
详情 & 个人中心底部去掉 6 lat temu			`<body style="background-color: #f9f9f9">`
个人中心布局完成 6 lat temu			`<div class="root-container">`
			`{{template "nav" .}}`
			`{{template "memenu" .}}`
			`<div class="me-blog-root">`
			`<div class="me-blog-list">`
過度layui 6 lat temu			`<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>`
个人资料 6 lat temu			`<div style="display: flex">`
博客列表完善 & bug修复 3 lat temu			`<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>`
个人资料 6 lat temu			`</div>`
			`<div class="info-header">`
			`<div style="display: flex">`
			`<p style="flex: 1;color: #888">ID: {{.User.UserName}}</p>`
个人主页 6 lat temu			`<p><a href="/u/{{.User.Id}}" style="text-decoration: none">个人主页 ></a></p>`
个人资料 6 lat temu			`</div>`
			`<div>`
			`<span>博客 {{.User.BlogCount}}</span>`
			`<span>浏览量 {{.User.BlogBrowes}}</span>`
个人中心布局完成 6 lat temu			`</div>`
个人资料 6 lat temu			`<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>`
个人中心布局完成 6 lat temu			`</div>`
			`</div>`
			`</div>`
博客列表完善 & bug修复 3 lat temu			`<!-- <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>-->`
个人中心布局完成 6 lat temu			`</div>`
			`</body>`
个人资料 6 lat temu			`<script>`
博客列表完善 & bug修复 3 lat temu			`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(){`
个人笔记改造完成 6 lat temu
博客列表完善 & bug修复 3 lat temu			`},`
			`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('上传成功')`
			`}`
部署 6 lat temu			`}`
			`}`
			`})`
博客列表完善 & bug修复 3 lat temu
个人资料 6 lat temu			`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>`
个人中心布局完成 6 lat temu			`</html>`