123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566 |
- <!-- 推荐 -->
- <template>
- <view class="list">
- <view class="list-swiper">
- <!-- <image src="" mode="scaleToFill"></image> -->
- <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)">
- <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>
- </swiper-item>
- </swiper>
- <div v-if="list.length > 1" class="swiper__indicator">
- <div class="line__bar" :style="{'width': lineWidth, 'transform': lineTransform}"></div>
- </div>
- </view>
- <todayList v-if="todayList.length > 0" :todayList="todayList"></todayList>
- <comingList v-if="comingList.length > 0" :comingList="comingList" :todayListLength="todayList.length"></comingList>
- <view class="detail-title flex-start" v-if="live_commentary.length>0">
- <image src="/static/image/live/detail01.png" mode=""></image>
- <text>{{$t('live.title2')}}</text>
- <!-- <view class="" v-if="item1.length != 0" @click="$toUrl('./list?type=' + i)">
- {{$t('live.more')}}>
- </view> -->
- </view>
- <view class="detail-video-list flex">
- <view class="detail-video-li" style="position: relative;" v-for="(item,index) in live_commentary" :key="index"
- @click="toUrlLive(item)">
- <div v-if="item.islive==0" class="zhezao">{{formatDate(item.starttime)}}</div>
- <div class="img_box">
- <u--image :showLoading="true" :src="(item.home_logo && item.away_logo) ? item.bottom : item.thumb" width="100%" height="176rpx">
- <template v-slot:loading>
- <image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
- </template>
- </u--image>
- <image v-if="item.home_logo && item.away_logo" class="home_logo" :src="item.home_logo" mode="aspectFill" alt=""></image>
- <image v-if="item.home_logo && item.away_logo" class="away_logo" :src="item.away_logo" mode="aspectFill" alt=""></image>
- </div>
- <image v-if="item.islive==1" src="/static/image/live/live-icon.png" mode="" class="live-icon"></image>
- <view class="detail-video-content ">
- <view class="detail-video-title text-clamp2">
- {{item.title}}
- </view>
- <view class="detail-video-right flex">
- <image class="detail-video-content-logo" :src="item.avatar" mode="aspectFill"></image>
- <view class="detail-video-info flex">
- <text class="text-clamp">{{item.user_nickname}}</text>
- <u-icon color="#999" name="eye" size="30" v-if="item.viewers && item.islive==1"></u-icon>
- <view v-if="item.islive==1">{{numberToK(item.viewers)}}</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="detail-title flex-start">
- <image src="/static/image/live/detail01.png" mode=""></image>
- <text>{{$t('live.title3')}}</text>
- <view class="more" v-if="robotLength > 6" @click="$toUrl('./list?type=2')">
- {{$t('live.more')}}<u-icon name="arrow-right" color="#DC3C23" size="28rpx"></u-icon>
- </view>
- </view>
- <u-empty v-if="robot.length == 0" mode="data" width="474" height="312" textSize="28" marginTop="100"
- :text="$t('common.nodata')" icon="/static/image/common/nodata.png">
- </u-empty>
- <!-- History -->
- <view class="detail-video-list flex">
- <view class="detail-video-li" style="position: relative;" v-for="(item,index) in robot" :key="index"
- @click="historyLive(item)">
- <div class="img_box">
- <u--image :showLoading="true" :src="item.bottom" width="100%" height="176rpx">
- <template v-slot:loading>
- <image class="loading-list-img" src="/static/image/common/live-list-bg.png"></image>
- </template>
- </u--image>
- <image class="home_logo" :src="item.home_logo" mode="aspectFill" alt=""></image>
- <image class="away_logo" :src="item.away_logo" mode="aspectFill" alt=""></image>
- </div>
- <image src="/static/image/live/live-history-icon.png" mode="" class="history-icon"></image>
- <view class="detail-video-content ">
- <view class="detail-video-title1 text-clamp">
- {{item.Name}}
- </view>
- <div class="start_time">{{ parseTime1(item.start_time) }}</div>
- <view class="detail-video-right flex">
- <image class="detail-video-content-logo" :src="item.UserHead" mode="aspectFill"></image>
- <view class="detail-video-info flex">
- <text class="text-clamp">{{item.UserName}}</text>
- <u-icon color="#999" name="eye" size="30" v-if="item.viewers"></u-icon>
- <view>{{numberToK(item.viewers)}}</view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <u-toast ref="uToast"></u-toast>
- </view>
- </template>
- <script>
- import todayList from "./todayList.vue";
- import comingList from "./comingList.vue";
- import { numberToK, parseTime } from '@/utils/util'
- export default {
- components: {
- todayList,
- comingList,
- },
- data() {
- return {
- // list: [{
- // image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
- // title: '昨夜星辰昨夜风,画楼西畔桂堂东'
- // },
- // {
- // image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
- // title: '身无彩凤双飞翼,心有灵犀一点通'
- // },
- // {
- // image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
- // title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
- // }
- // ],
- liveList: {
- live_commentary: {},
- nolive_broadcast: {},
- robot: {}
- },
- todayList: [],
- comingList: [],
- live_commentary: [],
- nolive_broadcast: [],
- robot: [],
- bannerList: [],
- robotLength: 0,
- swiperCurrent: 0
- }
- },
- props: {
- list: {
- type: Array,
- default: []
- }
- },
- computed: {
- lineWidth() {
- return (1/this.list.length) * 100 + '%'
- },
- lineTransform() {
- return `translateX(${100 * this.swiperCurrent}%)`
- }
- },
- 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 || [];
- })
- 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 = []
- }
- })
- },
- 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';
- if (hours != 12) {
- hours = hours % 12;
- }
- if (hours == 12 && minutes) {
- hours = hours % 12;
- ampm = 'PM'
- }
- hours = hours < 10 ? "0" + hours : hours;
- 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">
- .zhezao {
- background: rgba(0, 0, 0, 0.5);
- position: absolute;
- top: 0;
- left: 0;
- z-index: 2;
- color: #fff;
- text-align: center;
- line-height: 1;
- padding: 10rpx 6rpx;
- border-radius: 6rpx;
- font-size: 16rpx;
- white-space: nowrap;
- }
- .live-icon {
- position: absolute;
- right: 10rpx;
- bottom: 160rpx;
- width: 60rpx;
- height: 32rpx;
- }
- .history-icon {
- position: absolute;
- right: 10rpx;
- bottom: 160rpx;
- width: 120rpx;
- height: 34rpx;
- }
- .list {
- padding-bottom: 140rpx;
- }
- .detail-video-list {
- padding: 4rpx 18rpx;
- flex-wrap: wrap;
- .loading-list-img {
- width: 100%;
- height: 176rpx;
- }
- }
- .img_box {
- position: relative;
- }
- .home_logo, .away_logo {
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- width: 90rpx;
- height: 90rpx;
- border-radius: 50%;
- }
- .home_logo {
- left: 30rpx;
- }
- .away_logo {
- right: 30rpx;
- }
- .list-swiper {
- padding: 0;
- position: relative;
- .swiper {
- height: 60vw;
- }
- .loading-banner-img {
- width: 100%;
- height: 60vw;
- }
- .swiper__indicator {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- bottom: 10rpx;
- border-radius: 3rpx;
- width: 110rpx;
- background-color: rgba(255, 255, 255, 0.35);
- }
- .line__bar {
- background-color: #fff;
- height: 4rpx;
- border-radius: 3rpx;
- transition: transform 0.3s, -webkit-transform 0.3s;
- }
- }
- .list-roll {
- margin-top: 20rpx;
- }
- .list-roll-li {
- padding: 16rpx;
- min-width: 332rpx;
- margin-right: 20rpx;
- border-radius: 12rpx;
- background-color: white;
- box-shadow: 0px 4px 12px rgba(51, 51, 51, 0.06);
- .list-roll-li-top {
- margin-bottom: 26rpx;
- font-size: 24rpx;
- text {
- color: #999;
- }
- view {
- color: #87390E;
- padding: 8rpx 26rpx;
- background: linear-gradient(90deg, #FFDFAB 0%, #E3AC72 100%);
- }
- }
- .list-roll-li-nav {
- view {
- font-size: 28rpx;
- image {
- width: 44rpx;
- height: 44rpx;
- margin-right: 6rpx;
- }
- view {
- flex: 1;
- }
- }
- }
- }
- .detail-title {
- margin-top: 20rpx;
- font-weight: bold;
- padding: 0 18rpx;
- image {
- width: 40rpx;
- height: 40rpx;
- margin-right: 16rpx;
- }
- .more {
- color: #DC3C23;
- font-size: 28rpx;
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- }
- text {
- color: #333;
- font-size: 30rpx;
- }
- }
- .detail-video-li {
- overflow: hidden;
- margin-top: 20rpx;
- width: calc(100% / 2 - 9rpx);
- border-radius: 12rpx;
- background-color: white;
- .detail-video-li-logo {
- width: 100%;
- height: 176rpx;
- display: block;
- }
- .detail-video-content {
- padding: 16rpx;
- .detail-video-content-logo {
- width: 40rpx;
- height: 40rpx;
- border-radius: 50%;
- margin-right: 24rpx;
- }
- .detail-video-title {
- width: 99%;
- height: 80rpx;
- color: #333;
- font-size: 28rpx;
- }
- .detail-video-title1 {
- width: 99%;
- color: #333;
- font-size: 28rpx;
- }
- .start_time {
- color: #333;
- font-size: 28rpx;
- }
- }
- .detail-video-info {
- font-size: 24rpx;
- flex: 1;
- .u-icon {
- margin-right: 6rpx;
- }
- image {
- width: 24rpx;
- height: 24rpx;
- margin-right: 6rpx;
- }
- text {
- flex: 1;
- width: 100rpx;
- color: #9193B4;
- }
- view {
- color: #999;
- }
- }
- }
- .detail-video-right {
- flex: 1;
- min-width: 100px;
- }
- </style>
|