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

chore(视频号组件): 更新视频号样式

Browse Source
This commit is contained in:
ZF Sun
2026-01-10 16:12:36 +08:00
parent 6f6899deaa
commit f87c7d963e
4 changed files with 190 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components-diy/diy-channel-header.vue
View File

@@ -12,9 +12,8 @@
<script> <script>
import DiyMinx from './minx.js' import DiyMinx from './minx.js'
// #ifdef MP-WEIXIN
import { wechatChannelConfig } from './js/wechat-channel.js' import { wechatChannelConfig } from './js/wechat-channel.js'
// #endif
export default { export default {
name: 'diy-channel-header', name: 'diy-channel-header',
props: { props: {
@@ -26,10 +25,7 @@ export default {
mixins: [DiyMinx], mixins: [DiyMinx],
computed: { computed: {
arrowIcon() { arrowIcon() {
// #ifdef MP-WEIXIN
return wechatChannelConfig.icon.channelArrow return wechatChannelConfig.icon.channelArrow
// #endif
return ''
} }
}, },
methods: { methods: {

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

@@ -1,10 +1,15 @@
<template> <template>
<view :style="componentStyle"> <view :style="[componentStyle, { '--row-count': value.rowCount }]">
<!-- 固定布局模式 --> <!-- 固定布局模式 -->
<view v-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]" <view v-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]"
style="padding:20rpx;"> style="padding:20rpx;">
<view v-for="(item, index) in value.list" :key="index" class="channel-item"> <view v-for="(item, index) in value.list" :key="index" class="channel-item">
<diy-channel-video :value="item" @video-play="playVideo(item)" /> <diy-channel-video
:value="item"
@video-play="playVideo(item)"
:list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240"
/>
</view> </view>
</view> </view>
@@ -12,9 +17,13 @@
<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]" <scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'"> :scroll-x="value.showStyle == 'singleSlide'">
<view class="uni-scroll-view-content"> <view class="uni-scroll-view-content">
<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]" <view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]">
:style="{ width: (100 / value.rowCount + '%') + ';' }"> <diy-channel-video
<diy-channel-video :value="item" @video-play="playVideo(item)" /> :value="item"
@video-play="playVideo(item)"
:list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240"
/>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
@@ -24,9 +33,7 @@
<script> <script>
import DiyMinx from './minx.js' import DiyMinx from './minx.js'
// #ifdef MP-WEIXIN
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js' import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
// #endif
export default { export default {
name: 'diy-channel-list', name: 'diy-channel-list',
props: { props: {
@@ -54,17 +61,19 @@ export default {
computed: { computed: {
componentStyle() { componentStyle() {
let style = ''; let style = '';
style += 'background-color:' + this.value.componentBgColor + ';'; if (this.value?.componentBgColor) {
style += 'background-color:' + this.value?.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
} }
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';'; if (this.value?.componentAngle == 'round') {
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';'; style += 'border-top-left-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
style += 'border-top-right-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
style += 'border-bottom-left-radius:' + (2 * this.value?.bottomAroundRadius) + 'rpx;';
style += 'border-bottom-right-radius:' + (2 * this.value?.bottomAroundRadius) + 'rpx;';
}
style += 'box-shadow:' + (this.value?.ornament?.type == 'shadow' ? '0 0 10rpx ' + this.value?.ornament?.color : '') + ';';
style += 'border:' + (this.value?.ornament?.type == 'stroke' ? '2rpx solid ' + this.value?.ornament?.color : '') + ';';
return style; return style;
}, },
@@ -72,20 +81,20 @@ export default {
swiperHeight() { swiperHeight() {
let height = 0; let height = 0;
if (this.value.mode == 'graphic') { if (this.value?.mode == 'graphic') {
height = (49 + this.value.imageSize) * this.value.pageCount; height = (49 + this.value?.imageSize) * this.value?.pageCount;
} else if (this.value.mode == 'img') { } else if (this.value?.mode == 'img') {
height = (22 + this.value.imageSize) * this.value.pageCount; height = (22 + this.value?.imageSize) * this.value?.pageCount;
} else if (this.value.mode == 'text') { } else if (this.value?.mode == 'text') {
height = 43 * this.value.pageCount; height = 43 * this.value?.pageCount;
} }
return 'height:' + (2 * height) + 'rpx'; return 'height:' + (2 * height) + 'rpx';
}, },
isIndicatorDots() { isIndicatorDots() {
return this.value.carousel.type != 'hide' && return this.value?.carousel?.type != 'hide' &&
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount)); 1 != Math.ceil(this.value?.list?.length / (this.value?.pageCount * this.value?.rowCount));
} }
}, },
methods: { methods: {
@@ -125,89 +134,27 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import './css/common-channel.scss'; @import './css/common-channel.scss';
// 优化列表布局样式
.channel-list { .channel-list {
&.row1-of3 { &.row1-of3 {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16rpx;
.channel-item { .channel-item {
position: relative; flex: 0 0 calc(33.3333333% - 10rpx);
display: flex;
flex-direction: column;
margin-top: 20rpx;
width: calc(33.3333333% - 14rpx);
box-sizing: border-box; box-sizing: border-box;
&:nth-child(3n + 3) {
width: calc(33.33% - 15rpx);
}
&:nth-of-type(1),
&:nth-of-type(2),
&:nth-of-type(3) {
margin-top: 0;
}
&:nth-child(3n) {
width: calc(33.3333333% - 15rpx);
}
&:nth-child(3n-1) {
margin-left: 20rpx;
margin-right: 20rpx;
}
.channel-img-wrap {
position: relative;
overflow: hidden;
height: 220rpx;
border-radius: 10rpx;
}
.channel-img {
width: 100%;
height: 100%;
}
.channel-play-btn {
@extend .channel-play-btn.small;
}
} }
} }
&.row1-of2 { &.row1-of2 {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; gap: 16rpx;
.channel-item { .channel-item {
position: relative; flex: 0 0 calc(50% - 8rpx);
margin-top: 20rpx;
width: calc(50% - 10rpx);
display: flex;
flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
&:nth-child(2n) {
margin-right: 0 !important;
}
&:nth-of-type(1),
&:nth-of-type(2) {
margin-top: 0;
}
.channel-img-wrap {
position: relative;
overflow: hidden;
height: 340rpx;
border-radius: 10rpx;
}
.channel-img {
width: 100%;
height: 100%;
}
} }
} }
} }
@@ -220,13 +167,14 @@ export default {
.uni-scroll-view-content { .uni-scroll-view-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; gap: 16rpx;
} }
} }
&.singleSlide { &.singleSlide {
.uni-scroll-view-content { .uni-scroll-view-content {
display: flex; display: flex;
gap: 16rpx;
} }
.channel-nav-item { .channel-nav-item {
@@ -237,38 +185,36 @@ export default {
.channel-nav-item { .channel-nav-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
padding: 14rpx 0;
box-sizing: border-box; box-sizing: border-box;
width: calc(100% / var(--row-count, 3) - 12rpx);
}
}
.channel-img { // 响应式调整
position: relative; @media (max-width: 375px) {
display: flex; .channel-list {
align-items: center; &.row1-of3 {
justify-content: center; gap: 12rpx;
width: 100%;
height: 200rpx;
border-radius: 10rpx;
overflow: hidden;
image { .channel-item {
width: 100%; flex: 0 0 calc(33.3333333% - 8rpx);
height: 100%;
}
.channel-play-btn {
@extend .channel-play-btn.small;
} }
} }
.channel-text { &.row1-of2 {
padding-top: 12rpx; gap: 12rpx;
line-height: 1.5;
white-space: nowrap; .channel-item {
text-overflow: ellipsis; flex: 0 0 calc(50% - 6rpx);
overflow: hidden; }
width: 100%; }
text-align: center; }
.channel-nav {
padding: 12rpx;
.channel-nav-item {
width: calc(100% / var(--row-count, 3) - 8rpx);
} }
} }
} }

139
components-diy/diy-channel-video.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<view class="channel-video"> <view class="channel-video" :class="{ 'list-mode': listMode }">
<!-- 嵌入式视频播放 --> <!-- 嵌入式视频播放 -->
<native-component v-if="canUseEmbedMode"> <native-component v-if="canUseEmbedMode">
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
@@ -7,23 +7,25 @@
:feed-id="value.feedId" :feed-id="value.feedId"
:finder-user-name="value.finderUserName" :finder-user-name="value.finderUserName"
:feed-token="value.feedToken" :feed-token="value.feedToken"
style="width: 100%; height: 320rpx;"> :style="embedVideoStyle">
</channel-video> </channel-video>
// #endif // #endif
</native-component> </native-component>
<!-- 跳转式视频播放 --> <!-- 跳转式视频播放 -->
<view v-else @tap="playVideo"> <view v-else @tap="playVideo" class="video-container">
<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image> <view class="video-cover-wrap">
<view class="channel-play-btn"> <image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
<image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image> <view class="channel-play-btn">
</view> <image class="play-icon" v-if="playIcon" :src="$util.img(playIcon)" mode="aspectFill"></image>
<view class="channel-stats"> </view>
<text>{{ value.viewCount }}次观看</text> <view class="video-stats-overlay" v-if="value.showViewCount">
{{ value.viewCount }}次观看
</view>
</view> </view>
<view class="video-info"> <view class="video-info">
<view class="video-title">{{ value.videoTitle }}</view> <view class="video-title">{{ value.videoTitle }}</view>
<view class="video-stats">{{ value.viewCount }}次观看</view> <view class="video-stats" v-if="value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
</view> </view>
</view> </view>
</view> </view>
@@ -31,9 +33,7 @@
<script> <script>
// #ifdef MP-WEIXIN
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js' import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
// #endif
export default { export default {
name: 'diy-channel-video', name: 'diy-channel-video',
@@ -41,12 +41,20 @@ export default {
value: { value: {
type: Object, type: Object,
required: true required: true
},
listMode: {
type: Boolean,
default: false
},
videoHeight: {
type: Number,
default: 220
} }
}, },
computed: { computed: {
canUseEmbedMode() { canUseEmbedMode() {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
return this.value.embedMode && wechatChannelUtil.isEmbedModeSupported(); return this.value?.embedMode && wechatChannelUtil.isEmbedModeSupported();
// #endif // #endif
return false return false
}, },
@@ -55,6 +63,12 @@ export default {
return wechatChannelConfig.icon.playIcon return wechatChannelConfig.icon.playIcon
// #endif // #endif
return '' return ''
},
embedVideoStyle() {
return {
width: '100%',
height: `${this.listMode ? 180 : 320}rpx`
};
} }
}, },
methods: { methods: {
@@ -70,15 +84,112 @@ export default {
.channel-video { .channel-video {
position: relative; position: relative;
background-color: #fff;
border-radius: 12rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
&:hover {
transform: translateY(-2rpx);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
}
&.list-mode {
border-radius: 8rpx;
box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.06);
.video-info {
padding: 12rpx;
.video-title {
font-size: 24rpx;
margin-bottom: 4rpx;
}
}
}
}
.video-container {
display: flex;
flex-direction: column;
height: 100%;
}
.video-cover-wrap {
position: relative;
width: 100%;
height: 320rpx;
.channel-video.list-mode & {
height: 180rpx;
}
} }
.video-cover { .video-cover {
width: 100%; width: 100%;
height: 320rpx; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: 12rpx 12rpx 0 0;
.channel-video.list-mode & {
border-radius: 8rpx 8rpx 0 0;
}
}
.video-stats-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
padding: 8rpx 12rpx;
color: #fff;
font-size: 20rpx;
text-align: right;
} }
.video-info { .video-info {
padding: 16rpx; padding: 16rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.video-title {
font-size: 28rpx;
font-weight: 500;
color: #333;
margin-bottom: 8rpx;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
.channel-video.list-mode & {
-webkit-line-clamp: 2;
font-size: 24rpx;
margin-bottom: 4rpx;
}
}
.video-stats {
font-size: 22rpx;
color: #999;
margin-top: 4rpx;
}
// 确保播放按钮在列表模式下更小
.channel-video.list-mode .channel-play-btn {
width: 50rpx;
height: 50rpx;
.play-icon {
width: 25rpx;
height: 25rpx;
}
} }
</style> </style>

2
components-diy/diy-channel.vue
View File

@@ -10,9 +10,7 @@
// 微信视频号组件 // 微信视频号组件
import DiyMinx from './minx.js' import DiyMinx from './minx.js'
// #ifdef MP-WEIXIN
import { wechatChannelUtil } from './js/wechat-channel.js' import { wechatChannelUtil } from './js/wechat-channel.js'
// #endif
export default { export default {
name: 'diy-channel', name: 'diy-channel',