H5_Embedded_Page/src/view/live/index.vue

<template>
  <div style="height: 100vh;padding-bottom: 50px">
    <router-view class="basePage" v-if="douyin || kuaishou" :key="routerKey" />
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item v-if="douyin">抖音</van-tabbar-item>
      <van-tabbar-item v-if="kuaishou">快手</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar as vanTabbar, TabbarItem as vanTabbarItem } from "vant";
import "vant/lib/tabbar/style";
import "vant/lib/tabbar-item/style";
export default {
  name: "App",
  components: {
    vanTabbar,
    vanTabbarItem,
  },
  data() {
    return {
      routerData: {},
      tablist: [],
      active: 0,
      douyin: false,
      kuaishou: false,
    };
  },
  computed: {
    routerKey() {
      let date = new Date();
      return this.routerData.path + date.getTime();
    },
  },
  mounted() {
    let q = this.$route.query || {};
    q.douyin === "true" ? (this.douyin = true) : (this.douyin = false);
    q.kuaishou === "true" ? (this.kuaishou = true) : (this.kuaishou = false);
    if (!this.douyin && !this.kuaishou) return;
    this.douyin && this.tablist.push("douyin");
    this.kuaishou && this.tablist.push("kuaishou");
    let path = "";
    if (q.douyin === "true") path = "/live/douyin";
    else if (q.kuaishou === "true") path = "/live/kuaishou";
    if (path == "/live/kuaishou")
      this.$router.push({
        path,
        query: {
          id: q.id,
          title: q.title,
          platform:
            q.douyin === "true"
              ? "douyin"
              : q.kuaishou === "true"
              ? "kuaishou"
              : "",
          kuaishou: q.kuaishou,
          douyin: q.douyin,
        },
      });
  },
  created() {},
  methods: {
    onChange(res) {
      let q = this.$route.query;
      this.$router.push({
        path: "/live/"+ this.tablist[res || 0],
        query: {
          id: q.id,
          title: q.title,
          platform: this.tablist[res || 0],
          kuaishou: q.kuaishou,
          douyin: q.douyin,
        },
      });
    },
  },
};
</script>

<style lang="sass" scoped></style>