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>

        <!-- 极速退款弹窗 -->
        <fast-refund-dialog ref="refundDialog" @refresh="loadOrders(true, params)"></fast-refund-dialog>
        
        <!-- 催发货弹窗 -->
        <urge-delivery-dialog ref="urgeDialog"></urge-delivery-dialog>

        <!-- 取消订单弹窗 -->
        <cancel-order-popup ref="cancelDialog" @success="loadOrders(true, params)"></cancel-order-popup>
    </view>
</template>

<script>
    import BuyOrderItem from '../components/buy-order-item.vue';
    import pageScroll from '@/components/pageScroll/index.vue';
    import FastRefundDialog from '../components/fast-refund-dialog.vue';
    import UrgeDeliveryDialog from '../components/urge-delivery-dialog.vue';
    import CancelOrderPopup from '../components/cancel-order-popup.vue';

    export default {
        components: {
            BuyOrderItem,
            pageScroll,
            FastRefundDialog,
            UrgeDeliveryDialog,
            CancelOrderPopup
        },
        data() {
            return {
                // value用于前端标识，params用于后端查询
                tabList: [
                    { name: '全部', value: '0', params: {} },
                    { name: '待付款', value: '1', params: { status: '1' } },
                    { name: '待发货', value: '2', params: { status: '2' } },
                    { name: '待收货', value: '3', params: { status: '3' } },
                    { name: '已完成', value: '4', params: { status: '4' } },
                    { name: '退款/售后', value: '5', params: { status: '5' } },
                ],
                currentTab: 0,
                orderList: [],
                params: {},
                showActionSheet: false,
                actionSheetList: [],
                currentOrder: null,
                modifyingOrderId: null
            };
        },
        onLoad(options) {
            if (options.status) {
                const index = this.tabList.findIndex(item => item.value == options.status);
                if (index !== -1) {
                    this.currentTab = index;
                    this.params = this.tabList[index].params;
                }
            }

            this.loadOrders(true, this.params);

            // 监听地址选择
            uni.$on('selectAddr', this.onAddressSelected);
        },
        onUnload() {
            uni.$off('selectAddr', this.onAddressSelected);
        },
        methods: {
            onAddressSelected(addr) {
                if (this.modifyingOrderId && addr && addr.id) {
                    uni.showLoading({ title: '修改中' });
                    this.$u.api.modifyOrderAddressAjax({
                        orderId: this.modifyingOrderId,
                        addressId: addr.id
                    }).then(res => {
                        uni.hideLoading();
                        if (res.code == 200) {
                            uni.showToast({ title: '修改成功', icon: 'success' });
                        }
                    }).finally(() => {
                        this.modifyingOrderId = null;
                    });
                }
            },
            loadOrders(refresh = false, params = {}) {
                this.$nextTick(() => {
                    this.$refs.pageRef?.loadData(refresh, params);
                });
            },
            handleTabChange(index) {
                this.currentTab = index;
                this.params = this.tabList[index].params;
                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') {
                    uni.showToast({ title: '已加入购物车', icon: 'none' });
                } else if (type === 'remind') {
                    this.$refs.urgeDialog.open(order);
                } else if (type === 'refund') {
                    if (order.status == '2') {
                        this.$refs.refundDialog.open(order);
                    } else {
                        // 跳转到申请售后页面
                        uni.navigateTo({
                            url: `/pages-car/pages/apply-refund?orderId=${order.orderId}`
                        });
                    }
                } else if (type === 'confirm') {
                    uni.showModal({
                        title: '提示',
                        content: '确认已收到商品？',
                        success: (res) => {
                            if (res.confirm) {
                                uni.showToast({ title: '确认收货成功', icon: 'none' });
                                this.loadOrders(true, this.params);
                            }
                        }
                    });
                } else if (type === 'logistics') {
                    uni.showToast({ title: '查看物流信息', icon: 'none' });
                } else if (type === 'address') {
                    this.modifyingOrderId = order.orderId;
                    // 兼容列表和详情可能的字段差异
                    const addressId = order.addressId || order.receiverAddressId || '';
                    uni.navigateTo({
                        url: `/pages-mine/pages/address/list?id=${addressId}&isSelect=1&editAddress=1`
                    });
                } else if (type === 'pay') {
                    // 跳转到收银台
                    uni.navigateTo({
                        url: `/pages-car/pages/cashier-desk?id=${order.orderId}`
                    });
                } else if (type === 'cancel') {
                    this.$refs.cancelDialog.open(order.orderId);
                } else {
                    uni.showToast({ title: '功能开发中', icon: 'none' });
                }
            }
        }
    }
</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>