84 lines
1.7 KiB
Vue
84 lines
1.7 KiB
Vue
<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> |