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