该事件用于订货通商品详情页获取页面数据并完成加工处理后、页面渲染之前调用，可用于页面组件的隐藏、替换和插入。

参数

参数	说明	类型
params	当前页面上下文参数，原始数据在 params.data 中	Object
pluginService	公共插件参数	Object

返回结果

参数	说明	类型
hide	需要隐藏的组件，可选项见基础示例中的注释	Array
components	需要插入或替换的组件，可选位置见基础示例中的注释	Object

hide 和 components 可以配合使用，实现对已有组件的隐藏和替换。

页面数据

const data = params.dataGetter.getData();

data 常用字段如下：

{
    skus: this.skus,
    spuData: this.spuData,
    currentProduct: this.currentProduct,
    allProducts: this.allProducts,
    originProducts: this.originProducts,
    options: this.options,
    subProducts: this.subProducts,
    specOrder: this.specOrder,
    metaData: this.metaData,
}

基础示例

import CustomNameComponent from "./CustomNameComponent.vue"
// import PriceComponent from "./PriceComponent.vue"

export default class Plugin {
    apply() {
        return [
            {
                event: "dhtProductDetail.render.before",
                functional: this.renderBefore.bind(this)
            }
        ];
    }

    async renderBefore(params, pluginService) {
        console.log("pwc call renderBefore", params);

        const NameComponent = Vue.extend(CustomNameComponent);
        const nameInstance = new NameComponent({
            propsData: {
                params
            }
        });

        // const customPriceComponent = Vue.extend(PriceComponent);
        // const priceInstance = new customPriceComponent({
        //     propsData: {
        //         params
        //     }
        // });

        nameInstance.$mount();
        // priceInstance.$mount();

        return new Promise((resolve, reject) => {
            resolve({
                // 支持隐藏的组件部分：
                // name: 名称（含标签）
                // price: 价格
                // policy: 价格政策
                // operate: 操作按钮
                // quantity: 数量（仅 spu 有）
                // main: 商品主图
                // meta: 商品介绍
                // richtext: 图文详情
                hide: ["name", "quantity"],
                components: {
                    /*
                     * 支持追加组件的位置，配合 hide 可实现组件替换：
                     * pageTop: 整个详情的顶部，上一条、下一条的下面
                     * name: 名称下面
                     * price: 价格下面
                     * policy: 价格政策下面
                     * quantity: 数量下面
                     * operate: 操作下面
                     * main: 主图下面
                     * meta: 商品介绍下面
                     * richtext: 图文详情下面
                     * pageBottom: 整个详情的底部
                     */
                    name: nameInstance,
                    // price: priceInstance
                }
            })
        })
    }
}

CustomNameComponent.vue 文件：

<template>
<div class="test-container">
    <div style="background-color: yellow; color: red; padding: 10px; font-size: 16px;">
        名称组件替换: {{ testName }}
    </div>
</div>
</template>

<script>
export default {
    props: {
        params: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            testName: "pwc组件名称"
        }
    },
    mounted() {
        // const data = this.params.dataGetter.getData();
        // console.log(data);
        // this.testName = JSON.stringify(data);
    }
}
</script>