uni-app 步驟條

<template>
    <view class="container">
        <cu-custom bgColor="bg-gradual-pink" :isBack="true">
            <block slot="content">考試報名</block>
        </cu-custom>
        <uni-card :isFull="true">
            <view class="flex  flex-direction-column">
                <view class="diygw-steps steps-numbers">
                    <view class="diygw-step-item" :class="[index > stepsIndex ? '' : item.textClazz]"
                          v-for="(item, index) in stepsDatas" :key="index">
                        <text class="num" :data-index="index + 1"
                              :class="[index > stepsIndex ? item.icon : item.successIcon]"></text>
                        <text>
                            {{ item.text }}
                        </text>
                    </view>
                </view>
                <u-divider  lineColor="currentColor"></u-divider>
                <view v-if="stepsIndex===0">
                    <text style="font-weight: bold;color: #5FB878">歡迎參加人事考試，為保證您報考順利，請注意以下事項:\n</text>
                    <text>1.熟悉政策，請您務必認真閱讀招考通告、招聘崗位計划等報考資料；\n</text>
                    <text>2.認真報考，填報的資料必須如實填寫，並反復核對，委托他人填寫的，要反復核對和確認報考是否成功，信息是否准確；\n</text>
                    <text>3.注意時限，注意各個階段的時限，以免錯過報考；發現問題及時與相關部門聯系；\n</text>
                    <text style="color: red;">4.謹防詐騙信息。</text>
                </view>
                <view v-if="stepsIndex===1">
                    <text style="font-weight: bold;color: #5FB878">為保證您的報考信息准確，建議考生本人親自報名，並認真填寫和核對所有報考信息，否則可能會影響您的考試和聘用！\n</text>
                    <text>1.報考信息包括填寫報名報名信息、上傳照片等，請確保所有操作均完成；\n</text>
                    <text>2.根據考場規則,若照片模糊、不規范、無法識別面部特征等將不能參加考試。請各位考生務必按要求上傳清晰、完整的照片；\n</text>
                    <text>3.對選擇了加分項目的考生，資格復審時須提供加分相關證件憑據。 若審核已通過並鎖定，則不能再修改加分信息；\n</text>
                    <text style="color: red;">4.所有填報的項目必須真實有效，不能填寫虛假信息。</text>
                </view>
                <view v-if="stepsIndex===2">
                    <text style="font-weight: bold;color: #5FB878">我已仔細閱讀通告及相關文件，清楚並理解其內容。在此我鄭重承諾：\n</text>
                    <text>1.遵守考試紀律，服從考試安排，不舞弊或協助他人舞弊。\n</text>
                    <text>2.真實、准確地提供本人個人信息、證明資料、證件等相關材料；同時准確填寫及核對有效的手機號碼、聯系地址等聯系方式，並保證在整個招聘工作期間聯系暢通。\n</text>
                    <text>3.不弄虛作假。不偽造、不使用假證明、假證書。\n</text>
                    <text>4.我保證符合招考通告及招考計划中要求的資格條件。\n</text>
                    <text>5.認同雷同卷鑒定結果。\n</text>
                    <text>6.不故意浪費考試資源。\n</text>
                    <text>7.遵守疫情防控有關要求，如實填報相關信息。\n</text>
                    <text style="color: red;">對違反以上承諾所造成的后果，本人自願承擔相應責任。</text>
                </view>
                <view v-if="stepsIndex===3">
                    4
                </view>
                <u-divider  lineColor="currentColor"></u-divider>
                <view class="flex justify-end">
                    <button size="mini"  @tap="changeSteps" data-type="prev"  type="primary" :plain="true">上一步</button>
                    <button v-if="stepsIndex!==3" size="mini" @tap="changeSteps" data-type="next" type="primary">下一步</button>
                    <button v-if="stepsIndex===3" size="mini" @tap="submit"  type="primary">提交</button>
                </view>
            </view>
        </uni-card>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                stepsIndex: 0,
                stepsDatas: [
                    {text: `開始`, icon: '', successIcon: 'cuIcon-roundcheck', textClazz: 'text-cyan'},
                    {text: `報考須知`, icon: '', successIcon: 'cuIcon-roundcheck', textClazz: 'text-cyan'},
                    {text: `報考承諾`, icon: '', successIcon: 'cuIcon-roundcheck', textClazz: 'text-cyan'},
                    {text: `完成`, icon: '', successIcon: 'cuIcon-roundcheck', textClazz: 'text-cyan'}
                ],


            };
        },
        onShareAppMessage: function () {
        },
        onLoad(option) {
            this.setCurrentPage(this);
            if (option) {
                this.setData({
                    globalOption: option
                });
            }
        },
        mounted() {

        },
        methods: {
            changeSteps(evt) {
                let {type} = evt.currentTarget.dataset;
                if (type == 'prev') {
                    if (this.stepsIndex > 0) {
                        this.stepsIndex = this.stepsIndex - 1;
                    } else {
                        this.$tip.toast('已經是初始位置', 'none');
                    }
                } else {
                    if (this.stepsIndex < this.stepsDatas.length - 1) {
                        this.stepsIndex = this.stepsIndex + 1;
                    } else {
                        this.$tip.toast('已經是最后一個', 'none');
                    }
                }
            },
            submit(){

            }

        }
    };
