直播更新

This commit is contained in:
陈誉午
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({
+61 -28
View File
@@ -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,6 +172,39 @@ Page({
data?.signToken || ""
);
},
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,
@@ -274,7 +308,6 @@ Page({
});
}
},
commentCheck() { },
onUnload() {
this.destroySdk();
+10 -10
View File
@@ -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>
@@ -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;
}
@@ -3,14 +3,12 @@ import { request } from "../../../utils/request";
import { receiveRedPacket } from "../../../utils/util";
const app = getApp<IAppOption>();
const pad = (n: number): string => String(n).padStart(2, "0");
const formatDate = (isoString: string): string => {
const date = new Date(isoString);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}`;
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
};
const RED_STATE_MAP: Record<number, string> = {
@@ -27,19 +25,13 @@ const RED_STATE_MAP: Record<number, string> = {
50: "已过期",
};
const getStateText = (state: number) => {
return RED_STATE_MAP[state] || "发放中";
};
const getStateText = (state: number): string => RED_STATE_MAP[state] || "发放中";
const FAILED_STATES = [30, 31, 32, 33, 34];
const canReceive = (state: number) => {
return state === 11 || state === 21 || FAILED_STATES.includes(state);
};
const canReceive = (state: number): boolean => state === 11 || state === 21 || FAILED_STATES.includes(state);
const isRetry = (state: number) => {
return FAILED_STATES.includes(state);
};
const isRetry = (state: number): boolean => FAILED_STATES.includes(state);
Page({
data: {
@@ -60,19 +52,18 @@ Page({
pendingAmount: '0.00',
expiredAmount: '0.00',
},
store: {},
safeBottom: app.globalData.safeBottom,
safeTop: app.globalData.safeTop,
},
async onLoad() {
await this.fetchRecords(1, false, this.data.tabs[0].type);
onLoad() {
this.fetchRecords(1, false, this.data.tabs[0].type);
},
onReachBottom() {
if (this.data.loading || !this.data.hasMore) return;
const nextPage = this.data.current + 1;
this.fetchRecords(nextPage, true, this.data.tabs[this.data.activeTab].type);
const { loading, hasMore, current, activeTab, tabs } = this.data;
if (loading || !hasMore) return;
this.fetchRecords(current + 1, true, tabs[activeTab].type);
},
onTabChange(e: any) {
@@ -84,34 +75,49 @@ Page({
async handleReceive(e: any) {
const { id } = e.currentTarget.dataset;
const { code } = this.data.store as Record<string, any>;
const { code } = app.globalData.store || {};
const params = {
appId,
code,
openId: wx.getStorageSync("openId"),
redId: id,
}
try {
await receiveRedPacket(
params,
{ appId, code, openId: wx.getStorageSync("openId"), redId: id },
'/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({
store: app.globalData.store,
});
if (!openId) {
wx.showToast({ title: "请先登录", icon: "none" });
return;
@@ -119,48 +125,34 @@ Page({
if (append) {
this.setData({ loading: true });
} else {
wx.showLoading({ title: "加载中" });
}
try {
let res: any;
const { state, seeId, code } = this.data.store as Record<string, any>;
const params: Record<string, any> = {};
params.openId = openId;
params.current = page;
params.pageSize = 15;
params.type = type;
const { state, seeId, code } = app.globalData.store || {};
const params: Record<string, any> = {
openId,
current: page,
pageSize: this.data.pageSize,
type,
};
if (code) params.code = code;
if (state) params.state = state;
if (seeId) params.seeId = seeId;
// if (code) {
res = await request({
const res: any = await request({
options: {
url: "/app/video-watch/record",
data: params,
},
isLoading: !append,
// needLogin: false,
});
// } else {
// res = await request({
// options: {
// url: "/live/watch/record",
// data: params,
// },
// isLoading: !append,
// needLogin: false,
// });
// }
const records = res.data?.records || res.records || [];
const items = records.map((item: any) => ({
...item,
date: formatDate(item.createdTime),
stateText: getStateText(item.state),
amountText: `${(item.amount / 100).toFixed(2)}`,
amountText: (item.amount / 100).toFixed(2),
canReceive: canReceive(item.state),
isRetry: isRetry(item.state),
}));
@@ -171,7 +163,6 @@ Page({
hasMore: records.length >= this.data.pageSize,
});
// 汇总数据在 res.data 根层级,单位是分,转为元
const d = res.data;
if (d && d.totalAmount !== undefined) {
this.setData({
@@ -188,8 +179,6 @@ Page({
} finally {
if (append) {
this.setData({ loading: false });
} else {
wx.hideLoading();
}
}
},
@@ -7,14 +7,17 @@
<text class="card-amount total-amount">¥{{summary.totalAmount}}</text>
</view>
<view class="summary-row">
<view class="summary-card sub-card">
<text class="card-label">待领取金额</text>
<text class="card-amount pending">¥{{summary.pendingAmount}}</text>
</view>
<view class="summary-card sub-card">
<text class="card-label">已领取金额</text>
<text class="card-amount received">¥{{summary.receivedAmount}}</text>
</view>
<view class="summary-card sub-card">
<text class="card-label">已过期金额</text>
<text class="card-amount expired">¥{{summary.expiredAmount}}</text>
+25 -3
View File
@@ -76,6 +76,26 @@ rich-content img {
display: block;
}
.report-nav-btn{
white-space: nowrap;
background: #FF4D4F;
color: #fff;
font-size: 22rpx;
padding: 6rpx 24rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
border: none;
outline: none;
&:active {
opacity: 0.8;
transform: scale(0.95);
}
}
.error{
white-space: nowrap;
background: #FF4D4F;
@@ -107,14 +127,16 @@ rich-content img {
}
.history{
position: absolute;
right: 10rpx;
top: 110rpx;
position: fixed;
right: 0;
bottom: 40%;
display: flex;
justify-content: center;
align-items: center;
padding-left: 12rpx;
border-radius: 48rpx 0rpx 0rpx 48rpx;
box-sizing: border-box;
z-index: 999;
.icon{
width: 100rpx;
height: 80rpx;
+70 -34
View File
@@ -66,13 +66,10 @@ Page({
const bool = await app.login("video");
if (!bool) return;
// 在需要保护的页面调用
// 开启防截屏(仅限当前页面生命周期内)
//@ts-ignore
wx.setVisualEffectOnCapture({
visualEffect: 'hidden', // 录屏或截图时隐藏内容
success: function () {
console.log('防截屏录屏保护已开启');
}
visualEffect: 'hidden',
});
},
@@ -91,7 +88,7 @@ Page({
handleBack() {
wx.switchTab({
url: "/pages/tab-bar/course/course",
url: "/pages/tab-bar/education/index",
});
},
/**
@@ -104,12 +101,24 @@ Page({
/**
* 生命周期函数--监听页面隐藏
*/
onHide() { },
onHide() {
// 离开视频页时恢复截屏能力,避免影响其他页面
//@ts-ignore
wx.setVisualEffectOnCapture({
visualEffect: 'none',
});
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() { },
onUnload() {
// 卸载时恢复截屏能力
//@ts-ignore
wx.setVisualEffectOnCapture({
visualEffect: 'none',
});
},
/**
* 页面相关事件处理函数--监听用户下拉动作
@@ -126,7 +135,7 @@ Page({
*/
onShareAppMessage() { },
onChange(e: any) {
onChange(event: any) {
this.setData({
active: event.detail.index,
});
@@ -279,14 +288,14 @@ Page({
if (code) {
res = await request({
options: {
url: "/app/video-watch/interactive?version=" + version.interactive,
url: "/app/video-watch/interactive",
data: params,
},
});
} else {
res = await request({
options: {
url: "/app/watch/interactive?version=" + version.interactive,
url: "/app/watch/interactive",
data: params,
},
});
@@ -301,29 +310,53 @@ Page({
return;
}
const { pass, redId } = res.data;
if (redId) {
const { pass, redPackage } = res.data || {};
if (pass) {
wx.showModal({
content: "🎉 领取红包!",
showCancel: false,
confirmText: "立即领取",
confirmColor: "#FF0000",
success: (res) => {
success: async (res) => {
if (res.confirm) {
this.handleReceive(redId);
}
if (redPackage?.packageInfo) {
try {
wx.showLoading({ title: "领取中", mask: true });
if (wx.canIUse?.("requestMerchantTransfer")) {
await new Promise<void>((resolve, reject) => {
// @ts-ignore
wx.requestMerchantTransfer({
mchId: redPackage.mchId,
appId,
package: redPackage.packageInfo,
success: () => {
wx.showToast({ title: "领取成功", icon: "success" });
resolve();
},
fail: (err: any) => {
console.error("拉起转账失败:", err);
wx.showToast({ title: "领取失败", icon: "none" });
reject(new Error(err?.errMsg || "领取失败"));
},
});
return;
}
if (pass) {
});
} else {
wx.showModal({
content: "🎉 恭喜您获得红包!",
content: "你的微信版本过低,请更新至最新版本。",
showCancel: false,
confirmText: "确定",
confirmColor: "#FF0000",
});
throw new Error("微信版本过低");
}
} catch (err: any) {
wx.hideLoading();
const msg = err?.data?.msg || err?.errMsg || err?.message || "领取失败";
wx.showToast({ title: msg, icon: "none" });
}
} else {
await this.handleReceive(redPackage.redId);
}
}
},
});
} else {
wx.showToast({
@@ -333,8 +366,7 @@ Page({
});
}
},
async handleReceive(e: any) {
const { id } = e.currentTarget.dataset;
async handleReceive(id: any) {
const { code } = this.data.store as Record<string, any>;
const params = {
appId,
@@ -352,30 +384,34 @@ Page({
console.error('领取红包失败:', err);
}
},
// 跳转前暂停视频播放
pauseVideoBeforeNavigate() {
const video = this.selectComponent("#myVideo") as any;
if (video && video.pauseVideo) {
video.pauseVideo();
}
},
handleCustomReport() {
this.pauseVideoBeforeNavigate();
const { code, state, seeId } = this.data.store as Record<string, any>;
const params: Record<string, string> = {};
if (code) params.code = code;
if (state) params.state = state;
if (seeId) params.seeId = seeId;
const query = Object.entries(params)
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
.join("&");
wx.navigateTo({
url: `/pages/live/report/report${query ? `?${query}` : ""}`,
url: `/pages/live/report/report`,
});
},
handleViewHitory() {
this.pauseVideoBeforeNavigate();
const { code, state, seeId } = this.data.store as Record<string, any>;
const params: Record<string, string> = {};
if (code) params.code = code;
if (state) params.state = state;
if (seeId) params.seeId = seeId;
const query = Object.entries(params)
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
.join("&");
wx.navigateTo({
url: `/pages/live/red-history/red-history${query ? `?${query}` : ""}`,
url: `/pages/live/red-history/red-history`,
});
}
});
+9 -10
View File
@@ -1,16 +1,15 @@
<!--pages/video/video.wxml-->
<navigation-bar title="" back="{{true}}" bind:handleBack="handleBack" color="black" background="#FFF" />
<navigation-bar title="" back="{{false}}" bind:handleBack="handleBack" color="black" background="#FFF">
<view slot="left" class="report-nav-btn" bind:tap="handleCustomReport">举报</view>
</navigation-bar>
<view style="display: flex; align-items: center; justify-content: space-between; padding: 0 20rpx; height: 80rpx; background: #FFF7E6;">
<view style="font-size: 22rpx; color: #999;">本视频仅用于科普,无任何恶意引导行为</view>
<view style="display: flex; align-items: center; gap: 16rpx;">
<!-- <button open-type="feedback" class="error">微信举报</button> -->
<view class="error" bind:tap="handleCustomReport">举报</view>
</view>
</view>
<scroll-view class="scrollarea" scroll-y type="list">
<my-video src="{{dataList.url}}" backgroundUrl="{{dataList.background}}"></my-video>
<view style="display: flex; align-items: center; padding: 0 20rpx; height: 70rpx; background: #FFF7E6;">
<view style="font-size: 22rpx; color: #999;">本视频仅用于科普,无任何恶意引导行为</view>
</view>
<my-video id="myVideo" src="{{dataList.url}}" backgroundUrl="{{dataList.background}}"></my-video>
<block wx:if="{{dataList.tipUrl}}">
<image alt="提示" mode="widthFix" src="{{dataList.tipUrl}}" style="width: 100%" />
@@ -22,7 +21,7 @@
<form bindsubmit="handleSubmit" form-id="quizForm">
<my-quiz id="quizComponent" questions="{{dataList.questions}}" answerList="{{dataList.answerList}}" bind:change="onAnswerChange" />
<button wx:if="{{active === 0}}" class="btn" form-type="submit" style="bottom:{{safeBottom===0?24:safeBottom}}rpx">
{{canSubmit ? '提交答案领取红包' : '请观看完视频再前往答题'}}
{{canSubmit ? '提交答案领取红包' : '请观看完视频再前往互动'}}
</button>
</form>
</van-tab>
+4 -4
View File
@@ -9,7 +9,7 @@ Page({
title: '阿莫西林使用指南',
desc: '了解抗生素的正确使用方法与注意事项',
tag: '抗生素',
readCount: '12,580',
readCount: '2,580',
},
{
id: 102,
@@ -17,7 +17,7 @@ Page({
title: '布洛芬用药须知',
desc: '解热镇痛安全用药,避免过量与禁忌',
tag: '解热镇痛',
readCount: '9,346',
readCount: '936',
},
{
id: 103,
@@ -25,7 +25,7 @@ Page({
title: '胰岛素注射教程',
desc: '糖尿病患者必看:正确注射方法与部位轮换',
tag: '降糖药',
readCount: '7,892',
readCount: '492',
},
{
id: 104,
@@ -33,7 +33,7 @@ Page({
title: '高血压用药管理',
desc: '长期服药患者的日常管理与生活方式调整',
tag: '心血管',
readCount: '15,230',
readCount: '1,530',
},
],
},
@@ -39,7 +39,7 @@
<view class="med-meta">{{item.dosage}} · {{item.frequency}}</view>
<view class="med-tags">
<view class="med-tag">{{item.category}}</view>
<view class="med-tag slots">{{item.slots.join('·')}}</view>
<!-- <view class="med-tag slots">{{item.slots.join('·')}}</view> -->
</view>
</view>
<view class="med-right">