feat: 添加直播间跳转功能，优化观众页面数据展示

2026-03-07 20:12:22 +07:00
parent 537d598906
commit fa5849fb6f
4 changed files with 137 additions and 101 deletions
--- a/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
+++ b/TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue
@@ -288,6 +288,7 @@
  /** 点击跳转直播间 */
  const onLive = () => {
    // #ifdef APP-PLUS
+    uni.$liveID = goodsData.value.id
    navigateTo('/pages/audience/index', {
      liveID: goodsData.value.id
    })
--- a/pages/audience/index.nvue
+++ b/pages/audience/index.nvue
@@ -59,11 +59,11 @@
 							/>
 						</view>
 						<view class="participant-count">
-							<text v-if="topNUmber" class="count-text">
-								{{ Number(topNUmber) > 100 ? '99+' : topNUmber }}
+							<text v-if="Number(topNUmber) > 0" class="count-text">
+								{{ Number(topNUmber) > 100 ? '99+' : topNUmber }}1
 							</text>
 							<text v-else class="count-text">
-								{{ audienceList.length }}
+								{{ audienceNumber }}
 							</text>
 						</view>
 					</view>
@@ -268,6 +268,7 @@
 		addLiveSeatEventListener,
 		removeLiveSeatEventListener
 	} = useLiveSeatState(uni?.$liveID)
+	console.log("uniliveID",uni?.$liveID)
 	const { audienceList } = useLiveAudienceState(uni?.$liveID)
 	const { disconnect, connected, cancelApplication } = useCoGuestState(
 		uni?.$liveID
@@ -346,6 +347,7 @@
 	const coGuestSheetItems = ref(['取消连麦申请'])
 	const coGuestSheetTitle = ref('')
 	const topNUmber = ref('')
+	const audienceNumber = computed(()=>audienceList.value.length)

 	// 监听座位变化：当自身不在 seatList 时，将本地连麦状态重置为 IDLE
 	watch(
--- a/pages/my-index/my-index.vue
+++ b/pages/my-index/my-index.vue
@@ -6,6 +6,7 @@
  import { formatNumberWithWan } from '../../utils'
  import { getUserPayPwd } from '@/api/my-index'
  import { useUserStore } from '../../stores/user'
+  import { ref } from 'vue'

  const bottomList = [
    {
@@ -51,7 +52,7 @@
    }
  ]

-  const { getIntegral } = useUserStore()
+  const { getIntegral, refreshUserInfo } = useUserStore()
  const { showDialog } = useUI()
  const { userInfo, integralData } = useAuthUser()

@@ -72,6 +73,12 @@
    }
  }

