{extend name="public/container"}
{block name="title"}个人中心{/block}
{block name='head_top'}
<style>
    body {
        background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
        background-attachment: fixed;
    }

    .support {
        display: block;
        width: 2.19rem;
        margin: .28rem auto 1.38rem;
        pointer-events: none;
        -webkit-touch-callout: none;
    }

    .mask h4 {
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-top: 1rem;
        color: #ffffff;
        font-size: 0.5rem;
        text-align: center;
    }

    .mask .code {
        width: 100%;
        display: flex;
        align-items: center
    }

    .mask .code .image {
        height: 5rem;
        width: 5rem;
        margin: 0 auto;
    }

    .mask .button {
        display: inherit;
        text-align: center;
        font-size: 0.28rem;
        color: #fff;
        width: 1.5rem;
        height: 0.6rem;
        background-color: #509efb;
        line-height: 0.6rem;
        border-radius: 0.5rem;
        margin: 1rem auto;
    }
    .user-section {
        border-bottom: .2rem solid #F9F9F9;
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app" class="user-page">
    <div class="user-section" @click="goUrl('{:Url('user_info')}', 1)">
        {if $userInfo['uid']}
        <img class="img" src="{$userInfo.avatar}">
        {else}
        <img class="img" src="/wap/first/zsff/images/avatar_default.jpg">
        {/if}
        <div class="text-wrap">
            {if $userInfo['uid']}
            <div class="name">{$userInfo.nickname}</div>
            {else}
            <div class="name">请登录</div>
            {/if}
        </div>
        <div class="iconfont iconxiangyou"></div>
    </div>
    <div class="tool-section">
        <div class="title">我的工具</div>
        <div class="list">
            <div class="item" @click="goUrl('{:Url('special/grade_list')}',1)">
                <img class="img" src="/wap/first/zsff/images/wdkc.png">
                <div class="text">我的课程</div>
            </div>
            <div class="item" @click="goUrl('{:Url('special/record')}',1)">
                <img class="img" src="/wap/first/zsff/images/xxjl.png">
                <div class="text">学习记录</div>
            </div>
            <div class="item" @click="goUrl('{:Url('special/grade_list',['type'=>1])}',1)">
                <img class="img" src="/wap/first/zsff/images/wdsc.png">
                <div class="text">我的收藏</div>
            </div>
        </div>
    </div>
    <div class="serve-section">
        <div class="title">我的服务</div>
        <div class="list">
            <div v-for="item in menuList" class="item" @click="goUrl(item,2)">
                <img class="img" :src="item.icon">
                <div class="text">{{ item.title }}</div>
            </div>
            <div class="item" v-show="phone && !isWechat" @click="logout">
                <img class="img" src="/wap/first/zsff/images/logout.png">
                <div class="text">退出</div>
            </div>
        </div>
    </div>
    <enter :appear="appear" @change="changeVal" :url="url" :site_name="site_name"></enter>
    <div class="mask" @touchmove.prevent style="z-index: 100;" v-show="isfollow">
        <h4>立即绑定微信公众号用户</h4>
        <div class="code">
            <img :src="codeUrl" class="image">
        </div>
        <div class="button" @click.stop="skip">跳过</div>
    </div>
    <img class="support" src="{__WAP_PATH}zsff/images/crmeb_my.png">
    {include file="public/store_menu"}
</div>
<script>
    var site_name = '{$Auth_site_name}',isyue={$is_yue ? 'true' : 'false'},phone='{$phone}',isWechat='{$isWechat}';
    require(['vue', 'helper', 'store', 'layer', '{__WAP_PATH}zsff/js/enter.js'], function (Vue, $h, app, layer) {
        new Vue({
            el: '#app',
            data: {
                appear: true,
                codeUrl: '',
                isfollow: false,
                url: $h.U({ c: 'login', a: 'phone_check' }),
                site_name: site_name,
                isyue: isyue,
                phone: phone,
                isWechat: isWechat,
                menuList: []
            },
            created: function () {
                this.getMenu();
            },
            methods: {
                getMenu: function () {
                    var that = this;
                    $h.loadFFF();
                    app.baseGet($h.U({
                        c: 'my',
                        a: 'getPersonalCenterMenu'
                    }), function(res) {
                        $h.loadClear();
                        that.menuList = res.data.data;
                    }, function(err) {
                        $h.loadClear();
                    });
                },
                skip: function () {
                    this.isfollow = false;
                    this.appear = true;
                    setTimeout(function () {
                        window.location.reload();
                    }, 800);
                },
                loginClose: function () {
                    this.appear = true;
                },
                logComplete: function (data) {
                    var that = this;
                    if (!data.isfollow) {
                        this.codeUrl = data.url;
                        this.isfollow = true;
                        var qcode_id = data.qcode_id;
                        var interval = setInterval(function () {
                            app.baseGet($h.U({ c: 'index', a: 'qcode_login', q: { qcode_id: qcode_id } }), function (res) {
                                clearInterval(interval);
                                that.isfollow = false;
                                setTimeout(function () {
                                    window.location.reload();
                                }, 800);
                            }, null, true);
                        }, 1000);
                    } else {
                        that.appear = true;
                        window.location.reload();
                    }
                },
                goUrl: function (item,type) {
                    var that = this;
                    app.baseGet($h.U({ c: 'index', a: 'login_user' }), function (res) {
                        if(type==1){
                            window.location.href =item;
                        }else{
                            window.location.href = item.link;
                        }
                    }, function () {
                        that.appear = false;
                    });
                },
                memberUrl:function(){
                    var that = this;
                    app.baseGet($h.U({ c: 'index', a: 'login_user' }), function (res) {
                        window.location.href = $h.U({
                            c: 'special',
                            a: 'member_recharge'
                        });
                    }, function () {
                        that.appear = false;
                    });
                },
                //所有插件回调处理事件
                changeVal: function (opt) {
                    if (typeof opt != 'object') opt = {};
                    var action = opt.action || '';
                    var value = opt.value || '';
                    this[action] && this[action](value);
                },
                enter: function () {
                    this.appear = false;
                },
                change: function (title) {
                    this.appear = title;
                },
                logout: function () {
                    var that = this;
                    layer.confirm('确认退出登录？', {
                        title: false,
                        closeBtn: 0,
                        btn: ['确定', '取消']
                    }, function () {
                        app.baseGet($h.U({ c: 'my', a: 'logout' }), function (res) {
                            $h.pushMsgOnce(res.data.msg, function () {
                                location.reload();
                            });
                        });
                    });
                }
            }
        })
    })
</script>
{/block}