lucky_shop/components-diy/diy-wechat-channel.vue

<template>
	<view class="diy-wechat-channel" :style="channelWarpCss">
		<view class="channel-header" @tap="handlerClick">
			<image class="channel-avatar" :src="$util.img(value.avatarUrl)" mode="aspectFill"></image>
			<view class="channel-info">
				<view class="channel-name">{{ value.channelName }}</view>
				<view class="channel-follow" v-if="value.showFollow">关注</view>
			</view>
			<image class="channel-arrow" :src="$util.img('addon/personnel/shop/view/enterprise/arrow.png')" mode="aspectFill"></image>
		</view>
		<!-- 嵌入式视频播放 -->
		<channel-video v-if="value.embedMode && typeof wx !== 'undefined' && wx.canIUse('component.channel-video')" 
			:feed-id="value.feedId" 
			:finder-user-name="value.finderUserName" 
			:feed-token="value.feedToken" 
			style="width: 100%; height: 320rpx;">
		</channel-video>
		<!-- 跳转式视频播放 -->
		<view v-else class="channel-video" @tap="playVideo">
			<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
			<view class="video-play-btn">
				<image class="play-icon" :src="$util.img('addon/personnel/shop/view/enterprise/play.png')" mode="aspectFill"></image>
			</view>
			<view class="video-info">
				<view class="video-title">{{ value.videoTitle }}</view>
				<view class="video-stats">
					<text>{{ value.viewCount }}次观看</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 微信视频号组件
import DiyMinx from './minx.js'
export default {
	name: 'diy-wechat-channel',
	props: {
		value: {
			type: Object
		}
	},
	data() {
		return {};
	},
	created() { },
	mixins: [DiyMinx],
	watch: {
		// 组件刷新监听
		componentRefresh: function (nval) { }
	},
	computed: {
		channelWarpCss: function () {
			var obj = '';
			if (this.value.componentAngle == 'round') {
				obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
			}
			return obj;
		}
	},
	methods: {
		async handlerClick() {
			await this.__$emitEvent({
				eventName: 'channel-tap', data: this.value, promiseCallback: (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
				}
			})
		},
		async playVideo() {
			await this.__$emitEvent({
				eventName: 'video-play', data: this.value, promiseCallback: (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
					// 检查微信环境
					if (typeof wx === 'undefined') {
						console.error('当前环境不是微信小程序');
						return;
					}
					// 检查基础库版本
					const systemInfo = wx.getSystemInfoSync();
					const SDKVersion = systemInfo.SDKVersion;
					const 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;
					};
					if (versionCompare(SDKVersion, '2.19.2') < 0) {
						console.error('当前微信基础库版本过低，需要 2.19.2 或以上版本');
						return;
					}
					// 调用微信视频号播放API
					if (wx.openChannelsActivity) {
						wx.openChannelsActivity({
							feedId: this.value.feedId,
							finderUserName: this.value.finderUserName,
							success: (res) => {
								console.log('打开视频号成功', res);
							},
							fail: (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;
								}
							}
						});
					} else {
						console.error('当前环境不支持微信视频号');
					}
				}
			})
		}
	}
};
</script>

<style scoped>
.diy-wechat-channel {
	width: 100%;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.channel-header {
	display: flex;
	align-items: center;
	padding: 16rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.channel-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 12rpx;
}

.channel-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.channel-name {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 4rpx;
}

.channel-follow {
	font-size: 24rpx;
	color: #07c160;
}

.channel-arrow {
	width: 24rpx;
	height: 24rpx;
	margin-left: 8rpx;
}

.channel-video {
	position: relative;
}

.video-cover {
	width: 100%;
	height: 320rpx;
	object-fit: cover;
}

.video-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 80rpx;
	height: 80rpx;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.play-icon {
	width: 40rpx;
	height: 40rpx;
}

.video-info {
	padding: 16rpx;
}

.video-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 8rpx;
	line-height: 1.4;
}

.video-stats {
	font-size: 24rpx;
	color: #999;
}
</style>