baseXX/application/wap/view/first/my/user_info.html

{extend name="public/container"}
{block name="title"}{$userInfo.nickname} - 个人资料{/block}
{block name="head_top"}
<style>
    body{
        background-color: #f5f5f5;
    }

    .user-info .avatar {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: .3rem;
        background-color: #fff;
    }

    .user-info .avatar .name {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        font-weight: 500;
        font-size: .3rem;
        color: #333;
    }

    .user-info .avatar .image {
        width: .9rem;
        height: .9rem;
        border-radius: 50%;
        overflow: hidden;
    }

    .user-info .avatar .img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .user-info .avatar .knowledge {
        margin-left: .3rem;
        font-size: .24rem;
        color: #999;
    }

    .user-info .avatar .input {
        display: none;
    }

    .user-info .list {
        margin-top: .3rem;
        background-color: #fff;
    }

    .user-info .list .item {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        height: .98rem;
        padding-right: .3rem;
        padding-left: .3rem;
    }

    .user-info .list .item~.item{
        border-top: 1px solid #f5f5f5;
    }

    .user-info .list .item .name {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        font-weight: 500;
        font-size: .3rem;
        color: #333;
    }

    .user-info .list .item .value {
        font-size: .3rem;
        color: #666;
    }

    .user-info .list .item .knowledge{
        margin-left: .3rem;
        font-size: .24rem;
        color: #999;
    }

    .user-info .list .item .input {
        font-family: inherit;
        text-align: right;
    }

    .user-info .group{
        padding: .3rem;
        margin-top: .5rem;
    }

    .user-info .group .button {
        display: block;
        width: 100%;
        height: .86rem;
        border-radius: .43rem;
        background-color: #539dfd;
        font-weight: 500;
        font-size: .3rem;
        color: #fff;
    }

    .user-info .group .link {
        display: block;
        width: 100%;
        height: .86rem;
        border: 1px solid #ccc;
        border-radius: .43rem;
        margin-top: .3rem;
        font-weight: 500;
        font-size: .3rem;
        line-height: .82rem;
        text-align: center;
        color: #999;
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app">
    <div class="user-info">
        <label class="avatar">
            <div class="name">头像</div>
            <div class="image">
                <img class="img" :src="userInfo.avatar">
            </div>
            <div class="knowledge iconxiangyou"></div>
            <input ref="avatar" class="input" type="file" accept="image/*">
        </label>
        <div class="list">
            <label class="item">
                <span class="name">昵称</span>
                <input v-model="userInfo.nickname" class="value input" type="text">
            </label>
            <a class="item" href="{:Url('save_phone')}">
                <span class="name">手机号</span>
                <span class="value">{{ userInfo.phone }}</span>
                <span class="knowledge iconxiangyou"></span>
            </a>
        </div>
        <div class="group">
            <button class="button" type="button" @click="save_user_info">保存</button>
            <a class="link" href="/wap/my/index.html">返回</a>
        </div>
    </div>
    <shortcut></shortcut>
</div>
{/block}
{block name='foot'}
<script>
    var userInfo = {:json_encode($userInfo)}, isWechat = {$isWechat? 'true': 'false'};
    require(['vue', 'helper', 'store', '{__WAP_PATH}zsff/js/shortcut.js'], function (Vue, $h, app) {
        new Vue({
            el: '#app',
            data: {
                userInfo: userInfo
            },
            watch: {
                'userInfo.nickname': function (n) {
                    document.title = n + ' - 个人资料';
                }
            },
            mounted: function () {
                var that = this;
                $(this.$refs.avatar).change(function (e) {
                    var formdata = new FormData();
                    if (e.target.files[0]) {
                        formdata.append('file', e.target.files[0]);
                        app.basePost($h.U({ c: 'index', a: 'upload' }), formdata, function (res) {
                            that.userInfo.avatar = res.data.data.url;
                        })
                    }
                })
            },
            methods: {
                upload: function () {
                    var that = this;
                    if (!isWechat) {
                        return;
                    }
                    mapleWx($jssdk(), function () {
                        app.wechatUploadImg(this, 1, function (res) {
                            that.userInfo.avatar = res[0];
                        });
                    });
                },
                save_user_info: function () {
                    var that = this;
                    app.basePost($h.U({ c: 'my', a: 'save_user_info' }), {
                        avatar: that.userInfo.avatar,
                        nickname: that.userInfo.nickname
                    }, function (res) {
                        $h.pushMsgOnce(res.data.msg)
                    })
                }
            }
        });
    })
</script>
{/block}