dvcp_v2_webapp/examples/App.vue

<template>
  <div id="app">
    <header-nav v-if="showTools" title="web端产品库">
      <template #right>
        <mock/>
        <div @click="showTools=false,dvDev=true">大屏开发</div>
        <div @click="showTools=false">隐藏工具栏</div>
        <div @click="handleLogin">点此登录</div>
      </template>
    </header-nav>
    <ai-dv-wrapper class="fill" v-if="dvDev">
      <router-view v-bind="commonAttrs"/>
    </ai-dv-wrapper>
    <el-row v-else-if="showTools" class="fill mar-t48" type="flex">
      <slider-nav/>
      <main-content class="fill" :commonAttrs="commonAttrs"/>
    </el-row>
    <router-view class="fill" v-else v-bind="commonAttrs"/>
    <div v-if="dialog" class="sign-box">
      <ai-sign style="margin: auto" :instance="$request" :action="{login}"
               visible @login="getToken" :showScanLogin="false"/>
    </div>
    <el-button type="info" v-if="!showTools" class="fixedBtn" @click="showTools=true">显示工具栏</el-button>
  </div>
</template>

<script>
import SliderNav from "./components/sliderNav";
import MainContent from "./components/mainContent";
import HeaderNav from "./components/headerNav";
import {mapActions, mapMutations, mapState} from "vuex";
import Mock from "./components/mock";
import AiDvWrapper from "dui/dv/layout/AiDvWrapper/AiDvWrapper.vue";

export default {
  name: 'app',
  components: {AiDvWrapper, Mock, HeaderNav, MainContent, SliderNav},
  computed: {
    ...mapState(['user']),
    login() {
      let url = '/auth/oauth/token';
      /project\/sass/g.test(location.pathname) && (url += "?corpId=ww596787bb70f08288")
      return url
    },
    commonAttrs() {
      return {
        instance: this.$request,
        dict: this.$dict,
        permissions: this.$permissions
      }
    }
  },
  data() {
    return {
      dialog: false,
      showTools: true,
      dvDev: false
    }
  },
  watch: {
    showTools(v) {
      v && (this.dvDev = false)
    }
  },
  methods: {
    ...mapMutations(['setToken']),
    ...mapActions(['getUserInfo', 'getFinanceUser']),
    getToken(params) {
      if (params.access_token) {
        this.setToken([params.token_type, params.access_token].join(' '))
        this.dialog = false
        this.$message.success("登录成功,正在刷新页面...")
        location.reload()
      } else this.$message.error(params.msg || "登录失败!")

    },
    handleLogin() {
      this.$request.delete("/auth/token/logout").finally(() => {
        this.dialog = true
      })
    },
    handleMock() {
    }
  },
  created() {
    const {jWeixin} = window
    window.wx = jWeixin
    if (this.user.token) this.getUserInfo().finally(() => {
      if (/^\/project\/xiushan/.test(location.pathname)) {
        this.getFinanceUser()
      }
    })
  }
}
</script>

<style lang="scss">
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.mar-t48 {
  margin-top: 48px;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .fixedBtn {
    position: fixed;
    top: 0;
    right: 60px;
    opacity: 0;
    z-index: 999;

    &:hover {
      opacity: 1;
    }
  }

  li {
    list-style-type: none;
  }

  .sign-box {
    z-index: 99;
    margin: -10px;
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
  }
}

</style>