123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670 |
- <!-- 推荐 -->
- <template>
- <view class="list">
- <view class="list-swiper">
- <view class=""
- style="background: rgb(221, 221, 221);width: 100%;height: 60vw;border-radius: 20rpx;"
- v-if="list.length == 0">
- </view>
- <swiper v-else class="swiper" circular :indicator-dots="false" @change="swiperChange" :autoplay="true" :interval="2000"
- :duration="500">
- <swiper-item v-for="(item, index) in list" :key="index" @click="swiperClick(item)">
- <div class="swiper-box">
- <u--image
- mode="scaleToFill"
- :showLoading="true"
- :src="item.img"
- width="100%"
- height="60vw"
- >
- <template v-slot:loading>
- <image class="loading-banner-img" src="/static/image/common/video-banner-bg.png"></image>
- </template>
- </u--image>
- <div class="info-box">
- <div class="title text-clamp">1st T20I, India v New Zealand</div>
- <div class="tip">2023 Men's T20I Series | JSCA International Stadium Complex, Ranchi</div>
- <div class="btn-box">
- <div class="btn">
- <img class="img" src="/static/image/live/polygon.png" alt="">
- Watch
- </div>
- </div>
- </div>
- </div>
- </swiper-item>
- </swiper>
- <div v-if="list.length > 1" class="swiper__indicator">
- <div class="line__bar">
- <div class="dots" :class="{'active': index == swiperCurrent}" v-for="(i, index) in list" :key="index">
- </div>
- </div>
- </div>
- </view>
- <div class="live-list-box" v-if="todayList.length > 0">
- <div class="flex">
- <div class="all flex" @click="toMatch">View all <img class="right" src="/static/image/live/right.png" alt=""></div>
- </div>
- <div class="mySwiper">
- <div class="swiper-wrapper">
- <div class="swiper-slide" v-for="(item, index) in todayList" :key="index">
- <div class="today-box">
- <div class="box1">
- Match 5, South Africa Women 2023 Tri-Series | Buffalo Park, East London
- <img class="right" src="/static/image/live/right.png" alt="">
- </div>
- <div class="box2">
- at 28 January, 19:00 Local ( 22:00 PKT ) - Buffalo Park, East London, South Africa
- </div>
- <u-row>
- <u-col span="6">
- <view class="bg-purple">
- <img class="logo" src="https://cdn.sportmonks.com/images/cricket/teams/24/1976.png" alt=""/>
- <div class="text-clamp">{{ item.home_name }}</div>
- </view>
- </u-col>
- <u-col span="6">
- <view class="bg-purple bg-purple1 text-clamp">
- <img class="logo" src="https://cdn.sportmonks.com/images/cricket/teams/24/1976.png" alt=""/>
- <div class="text-clamp">{{ item.away_name }}</div>
- </view>
- </u-col>
- </u-row>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="anchor-list">
- <div class="item">
- <u--image
- :showLoading="true"
- :src="'/static/image/match/teams_avatar_ico@2x.png'"
- width="62px"
- height="62px"
- shape="circle"
- ></u--image>
- </div>
- <div class="item">
- <u--image
- :showLoading="true"
- :src="'/static/image/match/teams_avatar_ico@2x.png'"
- width="62px"
- height="62px"
- shape="circle"
- ></u--image>
- </div>
- <div class="item">
- <u--image
- :showLoading="true"
- :src="'/static/image/match/teams_avatar_ico@2x.png'"
- width="62px"
- height="62px"
- shape="circle"
- ></u--image>
- </div>
- <div class="item">
- <u--image
- :showLoading="true"
- :src="'/static/image/match/teams_avatar_ico@2x.png'"
- width="62px"
- height="62px"
- shape="circle"
- ></u--image>
- </div>
- <div class="item">
- <u--image
- :showLoading="true"
- :src="'/static/image/match/teams_avatar_ico@2x.png'"
- width="62px"
- height="62px"
- shape="circle"
- ></u--image>
- </div>
- <div class="item">
- <u--image
- :showLoading="true"
- :src="'/static/image/match/teams_avatar_ico@2x.png'"
- width="62px"
- height="62px"
- shape="circle"
- ></u--image>
- </div>
- </div>
- <div class="type-box">
- <div class="type-item">
- <div class="type" @click="toMatch">
- <div>T20s</div>
- <div class="see">See all</div>
- </div>
- <div class="list1">
- <div class="item">
- <div class="img-box">
- <u--image :showLoading="true" src="https://api.onecric.tv/upload/WechatIMG443.jpg" width="100%" height="105px">
- <template v-slot:loading>
- <image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
- </template>
- </u--image>
- <img class="play" src="/static/image/live/play-icon.png" alt="">
- </div>
- <div class="body">
- <div class="title text-clamp">India v New Zealand</div>
- <div class="tip">2023 Men's T20I Series | 1st T20I</div>
- <div class="flex">
- <div class="live">Live</div>
- <div>JSCA Stadium Complex</div>
- </div>
- </div>
- </div>
- <div class="item">
- <div class="img-box">
- <u--image :showLoading="true" src="https://qiniu.onecric.tv/moren.png" width="100%" height="105px">
- <template v-slot:loading>
- <image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
- </template>
- </u--image>
- <img class="play" src="/static/image/live/play-icon.png" alt="">
- </div>
- <div class="body">
- <div class="title text-clamp">India v New Zealand</div>
- <div class="tip">2023 Men's T20I Series | 1st T20I</div>
- <div class="flex">
- <div class="live">Live</div>
- <div>JSCA Stadium Complex</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="type-item">
- <div class="type">
- <div>T20s</div>
- <div class="see">See all</div>
- </div>
- <div class="list1">
- <div class="item">
- <div class="img-box">
- <u--image :showLoading="true" src="https://api.onecric.tv/upload/WechatIMG443.jpg" width="100%" height="105px">
- <template v-slot:loading>
- <image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
- </template>
- </u--image>
- <img class="play" src="/static/image/live/play-icon.png" alt="">
- </div>
- <div class="body">
- <div class="title text-clamp">India v New Zealand</div>
- <div class="tip">2023 Men's T20I Series | 1st T20I</div>
- <div class="flex">
- <div class="live">Live</div>
- <div>JSCA Stadium Complex</div>
- </div>
- </div>
- </div>
- <div class="item">
- <div class="img-box">
- <u--image :showLoading="true" src="https://api.onecric.tv/upload/WechatIMG443.jpg" width="100%" height="105px">
- <template v-slot:loading>
- <image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
- </template>
- </u--image>
- <img class="play" src="/static/image/live/play-icon.png" alt="">
- </div>
- <div class="body">
- <div class="title text-clamp">India v New Zealand</div>
- <div class="tip">2023 Men's T20I Series | 1st T20I</div>
- <div class="flex">
- <div class="live">Live</div>
- <div>JSCA Stadium Complex</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <u-toast ref="uToast"></u-toast>
- </view>
- </template>
- <script>
- import { numberToK, parseTime } from '@/utils/util'
- export default {
- components: {
- },
- data() {
- return {
- liveList: {
- live_commentary: {},
- nolive_broadcast: {},
- robot: {}
- },
- todayList: [],
- comingList: [],
- live_commentary: [],
- nolive_broadcast: [],
- robot: [],
- bannerList: [],
- robotLength: 0,
- swiperCurrent: 0,
- swiper: null
- }
- },
- props: {
- list: {
- type: Array,
- default: []
- }
- },
- mounted() {
- this.getList()
- },
- methods: {
- swiperClick(item) {
- 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
- }
- },
- // 点击history
- historyLive(item) {
- // console.error(item)
- // return
- uni.navigateTo({
- url:`/pages/Live/history-detail?id=${item.Uid}&ID=${item.live_id}&MediaUrl=${item.MediaUrl}`
- })
- },
- /* 跳转 */
- toUrl(item) {
- console.log(item);
- /* item.type == 1?'basketball':'football */
- if (item.type == 1) {
- uni.navigateTo({
- url: '../competition/basketballDetail?id=' + item.id
- })
- } else {
- uni.navigateTo({
- url: '../competition/detail?id=' + item.sourceid
- })
- }
- },
- toUrlLive(item) {
- gtag('event', 'live_H5', {
- 'live_H5': '0'
- });
- uni.navigateTo({
- url: `./live-detail?id=${item.live_id}&ID=${item.id}`
- })
- },
- getList() {
- uni.$u.http.get('/api/live_streaming/getLiveList', {
- params: 2
- }).then(res => {
- this.live_commentary = res.data || []
- })
- uni.$u.http.get('/api/live_streaming/getLiveListNew', {
- params: {
- timeZone: this.$store.state.timeZone
- }
- }).then(res => {
- this.todayList = res.toay || [];
- this.comingList = res.upcoming || [];
- this.$nextTick(() => {
- this.swiper && this.swiper.destroy();
- this.swiper = new Swiper(".mySwiper", {
- loop: true,
- spaceBetween: 16,
- autoplay: true,
- });
- })
- })
- uni.$u.http.get('/api/LivePlayBack/list', {}).then(res => {
- if (res.list) {
- this.robotLength = res.list.length
- this.robot = res.list.slice(0, 6)
- } else {
- this.robot = []
- }
- })
- },
- toMatch() {
- sessionStorage.setItem('match_live', JSON.stringify(2))
- uni.switchTab({
- url: '/pages/Match/Match'
- })
- },
- swiperChange(e) {
- this.swiperCurrent = e.detail.current
- },
- numberToK(v) {
- return numberToK(v)
- },
- formatDate(value) {
- var date1 = this.$common.parseTime(value * 1000, '{y}/{m}/{d} {h}:{i}:{s}')
- var date = new Date(date1 + ' UTC+5:30');
- var weekNum = new Date().getDay()
- let week = ""
- switch (weekNum) {
- case 0:
- week = "Sun";
- break;
- case 1:
- week = "Mon";
- break;
- case 2:
- week = "Tue";
- break;
- case 3:
- week = "Wed";
- break;
- case 4:
- week = "Thu";
- break;
- case 5:
- week = "Fri";
- break;
- case 6:
- week = "Sat";
- break;
- }
- var MonthNum = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
- let Month = ''
- switch (MonthNum) {
- case 1:
- Month = "Jan";
- break;
- case 2:
- Month = "Feb";
- break;
- case 3:
- Month = "Mar";
- break;
- case 4:
- Month = "Apr";
- break;
- case 5:
- Month = "May";
- break;
- case 6:
- Month = "Jun";
- break;
- case 7:
- Month = "Jul";
- break;
- case 8:
- Month = "Aug";
- break;
- case 9:
- Month = "Sept";
- break;
- case 10:
- Month = "Oct";
- break;
- case 11:
- Month = "Nov";
- break;
- case 12:
- Month = "Dec";
- break;
- }
- let day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
- // this.week = week
- // this.month = Month
- // this.day = day
- var hours = date.getHours();
- var minutes = date.getMinutes();
- var ampm = hours >= 12 ? 'PM' : 'AM';
- hours = hours % 12;
- hours = hours ? hours : 12; // the hour '0' should be '12'
- minutes = minutes < 10 ? '0' + minutes : minutes;
- // var strTime = week + ',' + day + Month + '.' + 'Watch live in' + hours + ':' + minutes + ' ' + ampm;
- var strTime = this.$t('match.lab92') + ' ' + hours + ':' + minutes + ' ' + ampm;
- return strTime;
- },
- parseTime(t) {
- return parseTime(t, '{m}-{d} {h}:{i}')
- },
- parseTime1(t) {
- return parseTime(t, '{y}-{m}-{d} {h}:{i}')
- }
- }
- }
- </script>
- <style lang="scss">
- .list {
- padding-bottom: 140rpx;
- }
- .list-swiper {
- padding: 0;
- position: relative;
- .swiper {
- height: 60vw;
- }
- .loading-banner-img {
- width: 100%;
- height: 60vw;
- }
- .swiper-box {
- position: relative;
- }
- .info-box {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: linear-gradient(180deg, rgba(16, 4, 74, 0) 0%, #080031 100%);
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- padding: 26rpx 16px;
- .title {
- color: #fff;
- font-weight: 600;
- font-size: 26px;
- margin-bottom: 16px;
- }
- .tip {
- font-weight: 500;
- font-size: 16px;
- color: #C7C7C7;
- margin-bottom: 16px;
- }
- .btn-box {
- height: 34px;
- .btn {
- height: 34px;
- width: 92px;
- background: linear-gradient(94.25deg, #FF3300 -3.08%, #D22A00 100%);
- border-radius: 4px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- font-weight: 500;
- font-size: 14px;
- }
- .img {
- width: 14px;
- margin-right: 6px;
- }
- }
- }
- .swiper__indicator {
- position: absolute;
- right: 16px;
- bottom: 39rpx;
- z-index: 2;
- .line__bar {
- display: flex;
- align-items: center;
- }
- .dots {
- width: 8px;
- height: 8px;
- border: 1px solid #D52B01;
- border-radius: 50%;
- & + .dots {
- margin-left: 8px;
- }
- &.active {
- background-color: #D52B01;
- }
- }
- }
- }
- .live-list-box {
- padding-top: 16px;
- .all {
- font-weight: 500;
- font-size: 14px;
- color: #242424;
- padding: 0 16px;
- .right {
- margin-left: 8px;
- width: 9px;
- }
- }
- .mySwiper {
- overflow: hidden;
- padding: 12px 16px 16px;
- }
- .today-box {
- background: #FFFFFF;
- box-shadow: 0px 4px 26px -4px rgba(78, 78, 78, 0.25);
- border-radius: 6px;
- padding: 24px 24px 20px;
- .box1 {
- padding-right: 25px;
- position: relative;
- font-weight: 500;
- font-size: 14px;
- color: #242424;
- margin-bottom: 16px;
- .right {
- width: 9px;
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- }
- }
- .box2 {
- font-weight: 600;
- font-size: 12px;
- color: #4E4E4E;
- margin-bottom: 16px;
- }
- .bg-purple {
- font-weight: 600;
- font-size: 18px;
- color: #242424;
- display: flex;
- align-items: center;
- .logo {
- width: 30px;
- margin-right: 16rpx;
- }
- }
- .bg-purple1 {
- padding-left: 10px;
- justify-content: flex-end;
- }
- }
- }
- .anchor-list {
- padding: 10px 0 10px 16px;
- overflow: auto;
- display: flex;
- align-items: center;
- flex-wrap: nowrap;
- .item {
- margin-right: 12px;
- padding: 6px;
- border-radius: 50%;
- border: 2px solid #CC2900;
- }
- }
- .type-box {
- padding: 0 0 16px 8px;
- .type-item {
- margin-bottom: 10px;
- .type {
- padding: 16px 8px 10px 0;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: 600;
- font-size: 18px;
- line-height: 1;
- color: #242424;
- .see {
- font-weight: 400;
- font-size: 14px;
- color: #4E4E4E;
- }
- }
- }
- .list1 {
- display: flex;
- flex-wrap: nowrap;
- overflow: auto;
- .item {
- background: #FFFFFF;
- box-shadow: 0px 4px 26px rgba(174, 174, 174, 0.16);
- border-radius: 4px;
- min-width: 214px;
- max-width: 214px;
- overflow: hidden;
- margin-right: 16px;
- .img-box {
- position: relative;
- .play {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 46px;
- }
- }
- .loading-list-img {
- width: 100%;
- height: 105px;
- }
- }
- .body {
- padding: 12px 10px;
- .title {
- font-weight: 500;
- font-size: 14px;
- color: #242424;
- margin-bottom: 8px;
- }
- .tip {
- font-weight: 400;
- font-size: 12px;
- color: #4E4E4E;
- margin-bottom: 26px;
- }
- .flex {
- justify-content: space-between;
- font-weight: 400;
- font-size: 10px;
- color: #4E4E4E;
- .live {
- font-weight: 500;
- color: #FF3300;
- }
- }
- }
- }
- }
- </style>
|