QAQ

pages/discover/discover.vue

@@ -2,7 +2,6 @@
   import { navigateTo } from '@/utils/router'
   import { ref } from 'vue'
   import { useUI } from '@/utils/use-ui'
-  import { getLiveRoomList } from '../../api/tui-kit'
 
   const { showDialog } = useUI()
 
@@ -52,22 +51,7 @@
       return
     }
     if (item === 'liveStream') {
-      getLiveRoomList({
-        pageNum: 1,
-        pageSize: 15
-      })
-
-      return
-      let url = ''
-      // #ifdef APP-PLUS
-      url = '/pages/discover/livelist/index'
-      // #endif
-
-      // #ifdef H5
-      url = '/pages/discover/livelist/h5-list'
-      // #endif
-      navigateTo(url)
-      return
+      navigateTo('/pages/discover/livelist/list')
     }
   }
 

pages/discover/livelist/list.vue

@@ -0,0 +1,113 @@
+<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>