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" 
                :is-scroll="false"
                active-color="#333" 
                inactive-color="#666"
                bar-width="40"
                bar-height="6"
                bar-style="{backgroundColor: '#ff5b5b'}"
            ></u-tabs> 
            <!-- Note: u-tabs styling might need adjustment to match image (red underline) -->
        </view>

        <!-- 订单列表 -->
        <page-scroll 
            :page-size="10" 
            @updateList="handleUpdateList" 
            ref="pageRef" 
            slotEmpty
            url="/token/order/getMyBuyOrderList" 
            :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 {
            tabList: [
                { name: '全部', status: '' },
                { name: '待付款', status: '2' },
                { name: '待发货', status: '3' },
                { name: '待收货', status: '8' },
                { name: '已完成', status: '12' },
                { name: '退款/售后', status: '10' }
            ],
            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) {
            // Mock data injection if list is empty (for development)
            if (!list || list.length === 0) {
                this.orderList = this.getMockOrders(this.params.status);
            } else {
                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>