revert(视频号组件): 精简代码，去除不用的组件
This commit is contained in:
@@ -7,15 +7,12 @@
|
||||
--channel-play-btn-small-size: 60rpx;
|
||||
--channel-play-btn-icon-size: 40rpx;
|
||||
--channel-play-btn-icon-small-size: 30rpx;
|
||||
--channel-avatar-size: 60rpx;
|
||||
--channel-arrow-size: 24rpx;
|
||||
--channel-border-radius: 12rpx;
|
||||
--channel-stats-padding: 10rpx;
|
||||
--channel-info-wrap-padding: 10rpx 0;
|
||||
|
||||
// 字体变量
|
||||
--channel-name-font-size: 28rpx;
|
||||
--channel-follow-font-size: 24rpx;
|
||||
--video-title-font-size: 28rpx;
|
||||
--video-title-small-font-size: 24rpx;
|
||||
--video-stats-font-size: 24rpx;
|
||||
@@ -23,7 +20,6 @@
|
||||
|
||||
// 颜色变量
|
||||
--channel-name-color: #333;
|
||||
--channel-follow-color: #07c160;
|
||||
--video-title-color: #333;
|
||||
--video-title-small-color: #666;
|
||||
--video-stats-color: #999;
|
||||
@@ -33,9 +29,6 @@
|
||||
--channel-stats-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
|
||||
|
||||
// 间距变量
|
||||
--channel-header-padding: 16rpx;
|
||||
--channel-avatar-margin-right: 12rpx;
|
||||
--channel-arrow-margin-left: 8rpx;
|
||||
--channel-name-margin-bottom: 4rpx;
|
||||
--video-title-margin-bottom: 8rpx;
|
||||
}
|
||||
@@ -47,7 +40,6 @@
|
||||
--channel-play-btn-small-size: 50rpx;
|
||||
--channel-play-btn-icon-size: 35rpx;
|
||||
--channel-play-btn-icon-small-size: 25rpx;
|
||||
--channel-avatar-size: 50rpx;
|
||||
--channel-name-font-size: 24rpx;
|
||||
--video-title-font-size: 24rpx;
|
||||
}
|
||||
@@ -59,7 +51,6 @@
|
||||
--channel-play-btn-small-size: 70rpx;
|
||||
--channel-play-btn-icon-size: 45rpx;
|
||||
--channel-play-btn-icon-small-size: 35rpx;
|
||||
--channel-avatar-size: 70rpx;
|
||||
--channel-name-font-size: 32rpx;
|
||||
--video-title-font-size: 32rpx;
|
||||
}
|
||||
@@ -149,42 +140,4 @@
|
||||
color: var(--video-stats-color);
|
||||
}
|
||||
|
||||
// 频道头部
|
||||
.channel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--channel-header-padding);
|
||||
border-bottom: 1rpx solid var(--channel-border-color);
|
||||
|
||||
.channel-avatar {
|
||||
width: var(--channel-avatar-size);
|
||||
height: var(--channel-avatar-size);
|
||||
border-radius: 50%;
|
||||
margin-right: var(--channel-avatar-margin-right);
|
||||
}
|
||||
|
||||
.channel-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.channel-name {
|
||||
font-size: var(--channel-name-font-size);
|
||||
font-weight: 500;
|
||||
color: var(--channel-name-color);
|
||||
margin-bottom: var(--channel-name-margin-bottom);
|
||||
}
|
||||
|
||||
.channel-follow {
|
||||
font-size: var(--channel-follow-font-size);
|
||||
color: var(--channel-follow-color);
|
||||
}
|
||||
}
|
||||
|
||||
.channel-arrow {
|
||||
width: var(--channel-arrow-size);
|
||||
height: var(--channel-arrow-size);
|
||||
margin-left: var(--channel-arrow-margin-left);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
<template>
|
||||
<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" v-if="arrowIcon" :src="$util.img(arrowIcon)" mode="aspectFill"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DiyMinx from './minx.js'
|
||||
|
||||
import { wechatChannelConfig } from './js/wechat-channel.js'
|
||||
|
||||
export default {
|
||||
name: 'diy-channel-header',
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
computed: {
|
||||
arrowIcon() {
|
||||
return wechatChannelConfig.icon.channelArrow
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlerClick() {
|
||||
this.$emit('header-tap', this.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './css/common-channel.scss';
|
||||
</style>
|
||||
@@ -1,141 +0,0 @@
|
||||
<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'
|
||||
import { wechatChannelUtil } from './js/wechat-channel.js'
|
||||
|
||||
export default {
|
||||
name: 'diy-channel',
|
||||
props: {
|
||||
/**
|
||||
* 视频号数据对象
|
||||
* @type {Object}
|
||||
* @required
|
||||
* @property {string} channelName - 视频号名称
|
||||
* @property {string} avatarUrl - 视频号头像URL
|
||||
* @property {string} videoTitle - 视频标题
|
||||
* @property {string} coverUrl - 视频封面URL
|
||||
* @property {string} feedId - 视频号内容ID，用于播放视频
|
||||
* @property {number} viewCount - 视频观看次数
|
||||
* @property {boolean} showFollow - 是否显示关注按钮
|
||||
* @property {string} componentAngle - 组件圆角类型，可选值：round
|
||||
* @property {number} topAroundRadius - 顶部圆角半径
|
||||
* @property {number} bottomAroundRadius - 底部圆角半径
|
||||
* @property {boolean} embedMode - 是否启用嵌入式播放
|
||||
* @property {boolean} showViewCount - 是否显示观看次数
|
||||
* @property {string} finderUserName - 视频号ID
|
||||
* @property {string} feedToken - 视频token，用于嵌入式播放
|
||||
*/
|
||||
value: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {
|
||||
// 组件创建时的初始化逻辑
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
/**
|
||||
* 组件刷新监听
|
||||
* 当组件需要刷新时触发
|
||||
* @param {*} nval - 新值
|
||||
*/
|
||||
componentRefresh: function (nval) { }
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* 组件容器样式
|
||||
* 根据配置动态生成样式字符串，主要处理圆角样式
|
||||
* @returns {string} 样式字符串
|
||||
*/
|
||||
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: {
|
||||
/**
|
||||
* 处理头部点击事件
|
||||
* 触发 channel-tap 事件，用于跳转到视频号主页
|
||||
*/
|
||||
async handlerClick() {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'channel-tap',
|
||||
data: this.value,
|
||||
promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 处理视频播放事件
|
||||
* 触发 video-play 事件，并在微信小程序中调用视频播放接口
|
||||
*/
|
||||
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>
|
||||
@@ -251,12 +251,7 @@
|
||||
<diy-icon :value="item"></diy-icon>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'Channel'">
|
||||
<!-- 视频号 -->
|
||||
<diy-channel :value="item"></diy-channel>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'ChannelList'">
|
||||
<template v-if="['ChannelList', 'WechatChannel'].includes(item.componentName)">
|
||||
<!-- 视频号列表 -->
|
||||
<diy-channel-list :value="item"></diy-channel-list>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user