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

components-diy/diy-channel-video.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="channel-video">
+		<!-- 嵌入式视频播放 -->
+		<native-component v-if="canUseEmbedMode">
+			// #ifdef MP-WEIXIN
+			<channel-video 
+				:feed-id="value.feedId" 
+				:finder-user-name="value.finderUserName" 
+				:feed-token="value.feedToken" 
+				style="width: 100%; height: 320rpx;">
+			</channel-video>
+			// #endif
+		</native-component>
+		
+		<!-- 跳转式视频播放 -->
+		<view v-else @tap="playVideo">
+			<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
+			<view class="channel-play-btn">
+				<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
+			</view>
+			<view class="channel-stats">
+				<text>{{ value.viewCount }}次观看</text>
+			</view>
+			<view class="video-info">
+				<view class="video-title">{{ value.videoTitle }}</view>
+				<view class="video-stats">{{ value.viewCount }}次观看</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+
+// #ifdef MP-WEIXIN
+import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
+// #endif
+
+export default {
+	name: 'diy-channel-video',
+	props: {
+		value: {
+			type: Object,
+			required: true
+		}
+	},
+	computed: {
+		canUseEmbedMode() {
+			// #ifdef MP-WEIXIN
+			return this.value.embedMode && wechatChannelUtil.isEmbedModeSupported();
+			// #endif
+			return false
+		},
+		playIcon() {
+			// #ifdef MP-WEIXIN
+			return wechatChannelConfig.icon.playIcon
+			// #endif
+			return ''
+		}
+	},
+	methods: {
+		async playVideo() {
+			this.$emit('video-play', this.value);
+		}
+	}
+};
+</script>
+
+<style scoped lang="scss">
+@import './css/common-channel.scss';
+
+.channel-video {
+	position: relative;
+}
+
+.video-cover {
+	width: 100%;
+	height: 320rpx;
+	object-fit: cover;
+}
+
+.video-info {
+	padding: 16rpx;
+}
+</style>