chore(电子名片): 支持点击视频号视频,非嵌入模式可以播放了

This commit is contained in:
2026-01-13 11:17:14 +08:00
parent 8ceeca33b4
commit e20968aee2
3 changed files with 31 additions and 54 deletions

View File

@@ -19,13 +19,13 @@
<view class="video-info"> <view class="video-info">
<!-- 视频标题支持多行显示控制 --> <!-- 视频标题支持多行显示控制 -->
<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}</view> <view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}</view>
<!-- 视频统计信息非列表模式下显示 --> <!-- 视频统计信息 -->
<view class="video-stats" v-if="value.showViewCount && !listMode">{{ value.viewCount }}次观看</view> <view class="video-stats" v-if="value.showViewCount">{{ value.viewCount }}次观看</view>
</view> </view>
</view> </view>
<!-- 跳转式视频播放 --> <!-- 跳转式视频播放 -->
<view v-else @tap.stop="playVideo" @click.stop="playVideo" class="video-container"> <view v-else @click.stop="playVideo" class="video-container">
<view class="video-cover-wrap" :style="coverStyle"> <view class="video-cover-wrap" :style="coverStyle">
<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image> <image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
<view class="channel-play-btn" v-if="showPlayBtn" :style="playBtnStyle"> <view class="channel-play-btn" v-if="showPlayBtn" :style="playBtnStyle">
@@ -143,7 +143,11 @@ export default {
*/ */
canUseEmbedMode() { canUseEmbedMode() {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
return this.value?.embedMode && wechatChannelUtil.isEmbedModeSupported(); const enableEmbedMode = Boolean(this.value?.embedMode)
&& Boolean(this.value?.feedToken)
&& wechatChannelUtil.isEmbedModeSupported();
console.log('enableEmbedMode', enableEmbedMode);
return enableEmbedMode;
// #endif // #endif
return false return false
}, },
@@ -156,17 +160,7 @@ export default {
return wechatChannelConfig.icon.playIcon return wechatChannelConfig.icon.playIcon
// #endif // #endif
return '' return ''
}, }
/**
* 视频号用户名,适用于微信视频号
* 优先使用 finderUserName其次使用 channelName
* @returns {string}
*/
finderUserName() {
return this.value?.finderUserName || this.value?.channelName || ''
},
}, },
methods: { methods: {
/** /**
@@ -174,18 +168,7 @@ export default {
* 触发 video-play 事件,由父组件处理具体播放逻辑 * 触发 video-play 事件,由父组件处理具体播放逻辑
*/ */
async playVideo() { async playVideo() {
// #ifdef MP-WEIXIN this.$emit('video-play', this.value);
const playload = {
...this.value,
finderUserName: this.finderUserName
}
console.log('playload', playload);
this.$emit('video-play', playload);
// #endif
// #ifdef H5
this.$emit('video-play', this.value);
// #endif
} }
} }
}; };

View File

@@ -17,7 +17,7 @@ export const wechatChannelConfig = {
maxHeight: 500, // 最大视频高度rpx maxHeight: 500, // 最大视频高度rpx
defaultCoverUrl: 'addon/personnel/shop/view/enterprise/default-video-cover.png', // 默认视频封面 defaultCoverUrl: 'addon/personnel/shop/view/enterprise/default-video-cover.png', // 默认视频封面
}, },
// 播放按钮配置 // 播放按钮配置
playButton: { playButton: {
size: 80, // 标准尺寸rpx size: 80, // 标准尺寸rpx
@@ -26,21 +26,21 @@ export const wechatChannelConfig = {
smallIconSize: 30, // 小图标尺寸rpx smallIconSize: 30, // 小图标尺寸rpx
background: 'rgba(0, 0, 0, 0.4)', // 背景颜色 background: 'rgba(0, 0, 0, 0.4)', // 背景颜色
}, },
// 布局配置 // 布局配置
layout: { layout: {
borderRadius: 12, // 圆角rpx borderRadius: 12, // 圆角rpx
padding: 16, // 内边距rpx padding: 16, // 内边距rpx
margin: 10, // 外边距rpx margin: 10, // 外边距rpx
}, },
// 字体配置 // 字体配置
font: { font: {
channelNameSize: 28, // 频道名称字体大小rpx channelNameSize: 28, // 频道名称字体大小rpx
videoTitleSize: 28, // 视频标题字体大小rpx videoTitleSize: 28, // 视频标题字体大小rpx
statsSize: 24, // 统计信息字体大小rpx statsSize: 24, // 统计信息字体大小rpx
}, },
// 颜色配置 // 颜色配置
color: { color: {
channelName: '#333', // 频道名称颜色 channelName: '#333', // 频道名称颜色
@@ -48,13 +48,13 @@ export const wechatChannelConfig = {
stats: '#999', // 统计信息颜色 stats: '#999', // 统计信息颜色
border: '#f0f0f0', // 边框颜色 border: '#f0f0f0', // 边框颜色
}, },
// 微信相关配置 // 微信相关配置
wechat: { wechat: {
minSdkVersion: '2.19.2', // 最小微信基础库版本 minSdkVersion: '2.19.2', // 最小微信基础库版本
embedComponent: 'component.channel-video', // 嵌入式视频组件名称 embedComponent: 'channel-video', // 嵌入式视频组件名称
}, },
// 错误提示配置 // 错误提示配置
error: { error: {
notWechat: '当前环境不是微信小程序', notWechat: '当前环境不是微信小程序',
@@ -68,14 +68,14 @@ export const wechatChannelConfig = {
export const getwechatChannelConfig = (key, defaultValue = null) => { export const getwechatChannelConfig = (key, defaultValue = null) => {
const keys = key.split('.'); const keys = key.split('.');
let config = wechatChannelConfig; let config = wechatChannelConfig;
for (const k of keys) { for (const k of keys) {
if (config[k] === undefined) { if (config[k] === undefined) {
return defaultValue; return defaultValue;
} }
config = config[k]; config = config[k];
} }
return config; return config;
}; };
@@ -164,24 +164,14 @@ export const wechatChannelUtil = {
handleError(err, item) { handleError(err, item) {
console.error('微信视频号错误:', err); console.error('微信视频号错误:', err);
let errorMsg = err.errMsg || '视频播放失败'; let errorMsg = err.errMsg || '微信视频播放失败';
const showErrorToast = (otherMsgs = []) => {
// 可以添加错误上报或用户提示逻辑 uni.showToast({
switch (err.errCode) { title: [errorMsg, ...otherMsgs].join('\n'),
case 40001: icon: 'none',
errorMsg = '错误40001检查主体要求或嵌入式打开的关联关系'; duration: 5000
break; });
case 40002:
errorMsg = '错误40002参数错误检查 feedId 和 finderUserName';
break;
default:
break;
} }
showErrorToast();
uni.showToast({
title: [errorMsg, 'feedId: ' + item.feedId, 'finderUserName: ' + item.finderUserName, 'feedToken: ' + item.feedToken].join('\n'),
icon: 'none',
duration: 5000
});
} }
}; };

View File

@@ -260,6 +260,10 @@ export default {
if (item.avatarImageType === 'upload') { if (item.avatarImageType === 'upload') {
item.avatarUrl = this.$util.img(item.avatarUrl); item.avatarUrl = this.$util.img(item.avatarUrl);
} }
// #ifdef MP-WEIXIN
// item.embedMode = Boolean(item.feedToken);
item.finderUserName = item.channelName;
// #endif
return item; return item;
}); // 视频号 }); // 视频号