522 lines
11 KiB
Vue
522 lines
11 KiB
Vue
<template>
|
||
<view class="channel-video" :class="{ 'list-mode': listMode }">
|
||
<!-- 嵌入式视频播放 -->
|
||
<view v-if="canUseEmbedMode" class="embed-video-container">
|
||
<view class="video-cover-wrap" :style="coverStyle">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<native-component>
|
||
<!-- 嵌入式视频播放组件 -->
|
||
<channel-video
|
||
:feed-id="value.feedId"
|
||
:finder-user-name="value.finderUserName"
|
||
:feed-token="value.feedToken"
|
||
:auto-play="autoPlay"
|
||
>
|
||
</channel-video>
|
||
</native-component>
|
||
<!-- #endif -->
|
||
</view>
|
||
<view class="video-info">
|
||
<!-- 视频标题，支持多行显示控制 -->
|
||
<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}</view>
|
||
<!-- 视频统计信息，非列表模式下显示 -->
|
||
<view class="video-stats" v-if="value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 跳转式视频播放 -->
|
||
<view v-else @tap.stop="playVideo" @click.stop="playVideo" class="video-container">
|
||
<view class="video-cover-wrap" :style="coverStyle">
|
||
<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
|
||
<view class="channel-play-btn" v-if="showPlayBtn" :style="playBtnStyle">
|
||
<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
|
||
<view class="play-icon-css" v-else></view>
|
||
</view>
|
||
<view class="video-stats-overlay" v-if="value.showViewCount">
|
||
{{ value.viewCount }}次观看
|
||
</view>
|
||
</view>
|
||
<view class="video-info">
|
||
<!-- 视频标题，支持多行显示控制 -->
|
||
<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}</view>
|
||
<!-- 视频统计信息，非列表模式下显示 -->
|
||
<view class="video-stats" v-if="value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
|
||
|
||
/**
|
||
* 微信视频号视频卡片组件
|
||
* 支持嵌入式播放和跳转式播放两种模式
|
||
* 可配置列表模式、视频高度、标题行数等属性
|
||
*/
|
||
export default {
|
||
name: 'diy-channel-video',
|
||
props: {
|
||
/**
|
||
* 视频数据对象
|
||
* @type {Object}
|
||
* @required
|
||
* @property {string} feedId - 视频 feedId
|
||
* @property {string} feedToken - 视频 token
|
||
* @property {string} coverUrl - 视频封面图
|
||
* @property {string} videoTitle - 视频标题
|
||
* @property {number} viewCount - 观看次数
|
||
* @property {boolean} showViewCount - 是否显示观看次数
|
||
* @property {boolean} embedMode - 是否启用嵌入式播放
|
||
*/
|
||
value: {
|
||
type: Object,
|
||
required: true
|
||
},
|
||
/**
|
||
* 是否为列表模式
|
||
* @type {boolean}
|
||
* @default false
|
||
*/
|
||
listMode: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
/**
|
||
* 视频高度（仅适用于嵌入式播放）
|
||
* @type {number}
|
||
* @default 220
|
||
*/
|
||
videoHeight: {
|
||
type: Number,
|
||
default: 220
|
||
},
|
||
/**
|
||
* 标题显示行数
|
||
* @type {number}
|
||
* @default 1
|
||
*/
|
||
titleLineClamp: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
/** 是否显示播放按钮 */
|
||
showPlayBtn: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
/**
|
||
* 视频封面图样式
|
||
* 采用 16:9 比例的响应式高度
|
||
*/
|
||
coverStyle: {
|
||
type: Object,
|
||
default: () => ({
|
||
width: '100%',
|
||
height: '0',
|
||
paddingTop: '56.25%' // 16:9 比例
|
||
})
|
||
},
|
||
/**
|
||
* 播放按钮样式
|
||
*/
|
||
playBtnStyle: {
|
||
type: Object,
|
||
default: () => ({
|
||
width: '60rpx',
|
||
height: '60rpx',
|
||
borderRadius: '30rpx',
|
||
backgroundColor: 'rgba(0, 0, 0, 0.6)'
|
||
})
|
||
},
|
||
/** 是否自动播放 */
|
||
autoPlay: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
},
|
||
computed: {
|
||
/**
|
||
* 是否支持嵌入式播放
|
||
* @returns {boolean}
|
||
*/
|
||
canUseEmbedMode() {
|
||
// #ifdef MP-WEIXIN
|
||
return this.value?.embedMode && wechatChannelUtil.isEmbedModeSupported();
|
||
// #endif
|
||
return false
|
||
},
|
||
/**
|
||
* 播放按钮图标
|
||
* @returns {string}
|
||
*/
|
||
playIcon() {
|
||
// #ifdef MP-WEIXIN
|
||
return wechatChannelConfig.icon.playIcon
|
||
// #endif
|
||
return ''
|
||
},
|
||
|
||
/**
|
||
* 视频号用户名，适用于微信视频号
|
||
* 优先使用 finderUserName，其次使用 channelName
|
||
* @returns {string}
|
||
*/
|
||
finderUserName() {
|
||
return this.value?.finderUserName || this.value?.channelName || ''
|
||
},
|
||
|
||
},
|
||
methods: {
|
||
/**
|
||
* 播放视频
|
||
* 触发 video-play 事件，由父组件处理具体播放逻辑
|
||
*/
|
||
async playVideo() {
|
||
// #ifdef MP-WEIXIN
|
||
const playload = {
|
||
...this.value,
|
||
finderUserName: this.finderUserName
|
||
}
|
||
console.log('playload', playload);
|
||
this.$emit('video-play', playload);
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
this.$emit('video-play', this.value);
|
||
// #endif
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import './css/common-channel.scss';
|
||
|
||
/**
|
||
* 视频卡片容器样式
|
||
* 包含卡片基础样式、悬停效果和列表模式样式
|
||
*/
|
||
.channel-video {
|
||
position: relative;
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
|
||
// 悬停效果
|
||
&:hover {
|
||
transform: translateY(-4rpx);
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
// 列表模式样式调整
|
||
&.list-mode {
|
||
border-radius: 10rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
|
||
|
||
.video-info {
|
||
padding: 14rpx;
|
||
|
||
.video-title {
|
||
font-size: 24rpx;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 视频容器样式
|
||
* 用于跳转式播放模式
|
||
*/
|
||
.video-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
/**
|
||
* 嵌入式视频容器样式
|
||
* 与视频容器样式保持一致
|
||
*/
|
||
.embed-video-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
}
|
||
|
||
/**
|
||
* 视频封面容器
|
||
* 采用 16:9 比例的响应式高度
|
||
*/
|
||
.video-cover-wrap {
|
||
position: relative;
|
||
width: 100%;
|
||
padding-top: 56.25%; /* 16:9 比例 */
|
||
height: 0;
|
||
overflow: hidden;
|
||
border-radius: 12rpx 12rpx 0 0;
|
||
transition: transform 0.3s ease;
|
||
|
||
// 悬停时缩放效果
|
||
.channel-video:hover & {
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
// 列表模式下的边框圆角调整
|
||
.channel-video.list-mode & {
|
||
border-radius: 10rpx 10rpx 0 0;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 视频封面图片
|
||
* 绝对定位填充整个容器
|
||
*/
|
||
.video-cover {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
/**
|
||
* 视频统计信息遮罩
|
||
* 显示在视频封面底部
|
||
*/
|
||
.video-stats-overlay {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||
padding: 12rpx 16rpx;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
text-align: right;
|
||
font-weight: 500;
|
||
transition: opacity 0.3s ease;
|
||
|
||
// 悬停时的透明度变化
|
||
.channel-video:hover & {
|
||
opacity: 1;
|
||
}
|
||
|
||
.channel-video:not(:hover) & {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 视频信息区域
|
||
* 包含标题和统计信息
|
||
*/
|
||
.video-info {
|
||
padding: 16rpx;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
background-color: #fff;
|
||
transition: background-color 0.3s ease;
|
||
|
||
// 悬停时的背景色变化
|
||
.channel-video:hover & {
|
||
background-color: #fafafa;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 视频标题
|
||
* 支持多行显示控制和渐变遮罩效果
|
||
*/
|
||
.video-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #222;
|
||
margin-bottom: 10rpx;
|
||
line-height: 1.4;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: var(--title-line-clamp, 2);
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
transition: color 0.3s ease;
|
||
position: relative;
|
||
word-break: break-word;
|
||
|
||
// 悬停时的颜色变化
|
||
.channel-video:hover & {
|
||
color: #000;
|
||
}
|
||
|
||
// 列表模式下的样式调整
|
||
.channel-video.list-mode & {
|
||
-webkit-line-clamp: var(--title-line-clamp, 1);
|
||
font-size: 24rpx;
|
||
margin-bottom: 6rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
// 添加渐变遮罩效果，让过长的文字有柔和的结束
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 40rpx;
|
||
height: 1.4em;
|
||
background: linear-gradient(to right, transparent, #fff 90%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
// 列表模式下的遮罩高度调整
|
||
.channel-video.list-mode &::after {
|
||
height: 1.3em;
|
||
}
|
||
|
||
// 根据行数调整遮罩高度
|
||
&[style*="--title-line-clamp: 1"]::after {
|
||
height: 1.4em;
|
||
}
|
||
|
||
&[style*="--title-line-clamp: 3"]::after {
|
||
height: 4.2em;
|
||
}
|
||
|
||
&[style*="--title-line-clamp: 4"]::after {
|
||
height: 5.6em;
|
||
}
|
||
|
||
// 列表模式下的多行遮罩高度调整
|
||
.channel-video.list-mode &[style*="--title-line-clamp: 1"]::after {
|
||
height: 1.3em;
|
||
}
|
||
|
||
.channel-video.list-mode &[style*="--title-line-clamp: 3"]::after {
|
||
height: 3.9em;
|
||
}
|
||
|
||
.channel-video.list-mode &[style*="--title-line-clamp: 4"]::after {
|
||
height: 5.2em;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 视频统计信息
|
||
* 显示观看次数等数据
|
||
*/
|
||
.video-stats {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
margin-top: 6rpx;
|
||
transition: color 0.3s ease;
|
||
|
||
// 悬停时的颜色变化
|
||
.channel-video:hover & {
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 列表模式下的播放按钮样式
|
||
* 更小的尺寸和悬停效果
|
||
*/
|
||
.channel-video.list-mode .channel-play-btn {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
transition: all 0.3s ease;
|
||
|
||
// 悬停效果
|
||
&:hover {
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
// 播放图标尺寸
|
||
.play-icon {
|
||
width: 25rpx;
|
||
height: 25rpx;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 通用播放按钮样式优化
|
||
* 添加悬停效果
|
||
*/
|
||
.channel-play-btn {
|
||
transition: all 0.3s ease;
|
||
|
||
// 悬停效果
|
||
&:hover {
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 纯 CSS 播放按钮图标
|
||
* 当没有 playIcon 时使用
|
||
*/
|
||
.play-icon-css {
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 12rpx solid transparent;
|
||
border-bottom: 12rpx solid transparent;
|
||
border-left: 18rpx solid #fff;
|
||
margin-left: 4rpx;
|
||
transition: transform 0.3s ease;
|
||
|
||
// 悬停时的缩放效果
|
||
.channel-play-btn:hover & {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
// 列表模式下的尺寸调整
|
||
.channel-video.list-mode & {
|
||
border-top: 10rpx solid transparent;
|
||
border-bottom: 10rpx solid transparent;
|
||
border-left: 15rpx solid #fff;
|
||
margin-left: 3rpx;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 原生组件样式控制
|
||
* 确保 native-component 和 channel-video 正确填充容器
|
||
*/
|
||
native-component {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
}
|
||
|
||
/**
|
||
* channel-video 组件样式控制
|
||
* 避免受到 wx-channel-video 全局样式的影响
|
||
*/
|
||
channel-video {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-width: 100%;
|
||
min-height: 100%;
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
</style> |