book-hi/pages/mine/components/withdrawal-progress.vue

<template>
    <u-popup
        v-model="popupShow"
        mode="center"
        border-radius="30"
        :mask-close-able="true"
        @close="handleClose"
        width="86%"
    >
        <view class="modal-content">
            <view class="container-form">
                <!-- Header with progress title -->
                <view class="icon-wrapper">
                    <image src="/static/tabbar/home2.png" class="tip-icon"></image>
                    <text class="tip-text">提现进度</text>
                </view>

                <!-- Progress steps -->
                <view class="progress-steps">
                    <!-- Step 1: 申请提现 -->
                    <view class="step-item completed">
                        <u-icon class="step-icon yuan-icon" name="red-packet" color="#ffffff" size="40"></u-icon>
                        <view class="step-label">申请提现</view>
                    </view>

                    <!-- Arrow 1 -->
                    <view class="step-arrow">
                        <text class="arrow-text">→</text>
                    </view>

                    <!-- Step 2: 后台审核 -->
                    <view
                        class="step-item"
                        :class="{ completed: orderInfo.status > 1, current: orderInfo.status == 1 }"
                    >
                        <u-icon class="step-icon yuan-icon" name="account" color="#ffffff" size="40"></u-icon>
                        <view class="step-label">后台审核</view>
                    </view>

                    <!-- Arrow 2 -->
                    <view class="step-arrow">
                        <text class="arrow-text">→</text>
                    </view>

                    <!-- Step 3: 申请人确认 -->
                    <view
                        class="step-item"
                        :class="{ completed: orderInfo.status > 2, current: orderInfo.status == 2 }"
                    >
                        <u-icon class="step-icon yuan-icon" name="checkmark-circle" color="#ffffff" size="40"></u-icon>
                        <view class="step-label">申请人确认</view>
                    </view>
                </view>

                <!-- Action button - based on status -->
                <view class="action-button" @click="handleAction">
                    <!-- Status 1: 知道了 button -->
                    <text v-if="orderInfo.status == 1">知道了</text>
                    <!-- Status 2: 确认立即到账 button -->
                    <text v-else-if="orderInfo.status == 2">确认立即到账</text>
                </view>
            </view>
        </view>
    </u-popup>
</template>

<script>
export default {
    name: "WithdrawalProgress",
    props: {
        orderInfo: {
            type: Object,
            default: () => ({
                status: 1,
                orderNo: "",
            }),
        },
    },
    data() {
        return {
            popupShow: false,
        };
    },
    methods: {
        // Open modal
        openModal() {
            this.popupShow = true;
        },
        // Close modal
        handleClose() {
            this.popupShow = false;
        },

        // Handle button action based on status
        handleAction() {
            if (this.orderInfo.status == 1) {
                // For status 1: Close the modal for "知道了" button
                this.popupShow = false;
            } else if (this.orderInfo.status == 2) {
                // For status 2: Emit confirm event for "确认立即到账" button
                this.$emit("confirm", this.orderInfo);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.modal-content {
    background: linear-gradient(-90deg, #98e05f, #0de3ac);
    border-radius: 26rpx;
    overflow: hidden;
    padding: 16rpx;

    .container-form {
        background: #effcf3;
        border-radius: 26rpx;
        padding: 30rpx;
        padding-bottom: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 60rpx;

    .tip-icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 10rpx;
    }

    .tip-text {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 36rpx;
        color: #37c148;
    }
}

.progress-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 50rpx;
    padding: 0 20rpx;

    .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 25%;

        .step-icon {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            background-color: #cccccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
            color: #ffffff;
            margin-bottom: 20rpx;
            transition: all 0.3s ease;

            &.yuan-icon {
                font-size: 40rpx;
                font-weight: bold;
            }

            .icon-text {
                font-size: 36rpx;
                font-weight: 500;
                color: #ffffff;
            }
        }

        .step-label {
            font-size: 26rpx;
            color: #999999;
            text-align: center;
            transition: all 0.3s ease;
        }

        &.completed {
            .step-icon {
                background-color: #37c148;
            }

            .step-label {
                color: #37c148;
                font-weight: 500;
            }
        }

        // &.current {
        //     .step-icon {
        //         background-color: #37c148;
        //         box-shadow: 0 0 10rpx rgba(55, 193, 72, 0.5);
        //         transform: scale(1.05);
        //     }

        //     .step-label {
        //         color: #37c148;
        //         font-weight: bold;
        //         transform: scale(1.05);
        //     }
        // }
    }

    .step-arrow {
        width: 12.5%;
        display: flex;
        align-items: center;
        justify-content: center;

        .arrow-text {
            font-size: 36rpx;
            color: #dddddd;
        }
    }
}

.action-button {
    width: 90%;
    height: 90rpx;
    background-color: #37c148;
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20rpx;
    box-shadow: 0 6rpx 10rpx rgba(55, 193, 72, 0.2);
    transition: all 0.2s ease;

    &:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    text {
        color: #fff;
        font-size: 32rpx;
        font-weight: 500;
    }
}
</style>