chore:苹果ios表单显示正常,商品详情的视频可以支持竖版横板视频

This commit is contained in:
2026-08-14 09:09:07 +08:00
parent 3b81ecdf98
commit e5406a27ba
4 changed files with 69 additions and 5 deletions

View File

@@ -164,6 +164,10 @@ const localDevConfig = ({
uniacid: 2797,
domain: 'https://xcx.aigc-quickapp.com/',
},
'5g-95': { // 商品分类,没有立即咨询文字
uniacid: 95,
domain: 'https://5g.aigc-quickapp.com/',
},
// })['5g-237']; // 商品分类,没有立即咨询文字
// })['5g-97']; // 大宗商品贸易,支持自定义字体大小、颜色
// })['5g-50']; // 燃气安全产品机器人,购物车无反应
@@ -177,7 +181,7 @@ const localDevConfig = ({
// })['2724']; // 生物菌肥
// })['2811']; // 选择要使用的环境配置
// })['local-11']; // 选择要使用的环境配置
})['2797']; // 本地
})['1']; // 本地
// })['local-2']; // 本地
// })['local-11']; // 本地
// })['1-test']; // test

View File

@@ -118,6 +118,8 @@
.goods-video video {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.goods-video .uni-video-cover {

View File

@@ -37,7 +37,8 @@
:info="goodsSkuDetail.barrageData" />
<!-- 商品媒体信息 -->
<view class="goods-media" :style="{ height: goodsSkuDetail.swiperHeight }">
<!-- 视频区域高度:图片态走 swiperHeight;视频态且已拿到竖屏视频元数据时,按视频比例自适应高度(最大 5:4),避免竖屏视频被裁剪成横屏 -->
<view class="goods-media" :style="{ height: mediaHeight }">
<!-- 商品图片 -->
<view class="goods-img" :class="{ show: switchMedia == 'img' }">
<swiper class="swiper" @change="swiperChange" :interval="swiperInterval"
@@ -56,10 +57,11 @@
</view>
</view>
<!-- 商品视频 -->
<!-- 商品视频: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="cover"
:poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" objectFit="contain"
@loadedmetadata="onVideoLoadedMetadata"
playsinline webkit-playsinline x5-playsinline></video>
</view>
@@ -538,6 +540,8 @@ export default {
data() {
// 商品详情骨架屏:模拟「轮播图 + 价格行 + 标题简介 + 规格行 + 商家 + 详情 + 推荐」
return {
// 视频元数据(宽/高),用于竖屏视频自适应容器高度
videoInfo: { width: 0, height: 0 },
// 1. 轮播图:方形 banner 占位
skeletonBanner: {
padding: '0',
@@ -662,6 +666,27 @@ 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);
},
@@ -686,6 +711,26 @@ 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>

View File

@@ -420,9 +420,22 @@ page {
background: #fff;
}
// iOS 兼容:确保页面内容区域可滚动,避免提交按钮被推出屏幕后无法访问
.page {
min-height: 100vh;
// iOS Safari / WebView 需要显式开启 overflow 才能正确滚动
overflow-y: auto;
-webkit-overflow-scrolling: touch; // iOS 惯性滚动
box-sizing: border-box;
}
.system-form-wrap {
overflow: hidden;
// 移除 overflow: hidden,避免 iOS 上 textarea 撑开高度时裁剪掉提交按钮
// 改用 overflow-visible 让内容自然流动,提交按钮始终可见
overflow: visible;
margin: 0 0 60rpx 0;
// 确保 iOS 上表单区域有足够的底部空间显示提交按钮
padding-bottom: env(safe-area-inset-bottom, 40rpx);
}
// 穿透 diy-form 包装层:消除其自带的 10rpx 圆角与白色背景,