h5-dangjian/src/pages/detail/AppDetail/Index.vue

<template>
  <div id="AppDetail" :class="{ app: true, block: type === 1 }">
    <div class="sk" v-if="loda">
      <van-skeleton title :row="15" />
    </div>
    <component
      v-if="id"
      :is="detailData.videoFlag"
      :item="detailData"
      :id="id"
    ></component>
  </div>
</template>

<script>
import A from "@/components/Detail/news.vue";
import V from "@/components/Detail/video.vue";
import U from "@/components/Detail/audio.vue";
import { Skeleton as vanSkeleton } from "vant";
import "vant/lib/skeleton/style";
import { currentUrlToParams, setToken } from "@/utils/common.js";
import { articleDetail } from "@/api/article/article.js";

export default {
  name: "app",
  data: function() {
    return {
      loda: true,
      detailData: {},
      id: undefined,
      type: undefined
    };
  },
  methods: {},
  mounted() {
    this.$pageParams = currentUrlToParams();
    this.type = this.$pageParams.pattern - 0;
    this.$pageParams.token && setToken(this.$pageParams.token);
    window.Progress = function() {
      return this.progress + "";
    };
    articleDetail(this.$pageParams.id, true).then(res => {
      this.detailData = res || {};
      this.loda = false;
      this.id = this.$pageParams.id;
    });
  },
  beforeDestroy: function() {},
  components: { A, V, U, vanSkeleton }
};
</script>
<style lang="scss">
html,
body {
  height: auto !important;
  overflow: auto !important;
}
#AppDetail {
  .sk {
    padding: 2em 0;
  }
}
</style>