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

<template>
    <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><a href="#"><span>首页</span></a></li>
            <li><a href="https://www.usoftchina.com/" target="_blank"><span>优软云</span></a></li>
            <li>
              <a href="#feature"><span>特色</span></a>
              <!-- <router-link to="/enterprise"><a href="#"><span>特色</span></a></router-link> -->
            </li>
            <li><a href="#service"><span>功能</span></a></li>
            <!-- <li><a href="#prototype"><span>帮助中心</span></a></li> -->
            <li><a href="https://uas.usoftchina.com/about" target="_blank"><span>关于我们</span></a></li>
            <li class="login" v-if="!account" style="margin-left: 30px;">
              <span @click="login"><img src="/static/img/assets/denglu3x.png" alt="">登录  &nbsp;</span>
              <span @click="register"><img src="/static/img/assets/zhuce3x.png" alt="">注册</span>
            </li>
            <li class="profile" v-if="account">
							<span class="user-info">
								<img src="/static/img/assets/denglu3x.png" alt="">
								<span id="user-info">{{account.realname || account.username}}</span>
							</span>
              <span @click="loginout">【退出】</span>    |
              <router-link to="/enterprise"><a href="#"><span style="color: white">账户中心</span></a></router-link>
            </li>
          </ul>
        </div>
        </div>
        
    </div>

    <iframe hidden :src="setTokenPage"></iframe>
    <main class="site-content" role="main">
      <!-- 遮罩 -->
      <div class="zhezhao" v-if="isLogin || isRegister || isexperience"></div>
      <div class="box" v-if="isLogin || isRegister">
        <div>
          <img @click="closeModal" class="tc-on shut"
               src="/static/img/qiye/chahao.png" alt="">
        </div>
        <iframe id="iframe" width="430" height="504" :src="ssoPage"></iframe>
        <iframe hidden :src="setTokenPage"></iframe>
      </div>

      <!-- 体验弹窗 -->
      <div class="tiyan" v-if="isexperience">
        <img @click="Closeexperience" class="tc-on ty-out" src="/static/img/qiye/x.png" alt="" />
        <div><img class="ty-logo" src="/static/img/assets/dalogo@2x.png" alt=""></div>
        <!-- <div><p class="ty-logotxt">欢迎你访问U企云服</p></div> -->
        <!-- <div class="ty-title"><span>填写手机号后，即刻体验电子行业贸易版所有功能</span></div> -->
        <div class="ty-phone over">
          <div class="left ty-input">
            <span><img style="margin: 6px 8px 10px 15px;" src="/static/img/assets/phone.png" alt=""></span>
            <input ref="typhone" type="text" placeholder="请输入您的11位手机号">
          </div>
          <div class="left" style="margin-left: 8px;"><button @click="experience1">立即体验</button></div>
        </div>
        <div style="text-align: left;">
          <span class="Caution" ref="Caution"></span>
        </div>
        <div class="contact">
          <span>客服电话：400-830-1818</span>
        </div>
      </div>

      <!--Home Slider==================================== -->
      <section id="home-slider">
        <div id="slider" class="sl-slider-wrapper">
          <div class="sl-slider">

            <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25"
                 data-slice1-scale="2" data-slice2-scale="2">
              <div class="mask-overly"></div>
              <div class="bg-img slider-1">
                <img src="/static/img/banner@3x@2x.png" alt="">
              </div>
              <!-- 首页内容 -->
              <div class="my-text">
                <button class='my-tiyan' @click="experience">立即体验</button>

              </div>
              <div class="slide-caption">
                <div class="caption-content"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- End Home SliderEnd==================================== -->

      <!-- 特色 -->
      <section id="feature">
        <div class="container ts-worp">
          <div class="section-title text-center">
            <p class="ts-title">我们的特色</p>
            <p class="ts-text">云端部署 &nbsp;&nbsp; 轻量应用</p>
          </div>
          <div class="ts-box">
            <div>
              <img class="ts-img" src="/static/img/assets/1@2x.png" alt="">
            </div>
          </div>
          <div class="ts-box">
            <div>
              <img class="ts-img" src="/static/img/assets/2@3x.png" alt="">
            </div>
          </div>
          <div class="ts-box">
            <div>
              <img class="ts-img" src="/static/img/assets/3@2x.png" alt="">
            </div>
          </div>
        </div>
      </section>

      <!-- Service section 功能-->
      <section id="service">
        <div class="container" style="position: relative;">
          <img class="gn-beijing" src="/static/img/gongneng/xu xian@3x.png" alt="">
          <div class="row">
            <div class="section-title text-center" style="margin-bottom: 80px;">
              <p class="ts-title">我们的功能</p>
            </div>
            <div class="gn-hei">
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="service-item">
                  <p class="gn-text gn-color">任务管理</p>
                  <p>任务分配，高效工作</p>
                  <p>管好每一件事</p>
                  <div class="gn-img">
                    <img src="/static/img/gongneng/ren wu 1@3x.png" alt="">
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="service-item">
                  <p class="gn-text">资源管理</p>
                  <p>一键查询，海量供应商产品信息</p>
                  <p>节约时间</p>
                  <div class="gn-img gn-huise">
                    <img src="/static/img/gongneng/zi yuan 2@3x.png" alt="">
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="service-item">
                  <p class="gn-text">销售管理</p>
                  <p>快速制单</p>
                  <p>利润实时算</p>
                  <div class="gn-img">
                    <img src="/static/img/gongneng/ xiao shou 3@3x.png" alt="">
                    <div class="gn-xiaoqiu"></div>
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="service-item">
                  <p class="gn-text">采购管理</p>
                  <p>寻源.定价.采购</p>
                  <p>一条流程</p>
                  <div class="gn-img gn-huise">
                    <img src="/static/img/gongneng/cai gou 4@3x.png" alt="">
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="service-item">
                  <div class="gn-img gn-huise">
                    <img src="/static/img/gongneng/cang ku 5@3x.png" alt="">
                    <div class="gn-xiaoqiu"></div>
                  </div>
                  <p class="gn-text">仓库管理</p>
                  <p>库存盘点，库存账龄</p>
                  <p>呆滞分析</p>
                </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="service-item">
                  <div class="gn-img">
                    <img src="/static/img/gongneng/jia gong 6@3x.png" alt="">
                  </div>
                  <p class="gn-text">加工管理</p>
                  <p>BOM成本及时看</p>
                  <p>加工单自动出入库作业</p>
                </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="service-item">
                  <div class="gn-img gn-huise">
                    <img src="/static/img/gongneng/QIAN BAO 7@3x.png" alt="">
                  </div>
                  <p class="gn-text">资金管理</p>
                  <p>清晰核算</p>
                  <p>实时查看供应商和客户账款情况</p>
                </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="service-item">
                  <div class="gn-img">
                    <img src="/static/img/gongneng/FEN XI 8@3x.png" alt="">
                    <div class="gn-xiaoqiu gn-left"></div>
                  </div>
                  <p class="gn-text gn-color">智能分析</p>
                  <p>直观数据看板，看库存分析</p>
                  <p>收款分析，付款分析</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- end Service section -->

      <!-- 帮助中心 -->
      <!-- <section id="prototype">
        <div class="container">
          <div class="row">
            <div class="section-title text-center">
              <p class="ts-title">帮助中心</p>
            </div>
            <div class="bz-worp">
              <div class="bz-box">
                <div class="bz-sskuang">
                  <span><img class="bz-sousuoimg" src="/static/img/assets/sou.png" alt=""></span>
                  <input class="bz-sousuo" type="text" placeholder="输入标题搜索"/>
                </div>
                <button class="bz-btn">搜索</button>
              </div>
              <div class="bz-content">
                <div class="bz-left">
                  <ul class="bz-ul">
                    <li v-for="(d,i) in arr" :key="i" :class= "{active:Nowindex == i}" @click="tab(i)">{{d}}</li>
                  </ul>
                </div>
                <div class="bz-right">
                  <div class="bz-right-conent">
                    <div :class= "{shows:Nowindex == 0}">
                      <ul>
                        <li>
                          <span class="left bz-yuandian"></span>
                          <span class="left">方式不同吧好像是差不多 </span>
                          <span class="right">2018年10月31日  12:00</span>
                        </li>
                        <li>
                          <span class="left bz-yuandian"></span>
                          <span class="left">XXXXXXXXXXXXXXX操作文档</span>
                          <span class="right">2018年10月31日  12:00</span>
                        </li>
                        <li>
                          <span class="left bz-yuandian"></span>
                          <span class="left">XXXXXXXXXXXXXXX操作文档</span>
                          <span class="right">2018年10月31日  12:00</span>
                        </li>
                      </ul>
                    </div>
                    <div :class= "{shows:Nowindex == 1}">
                      <ul>
                        <li>
                          <span class="left bz-yuandian"></span>
                          <span class="left">方式不同吧好像是差不多哇来访黑哇哦发检测句ID回复开展了好xxxxx常见问题 </span>
                          <span class="right">2018年11月24日  12:00</span>
                        </li>
                        <li>
                          <span class="left bz-yuandian"></span>
                          <span class="left">方式不同吧好像是差不多哇来访黑哇哦发检测句ID回复开展了好xxxxx常见问题</span>
                          <span class="right">2018年11月24日  12:00</span>
                        </li>
                        <li>
                          <span class="left bz-yuandian"></span>
                          <span class="left">XXXXXXXXXXXXXXX常见问题</span>
                          <span class="right">2018年11月24日  12:00</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section> -->
    </main>
  </div>
