114 lines
2.4 KiB
Vue
114 lines
2.4 KiB
Vue
<script setup>
|
|
import { navigateTo } from '@/utils/router'
|
|
import { getLiveRoomList } from '../../../api/tui-kit'
|
|
import { ref } from 'vue'
|
|
|
|
const list = ref([])
|
|
const paging = ref(null)
|
|
const getList = async (pageNum, pageSize) => {
|
|
try {
|
|
const res = await getLiveRoomList({
|
|
pageNum,
|
|
pageSize
|
|
})
|
|
paging.value.complete(res.rows)
|
|
} catch (error) {
|
|
paging.value.complete(false)
|
|
}
|
|
}
|
|
|
|
const onGo = item => {
|
|
// #ifdef APP-PLUS
|
|
uni.$liveID = item.roomId
|
|
navigateTo('/pages/audience/index', { liveID: item.roomId })
|
|
// #endif
|
|
|
|
// #ifdef H5
|
|
navigateTo('/pages/discover/livelist/h5-live-player', {
|
|
liveId: item.roomId
|
|
})
|
|
// #endif
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<z-paging
|
|
ref="paging"
|
|
v-model="list"
|
|
:default-page-no="1"
|
|
:default-page-size="15"
|
|
safe-area-inset-bottom
|
|
use-safe-area-placeholder
|
|
:paging-style="{ 'background-color': '#f9f9f9' }"
|
|
@query="getList"
|
|
>
|
|
<view class="list-box">
|
|
<view
|
|
v-for="item in list"
|
|
:key="item.roomId"
|
|
class="live-box"
|
|
@click="onGo(item)"
|
|
>
|
|
<!-- 背景图 -->
|
|
<image
|
|
:src="item.coverUrl"
|
|
lazy-load
|
|
mode="aspectFill"
|
|
class="bg-box"
|
|
/>
|
|
<view class="title-box">
|
|
<view class="title-text">
|
|
<text>
|
|
{{ item.roomName }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.list-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 0 20rpx;
|
|
|
|
.live-box {
|
|
width: 48%;
|
|
margin-top: 32rpx;
|
|
height: 420rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
.bg-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.title-box {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
bottom: 0;
|
|
padding: 16rpx 0;
|
|
background: rgba(88, 88, 88, 0.164);
|
|
display: flex;
|
|
align-items: center;
|
|
.title-text {
|
|
color: #fff;
|
|
padding: 0 10rpx 0 14rpx;
|
|
font-size: 26rpx;
|
|
text {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1; /* 显示3行 */
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|