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> |