leromro-mini/pages/common/order/index.vue

<template>
    <view class="order-main">
        <view class="order-header">
            <view class="order-icon"></view>
            <view class="order-title">订单信息</view>
        </view>

        <view v-if="list && list.length > 0" class="order-list">
            <view v-for="(item) in list" :key="item.secondOrderId">
                <Item :data="item" />
            </view>
        </view>
        <view v-else class="ranking-list">
            <NoneView value="暂无服务数据" />
        </view>
    </view>
</template>

<script setup>
import { getVolunteerOrderList } from '@/api/volunteer.js'
import { onMounted, ref } from 'vue';
import NoneView from '@/components/NoneView/index.vue';
import Item from './item.vue';
import { onShow, onReachBottom, onUnload, onPageScroll } from '@dcloudio/uni-app'

const list = ref([]);
const getOrderList = async () => {
    try {
        const res = await getVolunteerOrderList({ orderStatus: ['1', '3'] });
        list.value = res.rows;
        console.log("TCL: getOrderList -> res", res)
    } catch (error) {
        console.log("TCL: getOrderList -> error", error)
    }
}


onShow(() => {
    getOrderList();
})
</script>

<style scoped lang="scss">
.order-main {
    padding: 45rpx 32rpx;
    margin-top: 20rpx;

    .order-header {
        display: flex;
        margin-bottom: 44rpx;
        .order-icon {
            width: 36rpx;
            height: 36rpx;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAMTSURBVFiFxZhPSBRRHMe/v9ndEFtKajEPHgo8yGJkNw8J7s2DCB5CD0lKBd4qPHQSxEvHzlKwhwgMAoPyluwKgmILLnRIyMMeChYLMh3Ddmbet4M76+7szuys+8cvLL95b39v3mfe/H7vzwhcxK2tfgDjAIYhEgHQ7ebrUzqALIAUyI84OnorsZjpdJIykEQijLa2lyQnIAKQaJLdtSzrUWhwMOkKxEQiTE37TJFe+086nBtcNpVl3Q3GYu8rAlmrq68B3HOOWpOla5p2U2KxDAAE7drcyko/TbPVMAAQVsBjAE9LgALAOA3jHHgAAlNlQMowhkC6tWm2OnLLy/0XxsbSBSAYRr1pXZc0pa4DOAVidaBFiGyW1ZJBiDwAOVAPEMkOoOiV0TQLaVlmRdIXJidn3G72Lx5fRyDw1bW9D2ur+JUV5ginBdCtx+Nd4enprMvj9Xm192OVE4hm2Sx+2h8QCZHfjhcX0yBLHEWkg7lcH6Rs0q9NSpUCoUrKEwgDuFOhvjHKP1BxUDfq1nWpYlDbamVZ8nNgxaAuQLawbDmBqr0yEUla5Jqnk4sCIldBTuXj0K2DUiB4ZJmI7LQvLMTOAmNLn5v7IcDzan6afUHDcP2pXC7M+fm2eoDENC969WFnua8RAtCtHx5+0Wdn189GI100jGEvF+Wch3ykfQ+BnjMB+VHZPOS1lrXAwivtz8VWTHv7VGCrhWWpJe3z2pGTc1XNUkBEgD4vHytvfQW1AJuXstlBSSarUrvpz8TEBwIj1fx8rWUks/XAAIAyjIyIuK9tlbYfHmvNyO/R0Rci8ssiQ7XCaMBlmOaM59pWYfvxHe7n9yCAJ87tpl/52TMJuV8CBNP0Amq+yAxQfC4zzTWp8+RQh/avJBLpEqCAUkvKsp6dBw3JN/Z1SUj8HBhYkpNvQq2UrkRud25s7ALFMQSABwcPpb39FoBekhARNNmaCpjuTKV2bYaypNmLRsMIhV61YKSyStMmr21vfyqudM3ivWi0X0TugxyCSIRkQz7piUhKiaz81fV3NzKZY6fTfxc7BBl+P+GyAAAAAElFTkSuQmCC);
            background-position: center;
            background-size: 36rpx auto;
            background-repeat: no-repeat;
        }

        .order-title {
            font-family: PingFang SC;
            font-size: 34rpx;
            font-weight: 500;
            line-height: 40rpx;
            letter-spacing: normal;
            color: rgba(0, 0, 0, 0.8);
            margin-left: 13rpx;
        }
    }

    .order-list {
        // padding: 44rpx 32rpx;
    }
}
</style>