book-hi/pages-mine/pages/order-page.vue

<template>
    <view class="order-page">
        <!-- 标签页 -->
        <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/order/getMyOrderList" :params="params" :immediate="false">
            <view v-if="orderList.length > 0" class="pad-20">
                <order-item v-for="order in orderList" :key="order.orderNo" :order="order"
                    @action="handleAction" @success="handleSuccess"></order-item>
            </view>
        </page-scroll>

        <u-action-sheet v-model="showReportSheet" :list="actionList" @close="showReportSheet = false"
            @click="handleReportSelect" cancelText="取消" :mask-close-able="false" :safe-area-inset-bottom="true" />
    </view>
</template>

<script>
import OrderItem from '../components/order-item.vue'
import pageScroll from '@/components/pageScroll/index.vue'
import mixin from '../mixin/btnAction.js'

export default {
    mixins: [mixin],
    components: {
        OrderItem,
        pageScroll,
    },
    data() {
        return {
            tabList: [{
                name: '全部',
                status: "-1"
            },
            {
                name: '待初审',
                status: "2"
            },
            {
                name: '待取件',
                status: "3"
            },
            {
                name: '待审核',
                status: "8"
            },
            {
                name: '待到款',
                status: "10"
            }
            ],
            currentTab: 0,
            orderList: [],
            isRefreshing: false,
            page: 1,
            pageSize: 10,
            hasMore: true,
            params: {}
        }
    },
    onLoad(options) {
        // 如果有传入状态，切换到对应tab
        if (options.status) {
            this.currentTab = this.tabList.findIndex(item => item.status === options.status)
            this.params.status = options.status
        } else {
            this.currentTab = 0
        }
        this.loadOrders(true, this.params)

        uni.$on('btnActionSuccess', () => {
            this.loadOrders(true, this.params)
        })
    },
    
    onUnload() {
        uni.$off('btnActionSuccess')
    },
    
    methods: {
        loadOrders(bool = false, params = {}) {
            this.$refs.pageRef?.loadData(bool, params);
        },

        handleSuccess() {
            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
        },
        // 订单操作方法
        handleCancel(order) {
            uni.showModal({
                title: '提示',
                content: '确定要取消该订单吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 调用取消订单接口
                    }
                }
            })
        },
        handleReport(order) {
            uni.navigateTo({
                url: `/pages/order/report?orderNo=${order.orderNo}`
            })
        },
        handleEditAddress(order) {
            uni.navigateTo({
                url: `/pages/order/address?orderNo=${order.orderNo}`
            })
        },
        handleRemind(order) {
            uni.showToast({
                title: '已提醒审核',
                icon: 'none'
            })
        }
    }
}
</script>

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

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