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

<template>
    <div class="div" @click="onshezhi">
        <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;margin-top: 13px;cursor: pointer;">
                        <span style="color:#fff;font-size: 16px;">
                            <img style="width: 20px;" src="/static/img/assets/denglu3x.png" alt="">
                            {{mytoken.realname || mytoken.username}}
                        </span>
                        <span style="color:#fff;" @click="loginout">【退出】</span>
                    </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 v-if="ismodifyname" 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>
                                    <button class="modifyname dianji" @click="modify">修改</button>
                                </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 v-else 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" style="margin-bottom: 30px;">
                            <ul>
                                <li>
                                    <span><span class="xinghao" style="width:5px">*</span>姓名</span>
                                    <input @change="regname" class="realname" type="text" ref="realname" :value="mytoken.realname">
                                    <p class="usname" ref="usname"></p>
                                </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>
                                <li>
                                    <button class="baocun dianji" @click="Preservation">保存</button>
                                    <button class="qy-quxiao quxiao" @click="cancel">取消</button>
                                </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 :class="{gsqiye:nowindex == 3}">
                    我是消息页面
                </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,
                ismodifyname:true,
                isname:true,//姓名验证
                reg: new RegExp(/[\@\#\$\%\&\*!\￥]/),//非法字符
                tab: [
                    {name: '企业信息'},
                    {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 = this.$url.sso+'/reset/forgetPasswordValidationAccount?returnURL='+this.$url.web+'&appId=sp'
            },
            //修改手机号
            changphone(){
                window.location.href = this.$url.sso+'/validation/phoneValidation?returnURL='+this.$url.web+'&appId=sp'
            },
            //修改姓名
            modify(){
                this.ismodifyname = false
            },
            //取消修改姓名
            cancel(){
                this.ismodifyname = true
            },
            regname(){
                let name = this.$refs.realname.value.replace(/\s+/g, "");
                if (name == '') {
                    this.$refs.usname.innerHTML = '个人姓名不能为空'
                    this.isname = false
                } else {
                    this.isname = true
                    if (this.reg.test(name)) {
                        this.$refs.usname.innerHTML = '不能包含非法字符'
                        this.isname = false
                    } else {
                        this.$refs.usname.innerHTML = ''
                        this.isname = true
                    }
                }
            },
            // 保存修改姓名
            Preservation(){
                if (this.isname) {
                    let name = this.$refs.realname.value.replace(/\s+/g, "");
                    console.log(name)
                }
            },
            onshezhi(){
                this.$store.state.ismoren = '';
                this.$store.state.issaasxiangxi = ''
            },
        },
    }
</script>

<style scoped>
.div {
    padding-top: 100px;
    background: #FDFDFD;
}
.gsqiye div:last-child {
    margin-bottom: 100px;
}
.modifyname {
    margin-left: 80px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0.25px;
    text-align: center;
    padding: 5px 20px;
    background: #1E88F5;
    border-radius: 2px;
    border: 0
}
.baocun {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0.25px;
    text-align: center;
    padding: 5px 26px;
    background: #1E88F5;
    border-radius: 2px;
    border: 0
}
.quxiao {
    padding: 5px 26px;
    margin-left: 30px
}
.realname {
    margin-left: -5px;
    padding-left: 5px;
}
.usname {
    height: 0px;
    margin-left: 85px;
    color: red;
    font-size: 12px;
}
.xinghao {
    float: left;
    margin-left: -10px;
    color: red;
}
</style>