chat/_src/pages/h5/App.vue

<template>
  <div id="app">
    <div class="pub-title">MeeChat</div>
    <div class="router-wrap" :class="{'bottom': !navShow}">
      <router-view></router-view>
    </div>
    <div class="pub-nav" v-if="navShow">
      <router-link to="/" class="nav-item">
        <i class="chat-icon"></i>
        <span class="title">聊天</span>
      </router-link>
      <router-link to="/me" class="nav-item">
        <i class="me-icon"></i>
        <span class="title">我的</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import ScatterJS from 'scatter-js/dist/scatter.esm'
import { showError } from '@/util/util.js'
import { mapActions } from 'vuex'

export default {
  name: 'App',
  computed: {
    navShow () {
      return this.$route.name !== 'groupChat' && this.$route.name !== 'pmChat'
    }
  },
  methods: {
    ...mapActions([
      'setScatter',
      'setAccount',
      'doScatterLogin',
      'doContractLogin',
      'initSocket'
    ])
  },
  async created () {
    // 连接scatter
    ScatterJS.scatter.connect('MEE_CHAT').then(async connected => {
      if (connected) {
        // 设置scatter
        this.setScatter(ScatterJS.scatter)

        // 清空全局scatter引用
        window.ScatterJS = null

        try {
          // 调起scatter授权登录
          await this.doScatterLogin()
          // 签名登录
          await this.doContractLogin()

          await this.initSocket()
        } catch (error) {

        }
      } else {
        // 用户scatter未解锁
        showError(this.$t('installScatter'), 'Scatter')

        this.setAccount('')
      }
    })
  }
}
</script>

<style lang="scss">
@import '@/style/base.scss';
@import '@/style/h5.scss';

.router-wrap{
  position: fixed;
  top: px2rem(86);
  left: 0;
  right: 0;
  bottom: px2rem(104);
  overflow: auto;
  background-color: #f2f2f2;
  &.bottom{
    bottom: 0;
  }
}
.pub-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: px2rem(106);
  background-color: #fafafa;
  border-top: 1px solid #e5e5e5;
  display: flex;
  .chat-icon{
    background: url('../../assets/h5/nav-chat-icon1.png') no-repeat;
    width: px2rem(48);
    height: px2rem(41);
    background-size: 100%;
  }
  .me-icon{
    background: url('../../assets/h5/nav-me-icon1.png') no-repeat;
    width: px2rem(37);
    height: px2rem(41);
    background-size: 100%;
  }
  .title{
    display: block;
    text-align: center;
    font-size: px2rem(20);
    color: #a5b5ce;
    margin-top: px2rem(10);
  }
  .nav-item{
    flex: 1;
    box-sizing: border-box;
    padding-top: px2rem(22);
    text-decoration: none;
    &.router-link-exact-active{
      .chat-icon{
        background: url('../../assets/h5/nav-chat-icon.png') no-repeat;
        background-size: 100%;
      }
      .me-icon{
        background: url('../../assets/h5/nav-me-icon.png') no-repeat;
        background-size: 100%;
      }
      .title{
        color: #32a1f7;
      }
    }
    i{
      display: block;
      margin: 0 auto;
    }
  }
}
</style>