diff --git a/common/js/goods_detail_base.js b/common/js/goods_detail_base.js index 75bc04e..185f9c4 100644 --- a/common/js/goods_detail_base.js +++ b/common/js/goods_detail_base.js @@ -115,7 +115,12 @@ export default { } //媒体 - if (this.goodsSkuDetail.video_url) this.switchMedia = "video"; + // 媒体显示顺序以后台商品「高级设置 → 媒体显示顺序」media_order 为准 + // (1=主图在前 2=视频在前); 真正渲染媒体区的是 goods-detail-view 组件, + // 组件内部按同一规则切换, 这里保持一致避免两处规则打架 + if (this.goodsSkuDetail.video_url) { + this.switchMedia = (Number(this.goodsSkuDetail.media_order) === 2) ? "video" : "img"; + } if (!Array.isArray(this.goodsSkuDetail.sku_images)) { if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(","); diff --git a/pages_goods/_components/goods-detail-view/detail.js b/pages_goods/_components/goods-detail-view/detail.js index f8a2566..bb8798f 100644 --- a/pages_goods/_components/goods-detail-view/detail.js +++ b/pages_goods/_components/goods-detail-view/detail.js @@ -105,6 +105,24 @@ export default { } }, methods: { + /** + * 应用后台「高级设置 → 媒体显示顺序」(media_order) + * 1 = 主图在前(默认) 2 = 视频在前 + * 商品没有视频时一律主图在前 + */ + applyMediaOrder() { + const detail = this.goodsSkuDetail || {}; + if (!detail.video_url) { + this.switchMedia = 'img'; + return; + } + this.switchMedia = Number(detail.media_order) === 2 ? 'video' : 'img'; + }, + // 手动切换图片/视频 + switchMediaTab(key) { + this.switchMedia = key; + if (key === 'img' && this.videoContext) this.videoContext.pause(); + }, init(params) { this.skuId = params.sku_id; this.goodsId = params.goods_id; @@ -136,6 +154,9 @@ export default { this.videoContext = uni.createVideoContext('goodsVideo'); + // 媒体显示顺序: 以后台商品「高级设置 → 媒体显示顺序」为准 + this.applyMediaOrder(); + // #ifdef MP-WEIXIN this.goodsSyncToGoodsCircle(); // #endif diff --git a/pages_goods/_components/goods-detail-view/goods-detail-view.vue b/pages_goods/_components/goods-detail-view/goods-detail-view.vue index c7a9fc8..0fa0385 100644 --- a/pages_goods/_components/goods-detail-view/goods-detail-view.vue +++ b/pages_goods/_components/goods-detail-view/goods-detail-view.vue @@ -65,10 +65,11 @@ - {{ - $lang('goods.detail.video') }} - {{ $lang('goods.detail.image') }} + {{ + tab.key == 'video' ? $lang('goods.detail.video') : $lang('goods.detail.image') + }} @@ -684,6 +685,24 @@ export default { // 用于「未拿到任何数据时不显示真实内容」, 避免加载失败/异常时切到空详情页 hasRealData() { return this.goodsSkuDetail && Number(this.goodsSkuDetail.goods_id) > 0; + }, + // 媒体顺序的变更标识: 只在「媒体显示顺序 / 视频地址」变化时重新应用 + // 用它而不是直接 watch goodsSkuDetail(深度监听), 是为了避免用户手动切到 + // 「视频」后被详情数据的任意一次深层变更打回「主图」 + mediaOrderKey() { + const detail = this.goodsSkuDetail || {}; + return (detail.media_order || 1) + '|' + (detail.video_url || ''); + }, + // 底部「图片 / 视频」切换按钮的排列, 与后台设置的媒体显示顺序保持一致 + mediaTabs() { + const detail = this.goodsSkuDetail || {}; + const tabs = [{ key: 'img' }, { key: 'video' }]; + return Number(detail.media_order) === 2 ? tabs.reverse() : tabs; + } + }, + watch: { + mediaOrderKey() { + this.applyMediaOrder(); } }, mixins: [scroll, detail]