saas-platform/frontend/saas-portal-web/src/components/conenter/enterprise.vue

<template>
    <div class="div">
        <div id="navigation" class="navbar-inverse navbar-fixed-top animated-header">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <h1 class="navbar-brand">
                    <a href="#">
                        <img class="logo-img" src="/static/img/assets/dalogo@2x_1.png" alt="">
                    </a>
                </h1>
            </div>
            <div class="collapse navbar-collapse navbar-right" role="navigation">
                <ul id="nav" class="nav navbar-nav menu">
                    <li><router-link to="/home"><a href="#"><span style="color: white">首页</span></a></router-link></li>
                    <li><a href="https://uas.usoftchina.com/about" target="_blank"><span>关于我们</span></a></li>
                    <li style="margin-left:30px">
                        <span style="color:#fff;font-size: 16px;">
                            <img style="width: 20px;" src="/static/img/assets/denglu3x.png" alt="">
                            {{mytoken.realname}}
                        </span>
                        <a href=""><span @click="loginout">【退出】</span></a>
                    </li>
                </ul>
            </div>
        </div>
        </div>

        <iframe hidden :src="setTokenPage"></iframe>
        <div class="gs-worp">
            <!-- 顶部tab -->
            <div class="gs-tab">
                <ul>
                    <li class="xs" v-for="(btn , index) in tab" :key='index' :class= "{gsactive:nowindex == index}" @click= "tabswitch(index)">{{btn.name}}</li>
                </ul>
            </div>
            <div class="gs-none">
                <div :class= "{gsqiye:nowindex == 0}"> 
                    
    <!-- 企业列表展示-------添加企业-------------企业详细信息展示 ---------------------------- -->
                    <router-view></router-view>

                </div>
    <!-- 个人信息------------------------------------------------------------------- -->
                <div :class= "{gsqiye:nowindex == 1}">
                    <div class="over gr-worp" style="margin-bottom: 30px;">
                        <div class="left gr-left">
                            <img src="/static/img/qiye/yonghu@2x.png" alt="">
                        </div>
                        <div class="left gr-right">
                            <ul>
                                <li>
                                    <span>姓名</span><span>{{mytoken.realname}}</span>
                                </li>
                                <li>
                                    <span>UU号</span><span>{{mytoken.uu}}</span>
                                </li>
                                <li>
                                    <span>邮箱</span><span>{{mytoken.email}}</span>
                                </li>
                                <li>
                                    <span>手机号</span><span>{{mytoken.mobile}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
    <!-- 安全信息----------------------------------------------------------------------------- -->

                <div :class="{gsqiye:nowindex == 2}">
                    <div class="gs-anquanxinxi">
                        <div class="over aq-title"><span class="left">登录密码</span><button @click="changpasd" class="right dianji">更换密码</button></div>
                        <div class="aq-text">
                            <p>安全性高的密码可以使账号更安全，建议您定期更换密码，并且设置一个包含数字和字母，长度超过8位以上的密码。
                            </p>
                        </div>
                    </div>
                    <div class="gs-anquanxinxi">
                        <div class="over aq-title"><span class="left">手机验证</span><button @click="changphone" class="right dianji">修改手机号</button></div>
                        <div class="aq-text">
                            <p>您绑定的手机：{{mobile}}。若已丢失或停用，请立即更换，避免账户被盗。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import Session from '@/utils/session'
import { setTimeout } from 'timers';
    export default {
        data(){
            return{
                nowindex: 0,//tab切换
                tianjiaqiye: true,//添加企业切换
                mytoken: JSON.parse(localStorage.getItem('app-state-session')).account,//本地储存的用户信息
                mobile: null,
                tab: [
                    {name: '企业信息'},
                    {name: '个人信息'},
                    {name: '安全信息'},
                    ],
            }
        },
        mounted(){
            let mob = this.mytoken.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
            this.mobile = mob
        },
        computed :{
            setTokenPage() {
                return this.$url.web + '/set-token.html'
            },
        },
        methods: {
            // tab切换
            tabswitch(index){
                this.nowindex = index;
            },
            //退出
            loginout(){
                const frame = window.frames[window.frames.length - 1]
                frame.postMessage('', '*')
                Session.remove()
                window.location.href=this.$url.sso+'/logquit?appId=sp&returnURL='+window.location.origin
                // this.$router.puth({path:'/home'})
            },
            //修改密码
            changpasd(){
                window.location.href = 'https://sso.ubtob.com/reset/forgetPasswordValidationAccount?returnURL='+this.$url.web+'&appId=sp'
            },
            //修改手机号
            changphone(){
                window.location.href = 'https://sso.ubtob.com/validation/phoneValidation?returnURL='+this.$url.web+'&appId=sp'
            }
        },
    }
</script>

<style scoped>
    .div {
        padding-top: 100px;
        background: #FDFDFD;
    }
    .gsqiye div:last-child {
        margin-bottom: 100px;
    }
</style>