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

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

@@ -3,7 +3,7 @@
<view class="article-wrap" :style="warpCss">
<view :class="['list-wrap', value.style]" :style="warpCss">
<!-- 自动垂直滚动 -->
<swiper class="auto-scroll-swiper" :style="swiperStyle" :vertical="swiperConfig.vertical !== false"
<swiper class="auto-scroll-swiper" :style="[swiperStyle]" :vertical="swiperConfig.vertical !== false"
:autoplay="swiperConfig.autoplay !== false" :circular="swiperConfig.circular !== false"
:interval="swiperConfig.interval || 3000" :duration="swiperConfig.duration || 500"
:display-multiple-items="safeDisplayMultipleItems">

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>

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

@@ -2,7 +2,7 @@
<view class="channel-video" :class="{ 'list-mode': listMode }">
<!-- 嵌入式视频播放 -->
<view v-if="canUseEmbedMode" class="embed-video-container">
<view class="video-cover-wrap" :class="videoCoverClass">
<view class="video-cover-wrap" :style="[coverStyle]">
<!-- #ifdef MP-WEIXIN -->
<native-component>
<!-- 嵌入式视频播放组件 -->
@@ -23,11 +23,10 @@
<!-- 跳转式视频播放 -->
<view v-else @click.stop="playVideo" class="video-container">
<view class="video-cover-wrap" :class="videoCoverClass">
<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 class="channel-play-btn" v-if="showPlayBtn" :style="[playBtnStyle]">
<view class="play-icon-css"></view>
</view>
<view class="video-stats-overlay" v-if="value.showViewCount">
{{ value.viewCount }}次观看
@@ -81,15 +80,6 @@ export default {
type: Boolean,
default: false
},
/**
* 视频高度（仅适用于嵌入式播放）
* @type {number}
* @default 220
*/
videoHeight: {
type: Number,
default: 220
},
/**
* 标题显示行数
* @type {number}
@@ -104,17 +94,6 @@ export default {
type: Boolean,
default: true
},
/**
* 视频比例
* @type {string}
* @default '16:9'
* @options '16:9', '3:4'
*/
aspectRatio: {
type: String,
default: '16:9',
validator: (value) => ['16:9', '3:4'].includes(value)
},
/**
* 视频封面图样式
* 采用 16:9 比例的响应式高度
@@ -159,32 +138,6 @@ export default {
return enableEmbedMode;
// #endif
return false
},
/**
* 播放按钮图标
* @returns {string}
*/
playIcon() {
// #ifdef MP-WEIXIN
return wechatChannelConfig.icon.playIcon
// #endif
return ''
},
/**
* 计算视频封面类名
* 根据环境和宽高比生成适当的 CSS 类
* @returns {Array}
*/
videoCoverClass() {
const classes = [];
// #ifdef MP-WEIXIN
classes.push('mp-weixin');
// #endif
// #ifndef MP-WEIXIN
classes.push('h5');
// #endif
classes.push(`ratio-${this.aspectRatio.replace(':', '-')}`);
return classes;
}
},
methods: {
@@ -202,31 +155,6 @@ export default {
<style scoped lang="scss">
@import './css/common-channel.scss';
/* 微信小程序环境样式 - 3:4 比例 */
.video-cover-wrap.mp-weixin.ratio-3-4 {
height: 400rpx;
position: relative;
}
/* 微信小程序环境样式 - 16:9 比例 */
.video-cover-wrap.mp-weixin.ratio-16-9 {
height: 300rpx;
position: relative;
}
/* H5 环境样式 - 3:4 比例 */
.video-cover-wrap.h5.ratio-3-4 {
height: 0;
padding-top: 133.33%;
}
/* H5 环境样式 - 16:9 比例 */
.video-cover-wrap.h5.ratio-16-9 {
height: 0;
padding-top: 56.25%;
}
/**
* 视频卡片容器样式
* 包含卡片基础样式、悬停效果和列表模式样式
@@ -503,7 +431,6 @@ export default {
/**
* 纯 CSS 播放按钮图标
* 当没有 playIcon 时使用
*/
.play-icon-css {
width: 0;

18
components-diy/js/wechat-channel.js
View File

@@ -6,7 +6,6 @@ export const wechatChannelConfig = {
smallSize: 60, // 小图标尺寸（rpx）
channelArrowSize: 24, // 频道箭头图标尺寸（rpx）
channelArrow: 'addon/personnel/shop/view/enterprise/arrow.png', // 频道箭头图标路径
playIcon: 'addon/personnel/shop/view/enterprise/play.png', // 播放按钮图标路径
},
@@ -122,13 +121,16 @@ export const wechatChannelUtil = {
// 数据校验
this.validateVideoData(item);
} catch (err) {
this.handleError(err, item);
reject(err);
return;
}
// 检查微信环境
if (typeof wx === 'undefined') {
reject(new Error(wechatChannelConfig.error.notWechat));
const err = new Error(wechatChannelConfig.error.notWechat);
this.handleError(err, item);
reject(err);
return;
}
@@ -136,7 +138,9 @@ export const wechatChannelUtil = {
const systemInfo = wx.getSystemInfoSync();
const SDKVersion = systemInfo.SDKVersion;
if (this.versionCompare(SDKVersion, wechatChannelConfig.wechat.minSdkVersion) < 0) {
reject(new Error(wechatChannelConfig.error.lowVersion));
const err = new Error(wechatChannelConfig.error.lowVersion);
this.handleError(err, item);
reject(err);
return;
}
@@ -155,7 +159,9 @@ export const wechatChannelUtil = {
}
});
} else {
reject(new Error(wechatChannelConfig.error.notSupported));
const err = new Error(wechatChannelConfig.error.notSupported);
this.handleError(err, item);
reject(err);
}
});
},
@@ -163,7 +169,7 @@ export const wechatChannelUtil = {
// 统一错误处理
handleError(err, item) {
console.error('微信视频号错误:', err);
const { errMsg = '微信视频播放失败', errCode = -1 } = err;
const { message = '', errMsg = '微信视频播放失败!', errCode = -1 } = err;
// 错误码5: 表示用户点击了取消. openChannelsActivity:fail cancel
if ([5].includes(errCode)) {
@@ -172,7 +178,7 @@ export const wechatChannelUtil = {
const showErrorToast = (otherMsgs = []) => {
uni.showToast({
title: [errMsg, ...otherMsgs].join('\n'),
title: [errMsg, message,...otherMsgs].join('\n'),
icon: 'none',
duration: 2000
});

2
pages_tool/contact/contact.vue
View File

@@ -864,7 +864,7 @@ image {
}
/deep/ .channel-list {
padding: 0rpx;
padding: 0rpx !important;
}
/deep/ .mescroll-totop {

2
uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
View File

@@ -13,7 +13,7 @@
</view>
<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
:style="fixNvueBug">
:style="[fixNvueBug]">
<view class="uni-title">
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
</view>

4
uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue
View File

@@ -28,7 +28,7 @@
<view v-show="popup" class="uni-date-mask" @click="close"></view>
<view v-if="!isPhone" ref="datePicker" v-show="popup" class="uni-date-picker__container">
<view v-if="!isRange" class="uni-date-single--x" :style="popover">
<view v-if="!isRange" class="uni-date-single--x" :style="[popover]">
<view class="uni-popper__arrow"></view>
<view v-if="hasTime" class="uni-date-changed popup-x-header">
<input class="uni-date__input t-c" type="text" v-model="tempSingleDate"
@@ -49,7 +49,7 @@
<view class="uni-date-popper__arrow"></view>
</view>
<view v-else class="uni-date-range--x" :style="popover">
<view v-else class="uni-date-range--x" :style="[popover]">
<view class="uni-popper__arrow"></view>
<view v-if="hasTime" class="popup-x-header uni-date-changed">
<view class="popup-x-header--datetime">

2
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
View File

@@ -1,5 +1,5 @@
<template>
<view v-if="showPopup" class="uni-popup" :class="customClass" :style="{'top': top}">
<view v-if="showPopup" class="uni-popup" :class="customClass" :style="[{'top': top}]">
<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" ></view>
<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper goodslist-uni-popup safe-area" @click="close(true)" v-if="isIphoneX">
<view class="uni-popup__wrapper-box goodslist-uni-popup-box" @click.stop="clear">