+  const paging = ref(null)
+  const onRefresh = async () => {
+    await refreshUserInfo()
+    paging.value.complete()
+  }
+
  onLoad(() => {
    // 获取用户信息
    console.log(userInfo.value, '===获取用户信息')
@@ -82,73 +89,31 @@
 </script>

 <template>
-  <view class="my-index">
-    <view
-      class="top-info"
-      @click="navigateTo('/pages/my-index/personal-center/index')"
-    >
-      <view class="left-box">
-        <image
-          v-if="userInfo?.avatar"
-          :src="userInfo?.avatar"
-          mode="aspectFill"
-          class="avatar"
-        ></image>
-        <uni-icons v-else type="contact-filled" size="70"></uni-icons>
-        <view class="nickname">
-          <text class="name">{{ userInfo?.userName || '' }}</text>
-          <text class="name">
-            ID: {{ userInfo?.invitationCode || '' }}
-          </text>
-        </view>
-      </view>
-      <image
-        src="/static/images/public/right-arrow.png"
-        mode="heightFix"
-        class="right-box"
-      ></image>
-    </view>
-    <!-- 卡片列表 -->
-    <view class="card-list">
-      <view class="top-box">
-        <view class="left-name">
-          <text>账户积分</text>
-          <text>{{ integralData }}</text>
-        </view>
-        <view class="right-btn">
-          <button
-            @click="
-              showDialog('提示', '联系客服或者联系上级分享人', false)
-            "
-          >
-            充值
-          </button>
-          <button @click="navigateTo('/pages/my-index/withdraw')">
-            提现
-          </button>
-        </view>
-      </view>
-      <!-- 入口列表 -->
+  <z-paging
+    ref="paging"
+    :paging-style="{ 'background-color': '#f9f9f9' }"
+    refresher-only
+    @onRefresh="onRefresh"
+  >
+    <view class="my-index">
      <view
-        v-for="(item, index) in bottomList"
-        :key="index"
-        class="item-box"
-        @click="item.url && onGo(item)"
+        class="top-info"
+        @click="navigateTo('/pages/my-index/personal-center/index')"
      >
-        <view class="item-name">
-          <uni-icons
-            v-if="item.icon === 'videocam'"
-            type="videocam"
-            size="64rpx"
-            color="#1b38b9"
-          ></uni-icons>
+        <view class="left-box">
          <image
-            v-else
-            :src="`/static/images/my-index/${item.icon}.png`"
-            mode="heightFix"
-            class="icon"
+            v-if="userInfo?.avatar"
+            :src="userInfo?.avatar"
+            mode="aspectFill"
+            class="avatar"
          ></image>
-          <text class="text-box">{{ item.name }}</text>
+          <uni-icons v-else type="contact-filled" size="70"></uni-icons>
+          <view class="nickname">
+            <text class="name">{{ userInfo?.userName || '' }}</text>
+            <text class="name">
+              ID: {{ userInfo?.invitationCode || '' }}
+            </text>
+          </view>
        </view>
        <image
          src="/static/images/public/right-arrow.png"
@@ -156,8 +121,57 @@
          class="right-box"
        ></image>
      </view>
+      <!-- 卡片列表 -->
+      <view class="card-list">
+        <view class="top-box">
+          <view class="left-name">
+            <text>账户积分</text>
+            <text>{{ integralData }}</text>
+          </view>
+          <view class="right-btn">
+            <button
+              @click="
+                showDialog('提示', '联系客服或者联系上级分享人', false)
+              "
+            >
+              充值
+            </button>
+            <button @click="navigateTo('/pages/my-index/withdraw')">
+              提现
+            </button>
+          </view>
+        </view>
+        <!-- 入口列表 -->
+        <view
+          v-for="(item, index) in bottomList"
+          :key="index"
+          class="item-box"
+          @click="item.url && onGo(item)"
+        >
+          <view class="item-name">
+            <uni-icons
+              v-if="item.icon === 'videocam'"
+              type="videocam"
+              size="64rpx"
+              color="#1b38b9"
+            ></uni-icons>
+            <image
+              v-else
+              :src="`/static/images/my-index/${item.icon}.png`"
+              mode="heightFix"
+              class="icon"
+            ></image>
+            <text class="text-box">{{ item.name }}</text>
+          </view>
+          <image
+            src="/static/images/public/right-arrow.png"
+            mode="heightFix"
+            class="right-box"
+          ></image>
+        </view>
+      </view>
    </view>
-  </view>
+  </z-paging>
 </template>

 <style lang="scss" scoped>
--- a/pages/my-index/wallet/index.vue
+++ b/pages/my-index/wallet/index.vue
@@ -54,48 +54,63 @@
  onShow(() => {
    getData()
  })
+
+  const paging = ref(null)
+  const onRefresh = async () => {
+    await getData()
+    paging.value.complete()
+  }
 </script>

 <template>
-  <view class="wallet">
-    <!-- 顶部样式 -->
-    <view class="top-card">
-      <view class="left-box">
-        <text>我的资产</text>
-        <text>{{ integralData }}</text>
+  <z-paging
+    ref="paging"
+    :paging-style="{ 'background-color': '#f9f9f9' }"
+    refresher-only
+    @onRefresh="onRefresh"
+  >
+    <view class="wallet">
+      <!-- 顶部样式 -->
+      <view class="top-card">
+        <view class="left-box">
+          <text>我的资产</text>
+          <text>{{ integralData }}</text>
+        </view>
+        <view class="right-box">
+          <button
+            @click="
+              showDialog('提示', '联系客服或者联系上级分享人', false)
+            "
+          >
+            充值
+          </button>
+          <button @click="navigateTo('/pages/my-index/withdraw')">
+            提现
+          </button>
+        </view>
      </view>
-      <view class="right-box">
-        <button
-          @click="showDialog('提示', '联系客服或者联系上级分享人', false)"
-        >
-          充值
-        </button>
-        <button @click="navigateTo('/pages/my-index/withdraw')">
-          提现
-        </button>
-      </view>
-    </view>

-    <view
-      v-for="(item, index) in itemList"
-      :key="index"
-      class="public-card"
-      @click="
-        item.url &&
+      <view
+        v-for="(item, index) in itemList"
+        :key="index"
+        class="public-card"
+        @click="
+          item.url &&
          navigateTo(
            item.url,
            item.key === '3' ? { type: item.isType ? 1 : 0 } : null
          )
-      "
-    >
-      <view class="left-box">
-        <text>{{ item.title }}</text>
-      </view>
-      <view class="right-box">
-        <uni-icons type="right" size="16" color="#999999"></uni-icons>
+        "
+      >
+        <view class="left-box">
+          <text>{{ item.title }}</text>
+        </view>
+        <view class="right-box">
+          <uni-icons type="right" size="16" color="#999999"></uni-icons>
+        </view>
      </view>
    </view>
-  </view>
+  </z-paging>
 </template>

 <style lang="scss" scoped>
@@ -113,7 +128,9 @@
    align-items: center;
    justify-content: space-between;
    position: relative;
-    font-family: PingFang SC, PingFang SC;
+    font-family:
+      PingFang SC,
+      PingFang SC;
    font-style: normal;
    text-transform: none;
    &::after {
@@ -152,7 +169,9 @@
        height: 64rpx;
        line-height: 64rpx;
        border-radius: 100rpx 100rpx 100rpx 100rpx;
-        font-family: PingFang SC, PingFang SC;
+        font-family:
+          PingFang SC,
+          PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;