<template>


    <view class="details-main">
        <view class="header-bgc">
            <view class="flex_c_s">
                <view>
                    <view class="header-title">资质认证</view>
                    <view class="header-text">请选择认证的分类，审核通过后即可去接单</view>
                </view>
                <view class="header-icon"></view>
            </view>
            <view class="header-card flex_c_c">
                <view class="header-card-icon"></view>
                <view class="header-card-content">
                    <view class="header-card-title">去资质认证</view>
                    <view class="header-card-desc">请勿选择跨度太大的服务避免审核失败</view>
                </view>
                <up-icon name="arrow-right" color="#7B7B7B" size="14"></up-icon>
            </view>
        </view>
        <view class="content-main">
            <view class="content-box">
                <view class="content-title">认证流程</view>
                <view class="content-list">
                    <view v-for="(item,index) in list" :key="item.key" class="list-item">
                        <view class="flex_c_l">
                            <view class="list-icon flex_c_c">{{ item.key }}</view>
                            <view class="list-rigth">
                                <view class="list-name">{{ item.name }}</view>
                                <view class="list-text">{{ item.text }}</view>
                            </view>
                        </view>
                        <view class="list-line" v-if="index < 3 "></view>
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>

<script setup>
import { ref } from 'vue';

const isRefreshing = ref(false)

const list = [
    {
        name: '申请资质认证',
        text: '在线上发起您的资质认证',
        key: 1
    },
    {
        name: '选择认证类目，填选个人信息',
        text: '选择您擅长的认证类型',
        key: 2
    },
    {
        name: '认证审核中',
        text: '审核员根据您提交的信息进行资质审核',
        key: 3
    },
    {
        name: '认证完成，开始接单',
        text: '认证通过开启接单，高效又省心',
        key: 4
    },
]


</script>
<style lang="scss" scoped>
@import "./index.scss";
</style><template>
    <scroll-view refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onCustomRefresh"
        class="details-main" @scrolltolower="scrolltolower" scroll-y>
        <view class="header-box flex_c_c_f hr-solid">
            <view class="price-img"></view>
            <view class="header-title">余额提现-到支付宝(1942)</view>
            <view class="header-price">1.10</view>
        </view>
        <view class="stauts-box  hr-solid">
            <view class="font-30-333 stauts-text ">当前状态</view>
            <view>
                <up-steps current="2" direction="column" dot>
                    <up-steps-item title="发起提现" desc="2025年6月9日 12:23">
                    </up-steps-item>
                    <up-steps-item title="银行处理中" desc=" ">
                    </up-steps-item>
                    <up-steps-item title="到账" desc="2025年6月9日 13:23"></up-steps-item>
                </up-steps>
            </view>
        </view>
        <view class="list-box">
            <view v-for="item in list" :key="item.key" class="list-item">
                <view class="font-30-333 list-name">{{ item.name }}</view>
                <view class="font-30-333">{{ item.key }}</view>
            </view>
        </view>
    </scroll-view>

</template>

<script setup>
import { ref } from 'vue';

const isRefreshing = ref(false)

const list = [
    {
        name: '提现金额',
        key: '1'
    },
    {
        name: '服务费',
        key: '1'
    },
    {
        name: '申请时间',
        key: '1'
    },
    {
        name: '到账时间',
        key: '1'
    },
    {
        name: '提现银行',
        key: '1'
    },
    {
        name: '提现单号',
        key: '1'
    },
]

const onCustomRefresh = () => {
    isRefreshing.value = true;

    setTimeout(() => {
        isRefreshing.value = false;
    }, 1000);
};
const scrolltolower = () => {

};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>