crm-app-vue3/pages/orderDetailNew/components/orderDetailNewView.vue

<template>
    <view class="orderDetailNewView">

        <view class="page-item" v-show="activeIndex === 0">
            <pageOne @handleNextClick="handleNextClick" />
        </view>
        <view class="page-item" v-show="activeIndex === 1">
            <pageTwo @handleNextClick="handleNextClick" />
        </view>
        <view class="page-item" v-show="activeIndex === 2">
            <pageThree @handleNextClick="handleNextClick" :detailImages="allFroms.formTwo.detailImages || []" />
        </view>
        <view class="page-item" v-show="activeIndex === 3">
            <pageFour @handleNextClick="handleNextClick" />
        </view>

        <ul class="page">
            <li v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeIndex === index }"
                @click="activeIndex = index">{{ tab }}</li>
        </ul>
    </view>
</template>

<script>
import pageOne from './pageOne.vue'
import pageTwo from './pageTwo.vue'
import pageThree from './pageThree.vue'
import pageFour from './pageFour.vue'
export default {
    components: {
        pageOne,
        pageTwo,
        pageThree,
        pageFour
    },
    data() {
        return {
            activeIndex: 0,
            tabs: ['一', '二', '三', '四'],
            allFroms: {
                formOne: {},
                formTwo: {},
                formThree: {},
                formFour: {},
            }
        }
    },
    name: 'OrderDetailNewView',
    methods: {
        handleNextClick({ nowPage, form }) {
            this.activeIndex++
            this.allFroms[nowPage] = form
            console.log("1111", this.allFroms[nowPage])
        }

    }
}


</script>

<style scoped>
.orderDetailNewView {
    padding: 20rpx;
}

.page {
    position: fixed;
    right: 20rpx;
    top: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    list-style: none;
    color: #000;
    font-size: 20rpx;
    font-weight: 800;

    li {
        opacity: 0.7;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: 50%;
        width: 70rpx;
        height: 70rpx;
        line-height: 80rpx;
        text-align: center;
        margin-bottom: 10rpx;
        transition: all 0.3s ease-in-out;
        font-weight: 800;
    }

    li.active {
        color: #fff;
        opacity: 1;
        background-color: rgb(37 99 235 / 1);
    }
}
</style>