</template>

<script>
  import {subscribe, disconnect} from '@/api/socket'
  import Session from '@/utils/session'
  import { setTimeout } from 'timers'

  export default {
    data() {
      return {
        isLogin: false,
        isRegister: false,
        clientId: null,
        account: null,
        isexperience: false,
        arr: ["操作文档","常见手册"],
        Nowindex: 0,
      }
    },
    mounted() {
      this.clientId = Math.random().toString(36).substr(2)
      // 从本地加载已经登录的信息
      this.account = Session.getAccount()
    },
    computed: {
      setTokenPage() {
        return this.$url.web + '/set-token.html'
      },
      ssoPage() {
        if (this.isLogin) {
          return this.$url.sso + '/sassLogin?appId=sp&baseUrl=' +
            encodeURIComponent(this.$url.api + '/api/auth/sso/callback/' + this.clientId)
        }
        if (this.isRegister) {
          return this.$url.sso + '/sassLogin/register?appId=sp&baseUrl=' +
            encodeURIComponent(this.$url.api + '/api/auth/sso/callback/' + this.clientId)
        }
      }
    },
    methods: {
      tab(i){
        this.Nowindex = i;
      },
      home() {
        document.documentElement.scrollTop = 0;
      },
      listenOnCallback() {
        const me = this
        subscribe(this.clientId, '/sso/callback').then(data => {
          const session = data.token, account = data.account
          account.companies = account.companies || []
          session.account = account
          Session.set(session)
          const frame = window.frames[window.frames.length - 1]
          window.addEventListener('message', () => {
           if(me.isLogin){
            me.isLogin = false
            if (!account.companyId) {
              // 添加企业
              me.$router.push({path: '/enterprise', query: {mydata: account}})
              me.$store.commit('Logintrue')
            } else {
              // 跳转应用页面
              window.location.href = me.$url.web
            }
           } 
          }, false)
          frame.postMessage(JSON.stringify(session), '*')
        })
      },
      login() {
        // 显示账户中心登录窗口
        this.isLogin = true
        // 监听账户中心回调消息
        this.listenOnCallback()
      },
      register() {
        this.isRegister = true
        this.listenOnCallback()
      },
      //退出
      loginout(){
        const frame = window.frames[window.frames.length - 1]
        frame.postMessage('', '*')
        Session.remove()
        this.$router.go(0); 
      },
      // 关闭窗口
      closeModal() {
        const me = this
        disconnect( () => {
          me.isLogin = false
          me.isRegister = false
        })
      },
      //体验
      experience(){
        this.isexperience = true;
      },
      //关闭体验
      Closeexperience(){
        this.isexperience = false;
      },
      //进入体验
      experience1(){
        let me = this
        let phone = this.$refs.typhone.value;
        let reg = new RegExp('^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\\d{8}$')
        if (phone == '') {
          this.$refs.Caution.innerHTML = '号码不能为空'
          setTimeout(()=>{
            this.$refs.Caution.innerHTML = ''
          },3000)
        } else {
          if (!reg.test(phone)) {
            this.$refs.Caution.innerHTML = '请输入正确的手机号码'
            setTimeout(()=>{
              this.$refs.Caution.innerHTML = ''
            },3000)
          } else {
            this.$refs.Caution.innerHTML = ''
            this.$ajax({
              url: this.$url.api+'/api/auth/virtual/authorize/'+phone,
              method: 'post',
            })
             .then(res=>{
                const session = res.data.data.token, account = res.data.data.account
                let companyId = account.companies[0].id
                account.companies = account.companies || []
                account.companyId=companyId;
                session.account = account
                const frame = window.frames[window.frames.length - 1]
                frame.postMessage(JSON.stringify(session), '*')
                window.location.href = me.$url.web
                // console.log("请求成功",res)
                phone = ''
            })
            .catch(err=>{
                // console.log("请求失败",err)
            })
          }
        } 
      },
    }
  }
