590 lines
12 KiB
Vue
590 lines
12 KiB
Vue
|
<template>
|
|||
|
<view class="view_body">
|
|||
|
<z-paging ref="paging" refresher-only @onRefresh="onRefresh">
|
|||
|
<view class="" :style="'height:'+statusBarHeight+'px'">
|
|||
|
|
|||
|
</view>
|
|||
|
<view>
|
|||
|
<view class="search_content flex_a_c_j_sb">
|
|||
|
<view class="flex_a_c">
|
|||
|
<view class="iconfont icon-sousuo" style="font-size: 39rpx;"></view>
|
|||
|
<input type="text" v-model="keyword" placeholder="搜索主播或关键字"
|
|||
|
placeholder-style="font-size: 30rpx;" @input="change">
|
|||
|
</view>
|
|||
|
<button class="search_btn" @click="search">搜索</button>
|
|||
|
</view>
|
|||
|
|
|||
|
<view class="content-detail">
|
|||
|
<view class="banner">
|
|||
|
<view class="banner-detail" v-for="(item,i) in list" :key='i' @click="zhisort(i)">
|
|||
|
<view class="banner-name">
|
|||
|
{{item.name}}
|
|||
|
</view>
|
|||
|
<view class="banner-t" v-if="isindex==i">
|
|||
|
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
|
|||
|
|
|||
|
</view>
|
|||
|
<view class="content-detaila" @click="jump_url">
|
|||
|
去开直播
|
|||
|
<text class="iconfont icon-xiangyou"></text>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
|
|||
|
<scroll-view scroll-top="0" scroll-y="true" class="goods_body_scroll" v-if="isindex==0">
|
|||
|
<view class="roomsbox">
|
|||
|
<view class="roomblock" v-for="(room,index) in roomList" :key="index" @click="jump(room)"
|
|||
|
style="border: 1px solid #e1d9d4;">
|
|||
|
<image :src="room.cover" mode="aspectFill" v-if="room.cover"></image>
|
|||
|
<image src="/static/lw/6.gif" mode="aspectFill" v-else></image>
|
|||
|
<view class="livetitle">{{room.live_name}}</view>
|
|||
|
<view class="roomstatus-d" v-if="room.status==1" style="background-color: #09BB07;">
|
|||
|
</view>
|
|||
|
<view class="roomstatus-d" v-else style="background-color: #fa2306;">
|
|||
|
</view>
|
|||
|
|
|||
|
<view class="roomstatus" style="color: #00B26A;" v-if="room.status==1">直播中
|
|||
|
</view>
|
|||
|
<view class="roomstatus" style="color: #fa2306;" v-else>已停播
|
|||
|
</view>
|
|||
|
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
|
|||
|
</scroll-view>
|
|||
|
<scroll-view scroll-top="0" scroll-y="true" class="goods_body_scroll" v-if="isindex==1">
|
|||
|
<view v-for="(pp,index) in roomList" :key="index">
|
|||
|
<view class="roomsbox-a" v-for="(kk,i) in pp" :key="i">
|
|||
|
<view class="roomsbox-title">
|
|||
|
{{i}}
|
|||
|
</view>
|
|||
|
<view class="roomsbox">
|
|||
|
<view class="roomblock" style="border: 1px solid #e1d9d4;" v-for="(room,j) in kk"
|
|||
|
:key="j" @click="hsitroyjump(room)">
|
|||
|
<image :src="room.cover" mode="aspectFill" v-if="room.cover"></image>
|
|||
|
<image src="/static/lw/6.gif" mode="aspectFill" v-else></image>
|
|||
|
<view class="livetitle">{{room.live_name}}</view>
|
|||
|
<view class="roomstatus-d" v-if="room.status==1" style="background-color: #09BB07;">
|
|||
|
</view>
|
|||
|
<view class="roomstatus-d" v-else style="background-color: #fa2306;">
|
|||
|
</view>
|
|||
|
<view class="roomstatus-d" v-if="room.status==3" style="background-color: #e1d9d4;">
|
|||
|
</view>
|
|||
|
<view class="roomstatus" style="color: #00B26A;" v-if="room.status==1">直播中
|
|||
|
</view>
|
|||
|
<view class="roomstatus" style="color: #fa2306;" v-else>已停播
|
|||
|
</view>
|
|||
|
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
|
|||
|
</view>
|
|||
|
|
|||
|
</scroll-view>
|
|||
|
<view class="noshuju" v-if="roomList.length==0">
|
|||
|
<emptyPage title="暂无房间信息"></emptyPage>
|
|||
|
</view>
|
|||
|
</view>
|
|||
|
|
|||
|
</z-paging>
|
|||
|
</view>
|
|||
|
</template>
|
|||
|
|
|||
|
<script>
|
|||
|
import emptyPage from '@/components/emptyPage.vue';
|
|||
|
import {
|
|||
|
live,
|
|||
|
playbackList
|
|||
|
} from '@/api/api.js'
|
|||
|
|
|||
|
|
|||
|
export default {
|
|||
|
components: {
|
|||
|
emptyPage
|
|||
|
},
|
|||
|
data() {
|
|||
|
return {
|
|||
|
keyword: '',
|
|||
|
statusBarHeight: 0,
|
|||
|
page: 1,
|
|||
|
dataindex: 1,
|
|||
|
page_data: true,
|
|||
|
list: [{
|
|||
|
name: '直播精选'
|
|||
|
},
|
|||
|
{
|
|||
|
name: '历史直播'
|
|||
|
},
|
|||
|
|
|||
|
],
|
|||
|
roomList: [],
|
|||
|
user: [],
|
|||
|
index: 0,
|
|||
|
isGetLoginInfo: true,
|
|||
|
isindex: 0,
|
|||
|
|
|||
|
};
|
|||
|
},
|
|||
|
onLoad() {
|
|||
|
|
|||
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
|||
|
},
|
|||
|
mounted() {
|
|||
|
if (this.isUserInfoExist()) {
|
|||
|
console.log('用户信息存在');
|
|||
|
this.getRoomList()
|
|||
|
} else {
|
|||
|
console.log('用户信息不存在');
|
|||
|
uni.showModal({
|
|||
|
// title: '标题',
|
|||
|
content: '用户信息不存在,是否重新登录',
|
|||
|
showCancel: true,
|
|||
|
cancelText: '取消',
|
|||
|
confirmText: '确定',
|
|||
|
success: function(res) {
|
|||
|
if (res.confirm) {
|
|||
|
// 用户点击了确定按钮
|
|||
|
uni.redirectTo({
|
|||
|
url: '/pages/login/login'
|
|||
|
})
|
|||
|
} else if (res.cancel) {
|
|||
|
// 用户点击了取消按钮
|
|||
|
console.log('用户点击了取消按钮');
|
|||
|
}
|
|||
|
}
|
|||
|
});
|
|||
|
}
|
|||
|
|
|||
|
},
|
|||
|
onShow() {},
|
|||
|
onReachBottom() {
|
|||
|
if (this.isindex == 0) {
|
|||
|
this.getRoomList()
|
|||
|
} else {
|
|||
|
this.getbackList()
|
|||
|
}
|
|||
|
|
|||
|
},
|
|||
|
|
|||
|
|
|||
|
onPullDownRefresh: function() {
|
|||
|
console.log('下拉刷新')
|
|||
|
this.getRoomList()
|
|||
|
},
|
|||
|
methods: {
|
|||
|
|
|||
|
//下拉刷新被触发
|
|||
|
onRefresh() {
|
|||
|
//以告知z-paging下拉刷新结束,这样才可以开始下一次的下拉刷新
|
|||
|
setTimeout(() => {
|
|||
|
//1.5秒之后停止刷新动画
|
|||
|
if (this.isindex == 0) {
|
|||
|
this.getRoomList()
|
|||
|
} else {
|
|||
|
this.getbackList()
|
|||
|
}
|
|||
|
this.$refs.paging.complete();
|
|||
|
}, 1500)
|
|||
|
},
|
|||
|
isUserInfoExist() {
|
|||
|
const userInfo = this.$store.state.app.userInfo;
|
|||
|
uni.sendHostEvent('userinfo', userInfo, (ret) => {
|
|||
|
//发送消息成功回调
|
|||
|
console.log('消息成功' + JSON.stringify(userInfo));
|
|||
|
});
|
|||
|
return !!userInfo; // 如果 userInfo 为空,则返回 false;否则返回 true
|
|||
|
},
|
|||
|
//输入
|
|||
|
change(e) {
|
|||
|
// console.log(e)
|
|||
|
if (e.detail.value.length <= 0) {
|
|||
|
this.page = 1
|
|||
|
this.getRoomList()
|
|||
|
}
|
|||
|
},
|
|||
|
//查询
|
|||
|
search() {
|
|||
|
|
|||
|
this.page = 1
|
|||
|
this.roomList = []
|
|||
|
if (this.isindex == 0) {
|
|||
|
this.getRoomList()
|
|||
|
} else {
|
|||
|
this.getbackList()
|
|||
|
}
|
|||
|
},
|
|||
|
//分类
|
|||
|
zhisort(i) {
|
|||
|
this.isindex = i
|
|||
|
this.page = 1
|
|||
|
this.roomList = []
|
|||
|
if (i == 0) {
|
|||
|
this.getRoomList()
|
|||
|
} else {
|
|||
|
this.getbackList()
|
|||
|
}
|
|||
|
},
|
|||
|
getbackList: function() {
|
|||
|
playbackList({
|
|||
|
page_size: 100,
|
|||
|
page: this.page,
|
|||
|
app_name: 'shop',
|
|||
|
keyword: this.keyword
|
|||
|
}).then(res => {
|
|||
|
// console.log(res)
|
|||
|
if (res.data.code = 1) {
|
|||
|
uni.hideLoading()
|
|||
|
// this.roomList = res.data.lists
|
|||
|
// this.roomList.push(res.data.lists)
|
|||
|
if (res.data.lists.length > 0) {
|
|||
|
const groupedArray = res.data.lists.reduce((acc, obj) => {
|
|||
|
const date = obj.date;
|
|||
|
if (!acc[date]) {
|
|||
|
acc[date] = [];
|
|||
|
}
|
|||
|
acc[date].push(obj);
|
|||
|
return acc;
|
|||
|
}, {});
|
|||
|
|
|||
|
this.roomList.push(groupedArray)
|
|||
|
// 输出结果
|
|||
|
console.log(this.roomList);
|
|||
|
}
|
|||
|
// this.page = this.page + 1
|
|||
|
}
|
|||
|
})
|
|||
|
},
|
|||
|
/**
|
|||
|
* 拉取房间列表
|
|||
|
* @return {[type]}
|
|||
|
* [description]
|
|||
|
*/
|
|||
|
getRoomList: function() {
|
|||
|
live({
|
|||
|
page_size: 10,
|
|||
|
page: this.page,
|
|||
|
app_name: 'shop',
|
|||
|
keyword: this.keyword
|
|||
|
}).then(res => {
|
|||
|
// console.log(res)
|
|||
|
if (res.data.code = 1) {
|
|||
|
uni.hideLoading()
|
|||
|
if (res.data.lists.length > 0) {
|
|||
|
let list = res.data.lists;
|
|||
|
let productList = this.$util.SplitArray(list, this.roomList);
|
|||
|
setTimeout(() => {
|
|||
|
this.$set(this, 'roomList', productList);
|
|||
|
}, 500)
|
|||
|
this.page = this.page + 1
|
|||
|
}
|
|||
|
|
|||
|
}
|
|||
|
})
|
|||
|
},
|
|||
|
jump: function(e) {
|
|||
|
console.log(e)
|
|||
|
uni.navigateTo({
|
|||
|
url: '/pages/live/spectator' + '?data=' + encodeURIComponent(JSON.stringify(e))
|
|||
|
})
|
|||
|
|
|||
|
},
|
|||
|
//历史直播间
|
|||
|
hsitroyjump: function(e) {
|
|||
|
console.log(e)
|
|||
|
|
|||
|
uni.navigateTo({
|
|||
|
url: '/pages/live/histroyroom' + '?data=' + encodeURIComponent(JSON.stringify(e))
|
|||
|
})
|
|||
|
|
|||
|
},
|
|||
|
//创建直播间
|
|||
|
jump_url() {
|
|||
|
if (this.isUserInfoExist()) {
|
|||
|
uni.navigateTo({
|
|||
|
url: '/pages/room/create_room'
|
|||
|
});
|
|||
|
} else {
|
|||
|
uni.showModal({
|
|||
|
// title: '标题',
|
|||
|
content: '用户信息不存在,是否重新登录',
|
|||
|
showCancel: true,
|
|||
|
cancelText: '取消',
|
|||
|
confirmText: '确定',
|
|||
|
success: function(res) {
|
|||
|
if (res.confirm) {
|
|||
|
// 用户点击了确定按钮
|
|||
|
uni.redirectTo({
|
|||
|
url: '/pages/login/login'
|
|||
|
})
|
|||
|
} else if (res.cancel) {
|
|||
|
// 用户点击了取消按钮
|
|||
|
console.log('用户点击了取消按钮');
|
|||
|
}
|
|||
|
}
|
|||
|
});
|
|||
|
}
|
|||
|
|
|||
|
},
|
|||
|
|
|||
|
}
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<style lang="scss">
|
|||
|
page {
|
|||
|
background-color: #FFFFFF;
|
|||
|
}
|
|||
|
|
|||
|
.goods_body_scroll {
|
|||
|
margin-top: 50rpx;
|
|||
|
}
|
|||
|
|
|||
|
.search_content {
|
|||
|
margin: 0 auto;
|
|||
|
width: 724rpx;
|
|||
|
height: 64rpx;
|
|||
|
padding: 2px 2px 2px 21.05rpx;
|
|||
|
border-radius: 175rpx;
|
|||
|
background: #fff;
|
|||
|
margin-bottom: 21rpx;
|
|||
|
position: relative;
|
|||
|
box-sizing: border-box;
|
|||
|
border: 2rpx solid #FCB9AD;
|
|||
|
margin-top: 30rpx;
|
|||
|
|
|||
|
.icon-sousuo {
|
|||
|
font-size: 26.32rpx;
|
|||
|
font-weight: bold;
|
|||
|
color: #c8c7c6;
|
|||
|
margin-right: 17.54rpx;
|
|||
|
}
|
|||
|
|
|||
|
.search_btn {
|
|||
|
color: #fff;
|
|||
|
width: 105.26rpx;
|
|||
|
height: 56rpx;
|
|||
|
line-height: 56rpx;
|
|||
|
background: #f84221;
|
|||
|
border-radius: 100px;
|
|||
|
font-size: 28.07rpx;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.content-detail {
|
|||
|
display: flex;
|
|||
|
justify-content: space-between;
|
|||
|
}
|
|||
|
|
|||
|
.banner {
|
|||
|
display: flex;
|
|||
|
padding-left: 28rpx;
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
.roomsbox-title {
|
|||
|
font-size: 30rpx;
|
|||
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
font-weight: 500;
|
|||
|
color: #333333;
|
|||
|
margin-bottom: 30rpx;
|
|||
|
margin-left: 20rpx;
|
|||
|
}
|
|||
|
|
|||
|
.banner-detail {
|
|||
|
width: 133rpx;
|
|||
|
margin-right: 30rpx;
|
|||
|
}
|
|||
|
|
|||
|
.banner-name {
|
|||
|
font-size: 33rpx;
|
|||
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
font-weight: 500;
|
|||
|
color: #333333;
|
|||
|
margin-bottom: 10rpx;
|
|||
|
}
|
|||
|
|
|||
|
.content-detaila {
|
|||
|
font-size: 33rpx;
|
|||
|
font-family: PingFang SC-Medium, PingFang SC;
|
|||
|
font-weight: 500;
|
|||
|
color: #333333;
|
|||
|
margin-bottom: 10rpx;
|
|||
|
margin-right: 20rpx;
|
|||
|
}
|
|||
|
|
|||
|
.banner-t {
|
|||
|
width: 46px;
|
|||
|
height: 0rpx;
|
|||
|
opacity: 1;
|
|||
|
border: 2rpx solid #F84221;
|
|||
|
margin: 0 auto;
|
|||
|
}
|
|||
|
|
|||
|
.noshuju {
|
|||
|
height: 760upx;
|
|||
|
}
|
|||
|
|
|||
|
.mico-18 {
|
|||
|
margin-top: 10upx;
|
|||
|
color: #666666;
|
|||
|
}
|
|||
|
|
|||
|
.view_body {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
background-color: #FFFFFF;
|
|||
|
}
|
|||
|
|
|||
|
.roomstatus-d {
|
|||
|
width: 20upx;
|
|||
|
height: 20upx;
|
|||
|
border-radius: 20upx;
|
|||
|
position: absolute;
|
|||
|
left: 20upx;
|
|||
|
top: 20upx;
|
|||
|
}
|
|||
|
|
|||
|
.roomstatus {
|
|||
|
position: absolute;
|
|||
|
left: 40upx;
|
|||
|
top: 10upx;
|
|||
|
font-size: 28upx;
|
|||
|
}
|
|||
|
|
|||
|
.livetitle {
|
|||
|
position: absolute;
|
|||
|
bottom: 20upx;
|
|||
|
width: 100%;
|
|||
|
text-align: center;
|
|||
|
height: 70upx;
|
|||
|
line-height: 70upx;
|
|||
|
color: #FFFFFF;
|
|||
|
}
|
|||
|
|
|||
|
.top {
|
|||
|
display: flex;
|
|||
|
padding: 20upx;
|
|||
|
top: 0;
|
|||
|
position: fixed;
|
|||
|
left: 0;
|
|||
|
width: 95%;
|
|||
|
background-color: #FFFFFF;
|
|||
|
z-index: 9999;
|
|||
|
}
|
|||
|
|
|||
|
.top_li {
|
|||
|
font-size: 32upx;
|
|||
|
padding: 0 20upx;
|
|||
|
display: table-cell;
|
|||
|
/* vertical-align:bottom; */
|
|||
|
padding-top: 10upx;
|
|||
|
color: #666666;
|
|||
|
}
|
|||
|
|
|||
|
.top-lable-box {
|
|||
|
/* #ifdef APP-PLUS */
|
|||
|
/* flex: 1; */
|
|||
|
|
|||
|
/* #endif */
|
|||
|
width: 80%;
|
|||
|
}
|
|||
|
|
|||
|
.active {
|
|||
|
font-size: 40upx;
|
|||
|
font-weight: 800;
|
|||
|
color: #333333;
|
|||
|
padding-top: 0;
|
|||
|
}
|
|||
|
|
|||
|
image {
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
|
|||
|
.roomsbox {
|
|||
|
display: flex;
|
|||
|
flex-wrap: wrap;
|
|||
|
}
|
|||
|
|
|||
|
.roomblock {
|
|||
|
width: 45%;
|
|||
|
height: 300upx;
|
|||
|
border-radius: 10upx;
|
|||
|
overflow: hidden;
|
|||
|
margin-bottom: 20upx;
|
|||
|
position: relative;
|
|||
|
margin-left: 2.5%;
|
|||
|
}
|
|||
|
|
|||
|
.right_top_scroll {
|
|||
|
white-space: nowrap;
|
|||
|
overflow: hidden;
|
|||
|
width: 100%;
|
|||
|
}
|
|||
|
|
|||
|
::-webkit-scrollbar {
|
|||
|
width: 0;
|
|||
|
height: 0;
|
|||
|
color: transparent;
|
|||
|
}
|
|||
|
|
|||
|
.scroll-view {
|
|||
|
display: inline-block;
|
|||
|
margin-right: 30rpx;
|
|||
|
text-align: center;
|
|||
|
font-size: 32rpx;
|
|||
|
height: 60rpx;
|
|||
|
line-height: 60rpx;
|
|||
|
box-sizing: border-box;
|
|||
|
padding: 0 10rpx;
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
.view_body {
|
|||
|
background: #FFFFFF;
|
|||
|
width: 100%;
|
|||
|
overflow: hidden;
|
|||
|
}
|
|||
|
|
|||
|
.mico-14 {
|
|||
|
margin-right: 4upx;
|
|||
|
}
|
|||
|
|
|||
|
.noshuju {
|
|||
|
height: 750upx;
|
|||
|
}
|
|||
|
|
|||
|
.noshuju_ico {
|
|||
|
width: 120upx;
|
|||
|
height: 80upx;
|
|||
|
margin: 0 auto;
|
|||
|
margin-top: 300rpx;
|
|||
|
|
|||
|
}
|
|||
|
|
|||
|
.noshuju_ico image {
|
|||
|
width: 100%;
|
|||
|
height: 100%;
|
|||
|
}
|
|||
|
|
|||
|
.mico-18 {
|
|||
|
margin-top: 10upx;
|
|||
|
color: #666666;
|
|||
|
}
|
|||
|
|
|||
|
.create-but {
|
|||
|
background-color: #1ce0c5;
|
|||
|
width: 120upx;
|
|||
|
height: 60upx;
|
|||
|
line-height: 60upx;
|
|||
|
color: #FFFFFF;
|
|||
|
text-align: center;
|
|||
|
border-radius: 10upx;
|
|||
|
/* #ifdef MP-WEIXIN */
|
|||
|
margin-left: 40upx;
|
|||
|
/* #endif */
|
|||
|
margin-top: 4upx;
|
|||
|
}
|
|||
|
</style>
|