123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- <template>
- <view class="">
- <view class="header flex-start">
- <image src="/static/image/common/grade-left.png" mode="" @click="$back()"></image>
- {{type == 0?$t('live.title1'):type == 1?$t('live.title2'):$t('live.title3')}}
- </view>
- <view class="detail-video-list">
- <view class="detail-video-li" v-for="(item,index) in liveList" :key="index" @click="historyLive(item)">
- <div class="img-box">
- <img class="bottom" :src="item.bottom" alt="">
- <div class="box">
- <div class="logo-box">
- <img class="logo" :src="item.home_logo" alt="">
- <img class="logo" :src="item.away_logo" alt="">
- </div>
- <div class="detail-box">
- <div class="title text-clamp">{{ item.Name }}</div>
- <div class="start_time">{{ formatDate(item.start_time) }}</div>
- <img class="icon1" src="/static/image/live/play-icon.png" alt="" />
- </div>
- </div>
- </div>
- </view>
- </view>
- <u-loadmore
- :status="status"
- fontSize="28"
- :line="true"
- :loading-text="statusType.loadingText"
- :loadmore-text="statusType.loadmoreText"
- :nomore-text="statusType.nomoreText"
- />
- </view>
- </template>
- <script>
- import { numberToK, parseTime } from '@/utils/util'
- export default {
- data() {
- return {
- type:0,
- liveList: [],
- statusType:{
- loadingText: this.$t('common.lab'),
- loadmoreText: this.$t('common.lab1'),
- nomoreText: this.$t('common.lab2')
- },
- status:'loadmore',
- pageNumber: 1
- }
- },
- onLoad(option) {
- this.type = option.type;
- this.getList()
- },
- // 触底触发
- onReachBottom() {
- if(this.status == 'loadmore'){
- this.pageNumber++;
- this.getList();
- }
-
- },
- // 下拉刷新
- onPullDownRefresh(){
- // 正常情况下接口返回应该很会很快。故意延迟调用,让用户有在刷新的体验感
- this.pageNumber = 1;
- this.status = 'loadmore';
- this.getList();
-
- setTimeout(res=>{
- uni.stopPullDownRefresh()
- },1500)
- },
- methods: {
- getList() {
- this.status= 'loading';
- this.getHistory()
- },
- getHistory() {
- uni.$u.http.get('/api/LivePlayBack/list', {
- params: {
- pageNumber: this.pageNumber
- }
- }).then(res => {
- if (this.pageNumber == 1) {
- this.liveList = res.list || []
- } else {
- this.liveList = this.liveList.concat(res.list || [])
- }
- this.status = this.liveList.length == res.total ? 'nomore' : 'loadmore'
- })
- },
- // 点击history
- historyLive(item) {
- uni.navigateTo({
- url:`/pages/Live/history-detail?id=${item.Uid}&ID=${item.live_id}&MediaUrl=${item.MediaUrl}`
- })
- },
- formatDate(value) {
- var date1 = this.$common.parseTime(value * 1000, '{y}/{m}/{d} {h}:{i}:{s}')
- var date = new Date(date1);
- 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
- 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 = `${hours}:${minutes} ${ampm},${day} ${Month} `;
- return strTime;
- },
- numberToK(v) {
- return numberToK(v)
- },
- parseTime(t) {
- return parseTime(t, '{y}-{m}-{d} {h}:{i}')
- }
- },
- }
- </script>
- <style lang="scss">
- page {
- background-color: #F3F3F7 !important;
- }
- .header {
- color: #fff;
- font-size: 34rpx;
- padding: 18rpx 24rpx;
- position: sticky;
- top: 0;
- z-index: 10;
- background-color: #1D2550;
- image {
- width: 60rpx;
- height: 60rpx;
- }
- }
- .detail-video-list {
- flex-wrap: wrap;
- padding: 0 0 24rpx;
- }
- .detail-video-li {
- overflow: hidden;
- margin-top: 20rpx;
- background-color: white;
- .img-box {
- position: relative;
- min-height: 100rpx;
- }
- .box {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- padding: 16px;
- }
- .logo-box {
- display: flex;
- align-items: center;
- justify-content: space-around;
- margin-bottom: 16px;
- .logo {
- height: 70rpx;
- }
- }
- .detail-box {
- position: relative;
- padding-right: 30px;
- .title {
- margin-bottom: 8px;
- font-weight: 500;
- font-size: 14px;
- color: #fff;
- }
- .start_time {
- font-weight: 400;
- font-size: 12px;
- color: #ACACAC;
- }
- .icon1 {
- position: absolute;
- right: 0;
- top: 50%;
- transform: translateY(-50%);
- width: 28px;
- }
- }
- .bottom {
- display: block;
- width: 100%;
- }
- }
- </style>
|