book-hi/pages-mine/pages/partner/order-detail.vue

<template>
    <view class="order-detail">
        <!-- 标签页 -->
        <view class="tabs-wrapper">
            <u-tabs :list="tabList" :current="currentTab" @change="handleTabChange" :is-scroll="false"
                active-color="#38C148" bar-width="60"></u-tabs>
        </view>

        <!-- 订单列表 -->
        <page-scroll :page-size="12" @updateList="handleUpdateList" ref="pageRef" slotEmpty
            url="/token/partner/order/list" :params="params" :immediate="false">
            <view v-if="orderList.length > 0" class="pad-20">
                <partner-order-item v-for="order in orderList" :key="order.orderNo" :order="order"></partner-order-item>
            </view>
        </page-scroll>
    </view>
</template>

<script>
import PartnerOrderItem from '../../components/partner-order-item.vue'
import pageScroll from '@/components/pageScroll/index.vue'

export default {
    components: {
        PartnerOrderItem,
        pageScroll,
    },
    data() {
        return {
            tabList: [{
                name: '全部',
                status: "-1"
            },
            {
                name: '未结算',
                status: "0"
            },
            {
                name: '未到账',
                status: "1"
            },
            {
                name: '已到账',
                status: "2"
            },
            {
                name: '已失效',
                status: "3"
            }
            ],
            currentTab: 0,
            orderList: [],
            params: {},
            // 模拟数据
            mockOrders: [{
                orderNo: '54631435441',
                status: '未结算',
                books: [
                    { cover: '/static/book1.jpg' },
                    { cover: '/static/book2.jpg' },
                    { cover: '/static/book3.jpg' },
                    { cover: '/static/book4.jpg' },
                    { cover: '/static/book5.jpg' }
                ],
                orderStatus: '已提交',
                estimatedAmount: '63.00',
                estimatedCommission: '6.30',
                createTime: '2024-12-06 15:00:00'
            },
            {
                orderNo: '54631435441',
                status: '已失效',
                books: [
                    { cover: '/static/book1.jpg' },
                    { cover: '/static/book2.jpg' },
                    { cover: '/static/book3.jpg' },
                    { cover: '/static/book4.jpg' },
                    { cover: '/static/book5.jpg' }
                ],
                orderStatus: '订单取消',
                estimatedAmount: '63.00',
                estimatedCommission: '6.30',
                createTime: '2024-12-06 15:00:00'
            },
            {
                orderNo: '54631435441',
                status: '未到账',
                books: [
                    { cover: '/static/book1.jpg' },
                    { cover: '/static/book2.jpg' },
                    { cover: '/static/book3.jpg' },
                    { cover: '/static/book4.jpg' },
                    { cover: '/static/book5.jpg' }
                ],
                orderStatus: '已结算',
                estimatedAmount: '63.00',
                estimatedCommission: '6.30',
                finalAmount: '58.00',
                finalCommission: '5.80',
                createTime: '2024-12-06 15:00:00'
            },
            {
                orderNo: '54631435441',
                status: '已到账',
                books: [
                    { cover: '/static/book1.jpg' },
                    { cover: '/static/book2.jpg' },
                    { cover: '/static/book3.jpg' },
                    { cover: '/static/book4.jpg' },
                    { cover: '/static/book5.jpg' }
                ],
                orderStatus: '已结算',
                estimatedAmount: '63.00',
                estimatedCommission: '6.30',
                finalAmount: '58.00',
                finalCommission: '5.80',
                createTime: '2024-12-06 15:00:00'
            }]
        }
    },
    onLoad(options) {
        // 如果有传入状态，切换到对应tab
        if (options.status) {
            this.currentTab = this.tabList.findIndex(item => item.status === options.status)
            this.params.status = options.status
        }
        this.loadOrders(true, this.params)
    },
    methods: {
        loadOrders(bool = false, params = {}) {
            // 模拟数据，实际开发时删除这行，使用下面的接口调用
            this.orderList = this.mockOrders
            // this.$refs.pageRef?.loadData(bool, params);
        },

        handleTabChange(index) {
            this.currentTab = index
            this.params.status = this.tabList[index].status
            this.loadOrders(true, this.params)
        },

        handleUpdateList(list) {
            this.orderList = list
        }
    }
}
</script>

<style lang="scss" scoped>
.order-detail {
    min-height: 100vh;
    background-color: #F5F5F5;

    .tabs-wrapper {
        position: sticky;
        top: 0;
        z-index: 99;
        background: #FFFFFF;
    }

    .pad-20 {
        padding: 20rpx;
    }
}
</style>