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">昵称 ：${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>
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">`
完善 & bug修复 3 lat temu			`<p style="flex: 1">昵称：${form.nickName}</p>`
			`<p><a href="javascript:void(0)" style="text-decoration: none" @click="dialogFormVisible = true">修改资料</a></p>`
个人资料 6 lat temu			`</div>`
完善 & bug修复 3 lat temu			`<p>邮箱：${form.email}</p>`
			`<p>手机：${form.mobile}</p>`
个人资料 6 lat temu			`</div>`
			`</div>`
个人中心布局完成 6 lat temu			`</div>`
			`</div>`
			`</div>`
完善 & bug修复 3 lat temu			`<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>`
个人中心布局完成 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: ''`
完善 & bug修复 3 lat temu			`},`
			`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'},`
			`]`
博客列表完善 & bug修复 3 lat temu			`}`
			`},`
			`created() {`
			`console.log({{.User}})`
			`this.imageUrl = {{.HeadImg}}`
完善 & bug修复 3 lat temu			`this.form.nickName = {{.User.NickName}}`
			`this.form.email = {{.User.Email}}`
			`this.form.mobile = {{.User.Mobile}}`
博客列表完善 & bug修复 3 lat temu			`},`
			`methods: {`
完善 & bug修复 3 lat temu			`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')`
			`}`
			`})`
博客列表完善 & 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`
			`}`
			`</script>`
个人中心布局完成 6 lat temu			`</html>`