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

<template>
  <div>
    <iframe hidden :src="setTokenPage"></iframe>
    <!-- 遮罩 -->
    <div class="zhezhao"></div>
    <!-- 设置默认弹窗 -->
    <div class="tanchuang szmoren">
      <div class="over"><img @click="guanbitc" class="right xs" src="/static/img/qiye/chahao.png" alt=""></div>
      <div v-if="moren">
        <div class="tc-text tc-queren"><span>是否确认设为默认企业？</span></div>
        <div class="tc-anniu">
          <button @click="setDefault">确认</button>
          <button @click="guanbitc">取消</button>
        </div>
      </div>
      <div v-else>
        <div class="tc-conent"><img src="/static/img/qiye/dengji@1x.png" alt=""></div>
        <div class="tc-text"><span>已设为默认企业</span></div>
      </div>
    </div>
    <!-- 开通sass服务弹窗 -->
    <div class="tanchuang ktsass">
      <div class="over"><img @click="guanbitc" class="right xs" src="/static/img/qiye/chahao.png" alt=""></div>
      <div v-if="ktsass">
        <div class="tc-text tc-queren"><span>是否确认开通saas服务？</span></div>
        <div class="tc-anniu">
          <button @click="confirmSaas">确认</button>
          <button @click="guanbitc">取消</button>
        </div>
      </div>
      <div v-else>
        <div class="tc-text tc-conent"><span>开通成功</span></div>
        <div style="margin-top: 40px;"><span @click="showServeWin" class="gs-btn1 dianji">进入服务</span></div>
      </div>
    </div>
    <!-- 该企业已开通服务弹窗 -->
    <div class="tanchuang qy-yikaitong" style="display: none">
      <div class="over"><img @click="guanbitc" class="right xs" src="/static/img/qiye/chahao.png" alt=""></div>
      <div>
        <div class="tc-okkaitong"><span>该企业已开通服务，联系管理员邀请加入</span></div>
        <div class="tc-context">
          <p><span>管理员：</span><span>飞飞</span></p>
          <p><span>管理员手机号：</span><span>123456566767</span></p>
          <p><span>管理员邮箱：</span><span>jjfdks@163.com</span></p>
        </div>
      </div>
    </div>
    <!-- 开通10个不能继续开通 -->
    <div class="tanchuang nokaitong" style="display:none">
      <div class="over"><img @click="guanbitc" class="right xs" src="/static/img/qiye/chahao.png" alt=""></div>
      <div>
        <div class="tc-conent"><img src="/static/img/qiye/buneng kaitong@1x.png" alt=""></div>
        <div class="tc-text">
          <p>您已开通了10个企业服务</p>
          <p>不能再继续开通服务</p>
        </div>
      </div>
    </div>

        <div class="gs-qiyebox">
            <!-- 点击查看企业详情 -->
            <div v-for="(d , i) in arr " :key="i" class="gs-xiangqing xs">
                <div class="left gs-xqleft" @click= "getEnterpriseInfo(d)">
                    <div class="gs-lefttext">
                        <p class="gs-qynema"><span>企业名称：</span>{{d.address}}</p>
                        <p><span>管理员：</span>{{d.name}}</p>
                        <p v-if= "d.time"><span>开通日期：</span>{{d.time}}</p>
                    </div>
                </div>
                <div class="right gs-xqright">
                    <div class="gs-border">
                        <span v-if= "d.saas_" class="gs-btn1 dianji" @click="selectServe(d.id)">进入服务</span>
                        <span v-else @click= "showOpenServeWin" class="gs-btn1 kaitong xs">开通服务</span>
                    </div>
                    <div>
                        <span v-if = "d.default_" class="gs-btn2 gs-btn3">默认企业</span>
                        <span v-else @click="showDefaultWin(i)" class="gs-btn2 xs">设为默认</span>
                        
                    </div>
                </div>
            </div>
            <div class="gs-xiangqing dotted">
                <p class="gs-tianja">
                    <span @click= "addEnterprise"><router-link to="/addenterprise">+添加企业</router-link></span>
                </p>
            </div>
        </div>
      </div>
