chore:竖版视频可以正常在容器里

This commit is contained in:
2026-08-14 15:03:23 +08:00
parent 83b253bced
commit 5d7facc94d
2 changed files with 3 additions and 48 deletions

View File

@@ -181,7 +181,7 @@ const localDevConfig = ({
// })['2724']; // 生物菌肥
// })['2811']; // 选择要使用的环境配置
// })['local-11']; // 选择要使用的环境配置
})['192.168.8.118-1']; // 本地
})['1']; // 本地
// })['local-2']; // 本地
// })['local-11']; // 本地
// })['1-test']; // test

View File

@@ -37,8 +37,7 @@
:info="goodsSkuDetail.barrageData" />
<!-- 商品媒体信息 -->
<!-- 视频区域高度:图片态走 swiperHeight;视频态且已拿到竖屏视频元数据时,按视频比例自适应高度(最大 5:4),避免竖屏视频被裁剪成横屏 -->
<view class="goods-media" :style="{ height: mediaHeight }">
<view class="goods-media" :style="{ height: goodsSkuDetail.swiperHeight }">
<!-- 商品图片 -->
<view class="goods-img" :class="{ show: switchMedia == 'img' }">
<swiper class="swiper" @change="swiperChange" :interval="swiperInterval"
@@ -57,11 +56,10 @@
</view>
</view>
<!-- 商品视频:objectFit=contain 保留原始宽高比,竖屏/横屏均不做强制裁剪 -->
<!-- 商品视频:objectFit=contain 保留原始宽高比,在固定高度的图片容器内居中播放 -->
<view class="goods-video" :class="{ show: switchMedia == 'video' }">
<video id="goodsVideo" :src="$util.img(goodsSkuDetail.video_url)"
:poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" objectFit="contain"
@loadedmetadata="onVideoLoadedMetadata"
playsinline webkit-playsinline x5-playsinline></video>
</view>
@@ -540,8 +538,6 @@ export default {
data() {
// 商品详情骨架屏:模拟「轮播图 + 价格行 + 标题简介 + 规格行 + 商家 + 详情 + 推荐」
return {
// 视频元数据(宽/高),用于竖屏视频自适应容器高度
videoInfo: { width: 0, height: 0 },
// 1. 轮播图:方形 banner 占位
skeletonBanner: {
padding: '0',
@@ -666,27 +662,6 @@ export default {
};
},
computed: {
// 媒体容器高度:视频激活且为竖屏时按视频比例撑高,否则保持图片 swiper 高度
mediaHeight() {
if (
this.switchMedia === 'video' &&
this.videoInfo.width &&
this.videoInfo.height &&
this.videoInfo.height > this.videoInfo.width
) {
try {
const sys = uni.getSystemInfoSync();
const ratio = this.videoInfo.height / this.videoInfo.width;
const videoHeight = sys.windowWidth * ratio;
// 竖屏视频最大高度限制为屏幕宽度的 5:4,防止 9:16 等过长视频占满整屏
const maxHeight = sys.windowWidth * 1.25;
return Math.min(videoHeight, maxHeight) + 'px';
} catch (e) {
// 异常时回退到图片高度
}
}
return this.goodsSkuDetail.swiperHeight;
},
aiAvatarUrl() {
return this.$util.img(IMAGE_CONFIG.aiAvatar);
},
@@ -711,26 +686,6 @@ export default {
return this.goodsSkuDetail && Number(this.goodsSkuDetail.goods_id) > 0;
}
},
watch: {
// 切换商品/视频源时重置视频元数据,防止旧数据影响新视频的高度计算
'goodsSkuDetail.video_url'(newVal, oldVal) {
if (newVal !== oldVal) {
this.videoInfo = { width: 0, height: 0 };
}
}
},
methods: {
// 视频元数据加载后记录宽高,用于竖屏视频自适应容器高度
onVideoLoadedMetadata(e) {
const detail = e.detail || {};
if (detail.width && detail.height) {
this.videoInfo = {
width: Number(detail.width),
height: Number(detail.height)
};
}
}
},
mixins: [scroll, detail]
};
</script>