直播更新

2026-08-03 11:05:19 +08:00
parent 994b267f5c
commit d0776f9676
12 changed files with 288 additions and 177 deletions
@@ -4,12 +4,14 @@
  height: calc(100vh - 162rpx);
  display: flex;
  flex-direction: column;
+  padding: 28rpx 20rpx;
+
 }

 /* ===== 汇总卡片 ===== */
-.summary-section {
-  padding: 24rpx 24rpx 0;
-}
+// .summary-section {
+//   padding: 24rpx 24rpx 0;
+// }

 .summary-card {
  display: flex;
@@ -23,7 +25,6 @@
 .total-card {
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
  margin-bottom: 16rpx;
-  padding: 28rpx 20rpx;
 }

 .total-card .card-label {
@@ -72,7 +73,7 @@
 }

 .tabs-wrap {
-  margin: 16rpx;
+  margin-top: 16rpx;
 }

 /* ===== 红包列表 ===== */
@@ -94,7 +95,7 @@
  padding: 24rpx 30rpx;
  background: #fff;
  border-bottom: 1px solid #eee;
-  margin: 0 24rpx;
+  margin: 0;
  border-radius: 12rpx;
  margin-bottom: 12rpx;
 }
@@ -86,25 +86,52 @@ Page({
        const { id, outrewardsid } = e.currentTarget.dataset;
        const params: Record<string, any> = {
            appId: appId,
+            outRewardsId: outrewardsid,
            openId: wx.getStorageSync("openId"),
        };
        if (outrewardsid) params.outRewardsId = outrewardsid;
        if (id) params.redId = id;
+
        try {
            await receiveRedPacket(
                params,
                '/app/general/receive-red',
                appId
            );
-            // 领取成功，刷新当前列表
-            this.fetchRecords(1, false, this.data.tabs[this.data.activeTab].type);
+
+            // 乐观更新：先立即更新本地数据，避免后端状态同步延迟导致展示不友好
+            const { list, summary, activeTab, tabs } = this.data;
+            const targetItem = list.find((item: any) => item.id === id);
+
+            if (targetItem) {
+                const amount = targetItem.amount || 0;
+                const amountYuan = amount / 100;
+
+                const updatedList = list.map((item: any) =>
+                    item.id === id
+                        ? { ...item, state: 40, stateText: getStateText(40), canReceive: false, isRetry: false }
+                        : item
+                );
+
+                const updatedSummary = {
+                    ...summary,
+                    pendingAmount: Math.max(0, parseFloat(summary.pendingAmount) - amountYuan).toFixed(2),
+                    receivedAmount: (parseFloat(summary.receivedAmount) + amountYuan).toFixed(2),
+                };
+
+                this.setData({ list: updatedList, summary: updatedSummary });
+            }
+
+            // 确保后端有足够时间同步，直接刷新
+            setTimeout(() => {
+                this.fetchRecords(1, false, tabs[activeTab].type);
+            }, 3000);
        } catch (err) {
            console.error('领取红包失败:', err);
        }
    },

    async fetchRecords(page: number, append = false, type: number) {
-        const app = getApp<IAppOption>();
        const openId = wx.getStorageSync("openId");

        this.setData({
@@ -49,7 +49,12 @@ Page({
    }

    this.cacheRedirectPath(options);
-    this.setData({ activityId, inviterToken: options.inviterToken, userId: options.userId, isLandscape: String(options.isLandscape) === "true", });
+    this.setData({
+      activityId,
+      inviterToken: options.inviterToken,
+      userId: options.userId,
+      isLandscape: String(options.isLandscape) === "true",
+    });
    const app = getApp<IAppOption>();
    this.setLoading("正在校验登录状态...");
    const isLogin = app.checkLoginState();
@@ -57,22 +62,18 @@ Page({
      wx.reLaunch({ url: `/package-live/login/login?userId=${options?.userId}&activityId=${activityId}` });
      return;
    };
-  },
-  onReady() {
-    // onReady在页面生命周期中只执行一次，将初始化放在此处避免
-    // onHide销毁SDK后onShow重复初始化导致声音重复播放
-    this.initSdk(this.data.activityId, pageOptionsCache);
-  },
-  onShow() {
-    if (!this.data.sdk && this.data.activityId) {
-      this.initSdk(this.data.activityId, pageOptionsCache);
-    }
-  },

+    await this.initSdk(activityId, options);
+  },
+  onHide() {
+    // 不销毁SDK，避免接电话返回后重复初始化导致声音重叠
+  },
  async initSdk(
    activityId: number,
    options?: Record<string, string | undefined>,
  ) {
+    if (this.data.sdk) return; // 防止重复实例化SDK
+
    try {
      this.clearError();
      this.setLoading("正在获取直播凭证...");
@@ -85,7 +86,6 @@ Page({
        throw new Error("未获取到直播凭证，请稍后重试");
      }

-      this.destroySdk();
      this.setLoading("正在进入直播间...");

      const sdk = VolcMiniSdk({
@@ -103,28 +103,29 @@ Page({
      });
      const debugInfo = sdk.getDebugInfo()
      console.log('debugInfo:', debugInfo)
-      sdk.on(EVENTS.card.click, (payload: any) => {
-        wx.navigateTo({
-          url: payload?.url
-        })
-      });
-      // 监听浮窗商品卡片点击事件。
-      sdk.on('floatingCard.click', (payload: any) => {
-        wx.navigateTo({
-          url: payload?.url
-        })
-      })

+      //商品卡片，浮动卡片
+      sdk.on('floatingCard.click', this.handleFloatingCardClick);
+      //商品卡片，购物车
+      sdk.on(EVENTS.card.click, (payload: any) => {
+        console.log('card.click', payload)
+      });
      // 按钮红包功能
      sdk.on(EVENTS.feature.click, (payload: any) => {
        console.log('feature.click', payload)
-      })
-
-
+      });
      sdk.on(EVENTS.luckymoney.withdrawal, (payload: any) => {
        this.handleReceive(payload);
      });

+      sdk.on(EVENTS.activity.status, (status: 1 | 2 | 3 | 4 | 5) => {
+        if (status === 4) {
+          wx.switchTab({
+            url: `/pages/tab-bar/profile/index`
+          })
+        }
+      });
+
      this.setData({
        sdk,
        loading: false,
@@ -171,7 +172,40 @@ Page({
      data?.signToken || ""
    );
  },
-  handleReceive: lockPromise(async function(data: any) {
+  handleFloatingCardClick: lockPromise(async function (payload: any) {
+    if (!payload?.RedirectUrl) return;
+    try {
+      const res = await request({
+        options: {
+          url: payload.RedirectUrl,
+          method: 'POST',
+        },
+      });
+      if (res.code !== 200) {
+        wx.showToast({ title: res.msg || '请求失败', icon: 'none' });
+        return;
+      }
+      const payParams = res.data;
+      wx.requestPayment({
+        timeStamp: payParams.timeStamp,
+        nonceStr: payParams.nonceStr,
+        package: payParams.packageVal,
+        signType: payParams.signType || 'RSA',
+        paySign: payParams.paySign,
+        success() {
+          wx.showToast({ title: '支付成功', icon: 'success' });
+          console.log('支付成功:');
+        },
+        fail(err) {
+          wx.showToast({ title: '支付取消', icon: 'none' });
+          console.error('支付失败:', err);
+        },
+      });
+    } catch (err) {
+      console.error('floatingCard请求失败:', err);
+    }
+  }),
+  handleReceive: lockPromise(async function (data: any) {
    const params = {
      appId: appId,
      outRewardsId: data.redPacketId,
@@ -274,7 +308,6 @@ Page({
      });
    }
  },
-  commentCheck() { },

  onUnload() {
    this.destroySdk();
@@ -1,18 +1,18 @@
 <view class="wxroom">
- 
-
-  <volc-live-portrait
-    wx:if="{{!isLandscape}}"
-    sdkInstance="{{sdk}}"
-    bind:commentCheck="commentCheck"
-  ></volc-live-portrait>
-
-   <volc-live-landscape
-    wx:else
+  <!-- <volc-live-landscape
+    wx:if="{{sdk && isLandscape}}"
    sdkInstance="{{sdk}}"
    bind:commentCheck="commentCheck"
  ></volc-live-landscape>

+  <volc-live-portrait
+    sdkInstance="{{sdk}}"
+    bind:commentCheck="commentCheck"
+  ></volc-live-portrait> -->
+ <!-- 竖屏直播间整体组件 -->
+  <volc-live-portrait  wx:if="{{!isLandscape}}" sdkInstance="{{sdk}}" bind:commentCheck="commentCheck"/> 
+  <!-- 横屏直播间整体组件 -->
+  <volc-live-landscape wx:else sdkInstance="{{sdk}}" bind:commentCheck="commentCheck"/>
 <view>

 </view>