123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307 |
- <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/[email protected]'"
- @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="top">
- <img class="live-img" v-if="item.islive == 1" src="/static/image/game/live.png" alt="">
- <div class="flex">
- <img class="icon_view" src="/static/image/game/icon_view.png" alt="">
- {{ numberToK(item.viewers) || 0 }}
- </div>
- </div>
- <div class="img-box">
- <u--image
- mode="aspectFill"
- :showLoading="true"
- :src="item.thumb"
- 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>
- <div class="bottom">
- <u--image
- class="avatar"
- :src="item.avatar"
- shape="circle"
- width="78rpx"
- height="78rpx"
- ></u--image>
- <div>
- <div class="text-clamp">{{ item.title }}</div>
- <div>{{ item.user_nickname }} ・ {{ getTimeAgo(item.addtime) }}</div>
- </div>
- </div>
- </swiper-item>
- </swiper>
- </div>
- <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>
- <tournamentList :list="userList"></tournamentList>
- <historyList></historyList>
- </view>
- </template>
- <script>
- import tournamentList from "./compontent/tournamentList.vue";
- import historyList from "./compontent/historyList.vue";
- import animationMixin from "@/pages/mixins/animation";
- import { numberToK, formatTime } from "@/utils/util";
- export default {
- components: {
- historyList,
- tournamentList,
- },
- mixins: [animationMixin],
- data() {
- return {
- bannerList: [],
- adList: [],
- list: [],
- userList: [],
- current: 0,
- tokenIsLogin: "",
- homeShow: false,
- intervalTimer: null,
- };
- },
- computed: {
- info() {
- return this.$store.state.info;
- },
- isLogin() {
- return this.$store.state.isLogin;
- },
- },
- onReachBottom() {
- },
- created() {
- this.getBanner();
- this.intervalTimer = setInterval(() => {
- this.getBanner();
- }, 10000);
- },
- activated() {
- this.intervalTimer = setInterval(() => {
- this.getBanner();
- }, 10000);
- },
- deactivated() {
- clearInterval(this.intervalTimer);
- this.intervalTimer = null;
- },
- methods: {
- getBanner() {
- uni.$u.http
- .get("/api/game/home", {
- params: {
- },
- }).then((res) => {
- this.adList = res.banner || [];
- this.bannerList = res.list || [];
- this.userList = res.users || [];
- })
- .catch((res) => {})
- .finally(() => {
- if (this.animationLoaded) {
- return;
- }
- this.animationLoaded = true;
- this.$nextTick(() => {
- this.scrollFun();
- });
- });
- },
- 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: 8,
- id: item.id,
- url: item.url
- })
- .then((res) => {
- }).finally(() => {
- });
- window.open(item.url);
- }
- },
- swiperClick(item) {
- if (item.url) {
- window.open(item.url)
- return
- }
- if (item.uid) {
- uni.navigateTo({
- url: `/pages/Live/live-detail?type=game&id=${item.uid}&ID=${item.id}`,
- });
- return;
- }
- if (item.param_id) {
- uni.navigateTo({
- url: "/pages/Match/match-detail?id=" + item.param_id,
- });
- return;
- }
- },
- numberToK(v) {
- return numberToK(v);
- },
- getTimeAgo(time) {
- return formatTime(time, this)
- }
- }
- }
- </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;
- color: #fff;
- }
- .swiper-item {
- padding: 0 12rpx;
- box-sizing: border-box;
- }
- .img-box {
- border-radius: 24rpx;
- overflow: hidden;
- position: relative;
- }
- .top {
- position: absolute;
- left: 22rpx;
- top: 20rpx;
- z-index: 10;
- display: flex;
- align-items: center;
- .flex {
- background-color: rgba(0, 0, 0, 0.5);
- border-radius: 3px;
- height: 44rpx;
- padding: 0 18rpx;
- font-size: 26rpx;
- }
- .icon_view {
- width: 27rpx;
- margin-right: 6rpx;
- }
- }
- .live-img {
- width: 92rpx;
- margin-right: 10rpx;
- }
- .bottom {
- position: absolute;
- bottom: 22rpx;
- left: 20rpx;
- right: 20rpx;
- font-size: 28rpx;
- display: flex;
- align-items: center;
- .avatar {
- margin-right: 20rpx;
- }
- }
- }
- .ad-list {
- padding: 0 14px;
- .item {
- padding-top: 10px;
- .ad {
- display: block;
- width: 100%;
- border-radius: 12rpx;
- }
- }
- }
- .news-install {
- position: sticky;
- bottom: var(--window-bottom);
- z-index: 200;
- }
- </style>
|