</script>

<style scoped>
.shows {
  display: block !important;
}
.bz-right-conent div {
  display: none;
}
.shut {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}
.navbar-inverse {
  padding: 0px;
}

/* 体验 */
.tiyan {
  position: fixed;
  top: 50%;
  left: 50%;
	width: 640px;
	height: 283px;
	margin-left: -320px;
  margin-top: -141px;
  z-index: 10001;
  background: white;
  padding: 24px;
  text-align: center;
  border-radius: 2px;
}
.ty-out {
    cursor: pointer;
    float: right;
}
.ty-logo {
  width: 140px;
  margin: 15px 0 50px 13px;
}
.ty-logotxt {
  font-family: PingFangSC-Regular;
  font-size: 22px !important;
  color: #059FFE;
}
.ty-title {
  margin-top: 30px;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #059FFE;
  text-align: center;
}
.ty-input {
  width: 330px;
  height: 40px;
  line-height: 40px;
  text-align: left;
  background: rgba(32,53,128,0.01);
  border: 1px solid #D8DCE8;
  border-radius: 3px;
  margin-left: 69px;
}
.ty-phone {
  margin: 8px 0;
  margin-bottom: 0;
}
.ty-phone input{
  outline:none;
  border: 0;
  height: 30px;
  font-size: 14px;
  width: 80%;
}
.ty-phone button{
  background-image: linear-gradient(-90deg, #007EE5 0%, #05B3FF 100%, #5533FF 100%);
  border-radius: 3px;
  color: white;
  width: 125px;
  height: 40px;
  border: 0;
}
.contact {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #059FFE;
  text-align: center;
}
.Caution {
  color: red;
  margin-left: 110px;
  font-size: 12px;
  display: inline-block;
  height: 16px;
}
</style>