508 lines
9.6 KiB
Vue
508 lines
9.6 KiB
Vue
<template>
|
|
<view class="view_body">
|
|
<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="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>
|
|
|
|
<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 dataList" :key="index">
|
|
<view class="roomsbox-a">
|
|
<view class="roomsbox-title">
|
|
{{pp.date}}
|
|
</view>
|
|
<view class="roomsbox">
|
|
<view class="roomblock" style="border: 1px solid #e1d9d4;" v-for="(room,j) in pp.records"
|
|
: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&&isindex==0">
|
|
<emptyPage title="暂无房间信息"></emptyPage>
|
|
</view>
|
|
<view class="noshuju" v-if="dataList.length==0&&isindex==1">
|
|
<emptyPage title="暂无房间信息"></emptyPage>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import emptyPage from '@/components/emptyPage.vue';
|
|
import {
|
|
live,
|
|
playbackList
|
|
} from '@/api/live.js'
|
|
|
|
|
|
export default {
|
|
components: {
|
|
emptyPage
|
|
},
|
|
data() {
|
|
return {
|
|
keyword: '',
|
|
device_height: 380,
|
|
page: 1,
|
|
dataindex: 1,
|
|
page_data: true,
|
|
list: [{
|
|
name: '直播精选'
|
|
},
|
|
{
|
|
name: '历史直播'
|
|
},
|
|
|
|
],
|
|
roomList: [],
|
|
dataList:[],
|
|
user: [],
|
|
index: 0,
|
|
isGetLoginInfo: true,
|
|
isindex: 0,
|
|
|
|
};
|
|
},
|
|
onLoad() {
|
|
|
|
|
|
},
|
|
mounted() {
|
|
this.getRoomList()
|
|
this.getbackList()
|
|
},
|
|
onShow() {},
|
|
onReachBottom() {
|
|
this.getRoomList()
|
|
},
|
|
|
|
onPullDownRefresh: function() {
|
|
console.log('下拉刷新')
|
|
this.getRoomList()
|
|
this.getbackList()
|
|
},
|
|
methods: {
|
|
|
|
//输入
|
|
change(e) {
|
|
// console.log(e)
|
|
if (e.detail.value.length <= 0) {
|
|
this.page = 1
|
|
this.getRoomList()
|
|
}
|
|
},
|
|
//查询
|
|
search() {
|
|
this.page = 1
|
|
this.roomList=[]
|
|
this.dataList=[]
|
|
if (this.isindex == 0) {
|
|
this.getRoomList()
|
|
} else {
|
|
this.getbackList()
|
|
}
|
|
},
|
|
//分类
|
|
zhisort(i) {
|
|
this.isindex = i
|
|
this.page = 1
|
|
this.keyword=''
|
|
this.roomList=[]
|
|
this.dataList=[]
|
|
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 => {
|
|
|
|
if (res.data.lists.length > 0) {
|
|
|
|
// 初始化一个空数组来存储结果
|
|
let result = [];
|
|
|
|
// 遍历每一条直播记录
|
|
for (let i = 0; i < res.data.lists.length; i++) {
|
|
let record = res.data.lists[i];
|
|
let date = record.date;
|
|
|
|
// 检查结果数组中是否已存在该日期的分组
|
|
let group = result.find((item) => item.date === date);
|
|
|
|
// 如果不存在，则创建一个新的分组
|
|
if (!group) {
|
|
group = {
|
|
date: date,
|
|
records: []
|
|
};
|
|
result.push(group);
|
|
}
|
|
|
|
// 将当前记录添加到对应的分组中
|
|
group.records.push(record);
|
|
}
|
|
|
|
this.dataList = result
|
|
|
|
// 输出结果
|
|
|
|
}
|
|
})
|
|
},
|
|
/**
|
|
* 拉取房间列表
|
|
* @return {[type]}
|
|
* [description]
|
|
*/
|
|
getRoomList() {
|
|
live({
|
|
page_size: 10,
|
|
page: this.page,
|
|
app_name: 'shop',
|
|
keyword: this.keyword
|
|
}).then(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
|
|
}
|
|
|
|
}else{
|
|
uni.showModal({
|
|
title:res.msg
|
|
})
|
|
}
|
|
})
|
|
},
|
|
//历史直播间
|
|
hsitroyjump: function(e) {
|
|
|
|
uni.navigateTo({
|
|
url: '/pages/room/histroyroom'+'?data=' + encodeURIComponent(JSON.stringify(e))
|
|
})
|
|
|
|
|
|
},
|
|
|
|
jump: function(e) {
|
|
uni.navigateTo({
|
|
url: '/pages/room/spectator' + '?data=' + encodeURIComponent(JSON.stringify(e))
|
|
});
|
|
|
|
},
|
|
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
|
|
.banner {
|
|
display: flex;
|
|
padding-left: 28rpx;
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.roomsbox-title {
|
|
font-size: 30rpx;
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
|
|
margin-bottom: 30rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
.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%;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.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> |