chore(电子名片): 支持点击视频号视频,非嵌入模式可以播放了
This commit is contained in:
@@ -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
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -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
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -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;
|
||||||
}); // 视频号
|
}); // 视频号
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user