Javascript //阶梯别名 无效的 //步骤标题值 “新签出步骤”， //显示步骤或隐藏步骤时具有逻辑的可观察属性 这是可见的， _.bind（this.navigate，this）， /** *排序顺序值 *“排序顺序值”

下面是有关此解决方案的更多详细信息

您能否提供一个示例，说明这可能是什么样子？您能否分享您的发现，我们如何在自定义步骤中添加表单？

define(
[
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Ui/js/form/form'
],
function (
    ko,
    Component,
_,
stepNavigator
) {
    'use strict';
    /**
     *
     * mystep - is the name of the component's .html template,
     * <Vendor>_<Module>  - is the name of the your module directory.
     *
     */
    return Component.extend({
        defaults: {
            template: 'Vendor_CustomCheckout/mystep'
        },

        //add here your logic to display step,
        isVisible: ko.observable(true),

        /**
         *
         * @returns {*}
         */
        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                //step code will be used as step content id in the component template
                'custom_step',
                //step alias
                null,
                //step title value
                'Direccion de Facturacion',
                //observable property with logic when display step or hide step
                this.isVisible,

                _.bind(this.navigate, this),

                /**
                 * sort order value
                 * 'sort order value' < 10: step displays before shipping step;
                 * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                 * 'sort order value' > 20 : step displays after payment step
                 */
                15
            );

            return this;
        },

        /**
         * The navigate() method is responsible for navigation between checkout step
         * during checkout. You can add custom logic, for example some conditions
         * for switching to your custom step
         */
        navigate: function () {
            this.isVisible(false);
            this.isVisible = false;
        },

        /**
         * @returns void
         */
        navigateToNextStep: function () {
            // trigger form validation
            this.source.set('params.invalid', false);
            this.source.trigger('customStepForm.data.validate');
            console.dir(this.isVisible);
            // verify that form data is valid
            if (!this.source.get('params.invalid')) {
                // data is retrieved from data provider by value of the customScope property
                var formData = this.source.get('customStepForm');
                // do something with form data
                console.dir(formData);
            }
            stepNavigator.next();
        }
    });
}
);

<item name="custom-step" xsi:type="array">
    <item name="component" xsi:type="string">Vendor_CustomCheckout/js/view/step-view</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">Vendor_CustomCheckout/mystep</item>
    </item>
    <!--To display step content before shipping step "sortOrder" value should be < 1-->
    <!--To display step content between shipping step and payment step  1 < "sortOrder" < 2 -->
    <!--To display step content after payment step "sortOrder" > 2 -->
    <item name="sortOrder" xsi:type="string">1.5</item>
    <item name="children" xsi:type="array">
    <!--add here child component declaration for your step-->
        <item name="custom-step-form-fieldset" xsi:type="array">
        <!-- uiComponent is used as a wrapper for form fields (its template will render all children as a list) -->
            <item name="component" xsi:type="string">uiComponent</item>
            <!-- the following display area is used in template (see below) -->
            <item name="displayArea" xsi:type="string">custom-step-form-fields</item>
            <item name="children" xsi:type="array">
                <item name="name" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                    <item name="config" xsi:type="array">
                        <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
                        <item name="customScope" xsi:type="string">customStepForm</item>
                        <item name="template" xsi:type="string">ui/form/field</item>
                        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                    </item>
                    <item name="provider" xsi:type="string">checkoutProvider</item>
                    <item name="dataScope" xsi:type="string">customStepForm.name</item>
                    <item name="label" xsi:type="string">Nombre</item>
                    <item name="sortOrder" xsi:type="string">1</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="string">true</item>
                    </item>
                </item>                
        </item>
    </item>
</item>

//add here your logic to display step,
isVisible: ko.observable(true),

define(
    [
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator'
    ],
    function (
        ko,
        Component,
        _,
        stepNavigator
    ) {
        'use strict';
        /**
        *
        * newcheckout - is the name of the component's .html template, 
        * MD_Newcheckoutstep  - is the name of the your module directory.
        * 
        */
        return Component.extend({
            defaults: {
                template: 'MD_Newcheckoutstep/newcheckout'
            },

            //add here your logic to display step,
            // I have given false here so that is will no merge with other step
            // if you make it true sometime happens that is merge with shipping step.
            visible: ko.observable(quote.isVirtual())

            /**
            *
            * @returns {*}
            */
            initialize: function () {
                this._super();
                // register your step
                stepNavigator.registerStep(
                    //step code will be used as step content id in the component template
                    'newcheckoutstep',
                    //step alias
                    null,
                    //step title value
                    'New Checkout Step',
                    //observable property with logic when display step or hide step
                    this.isVisible,

                    _.bind(this.navigate, this),

                    /**
                    * sort order value
                    * 'sort order value' < 10: step displays before shipping step;
                    * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                    * 'sort order value' > 20 : step displays after payment step
                    */
                    15
                );

                return this;
            },

            /**
            * The navigate() method is responsible for navigation between checkout step
            * during checkout. You can add custom logic, for example some conditions
            * for switching to your custom step 
            */
            navigate: function () {
               self.visible(true);
            },

            /**
            * @returns void
            */
            navigateToNextStep: function () {
                stepNavigator.next();
            }
        });
    }
);