需要添加直播接口

pages/discover/discover.vue

@@ -8,7 +8,10 @@
     { name: '朋友圈', icon: 'circle' },
     { name: '线上商城', icon: 'mall' },
     { name: '我的拼团', icon: 'team' },
-    { name: '项目入口', icon: 'project' }
+    { name: '项目入口', icon: 'project' },
+    // #ifdef APP-PLUS
+    { name: '直播列表', icon: 'liveStream' }
+    // #endif
   ]
 
   const onGo = item => {
@@ -36,6 +39,10 @@
       navigateTo('/pages/shop-together/index')
       return
     }
+    if (item === 'liveStream') {
+      navigateTo('/pages/discover/livelist/index')
+      return
+    }
   }
 </script>
 

pages/discover/livelist/index.nvue

@@ -0,0 +1,252 @@
+<template>
+  <view
+    style="position: relative; height: 160rpx; padding-top: 80rpx;  background-color: #fff; display: flex; flex-direction: row; justify-content: center; align-items: center;">
+    <image style="width: 21rpx; height: 34rpx; position: absolute; left: 60rpx;" src="/static/images/back-black.png"
+      @tap="handleGoBack" />
+    <text>在线直播</text>
+    <image style="width: 36rpx; height: 36rpx; position: absolute; right: 60rpx;" src="/static/images/refresh.png"
+      @tap="handlePageRefresh" />
+  </view>
+  <view class="home-container" :style="{ height: safeArea.height + 'px' }">
+    <live-list />
+    <!-- 创建房间按钮 -->
+    <!-- <view class="home-footer">
+      <view class="create-btn" @click="goAnchorPage()">
+        <image style="width: 36rpx; height: 36rpx; margin-right: 10rpx;" src="/static/images/create-live.png" />
+        <text class="btn-text">开2直播</text>
+      </view>
+    </view> -->
+  </view>
+</template>
+
+<script setup>
+  import { reLaunch } from '@/utils/router';
+  import {
+    ref,
+    onMounted,
+    watch
+  } from 'vue';
+  import {
+    onLoad,
+    onShow
+  } from '@dcloudio/uni-app';
+
+  import LiveList from '@/uni_modules/tuikit-atomic-x/components/LiveList.nvue';
+  import {
+    useLiveListState
+  } from "@/uni_modules/tuikit-atomic-x/state/LiveListState";
+  const {
+    fetchLiveList,
+    liveListCursor
+  } = useLiveListState();
+
+  const safeArea = ref({
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: 375,
+    height: 750,
+  });
+
+  onMounted(() => {
+    uni.getSystemInfo({
+      success: (res) => {
+        safeArea.value = res.safeArea;
+      }
+    });
+  });
+
+
+
+  onShow(() => {
+    console.warn(`home onShow`);
+    needRefresh.value = true;
+  });
+
+  const goAnchorPage = () => {
+    uni.redirectTo({
+      url: '/pages/anchor/index'
+    });
+  }
+
+  const handleGoBack = () => {
+    console.log('返回')
+    reLaunch('/pages/discover/discover')
+  }
+
+  const handlePageRefresh = () => {
+    const params = {
+      cursor: '',
+      count: 20,
+      success: () => {
+        fetchLiveListRecursively(liveListCursor.value);
+      }
+    };
+    fetchLiveList(params);
+  }
+
+  const fetchLiveListRecursively = (cursor) => {
+    const params = {
+      cursor: cursor,
+      count: 20,
+      success: () => {
+        if (liveListCursor.value) {
+          fetchLiveListRecursively(liveListCursor.value);
+        } else {
+          uni.showToast({
+            title: '刷新完成'
+          });
+        }
+      },
+      fail: (err) => {
+        console.error(`fetchLiveListRecursively failed, err: ${JSON.stringify(err)}`);
+      }
+    };
+    fetchLiveList(params);
+  }
+</script>
+
+<style>
+  .home-container {
+    flex: 1;
+    background-color: #F2F5FC;
+    position: relative;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20rpx 32rpx;
+    background-color: #ffffff;
+    border-bottom-width: 1rpx;
+    border-bottom-color: #f0f0f0;
+    position: relative;
+    height: 120rpx;
+  }
+
+  .header-left {
+    width: 80rpx;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .back-icon {
+    width: 40rpx;
+    height: 40rpx;
+    opacity: 0.8;
+  }
+
+  .header-center {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+
+  .header-title {
+    font-size: 36rpx;
+    font-weight: 600;
+    color: #333333;
+    margin-bottom: 8rpx;
+  }
+
+  .title-underline {
+    width: 60rpx;
+    height: 4rpx;
+    background-color: #007AFF;
+    border-radius: 2rpx;
+  }
+
+  .header-right {
+    width: 80rpx;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .help-icon {
+    width: 40rpx;
+    height: 40rpx;
+    opacity: 0.8;
+  }
+
+  .user-bar {
+    flex-direction: row;
+    align-items: center;
+    padding-top: 32rpx;
+    padding-bottom: 16rpx;
+    padding-left: 32rpx;
+    padding-right: 32rpx;
+    background-color: #fff;
+  }
+
+  .avatar {
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: 32rpx;
+    margin-right: 16rpx;
+  }
+
+  .user-info {
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .user-name {
+    font-size: 28rpx;
+    color: #222;
+    font-weight: 700;
+  }
+
+  .user-id {
+    font-size: 22rpx;
+    color: #999;
+    margin-top: 4rpx;
+  }
+
+  .user-icon {
+    width: 40rpx;
+    height: 40rpx;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .icon-help {
+    width: 40rpx;
+    height: 40rpx;
+  }
+
+  .home-footer {
+    position: absolute;
+    bottom: 60rpx;
+    width: 750rpx;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .create-btn {
+    background-color: #0468FC;
+    border-radius: 999px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 25rpx 60rpx;
+  }
+
+
+  .btn-text {
+    color: #fff;
+    font-size: 32rpx;
+    font-weight: 700;
+  }
+</style>