<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="直播间" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<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-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>
|
</view>
|
<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 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>
|
<!-- 登录提示 -->
|
<coreshop-login-modal></coreshop-login-modal>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex';
|
export default {
|
data() {
|
return {
|
items: ['直播计划', '历史直播'],
|
current: 0,
|
page: 1,
|
limit: 50,
|
list: [],
|
status: 'loadmore',
|
iconType: 'flower',
|
loadText: {
|
loadmore: '轻轻上拉',
|
loading: '努力加载中',
|
nomore: '实在没有了'
|
},
|
};
|
},
|
onLoad() {
|
this.getList();
|
console.log(this.userInfo);
|
},
|
onReachBottom() {
|
if (this.status === 'loadmore') {
|
this.getList();
|
}
|
},
|
computed: {
|
...mapState({
|
hasLogin: state => state.hasLogin,
|
userInfo: state => state.userInfo,
|
}),
|
hasLogin: {
|
get() {
|
return this.$store.state.hasLogin;
|
},
|
set(val) {
|
this.$store.commit('hasLogin', val);
|
}
|
},
|
userInfo: {
|
get() {
|
return this.$store.state.userInfo;
|
},
|
set(val) {
|
this.$store.commit('userInfo', val);
|
}
|
},
|
},
|
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) {
|
const _list = res.data.room_info;
|
this.list = [...this.list, ..._list];
|
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);
|
}
|
});
|
},
|
goRoom(roomid) {
|
console.log(roomid);
|
if (!this.hasLogin) {
|
uni.hideLoading();
|
this.$store.commit('showLoginTip', true);
|
return false;
|
} else {
|
let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/livebroadcast/index/index', userId: this.userInfo.id })) // 开发者在直播间页面路径上携带自定义参数（如示例中的 path 和pid参数）
|
console.log(customParams);
|
wx.navigateTo({
|
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomid}&custom_params=${customParams}`
|
});
|
|
}
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
</style>
|
