zhishifufei_php/application/web/view/my/index.html

<!-- +---------------------------------------------------------------------- -->
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者，助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed 该系统并不是自由软件，未经许可不能去掉相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name="title"}个人中心{/block}
{block name="app"}
<div v-cloak id="app" class="my">
    <base-header :public-data="publicData" :user-info="userInfo"></base-header>
    <div class="main">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a :href="$router.home">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item>个人中心</el-breadcrumb-item>
            <el-breadcrumb-item>{{ breadcrumb }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="user">
            <el-avatar v-if="userInfo" :size="84" :src="userInfo.avatar"></el-avatar>
            <div v-if="userInfo" class="inner">
                <div class="name">
                    {{ userInfo.nickname }}
                    <div v-if="userInfo.is_permanent" class="vip">永久会员</div>
                    <div v-else-if="userInfo.level" class="vip">{{ userInfo.overdue_time }} 到期</div>
                    <div v-else-if="userInfo.member_time" class="vip">会员已过期</div>
                    <div v-else class="vip">未开通会员</div>
                </div>
                <div>ID：{{ userInfo.uid }}</div>
            </div>
            <el-button round @click="logout">退出登录</el-button>
        </div>
        <el-tabs v-model="activeName">
            <el-tab-pane v-for="item in tabs" :key="item.value" :label="item.name" :name="item.value">
                <keep-alive>
                    <component :is="'my-' + item.value" :is-login="isLogin" :active-name="activeName" :user-info="userInfo || {}" :is-yue="!!is_yue" :is-alipay="!!is_alipay"
                               :is-wechat="!!is_wechat" :now-money="userInfo && userInfo.now_money">
                    </component>
                </keep-alive>
            </el-tab-pane>
        </el-tabs>
    </div>
    <base-footer :user-info="userInfo" :public-data="publicData"></base-footer>
    <base-login :public-data="publicData" :agree-content="agreeContent"></base-login>
    <base-agree :agree-content="agreeContent"></base-agree>
    <account-change :current-phone="userInfo && userInfo.phone"></account-change>
</div>
{/block}
{block name="vm"}
<script>
    require([
        'vue',
        'ELEMENT',
        'components/base-header/index',
        'components/base-footer/index',
        'components/base-login/index',
        'components/base-agree/index',
        'components/account-change/index',
        'components/my/account/index',
        'components/my/special/index',
        'components/my/member/index',
        'components/my/balance/index',
        'components/my/material/index',
        'components/my/currency/index',
        'components/my/favorite/index',
        'components/my/activity/index',
        'components/my/lecturer/index',
        'components/my/question/index',
        'components/my/wrong/index',
        'api/home',
        'api/login',
        'mixins/base',
        'scripts/util',
        'router/index'
    ], function (
        Vue,
        ELEMENT,
        BaseHeader,
        BaseFooter,
        BaseLogin,
        BaseAgree,
        AccountChange,
        MyAccount,
        MySpecial,
        MyMember,
        MyBalance,
        MyMaterial,
        MyCurrency,
        MyFavorite,
        MyActivity,
        MyLecturer,
        MyQuestion,
        MyWrong,
        homeApi,
        loginApi,
        baseMixin,
        util,
        router
    ) {
        Vue.use(ELEMENT);
        Vue.use(router);
        new Vue({
            el: '#app',
            components: {
                'base-header': BaseHeader,
                'base-footer': BaseFooter,
                'base-login': BaseLogin,
                'base-agree': BaseAgree,
                'account-change': AccountChange,
                'my-account': MyAccount,
                'my-special': MySpecial,
                'my-member': MyMember,
                'my-balance': MyBalance,
                'my-material': MyMaterial,
                'my-currency': MyCurrency,
                'my-favorite': MyFavorite,
                'my-activity': MyActivity,
                'my-lecturer': MyLecturer,
                'my-question': MyQuestion,
                'my-wrong': MyWrong,
            },
            mixins: [baseMixin],
            provide: function () {
                return {
                    logout: this.logout,
                    getUserInfo: this.getUserInfo,
                    getUserLogin: this.getUserLogin
                };
            },
            data: {
                is_yue: {$is_yue},
                is_alipay: {$is_alipay},
                is_wechat: {$is_wechat},
                tabs: [
                    {
                        name: '账户管理',
                        value: 'account'
                    },
                    {
                        name: '我的课程',
                        value: 'special'
                    },
                    {
                        name: '会员中心',
                        value: 'member'
                    },
                    {
                        name: '我的余额',
                        value: 'balance'
                    },
                    {
                        name: '资料下载',
                        value: 'material'
                    },
                    {
                        name: '金币充值',
                        value: 'currency'
                    },
                    {
                        name: '我的收藏',
                        value: 'favorite'
                    },
                    {
                        name: '我的活动',
                        value: 'activity'
                    },
                    {
                        name: '我的关注',
                        value: 'lecturer'
                    },
                    {
                        name: '考题评测',
                        value: 'question'
                    },
                    {
                        name: '我的错题',
                        value: 'wrong'
                    }
                ],
                activeName: 'account'
            },
            computed: {
                breadcrumb: function () {
                    var vm = this;
                    var tab = this.tabs.find(function (tab) {
                        return tab.value === vm.activeName;
                    });
                    return tab.name;
                }
            },
            watch: {
                activeName: function () {
                    this.getUserLogin();
                }
            },
            created: function () {
                var vm = this;
                var activeName = util.getParmas('activeName');
                if (activeName) {
                    this.activeName = activeName;
                }
            },
            methods: {
                // 退出登录
                logout: function () {
                    var vm = this;
                    loginApi.logout().then(function (res) {
                        window.location.assign(res.data);
                    }).catch(function (err) {
                        vm.$message.error(err.msg);
                    });
                }
            }
        });
    });
</script>
{/block}