123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301 |
- <!-- 底部-直播 -->
- <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>
|