nd_h5/src/views/page.vue

<template>
  <div class="page" :class="{ isPCWeb: !isMobile }" :style="style">
    <template v-if="isMobile">
      <template v-if="!error">
        <v-view v-if="page" :options="page"></v-view>
        <div class="back" v-if="!isMain" @click="back">返回</div>
      </template>
      <div v-else class="notFound">
        <div class="mx-auto h-96 flex justify-center items-center text-white">您访问的资源不存在!</div>
      </div>
    </template>
    <div v-else class="flex items-center justify-center flex-col h-full">
      <div id="qr" class="w-52 h-52 mx-auto -mt-48 rounded-lg overflow-hidden" style="font-size: 0"></div>
      <p class="mt-2 text-sm text-white">请使用手机扫码进入</p>
    </div>
  </div>
</template>
<script>
import EventBus from '@/utils/eventBus.js';
import QR from '../plugins/qr';
import {fetch} from '@/api/page.js'

export default {
  data(){
    return {
      loading: false,
      backMain:false,
      page: undefined,
      isMain: false,
      background:"",
      interval: 3000,
      logo: "",
      uuid:'',
      style:'',
      nodeList: [],
      itemList: [],
      paperId: 1,
      nodeId: 0,
      slider: [],
      title: "",
      isMobile: /mobile/i.test(navigator.userAgent),
      error: false,
    }
  },
  computed: {
    loaded(){
      return this.$store.state.pages.loaded;
    }
  },
  watch: {
    loading(val) {
      EventBus.$emit('loading', val);
    },
    $route(){
      this.getPageInfo();
      setTimeout(() => window.scrollTo(0, 0), 0);
    }
  },
  created(){
    if(!this.loaded) {
      this.init();
    } else {
      this.getPageInfo();
    }
  },
  mounted(){
    if(!this.isMobile) {
      QR.ecclevel = 3;
      QR.size = 500;
      document.querySelector('#qr').append(QR.makeImage(location.href))
    }
  },
  methods: {
    getPageInfo() {
      const { data } = this.$store.state.pages;
      const { pages, main } = data;
      const { id = 'main'} = this.$route.params;
      let page = pages[id]||{};
      this.isMain = (id == 'main');
      this.page = { ...main, ...page };
      const { title } = this.page;
      title && (document.title = title);
    },
    init(){
      let {uuid, id} = this.$route.params;
      const { data } = this.$store.state.pages;
      if(data) {
        return this.getPageInfo();
      }
      this.backMain = (id != 'main');
      if(this.loading) return;
      this.loading = true;
      fetch("paper.getpaper", {uuid}).then((res) => {
        this.loading = false;
        this.$store.dispatch('setPage', res);
        res.title && (document.title = res.title);
        this.getPageInfo();
      }).catch((err) => {
        console.log("err", err)
        this.loading = false;
        this.error = true;
      })
    },
    back(){
      // 分享二级页面，回到主页
      if(this.backMain){
        this.$router.push({
          name: 'page',
          params: {
            id: 'main'
          }
        });
        this.backMain = false;
      }else{
        this.$router.back();
      }
    }
  }
}
</script>
<style lang="less">
.back {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 100;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.2);
}
.isPCWeb {
  background: #4c4c4c;
  height: 100vh;
  #qr {
    background: #fff;
    img {
      width: 100%;
    }
  }
}
</style>