</script>

<style lang="scss">
    .flex-direction-column {
        flex-direction: column;
    }

    .diygw-steps {
        display: flex;
        width: 100%;

        .diygw-step-item {
            flex: 1;
            text-align: center;
            position: relative;
            display: flex;
            flex-direction: column;

            &:not([class*="text-"]) {
                color: var(--grey);
            }

            [class*="diy-icon-"] {
                display: block;
                font-size: 24px;
                line-height: 40px;
            }

            &::before, &::after {
                content: "";
                display: block;
                position: absolute;
                height: 0px;
                width: calc(100% - 40px);
                border-bottom: 1px solid #ccc;
                left: calc(0px - (100% - 40px) / 2);
                top: 20px;
                z-index: 0;
            }


            &::after {
                border-bottom: 1px solid currentColor;
                width: 0px;
                transition: all 0.3s ease-in-out 0s;
            }

            &:first-child::before,
            &:first-child::after {
                display: none;
            }

            .num {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                line-height: 30px;
                margin: 10px auto;
                font-size: 24px;
                border: 1px solid currentColor;
                position: relative;
                overflow: hidden;
            }

            &.small {
                .num {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    font-size: 12px;
                }

                [class*="diy-icon-"] {
                    font-size: 16px;
                }


            }

            &.middle {
                .num {
                    width: 40px;
                    height: 40px;
                    line-height: 40px;
                }

                [class*="diy-icon-"] {
                    font-size: 30px;
                }
            }

            &.large {
                .num {
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                }

                [class*="diy-icon-"] {
                    font-size: 40px;
                }

            }

            .num::before, .num::after {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                transition: all 0.3s ease-in-out 0s;
                transform: translateY(0px);
            }

            .num::after {
                content: attr(data-index);
                color: #333;
                transition: all 0.3s ease-in-out 0s;
            }
        }

        &.steps-arrow {
            .diygw-step-item::before,
            .diygw-step-item::after {
                content: "\e71a";
                font-family: "diygwui";
                height: 15px;
                border-bottom-width: 0px;
                line-height: 15px;
                top: 0;
                bottom: 0;
                margin: auto;
                color: #ccc;
            }

            .diygw-step-item::after {
                display: none;
            }
        }

        &.steps-numbers {
            .diygw-step-item {
                &::before, &::after {
                    top: 25px;
                }

                &.small {
                    &::before, &::after {
                        top: 20px;
                    }

                }

                &.middle {
                    &::before, &::after {
                        top: 30px;
                        left: calc(0px - (100% - 50px) / 2);
                        width: calc(100% - 50px);
                    }
                }

                &.large {
                    &::before, &::after {
                        top: 40px;
                        left: calc(0px - (100% - 60px) / 2);
                        width: calc(100% - 60px);
                    }
                }
            }

        }

        &.steps-top {
            .diygw-step-item {
                flex-direction: column-reverse;
            }

            .diygw-step-item::before, .diygw-step-item::after {
                bottom: 20px;
                top: initial;
            }
        }

        .diygw-step-item[class*="text-"] {

            &::after, &::before {
                width: calc(100% - 40px);
                color: currentColor;
            }

            .num {
                background-color: currentColor;
            }

            .num::before {
                color: var(--white);
                transform: translateY(0px);
            }

            .num::after {
                display: none;
            }

        }
    }

</style>