【新增】微信小程序直播增加历史直播回放功能。

This commit is contained in:
JIANWEIE-WORKPC\Administrator
2023-03-02 12:38:17 +08:00
parent 919090d642
commit 2759c4226f
4 changed files with 102 additions and 50 deletions

View File

@@ -10,61 +10,63 @@
<view slot="right">
</view>
</u-navbar>
<view class="coreshop-padding-left-10 coreshop-padding-right-10 coreshop-padding-top-10">
<u-subsection :list="items" :current="current" :animation="true" @change="onClickItem" active-color="#ff9900"></u-subsection>
</view>
<view class="coreshop-padding-left-5 coreshop-padding-right-5 coreshop-padding-top-5">
<view class="coreshop-margin-top-10" v-if="list.length > 0">
<view class="coreshop-bg-white coreshop-border-radius-9 coreshop-margin-10" v-for="item in list" :key="item.roomid" @click="goRoom(item.roomid)">
<view class="coreshop-flex coreshop-position-relative coreshop-border-radius-9">
<view style="border-top-right-radius: 10px; border-top-left-radius: 10px ">
<u--image :src="item.share_img" mode="widthFix" width="698rpx" height="250px"></u--image>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==101">
<u-tag text="直播中" size="mini" type="success"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==102">
<u-tag text="未开始" size="mini"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==103">
<u-tag text="已结束" size="mini" type="warning"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==104">
<u-tag text="禁播" size="mini" type="warning"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==105">
<u-tag text="暂停" size="mini" type="error"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==106">
<u-tag text="异常" size="mini" type="error"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==107">
<u-tag text="已过期" size="mini" type="error"></u-tag>
</view>
<view class="coreshop-position-absolute coreshop-padding-8" style="bottom: 0rpx;">
<view class="coreshop-font-14 coreshop-text-white">{{ item.name }}</view>
</view>
</view>
<view class="coreshop-margin-top-10" v-if="list.length > 0">
<view class="coreshop-bg-white coreshop-border-radius-9 coreshop-margin-10" v-for="item in list" :key="item.roomid" @click="goRoom(item.roomid)">
<view class="coreshop-flex coreshop-position-relative coreshop-border-radius-9" >
<view style="border-top-right-radius: 10px; border-top-left-radius: 10px ">
<u--image :src="item.share_img" mode="widthFix" width="716rpx" height="170px" ></u--image>
<view class="coreshop-flex coreshop-flex-wrap coreshop-justify-start coreshop-font-sm coreshop-flex-direction-row coreshop-align-center coreshop-padding-top-10 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-padding-bottom-5">
<view class="coreshop-font-14 coreshop-text-black">
主播
</view>
<view class="coreshop-font-14 coreshop-text-black">{{ item.anchor_name }}</view>
<view class="coreshop-font-12 coreshop-text-black coreshop-padding-left-4 coreshop-padding-right-4 "> | </view>
<view class="coreshop-font-12 coreshop-text-black">直播商品{{ item.goods.length }}</view>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==101">
<u-tag text="直播中" size="mini" type="success"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==102">
<u-tag text="未开始" size="mini"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==103">
<u-tag text="已结束" size="mini" type="warning"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==104">
<u-tag text="禁播" size="mini" type="warning"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==105">
<u-tag text="暂停" size="mini" type="error"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==106">
<u-tag text="异常" size="mini" type="error"></u-tag>
</view>
<view class="coreshop-position-absolute" v-if="item.live_status==107">
<u-tag text="已过期" size="mini" type="error"></u-tag>
</view>
<view class="coreshop-position-absolute coreshop-padding-8" style="bottom: 0rpx; ">
<view class="coreshop-font-14 coreshop-text-white">{{ item.name }}</view>
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-font-12 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-padding-bottom-8 coreshop-text-grey">
直播时间:{{$u.timeFormat(item.start_time, 'yyyy-mm-dd hh:MM:ss')}} {{$u.timeFormat(item.end_time, 'yyyy-mm-dd hh:MM:ss')}}
</view>
</view>
<view class="coreshop-flex coreshop-flex-wrap coreshop-justify-start coreshop-font-sm coreshop-flex-direction-row coreshop-align-center coreshop-padding-top-10 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-padding-bottom-5">
<view class="coreshop-font-14 coreshop-text-black">
主播
</view>
<view class="coreshop-font-14 coreshop-text-black">{{ item.anchor_name }}</view>
<view class="coreshop-font-12 coreshop-text-black coreshop-padding-left-4 coreshop-padding-right-4 "> | </view>
<view class="coreshop-font-12 coreshop-text-black">直播商品{{ item.goods.length }}</view>
</view>
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-font-12 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-padding-bottom-8 coreshop-text-grey">
直播时间:{{$u.timeFormat(item.start_time, 'yyyy-mm-dd hh:MM:ss')}} {{$u.timeFormat(item.end_time, 'yyyy-mm-dd hh:MM:ss')}}
<view>
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="0" margin-bottom="20" class="coreshop-padding-top-10" />
</view>
</view>
<view>
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="0" margin-bottom="20" class="coreshop-padding-top-10" />
<!-- 无数据时默认显示 -->
<view class="coreshop-emptybox" v-else>
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="当前列表为空" mode="list"></u-empty>
</view>
</view>
<!-- 无数据时默认显示 -->
<view class="coreshop-emptybox" v-else>
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="当前列表为空" mode="list"></u-empty>
</view>
<!-- 登录提示 -->
<coreshop-login-modal></coreshop-login-modal>
</view>
@@ -75,8 +77,10 @@
export default {
data() {
return {
items: ['直播计划', '历史直播'],
current: 0,
page: 1,
limit: 10,
limit: 50,
list: [],
status: 'loadmore',
iconType: 'flower',
@@ -119,11 +123,30 @@
},
},
methods: {
// tab点击切换
onClickItem(index) {
if (this.current !== index) {
this.current = index;
this.page = 1;
this.list = [];
this.getList();
}
},
getList() {
let data = {
page: this.page,
limit: this.limit,
};
if (this.current == 0) {
data['where'] = '';
}
if (this.current == 1) {
data['where'] = 'get_replay';
}
uni.showLoading({
title: '加载中',
mask: true
});
this.status = 'loading';
this.$u.api.getLiveInfo(data).then(res => {
if (res.status) {
@@ -132,12 +155,15 @@
if (res.data.total > this.list.length) {
this.status = 'loadmore';
this.page++;
uni.hideLoading();
} else {
// 数据已加载完毕
this.status = 'nomore';
uni.hideLoading();
}
} else {
// 接口请求出错了
uni.hideLoading();
this.$u.toast(res.msg);
}
});