</template>

<script>
 import Session from '@/utils/session'
    export default {
        data(){
            return {
                index:0,
                ktsass: true,//开通sass
                moren: true,//开通默认
                comdata: this.$store.state.data,//登录成功后的本地数据
                mytoken: JSON.parse(localStorage.getItem('app-state-session')),//本地储存的用户信息
                arr: []//企业列表信息
            }
        },
        computed :{
            setTokenPage() {
                return this.$url.web + '/set-token.html'
            }
        },
        mounted(){
            this.boxheight();
            // console.log("我是子路由的"+this.comdata)
            let mytoken = JSON.parse(localStorage.getItem('app-state-session'));
            let token = String(mytoken.token);
            // console.log(mytoken.account)
            console.log(this.$url.api)
            this.$ajax({
                    url: "/api/account/accountCenter/company/list",
                    method: 'get',
                    params: {
                        mobile: mytoken.account.mobile
                    },
                    headers: {
                        "Authorization":token,
                        "Content-Type":"application/x-www-form-urlencoded"
                    }
                })
                .then(res=>{
                    this.arr = res.data.data
                    // console.log(res.data.data)
                })
                .catch(err=>{
                    console.log("请求失败",err)
                })
        },
        methods: {
            //设置默认弹窗
            showDefaultWin(i){
                this.index = i;
                $(".szmoren").css("display","block");
                $(".zhezhao").css("display","block");
            },
            //确认默认
            setDefault(){
                let i = this.index;
                let token = this.mytoken.token;
                this.$ajax({
                    url: '/api/account/accountCenter/bind/defaultCompany',
                    method: 'post',
                    data:{
                        companyId: this.arr[i].id,
                        accountId: this.mytoken.account.id
                    },
                    headers: {
                        "Authorization":token,
                        // "Content-Type":'application/x-www-form-urlencoded'
                    }
                })
                .then(res=>{
                    // console.log('请求成功',res);
                    this.moren = false;
                })
                .catch(err=>{
                    console.log('请求失败',err);
                });
                
            },
            //进入服务
            selectServe(id){
                let token = this.mytoken.token;
                const frame = window.frames[window.frames.length - 1];
                this.$ajax({
                    url: '/api/auth/switch/company?companyId='+id,//http://192.168.253.31:8560
                    method :'get',
                    headers: {
                        "Authorization":token
                    }
                })
                .then(res=>{
                    let mytoken = res.data.data.token;
                    let session=JSON.parse(localStorage.getItem('app-state-session'));
                    session.account.companyId=id;
                    session.span = session.timestamp - new Date().getTime();
                    session.token=mytoken;
                    frame.postMessage(JSON.stringify(session), '*');
                    window.location.href = me.$url.web
                })
                .catch(err=>{
                    console.log('请求失败',err)
                })
            
            },
            //开通sass
            showOpenServeWin(){
                $(".ktsass").css('display','block');
                $(".zhezhao").css("display","block");
                this.ktsass = true;
            },
            confirmSaas(){//确认sass
                this.ktsass = false;
            },
            //进入服务
            showServeWin(){
                $(".ktsass").css('display','none');
                $(".zhezhao").css("display","none");
            },
            //查看企业详情
            getEnterpriseInfo(d){
                document.documentElement.scrollTop = 0;
                this.$router.push({path:'/details',query:{content:d}});
            },
             //添加企业
            addEnterprise(){
                document.documentElement.scrollTop = 0;
            },
            //关闭弹窗
            guanbitc(){
                $(".tanchuang").css("display","none");
                $(".zhezhao").css("display","none");
            },
            //没有内容也要有一定的高度
            boxheight(){
                let H = $(".gs-qiyebox").height();
                if (H <= 500) {
                    $(".gs-qiyebox").css("height",'500px')
                } else {
                    $(".gs-qiyebox").css("height",'')
                }
            },
        }
    }
</script>

<style scoped>
.zhezhao {
    display: none;
}
</style>