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/scanLogs">
            <view v-if="orderList.length > 0" class="pad-20">
                <order-item v-for="order in orderList" :key="order.orderNo" :order="order" @cancel="handleCancel"
                    @report="handleReport" @editAddress="handleEditAddress" @remind="handleRemind"></order-item>
            </view>
        </page-scroll>
    </view>
</template>

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

export default {
    components: {
        OrderItem,
        pageScroll
    },
    data() {
        return {
            tabList: [{
                name: '全部'
            },
            {
                name: '待初审'
            },
            {
                name: '待取件'
            },
            {
                name: '待审核'
            },
            {
                name: '待到款'
            }
            ],
            currentTab: 0,
            orderList: [],
            isRefreshing: false,
            page: 1,
            pageSize: 10,
            hasMore: true
        }
    },
    onLoad(options) {
        // 如果有传入状态，切换到对应tab
        if (options.status) {
            this.currentTab = options.status * 1
        }
        this.loadOrders(true)
    },
    methods: {
        // 加载订单 
        loadOrders(bool = false) {
            this.$refs.pageRef?.loadData(bool)
        },

        handleTabChange(index) {
            this.currentTab = index
            this.page = 1
            this.loadOrders(true)
        },

        handleUpdateList(list) {
            this.orderList = list.map(item => {
                return {
                    orderNo: '54631435441',
                    status: 'pending_review',
                    submitTime: '2024-12-06 15:00:00',
                    books: [{
                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
                    },
                    {
                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
                    },
                    {
                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
                    },
                    {
                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
                    },
                    {
                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
                    },
                    {
                        cover: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/20241206/08ea280b-8627-4525-9e31-ed25cdce9094.jpg'
                    }
                    ]
                }
            })
        },
        // 订单操作方法
        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>