Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revert(视频号组件): 精简代码，调整样式以和后台设计统一

Browse Source
This commit is contained in:
ZF Sun
2026-01-14 15:14:02 +08:00
parent db7a8d7202
commit 392a8e2952
8 changed files with 134 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

334
components-diy/diy-channel-list.vue
View File

@@ -6,13 +6,13 @@
:duration="value.carousel.duration || 500" :circular="value.carousel.circular || false"
:style="swiperHeight" class="channel-swiper">
<swiper-item v-for="(slide, slideIndex) in swiperSlides" :key="slideIndex">
<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
<!-- 视频号视频卡片，轮播模式 -->
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240" :title-line-clamp="value.titleLineClamp"
:show-play-btn="value.showPlayBtn" :cover-style="value.coverStyle"
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
<!-- 视频号视频卡片，轮播模式 -->
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:title-line-clamp="value.titleLineClamp"
:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
</view>
</view>
</swiper-item>
@@ -22,9 +22,9 @@
<view v-else-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]">
<view v-for="(item, index) in value.list" :key="index" class="channel-item">
<!-- 视频号视频卡片，列表模式 -->
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240" :title-line-clamp="value.titleLineClamp"
:show-play-btn="value.showPlayBtn" :cover-style="value.coverStyle"
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:title-line-clamp="value.titleLineClamp"
:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
</view>
</view>
@@ -36,9 +36,9 @@
<view class="uni-scroll-view-content">
<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]">
<!-- 视频号视频卡片，滚动模式 -->
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240" :title-line-clamp="value.titleLineClamp"
:show-play-btn="value.showPlayBtn" :cover-style="value.coverStyle"
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:title-line-clamp="value.titleLineClamp"
:show-play-btn="value.showPlayBtn" :cover-style="computedCoverStyle"
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
</view>
</view>
@@ -190,6 +190,25 @@ export default {
}
return slides;
},
/**
* 视频封面样式
* 根据aspectRatio属性动态计算封面样式
* @returns {Object} 封面样式对象
*/
computedCoverStyle() {
const aspectRatio = this.value?.aspectRatio || '16:9';
let paddingTop = '56.25%'; // 默认 16:9 比例
if (aspectRatio === '3:4') {
paddingTop = '133.33%'; // 3:4 比例
}
return {
width: '100%',
height: '0',
paddingTop: paddingTop
};
}
},
methods: {
@@ -259,69 +278,12 @@ export default {
/**
* 列表布局样式
* 支持 2 列和 3 列布局
*/
.channel-list {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
padding: 32rpx;
box-sizing: border-box;
.channel-item {
// 默认 3 列布局
flex: 0 0 calc(33.3333333% - 10rpx);
box-sizing: border-box;
&:nth-child(3n) {
margin-right: 0;
}
}
// 2 列布局
&.row1-of2 {
.channel-item {
flex: 0 0 calc(50% - 8rpx);
&:nth-child(3n) {
margin-right: 16rpx;
}
&:nth-child(2n) {
margin-right: 0;
}
}
}
// 4 列布局
&.row1-of4 {
.channel-item {
flex: 0 0 calc(25% - 12rpx);
&:nth-child(3n) {
margin-right: 16rpx;
}
&:nth-child(4n) {
margin-right: 0;
}
}
}
// 1 列布局
&.row1-of1 {
.channel-item {
flex: 0 0 100%;
&:nth-child(3n) {
margin-right: 16rpx;
}
&:nth-child(1n) {
margin-right: 0;
}
}
}
display: grid;
grid-template-columns: repeat(var(--row-count, 2), 1fr);
gap: 8px;
padding: 16px 16px 0px;
}
/**
@@ -333,15 +295,17 @@ export default {
box-sizing: border-box;
.uni-scroll-view-content {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(var(--row-count, 2), 1fr);
gap: 16rpx;
}
// 单滑动模式
&.singleSlide {
.uni-scroll-view-content {
display: flex;
flex-wrap: nowrap;
gap: 16rpx;
}
.channel-nav-item {
@@ -354,56 +318,33 @@ export default {
display: flex;
flex-direction: column;
box-sizing: border-box;
// 默认 3 列布局
flex: 0 0 calc(33.3333333% - 10rpx);
}
&:nth-child(3n) {
margin-right: 0;
// 1 列布局
&.row1-of1 {
.uni-scroll-view-content {
grid-template-columns: 1fr;
}
}
// 2 列布局
&.row1-of2 {
.channel-nav-item {
flex: 0 0 calc(50% - 8rpx);
.uni-scroll-view-content {
grid-template-columns: repeat(2, 1fr);
}
}
&:nth-child(3n) {
margin-right: 16rpx;
}
&:nth-child(2n) {
margin-right: 0;
}
// 3 列布局
&.row1-of3 {
.uni-scroll-view-content {
grid-template-columns: repeat(3, 1fr);
}
}
// 4 列布局
&.row1-of4 {
.channel-nav-item {
flex: 0 0 calc(25% - 12rpx);
&:nth-child(3n) {
margin-right: 16rpx;
}
&:nth-child(4n) {
margin-right: 0;
}
}
}
// 1 列布局
&.row1-of1 {
.channel-nav-item {
flex: 0 0 100%;
&:nth-child(3n) {
margin-right: 16rpx;
}
&:nth-child(1n) {
margin-right: 0;
}
.uni-scroll-view-content {
grid-template-columns: repeat(4, 1fr);
}
}
}
@@ -426,65 +367,36 @@ export default {
box-sizing: border-box;
.swiper-slide-content {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(var(--row-count, 2), 1fr);
gap: 16rpx;
padding: 16rpx;
box-sizing: border-box;
.channel-item {
// 默认 3 列布局
flex: 0 0 calc(33.3333333% - 10rpx);
display: flex;
flex-direction: column;
box-sizing: border-box;
&:nth-child(3n) {
margin-right: 0;
}
}
// 轮播模式下的 2 列布局
&.row1-of2 {
.channel-item {
flex: 0 0 calc(50% - 8rpx);
&:nth-child(3n) {
margin-right: 16rpx;
}
&:nth-child(2n) {
margin-right: 0;
}
}
}
// 轮播模式下的 4 列布局
&.row1-of4 {
.channel-item {
flex: 0 0 calc(25% - 12rpx);
&:nth-child(3n) {
margin-right: 16rpx;
}
&:nth-child(4n) {
margin-right: 0;
}
}
}
// 轮播模式下的 1 列布局
&.row1-of1 {
.channel-item {
flex: 0 0 100%;
grid-template-columns: 1fr;
}
&:nth-child(3n) {
margin-right: 16rpx;
}
// 轮播模式下的 2 列布局
&.row1-of2 {
grid-template-columns: repeat(2, 1fr);
}
&:nth-child(1n) {
margin-right: 0;
}
}
// 轮播模式下的 3 列布局
&.row1-of3 {
grid-template-columns: repeat(3, 1fr);
}
// 轮播模式下的 4 列布局
&.row1-of4 {
grid-template-columns: repeat(4, 1fr);
}
}
}
@@ -500,76 +412,54 @@ export default {
.channel-swiper .swiper-slide-content {
gap: 12rpx;
padding: 12rpx;
.channel-item,
.channel-nav-item {
// 默认 3 列布局
flex: 0 0 calc(33.3333333% - 8rpx);
&:nth-child(3n) {
margin-right: 0;
}
}
// 小屏幕上的 2 列布局
&.row1-of2 {
.channel-item,
.channel-nav-item {
flex: 0 0 calc(50% - 6rpx);
&:nth-child(3n) {
margin-right: 12rpx;
}
&:nth-child(2n) {
margin-right: 0;
}
}
}
// 小屏幕上的 4 列布局
&.row1-of4 {
.channel-item,
.channel-nav-item {
flex: 0 0 calc(25% - 9rpx);
&:nth-child(3n) {
margin-right: 12rpx;
}
&:nth-child(4n) {
margin-right: 0;
}
}
}
// 小屏幕上的 1 列布局
&.row1-of1 {
.channel-item,
.channel-nav-item {
flex: 0 0 100%;
&:nth-child(3n) {
margin-right: 12rpx;
}
&:nth-child(1n) {
margin-right: 0;
}
}
}
}
// 小屏幕上的单滑动模式
.channel-nav {
&.singleSlide {
.uni-scroll-view-content {
gap: 12rpx;
}
.channel-nav-item {
width: 240rpx;
}
}
}
}
/**
* 视频比例样式调整
* 根据不同的视频比例调整布局
*/
// // 3:4 比例的视频卡片样式
// .channel-video.ratio-3-4 {
// // 调整视频卡片的整体高度
// /deep/ .video-cover-wrap {
// padding-top: 133.33%; // 3:4 比例
// }
// // 列表模式下的3:4比例调整
// &.list-mode {
// /deep/ .video-cover-wrap {
// padding-top: 133.33%; // 3:4 比例
// }
// }
// }
// // 16:9 比例的视频卡片样式（默认）
// .channel-video.ratio-16-9 {
// // 保持默认的16:9比例
// /deep/ .video-cover-wrap {
// padding-top: 56.25%; // 16:9 比例
// }
// // 列表模式下的16:9比例保持默认
// &.list-mode {
// /deep/ .video-cover-wrap {
// padding-top: 56.25%; // 16:9 比例
// }
// }
// }
</style>