From 6f6899deaa537cd942928f6d8e629dfef7a434e7 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 10 Jan 2026 15:05:08 +0800
Subject: [PATCH] =?UTF-8?q?chore(=E8=A7=86=E9=A2=91=E5=8F=B7=E7=BB=84?=
=?UTF-8?q?=E4=BB=B6):=20=E9=87=8D=E6=9E=84=E8=A7=86=E9=A2=91=E5=8F=B7?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E4=B8=8D=E5=8D=95=E5=8D=95=E6=98=AF?=
=?UTF-8?q?=E5=BE=AE=E4=BF=A1=E8=A7=86=E9=A2=91=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components-diy/css/common-channel.scss | 190 +++++++++
components-diy/diy-channel-header.vue | 45 ++
components-diy/diy-channel-list.vue | 275 +++++++++++++
components-diy/diy-channel-video.vue | 84 ++++
components-diy/diy-channel.vue | 95 +++++
components-diy/diy-group.vue | 12 +-
components-diy/diy-wechat-channel-list.vue | 458 ---------------------
components-diy/diy-wechat-channel.vue | 232 -----------
components-diy/js/wechat-channel.js | 179 ++++++++
9 files changed, 874 insertions(+), 696 deletions(-)
create mode 100644 components-diy/css/common-channel.scss
create mode 100644 components-diy/diy-channel-header.vue
create mode 100644 components-diy/diy-channel-list.vue
create mode 100644 components-diy/diy-channel-video.vue
create mode 100644 components-diy/diy-channel.vue
delete mode 100644 components-diy/diy-wechat-channel-list.vue
delete mode 100644 components-diy/diy-wechat-channel.vue
create mode 100644 components-diy/js/wechat-channel.js
diff --git a/components-diy/css/common-channel.scss b/components-diy/css/common-channel.scss
new file mode 100644
index 0000000..d9b9a85
--- /dev/null
+++ b/components-diy/css/common-channel.scss
@@ -0,0 +1,190 @@
+// 公共微信视频号样式
+
+// CSS 变量
+:root {
+ // 尺寸变量
+ --channel-play-btn-size: 80rpx;
+ --channel-play-btn-small-size: 60rpx;
+ --channel-play-btn-icon-size: 40rpx;
+ --channel-play-btn-icon-small-size: 30rpx;
+ --channel-avatar-size: 60rpx;
+ --channel-arrow-size: 24rpx;
+ --channel-border-radius: 12rpx;
+ --channel-stats-padding: 10rpx;
+ --channel-info-wrap-padding: 10rpx 0;
+
+ // 字体变量
+ --channel-name-font-size: 28rpx;
+ --channel-follow-font-size: 24rpx;
+ --video-title-font-size: 28rpx;
+ --video-title-small-font-size: 24rpx;
+ --video-stats-font-size: 24rpx;
+ --channel-stats-font-size: 20rpx;
+
+ // 颜色变量
+ --channel-name-color: #333;
+ --channel-follow-color: #07c160;
+ --video-title-color: #333;
+ --video-title-small-color: #666;
+ --video-stats-color: #999;
+ --channel-stats-color: #fff;
+ --channel-border-color: #f0f0f0;
+ --channel-play-btn-bg: rgba(0, 0, 0, 0.4);
+ --channel-stats-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+
+ // 间距变量
+ --channel-header-padding: 16rpx;
+ --channel-avatar-margin-right: 12rpx;
+ --channel-arrow-margin-left: 8rpx;
+ --channel-name-margin-bottom: 4rpx;
+ --video-title-margin-bottom: 8rpx;
+}
+
+// 响应式设计
+@media (max-width: 375px) {
+ :root {
+ --channel-play-btn-size: 70rpx;
+ --channel-play-btn-small-size: 50rpx;
+ --channel-play-btn-icon-size: 35rpx;
+ --channel-play-btn-icon-small-size: 25rpx;
+ --channel-avatar-size: 50rpx;
+ --channel-name-font-size: 24rpx;
+ --video-title-font-size: 24rpx;
+ }
+}
+
+@media (min-width: 750px) {
+ :root {
+ --channel-play-btn-size: 90rpx;
+ --channel-play-btn-small-size: 70rpx;
+ --channel-play-btn-icon-size: 45rpx;
+ --channel-play-btn-icon-small-size: 35rpx;
+ --channel-avatar-size: 70rpx;
+ --channel-name-font-size: 32rpx;
+ --video-title-font-size: 32rpx;
+ }
+}
+
+// 播放按钮样式
+.channel-play-btn {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: var(--channel-play-btn-size);
+ height: var(--channel-play-btn-size);
+ background-color: var(--channel-play-btn-bg);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .play-icon {
+ width: var(--channel-play-btn-icon-size);
+ height: var(--channel-play-btn-icon-size);
+ }
+}
+
+// 小尺寸播放按钮(用于列表)
+.channel-play-btn.small {
+ width: var(--channel-play-btn-small-size);
+ height: var(--channel-play-btn-small-size);
+
+ .play-icon {
+ width: var(--channel-play-btn-icon-small-size);
+ height: var(--channel-play-btn-icon-small-size);
+ }
+}
+
+// 视频统计信息
+.channel-stats {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: var(--channel-stats-bg);
+ padding: var(--channel-stats-padding);
+ color: var(--channel-stats-color);
+ font-size: var(--channel-stats-font-size);
+}
+
+// 视频信息容器
+.channel-info-wrap {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ padding: var(--channel-info-wrap-padding);
+
+ .channel-name {
+ margin-bottom: var(--channel-name-margin-bottom);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ font-size: var(--channel-name-font-size);
+ font-weight: 500;
+ color: var(--channel-name-color);
+ }
+
+ .video-title {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ font-size: var(--video-title-small-font-size);
+ color: var(--video-title-small-color);
+ }
+}
+
+// 视频标题
+.video-title {
+ font-size: var(--video-title-font-size);
+ font-weight: 500;
+ color: var(--video-title-color);
+ margin-bottom: var(--video-title-margin-bottom);
+ line-height: 1.4;
+}
+
+// 视频统计信息(非绝对定位版本)
+.video-stats {
+ font-size: var(--video-stats-font-size);
+ color: var(--video-stats-color);
+}
+
+// 频道头部
+.channel-header {
+ display: flex;
+ align-items: center;
+ padding: var(--channel-header-padding);
+ border-bottom: 1rpx solid var(--channel-border-color);
+
+ .channel-avatar {
+ width: var(--channel-avatar-size);
+ height: var(--channel-avatar-size);
+ border-radius: 50%;
+ margin-right: var(--channel-avatar-margin-right);
+ }
+
+ .channel-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .channel-name {
+ font-size: var(--channel-name-font-size);
+ font-weight: 500;
+ color: var(--channel-name-color);
+ margin-bottom: var(--channel-name-margin-bottom);
+ }
+
+ .channel-follow {
+ font-size: var(--channel-follow-font-size);
+ color: var(--channel-follow-color);
+ }
+ }
+
+ .channel-arrow {
+ width: var(--channel-arrow-size);
+ height: var(--channel-arrow-size);
+ margin-left: var(--channel-arrow-margin-left);
+ }
+}
diff --git a/components-diy/diy-channel-header.vue b/components-diy/diy-channel-header.vue
new file mode 100644
index 0000000..d2c2c66
--- /dev/null
+++ b/components-diy/diy-channel-header.vue
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components-diy/diy-channel-list.vue b/components-diy/diy-channel-list.vue
new file mode 100644
index 0000000..f4b2498
--- /dev/null
+++ b/components-diy/diy-channel-list.vue
@@ -0,0 +1,275 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components-diy/diy-channel-video.vue b/components-diy/diy-channel-video.vue
new file mode 100644
index 0000000..a482149
--- /dev/null
+++ b/components-diy/diy-channel-video.vue
@@ -0,0 +1,84 @@
+
+
+
+
+ // #ifdef MP-WEIXIN
+
+
+ // #endif
+
+
+
+
+
+
+
+
+
+ {{ value.viewCount }}次观看
+
+
+ {{ value.videoTitle }}
+ {{ value.viewCount }}次观看
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components-diy/diy-channel.vue b/components-diy/diy-channel.vue
new file mode 100644
index 0000000..1f0bfe6
--- /dev/null
+++ b/components-diy/diy-channel.vue
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/components-diy/diy-group.vue b/components-diy/diy-group.vue
index 16eebc3..dd88285 100644
--- a/components-diy/diy-group.vue
+++ b/components-diy/diy-group.vue
@@ -251,14 +251,14 @@
-
-
-
+
+
+
-
-
-
+
+
+
diff --git a/components-diy/diy-wechat-channel-list.vue b/components-diy/diy-wechat-channel-list.vue
deleted file mode 100644
index 52b974d..0000000
--- a/components-diy/diy-wechat-channel-list.vue
+++ /dev/null
@@ -1,458 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
- {{ item.viewCount }}次观看
-
-
-
- {{ item.channelName }}
- {{ item.videoTitle }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ item.viewCount }}次观看
-
-
- {{ item.videoTitle }}
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/components-diy/diy-wechat-channel.vue b/components-diy/diy-wechat-channel.vue
deleted file mode 100644
index f1dc278..0000000
--- a/components-diy/diy-wechat-channel.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ value.videoTitle }}
-
- {{ value.viewCount }}次观看
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/components-diy/js/wechat-channel.js b/components-diy/js/wechat-channel.js
new file mode 100644
index 0000000..e774cde
--- /dev/null
+++ b/components-diy/js/wechat-channel.js
@@ -0,0 +1,179 @@
+// 微信视频号组件配置
+export const wechatChannelConfig = {
+ // 图标相关
+ icon: {
+ defaultSize: 80, // 默认图标尺寸(rpx)
+ smallSize: 60, // 小图标尺寸(rpx)
+ channelArrowSize: 24, // 频道箭头图标尺寸(rpx)
+ channelArrow: 'addon/personnel/shop/view/enterprise/arrow.png', // 频道箭头图标路径
+ playIcon: 'addon/personnel/shop/view/enterprise/play.png', // 播放按钮图标路径
+ },
+
+
+ // 视频相关配置
+ video: {
+ defaultHeight: 320, // 默认视频高度(rpx)
+ minHeight: 200, // 最小视频高度(rpx)
+ maxHeight: 500, // 最大视频高度(rpx)
+ defaultCoverUrl: 'addon/personnel/shop/view/enterprise/default-video-cover.png', // 默认视频封面
+ },
+
+ // 播放按钮配置
+ playButton: {
+ size: 80, // 标准尺寸(rpx)
+ smallSize: 60, // 小尺寸(rpx)
+ iconSize: 40, // 标准图标尺寸(rpx)
+ smallIconSize: 30, // 小图标尺寸(rpx)
+ background: 'rgba(0, 0, 0, 0.4)', // 背景颜色
+ },
+
+ // 布局配置
+ layout: {
+ borderRadius: 12, // 圆角(rpx)
+ padding: 16, // 内边距(rpx)
+ margin: 10, // 外边距(rpx)
+ },
+
+ // 字体配置
+ font: {
+ channelNameSize: 28, // 频道名称字体大小(rpx)
+ videoTitleSize: 28, // 视频标题字体大小(rpx)
+ statsSize: 24, // 统计信息字体大小(rpx)
+ },
+
+ // 颜色配置
+ color: {
+ channelName: '#333', // 频道名称颜色
+ videoTitle: '#333', // 视频标题颜色
+ stats: '#999', // 统计信息颜色
+ border: '#f0f0f0', // 边框颜色
+ },
+
+ // 微信相关配置
+ wechat: {
+ minSdkVersion: '2.19.2', // 最小微信基础库版本
+ embedComponent: 'component.channel-video', // 嵌入式视频组件名称
+ },
+
+ // 错误提示配置
+ error: {
+ notWechat: '当前环境不是微信小程序',
+ lowVersion: '当前微信基础库版本过低,需要 2.19.2 或以上版本',
+ notSupported: '当前环境不支持微信视频号',
+ missingFields: '缺少必要字段: {field}',
+ },
+};
+
+// 获取配置项的辅助函数
+export const getwechatChannelConfig = (key, defaultValue = null) => {
+ const keys = key.split('.');
+ let config = wechatChannelConfig;
+
+ for (const k of keys) {
+ if (config[k] === undefined) {
+ return defaultValue;
+ }
+ config = config[k];
+ }
+
+ return config;
+};
+
+// 微信视频号工具函数
+export const wechatChannelUtil = {
+ // 版本比较
+ versionCompare(v1, v2) {
+ const arr1 = v1.split('.');
+ const arr2 = v2.split('.');
+ for (let i = 0; i < Math.max(arr1.length, arr2.length); i++) {
+ const num1 = parseInt(arr1[i] || 0);
+ const num2 = parseInt(arr2[i] || 0);
+ if (num1 > num2) return 1;
+ if (num1 < num2) return -1;
+ }
+ return 0;
+ },
+
+ // 检查是否支持嵌入式播放
+ isEmbedModeSupported() {
+ return typeof wx !== 'undefined' && wx.canIUse(wechatChannelConfig.wechat.embedComponent);
+ },
+
+ // 获取默认视频封面
+ getDefaultCoverUrl() {
+ return wechatChannelConfig.video.defaultCoverUrl;
+ },
+
+ // 数据校验
+ validateVideoData(item) {
+ const requiredFields = ['feedId', 'finderUserName'];
+ for (const field of requiredFields) {
+ if (!item[field]) {
+ throw new Error(`缺少必要字段: ${field}`);
+ }
+ }
+ return true;
+ },
+
+ // 播放视频
+ playVideo(item) {
+ return new Promise((resolve, reject) => {
+ try {
+ // 数据校验
+ this.validateVideoData(item);
+ } catch (err) {
+ reject(err);
+ return;
+ }
+
+ // 检查微信环境
+ if (typeof wx === 'undefined') {
+ reject(new Error(wechatChannelConfig.error.notWechat));
+ return;
+ }
+
+ // 检查基础库版本
+ const systemInfo = wx.getSystemInfoSync();
+ const SDKVersion = systemInfo.SDKVersion;
+ if (this.versionCompare(SDKVersion, wechatChannelConfig.wechat.minSdkVersion) < 0) {
+ reject(new Error(wechatChannelConfig.error.lowVersion));
+ return;
+ }
+
+ // 调用微信视频号播放API
+ if (wx.openChannelsActivity) {
+ wx.openChannelsActivity({
+ feedId: item.feedId,
+ finderUserName: item.finderUserName,
+ success: (res) => {
+ console.log('打开视频号成功', res);
+ resolve(res);
+ },
+ fail: (err) => {
+ this.handleError(err);
+ reject(err);
+ }
+ });
+ } else {
+ reject(new Error(wechatChannelConfig.error.notSupported));
+ }
+ });
+ },
+
+ // 统一错误处理
+ handleError(err) {
+ console.error('微信视频号错误:', err);
+ // 可以添加错误上报或用户提示逻辑
+ switch (err.errCode) {
+ case 40001:
+ console.error('错误:40001,检查主体要求或嵌入式打开的关联关系');
+ break;
+ case 40002:
+ console.error('错误:40002,参数错误,检查 feedId 和 finderUserName');
+ break;
+ default:
+ console.error('错误:' + err.errCode + ',' + (err.errMsg || '未知错误'));
+ break;
+ }
+ }
+};
\ No newline at end of file