book-hi/pages-car/pages/my-order.vue

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

        <!-- 订单列表 -->
        <page-scroll :page-size="10" @updateList="handleUpdateList" ref="pageRef" slotEmpty
            url="/token/shop/order/getShopOrderList" :params="params" :immediate="false">
            <view v-if="orderList.length > 0" class="order-list-container">
                <buy-order-item v-for="(order, index) in orderList" :key="index" :order="order"
                    @action="handleAction"></buy-order-item>
            </view>
        </page-scroll>

        <!-- 更多操作菜单 -->
        <u-action-sheet :list="actionSheetList" v-model="showActionSheet"
            @click="handleActionSheetClick"></u-action-sheet>
    </view>
</template>

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

    export default {
        components: {
            BuyOrderItem,
            pageScroll
        },
        data() {
            return {
                //NULL-全部 1待付款 2待发货 3待收货 4已完成 5已取消 6退款中 7已退款
                tabList: [
                    { name: '全部', status: '' },
                    { name: '待付款', status: 1 },
                    { name: '待发货', status: 2 },
                    { name: '待收货', status: 3 },
                    { name: '已完成', status: 4 },
                    { name: '已取消', status: 5 },
                    { name: '退款中', status: 6 },
                    { name: '已退款', status: 7 }
                ],
                currentTab: 0,
                orderList: [],
                params: {},
                showActionSheet: false,
                actionSheetList: [],
                currentOrder: null
            };
        },
        onLoad(options) {
            if (options.status) {
                const index = this.tabList.findIndex(item => item.status == options.status);
                if (index !== -1) {
                    this.currentTab = index;
                    this.params.status = options.status;
                }
            }

            // Load mock data for now since API might not be ready
            // But pageScroll calls API. We can mock in updateList if API fails or returns empty.
            // For now let's rely on pageScroll but maybe we need to mock response in pageScroll or here.
            // Actually, let's trigger load.
            this.loadOrders(true, this.params);
        },
        methods: {
            loadOrders(refresh = false, params = {}) {
                this.$nextTick(() => {
                    // If API is not real, pageScroll might fail.
                    // We can mock data here if needed by directly setting list if API fails.
                    // Let's try to use pageScroll mechanism.
                    this.$refs.pageRef?.loadData(refresh, params);
                });
            },
            handleTabChange(index) {
                this.currentTab = index;
                this.params.status = this.tabList[index].status;
                this.loadOrders(true, this.params);
            },
            handleUpdateList(list) {
                this.orderList = list;
            },
            handleAction({ type, order, data }) {
                console.log('Action:', type, order);
                this.currentOrder = order;

                if (type === 'more') {
                    // data contains the list of actions to show in sheet
                    // Map internal keys to display text
                    const actionMap = {
                        'applyAfterSales': { text: '申请售后', type: 'refund' },
                        'logistics': { text: '查看物流', type: 'logistics' },
                        'invoice': { text: '申请开票', type: 'invoice' }
                    };

                    this.actionSheetList = data.map(key => actionMap[key]).filter(Boolean);
                    this.showActionSheet = true;
                    return;
                }

                this.processAction(type, order);
            },
            handleActionSheetClick(index) {
                const action = this.actionSheetList[index];
                if (action && action.type) {
                    this.processAction(action.type, this.currentOrder);
                }
            },
            processAction(type, order) {
                if (type === 'rebuy' || type === 'addToCart') {
                    // Logic to add to cart
                    uni.showToast({ title: '已加入购物车', icon: 'none' });
                } else if (type === 'delete') {
                    uni.showModal({
                        title: '提示',
                        content: '确定要删除该订单吗？',
                        success: (res) => {
                            if (res.confirm) {
                                // Remove from list
                                this.orderList = this.orderList.filter(item => item.orderNo !== order.orderNo);
                                uni.showToast({ title: '删除成功', icon: 'none' });
                            }
                        }
                    });
                } else if (type === 'remind') {
                    uni.showToast({ title: '已提醒商家发货', icon: 'none' });
                } else if (type === 'refund') {
                    uni.showToast({ title: '进入极速退款/售后流程', icon: 'none' });
                } else if (type === 'confirm') {
                    uni.showModal({
                        title: '提示',
                        content: '确认已收到商品？',
                        success: (res) => {
                            if (res.confirm) {
                                uni.showToast({ title: '确认收货成功', icon: 'none' });
                                // Update status locally or reload
                                this.loadOrders(true, this.params);
                            }
                        }
                    });
                } else if (type === 'logistics') {
                    uni.showToast({ title: '查看物流信息', icon: 'none' });
                } else if (type === 'address') {
                    uni.showToast({ title: '修改地址', icon: 'none' });
                } else if (type === 'pay') {
                    uni.showToast({ title: '去支付', icon: 'none' });
                } else if (type === 'cancel') {
                    uni.showModal({
                        title: '提示',
                        content: '确定要取消订单吗？',
                        success: (res) => {
                            if (res.confirm) {
                                uni.showToast({ title: '订单已取消', icon: 'none' });
                                this.loadOrders(true, this.params);
                            }
                        }
                    });
                } else {
                    uni.showToast({ title: '功能开发中', icon: 'none' });
                }
            },
            getMockOrders(status) {
                // Generate some mock data based on status
                const allOrders = [
                    {
                        orderNo: 'SN1893294923003',
                        status: 2, // 待付款
                        totalPrice: 17.2,
                        realPayPrice: 17.2,
                        goodsList: [
                            {
                                title: '马克思主义基本原理',
                                cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg',
                                price: 8.60,
                                num: 2,
                                quality: '中等'
                            }
                        ]
                    },
                    {
                        orderNo: 'SN1893294923004',
                        status: 3, // 待发货
                        totalPrice: 17.2,
                        realPayPrice: 17.2,
                        goodsList: [
                            { cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' }, { cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' }, { cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg' }
                        ]
                    },
                    {
                        orderNo: 'SN1893294923005',
                        status: -1, // 已取消
                        totalPrice: 17.2,
                        realPayPrice: 17.2,
                        goodsList: [
                            {
                                title: '马克思主义基本原理',
                                cover: 'https://k.sinaimg.cn/n/sinakd20116/234/w1000h1634/20251003/b66b-587c9ff400fcf01be52c6693594b6a6d.jpg/w700d1q75cms.jpg',
                                price: 8.60,
                                num: 2,
                                quality: '中等'
                            }
                        ]
                    }
                ];

                if (!status) return allOrders;
                return allOrders.filter(o => o.status == status);
            }
        }
    }
</script>

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

        .tabs-wrapper {
            position: sticky;
            top: 0;
            z-index: 99;
            background: #FFFFFF;
            border-bottom: 1rpx solid #eee;
        }

        .order-list-container {
            padding: 20rpx;
        }
    }
</style>