Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 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>
import DiyMinx from './minx.js'
// #ifdef MP-WEIXIN
import { wechatChannelConfig } from './js/wechat-channel.js'
// #endif
export default {
name: 'diy-channel-header',
props: {
@@ -26,10 +25,7 @@ export default {
mixins: [DiyMinx],
computed: {
arrowIcon() {
// #ifdef MP-WEIXIN
return wechatChannelConfig.icon.channelArrow
// #endif
return ''
}
},
methods: {

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

@@ -1,10 +1,15 @@
<template>
<view :style="componentStyle">
<view :style="[componentStyle, { '--row-count': value.rowCount }]">
<!-- 固定布局模式 -->
<view v-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]"
style="padding:20rpx;">
<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>
@@ -12,9 +17,13 @@
<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'">
<view class="uni-scroll-view-content">
<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]"
:style="{ width: (100 / value.rowCount + '%') + ';' }">
<diy-channel-video :value="item" @video-play="playVideo(item)" />
<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]">
<diy-channel-video
:value="item"
@video-play="playVideo(item)"
:list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240"
/>
</view>
</view>
</scroll-view>
@@ -24,9 +33,7 @@
<script>
import DiyMinx from './minx.js'
// #ifdef MP-WEIXIN
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
// #endif
export default {
name: 'diy-channel-list',
props: {
@@ -54,17 +61,19 @@ export default {
computed: {
componentStyle() {
let style = '';
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;';
if (this.value?.componentBgColor) {
style += 'background-color:' + this.value?.componentBgColor + ';';
}
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 : '') + ';';
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 : '') + ';';
style += 'border:' + (this.value?.ornament?.type == 'stroke' ? '2rpx solid ' + this.value?.ornament?.color : '') + ';';
return style;
},
@@ -72,20 +81,20 @@ export default {
swiperHeight() {
let height = 0;
if (this.value.mode == 'graphic') {
height = (49 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'img') {
height = (22 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'text') {
height = 43 * this.value.pageCount;
if (this.value?.mode == 'graphic') {
height = (49 + this.value?.imageSize) * this.value?.pageCount;
} else if (this.value?.mode == 'img') {
height = (22 + this.value?.imageSize) * this.value?.pageCount;
} else if (this.value?.mode == 'text') {
height = 43 * this.value?.pageCount;
}
return 'height:' + (2 * height) + 'rpx';
},
isIndicatorDots() {
return this.value.carousel.type != 'hide' &&
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
return this.value?.carousel?.type != 'hide' &&
1 != Math.ceil(this.value?.list?.length / (this.value?.pageCount * this.value?.rowCount));
}
},
methods: {
@@ -125,89 +134,27 @@ export default {
<style lang="scss" scoped>
@import './css/common-channel.scss';
// 优化列表布局样式
.channel-list {
&.row1-of3 {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
.channel-item {
position: relative;
display: flex;
flex-direction: column;
margin-top: 20rpx;
width: calc(33.3333333% - 14rpx);
flex: 0 0 calc(33.3333333% - 10rpx);
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 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16rpx;
.channel-item {
position: relative;
margin-top: 20rpx;
width: calc(50% - 10rpx);
display: flex;
flex-direction: column;
flex: 0 0 calc(50% - 8rpx);
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 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16rpx;
}
}
&.singleSlide {
.uni-scroll-view-content {
display: flex;
gap: 16rpx;
}
.channel-nav-item {
@@ -237,38 +185,36 @@ export default {
.channel-nav-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 14rpx 0;
box-sizing: border-box;
width: calc(100% / var(--row-count, 3) - 12rpx);
}
}
.channel-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 200rpx;
border-radius: 10rpx;
overflow: hidden;
// 响应式调整
@media (max-width: 375px) {
.channel-list {
&.row1-of3 {
gap: 12rpx;
image {
width: 100%;
height: 100%;
}
.channel-play-btn {
@extend .channel-play-btn.small;
.channel-item {
flex: 0 0 calc(33.3333333% - 8rpx);
}
}
.channel-text {
padding-top: 12rpx;
line-height: 1.5;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
&.row1-of2 {
gap: 12rpx;
.channel-item {
flex: 0 0 calc(50% - 6rpx);
}
}
}
.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>
<view class="channel-video">
<view class="channel-video" :class="{ 'list-mode': listMode }">
<!-- 嵌入式视频播放 -->
<native-component v-if="canUseEmbedMode">
// #ifdef MP-WEIXIN
@@ -7,23 +7,25 @@
:feed-id="value.feedId"
:finder-user-name="value.finderUserName"
:feed-token="value.feedToken"
style="width: 100%; height: 320rpx;">
:style="embedVideoStyle">
</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 v-else @tap="playVideo" class="video-container">
<view class="video-cover-wrap">
<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="video-stats-overlay" v-if="value.showViewCount">
{{ value.viewCount }}次观看
</view>
</view>
<view class="video-info">
<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>
@@ -31,9 +33,7 @@
<script>
// #ifdef MP-WEIXIN
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
// #endif
export default {
name: 'diy-channel-video',
@@ -41,12 +41,20 @@ export default {
value: {
type: Object,
required: true
},
listMode: {
type: Boolean,
default: false
},
videoHeight: {
type: Number,
default: 220
}
},
computed: {
canUseEmbedMode() {
// #ifdef MP-WEIXIN
return this.value.embedMode && wechatChannelUtil.isEmbedModeSupported();
return this.value?.embedMode && wechatChannelUtil.isEmbedModeSupported();
// #endif
return false
},
@@ -55,6 +63,12 @@ export default {
return wechatChannelConfig.icon.playIcon
// #endif
return ''
},
embedVideoStyle() {
return {
width: '100%',
height: `${this.listMode ? 180 : 320}rpx`
};
}
},
methods: {
@@ -70,15 +84,112 @@ export default {
.channel-video {
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 {
width: 100%;
height: 320rpx;
height: 100%;
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 {
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>

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

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