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

<template>
    <view class="order-detail">
        <view class="sticky-header">
            <!-- 订单类型切换 -->
            <view class="type-tabs-wrapper">
                <u-subsection :list="typeList" :current="currentType" @change="handleTypeChange" active-color="#38C148" mode="subsection"></u-subsection>
            </view>

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

        <!-- 订单列表 -->
        <page-scroll :page-size="12" @updateList="handleUpdateList" ref="pageRef" slotEmpty
            :url="currentUrl" :params="params" :immediate="false">
            <view v-if="orderList.length > 0" class="pad-20">
                <partner-order-item v-for="(order, index) in orderList" :key="index" :order="order" :type="currentType"></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 {
            typeList: [
                { name: '卖书订单' },
                { name: '买书订单' }
            ],
            currentType: 0,
            currentUrl: '/token/userPartner/geOrderList',
            tabList: [{
                name: '全部',
                status: ""
            },
            {
                name: '未结算',
                status: "1"
            },
            {
                name: '未到账',
                status: "2"
            },
            {
                name: '已到账',
                status: "3"
            },
            {
                name: '已失效',
                status: "4"
            }
            ],
            currentTab: 0,
            orderList: [],
            params: {},
            // 模拟数据
            mockOrders: []
        }
    },
    // #ifdef MP-ALIPAY
    onPullDownRefresh() {
        this.$refs.pageRef?.loadData(true)
    },
    // #endif

    onLoad(options) {
        // 如果有传入状态，切换到对应tab
        if (options.status) {
            this.currentTab = this.tabList.findIndex(item => item.status === options.status)
            this.params.status = options.status
        }
    },
    onShow() {
        this.loadOrders(true, this.params)
    },
    methods: {
        loadOrders(bool = false, params = {}) {
            this.$nextTick(() => {
                this.$refs.pageRef?.loadData(bool, params);
            })
        },

        handleTypeChange(index) {
            this.currentType = index
            this.currentUrl = index === 0 ? '/token/userPartner/geOrderList' : '/token/userPartner/getShopOrderList'
            this.orderList = []
            this.$nextTick(() => {
                this.loadOrders(true, this.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;

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

    .type-tabs-wrapper {
        padding: 20rpx 30rpx 0;
        background-color: #FFFFFF;
    }

    .tabs-wrapper {
        background: #FFFFFF;
    }

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