chore(视频号组件): 重构视频号组件，不单单是微信视频号

2026-01-10 15:05:08 +08:00
parent 7f54666629
commit 6f6899deaa
9 changed files with 874 additions and 696 deletions
--- a/components-diy/diy-channel.vue
+++ b/components-diy/diy-channel.vue
@@ -0,0 +1,95 @@
+<template>
+	<view class="diy-wechat-channel" :style="channelWarpCss">
+		<diy-channel-header :value="value" @header-tap="handlerClick" />
+		<diy-channel-video :value="value" @video-play="playVideo" />
+	</view>
+</template>
+
+
+<script>
+// 微信视频号组件
+import DiyMinx from './minx.js'
+
+// #ifdef MP-WEIXIN
+import { wechatChannelUtil } from './js/wechat-channel.js'
+// #endif
+
+export default {
+	name: 'diy-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: async (event, handler, awaitedResult) => {
+					if (!awaitedResult) return;
+					try {
+						// #ifdef MP-WEIXIN
+						await wechatChannelUtil.playVideo(this.value);
+						// #endif
+					} catch (err) {
+						console.error('打开视频号失败', err);
+					}
+				}
+			})
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import './css/common-channel.scss';
+
+.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-video {
+	position: relative;
+}
+
+.video-cover {
+	width: 100%;
+	height: 320rpx;
+	object-fit: cover;
+}
+
+.video-info {
+	padding: 16rpx;
+}
+</style>