shop-live/pages/room/room_list.vue

590 lines
12 KiB
Vue
Raw Normal View History

2023-10-28 16:31:53 +08:00
<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>