leromro-mini/pages_mine/pages/income/details.vue

<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">余额提现-到支付宝({{ data.alipayName }})</view>
            <view class="header-price">{{ data.takeAmount }}</view>
        </view>
        <view class="stauts-box  hr-solid">
            <view class="font-30-333 stauts-text ">当前状态</view>
            <view>
                <up-steps :current="current" direction="column" dot>
                    <up-steps-item title="发起提现" :desc="data.createTime">
                    </up-steps-item>
                    <up-steps-item title="已驳回" :desc="data.rejectReason" v-if="data.appStatus === '3'" error></up-steps-item>
                    <up-steps-item title="后台处理中" :desc="data.updateTime" v-else></up-steps-item>
                    <up-steps-item title="打款失败"  v-if="data.isPay === '2'" error></up-steps-item>
                    <up-steps-item title="到账" :desc="data.lastTime"  v-if="[ '1','0'].includes(data.isPay)"></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" v-if="item.type === 'value'">
                   支付宝
                </view>
                <view class="font-30-333" v-else>{{ data[item.key] ||'-'}}</view>
            </view>
        </view>
    </scroll-view>

</template>

<script setup>
import { computed, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getIncomeDetails } from "@/api/mine";
import DictTag from '@/components/DictTag/index.vue'
import {
    useDict
} from '@/utils/dict.js';
const isRefreshing = ref(false)
const list = [
    {
        name: '提现金额',
        key: 'shoudAmount'
    },
    {
        name: '税额',
        key: 'taxAmount'
    },
    {
        name: '申请时间',
        key: 'createTime'
    },
    {
        name: '到账时间',
        key: 'lastTime'
    },
    {
        name: '打款方式',
        key: 'payType',
        type: 'value',
    },
    {
        name: '提现单号',
        key: 'volunteerTakeRecordId'
    },
]
const id = ref(null);
const data = ref({
    alipayName: '**',
    createTime: '',
    takeAmount: 0.0,
});

const current = computed(()=>{
    if(['3','1'].includes(data.value.appStatus) || ['0'].includes(data.value.isPay)){
        return 1
    }   
    return 2
})
const onCustomRefresh = () => {

    getDetails();
};
const scrolltolower = () => {
    console.log('scrolltolower');

};

const getDetails = async () => {
    try {
        isRefreshing.value = true;
        const res = await getIncomeDetails(id.value);
        if (res.code !== 200) {
            throw res.msg || '账单详情获取失败！'
        }
        data.value = res.data;
    } catch (error) {
        console.log("TCL: getDetails -> error", error)
        uni.showToast({
            title: error.message || error,
            icon: 'none'
        });
    } finally {
        isRefreshing.value = false;
    }
};


onLoad((options) => {
    console.log("TCL: options", options)
    id.value = options.sourceId;
    getDetails();
})
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>