zc100/template/pc/common/include/script.htm

<script>
    layui.config({
        base:'./template/pc/plug/'
    }).extend({
        step: 'step/step'
    }).use([ 'form', 'step'], function (form, step) {

        //https://gitee.com/runnningman/step-all-device
        //step.getCurrent 获取当前屏幕的序号
        //step.freshHeight() 可以即时刷新当前内容高度

        let $ = layui.$
        let protocol = {
            _tpl: `
                    <div style="text-align: center">
                        <div>
                            <i class="layui-icon layui-icon-help"></i>
                            用户协议1
                        </div>
                        <div>
                            <i class="layui-icon layui-icon-help"></i>
                            用户协议2
                        </div>
                        <div>
                            <i class="layui-icon layui-icon-help"></i>
                            用户协议3
                        </div>
                        <button id="agree" class="layui-btn next layui-btn-sm layui-btn-normal">同意</button>
                        {{#
                            d.init()
                        }}
                    </div>
                `,
            ctx: {
                init: () => {
                    console.log('content:1')
                    setTimeout(() => {
                        $('#agree').on('click', e => {
                            step.next()
                        })
                    })
                }
            }
        }

        let information = {
            _tpl: `
                    <div style="text-align: center; padding-right: 5em;">
                        <form class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" required
                                    autocomplete="off"
                                    lay-verify="required" lay-vertype="tips" name="username"
                                    placeholder="填写用户名" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                   <button type="button" class="prev layui-btn   layui-btn-primary layui-btn-sm">上页</button>
                                    <button lay-submit lay-filter="demoSubmit" class="layui-btn layui-btn-sm layui-btn-normal">确定</button>
                                </div>
                            </div>
                        </form>
                        {{#
                            d.init()
                        }}
                    </div>
                `,
            ctx: {
                init: () => {
                    console.log('content:2')
                    form.on('submit(demoSubmit)', data => {
                        step.next()
                        return false
                    })
                    setTimeout(() => {
                        $('.prev').on('click', e => {
                            step.prev()
                        })
                    })

                }
            }
        }

        let result = {
            _tpl: `
                    <div style="text-align: center">
                        <div>
                            <i class="layui-icon layui-icon-ok" style="font-size: 50px; color: #5FB878;"></i>
                        </div>
                        <button id="again" class="layui-btn layui-btn-normal">再来一次</button>
                        {{#
                            d.init()
                        }}
                    </div>
                `,
            ctx: {
                init: () => {
                    setTimeout(() => {
                        $('#again').on('click', e => {
                            step.next()
                        })
                    })
                    console.log('content:3')
                }
            }
        }

        step.run({
            elem: '#StepWrapper_wrapper',
            stepWidth: '16rem',
            contentWidth: '18rem',
            contentHeight: '30rem',
            nodes: [
                {
                    tip: '协议',
                },
                {
                    tip: '信息',
                },
                {
                    tip: '结果',
                }
            ],
            contents: [protocol, information, result]
        })
    })
</script>