onecric_h5/pages/Live/Live.vue

<!-- 底部-直播 -->
<template>
  <view class="live">
    <view class="navBar">
      <div class="top">
        <img class="logo" src="/static/logo_big.png" alt="" />
        <u--image
          class="border"
          :showLoading="true"
          :src="info.avatar || '/static/image/match/teams_avatar_ico@2x.png'"
          @click="go('/pages/Match/member/usermanger', true)"
          width="24px"
          height="24px"
          shape="circle"
        ></u--image>
      </div>
    </view>
    <div class="list-swiper" v-if="bannerList.length" :class="{'fadeInBtm': animationLoaded}">
      <swiper
        class="swiper"
        radius="24rpx"
        bgColor="#ffffff"
        circular
        previous-margin="30rpx"
        next-margin="30rpx"
        :indicator-dots="false"
        :autoplay="true"
        :interval="2000"
        :duration="500"
      >
        <swiper-item
          class="swiper-item"
          v-for="(item, index) in bannerList"
          :key="index"
          @click="swiperClick(item)"
        >
          <div class="img-box">
            <u--image
              mode="aspectFill"
              :showLoading="true"
              :src="item.img"
              width="100%"
              height="42.05vw"
            >
              <template v-slot:loading>
                <image
                  class="loading-banner-img"
                  src="/static/image/common/video-banner-bg.png"
                ></image>
              </template>
            </u--image>
          </div>
        </swiper-item>
      </swiper>
    </div>
    <tournamentList ref="tournamentList"></tournamentList>
    <div class="ad-list">
      <div class="item" v-for="item in adList" :key="item.id" @click="adClick(item)">
        <img class="ad" :src="item.img" alt="">
      </div>
    </div>
    <todayList ref="todayList"></todayList>
    <historyMainList></historyMainList>
    <div class="news-install">
      <install></install>
    </div>
  </view>
</template>

<script>
import todayList from "./compontent/todayList.vue";
import tournamentList from "./compontent/tournamentList.vue";
import historyMainList from "./compontent/historyMainList.vue";
import install from "@/components/install/install.vue";
import animationMixin from '@/pages/mixins/animation'
export default {
  components: {
    todayList,
    historyMainList,
    tournamentList,
    install,
  },
  mixins: [animationMixin],
  data() {
    return {
      bannerList: [],
      adList: [],
      liveList: [],
      current: 0,
      tokenIsLogin: "",
      homeShow: false,
      intervalTimer: null,
      homeList: [
        "Streamer application",
        this.$t("member.concerns"),
        this.$t("member.message"),
        this.$t("member.settings"),
      ],
    };
  },
  computed: {
    info() {
      return this.$store.state.info;
    },
    isLogin() {
      return this.$store.state.isLogin;
    },
  },
  onReachBottom() {
    // if(this.current == 0){
    // 	this.$refs['list'+this.current].getList(this.current)
    // }
  },
  created() {
    this.getBanner();
    this.getAd()
    this.intervalTimer = setInterval(() => {
      this.getBanner()
      this.$refs['tournamentList'].getList()
      this.$refs['todayList'].getList()
    }, 10000)
  },
  activated() {
    this.intervalTimer = setInterval(() => {
      this.getBanner()
      this.$refs['tournamentList'].getList()
      this.$refs['todayList'].getList()
    }, 10000)
  },
  deactivated() {
    clearInterval(this.intervalTimer)
    this.intervalTimer = null
  },
  methods: {
    getBanner() {
      uni.$u.http
        .get("/api/banner/getBannerList", {
          params: {
            banner_type: 1,
            type: 1,
          },
        })
        .then((res) => {
          this.bannerList = res || [];
        })
        .catch((res) => {
        }).finally(() => {
          if (this.animationLoaded) {
            return
          }
          this.animationLoaded = true
          this.$nextTick(() => {
            this.scrollFun()
          })
        })
    },
    getAd() {
      uni.$u.http
        .get("/api/banner/getBannerList", {
          params: {
            banner_type: 2,
          },
        })
        .then((res) => {
          this.adList = res || []
        })
        .catch((res) => {
        }).finally(() => {
        })
    },
    toUrl(url) {
      if (this.isLogin == 2) {
        this.$toUrl("/pages/login/login");
      } else {
        this.$toUrl(url);
      }
    },
    getList3() {
      let data = {
        type: 2,
      };
      uni.$u.http
        .get("/api/live_streaming/getLiveList", { params: data })
        .then((res) => {
          this.liveList = res.data || [];
        });
    },
    // 跳转个人中心
    userClick() {
      uni.navigateTo({
        url: "/pages/Match/member/infomation",
      });
    },
    go(url, login) {
      if (this.isLogin == 2 && login) {
        this.$toUrl('/pages/login/login')
        return
      }
      this.$toUrl(url)
    },
    adClick(item) {
      if (item.url) {
        uni.$u.http
        .post("/api/live_streaming/click_adv", {
          type: 2,
          id: item.id,
          url: item.url
        })
        .then((res) => {
        }).finally(() => {
        });
        window.open(item.url)
      }
    },
    swiperClick(item) {
      if (item.url) {
        uni.$u.http
        .post("/api/live_streaming/click_adv", {
          type: 1,
          id: item.id,
          url: item.url
        })
        .then((res) => {
        }).finally(() => {
        });
        window.open(item.url)
        return
      }
      if (item.anchor_id) {
        uni.navigateTo({
          url: `./live-detail?id=${item.anchor_id}&ID=${item.id}`,
        });
        return;
      }
      if (item.param_id) {
        uni.navigateTo({
          url: "/pages/Match/match-detail?id=" + item.param_id,
        });
        return;
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f3f3f7;
}
.live {
  padding-bottom: var(--window-bottom);
}
.navBar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #10044a;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8rpx 16px 16rpx;
    .border {
      border: 1px solid #cc2900;
      border-radius: 50%;
    }
  }
  .logo {
    height: 24px;
  }
}

.list-swiper {
  padding: 20rpx 0;
  .swiper {
    height: 42.05vw;
  }
  .swiper-item {
    padding: 0 12rpx;
    box-sizing: border-box;
  }
  .img-box {
    border-radius: 24rpx;
    overflow: hidden;
  }
}
.ad-list {
  .item {
    padding-top: 4.43vw;
    .ad {
      display: block;
      width: 100%;
    }
  }
}
.news-install {
  position: sticky;
  bottom: var(--window-bottom);
  z-index: 200;
}
</style>