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="currentUrl" :params="params" :immediate="false">
            <view v-if="orderList.length > 0" class="order-list-container">
                <template v-if="currentTab === 5">
                    <refund-order-item v-for="(order, index) in orderList" :key="index" :order="order"></refund-order-item>
                </template>
                <template v-else>
                    <buy-order-item v-for="(order, index) in orderList" :key="index" :order="order"
                        @action="handleAction"></buy-order-item>
                </template>
            </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" @success="loadOrders(true, params)"></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 RefundOrderItem from '../components/refund-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,
        RefundOrderItem,
        pageScroll,
        FastRefundDialog,
        UrgeDeliveryDialog,
        CancelOrderPopup
    },
    data() {
        return {
            currentUrl: '/token/shop/order/getShopOrderList',
            // 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;
                if (options.status === '5') {
                    this.currentUrl = '/token/shop/order/getMyRefundOrderList';
                } else {
                    this.currentUrl = '/token/shop/order/getShopOrderList';
                }
            }
        }
        
        // 监听地址选择
        uni.$on('selectAddr', this.onAddressSelected);
    },
    onShow() {
        this.loadOrders(true, this.params);
    },
    onUnload() {
        uni.$off('selectAddr', this.onAddressSelected);
    },
    methods: {
        onAddressSelected(addr) {
            if (this.modifyingOrderId && addr && addr.id) {
                this.$u.api.modifyOrderAddressAjax({
                    orderId: this.modifyingOrderId,
                    addressId: addr.id
                }).then(res => {
                    uni.hideLoading();
                    if (res.code == 200) {
                        uni.showToast({ title: '修改成功', icon: 'success' });
                        setTimeout(() => {
                            this.loadOrders(true, this.params);
                        }, 1000)
                    }
                }).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;
            if (this.tabList[index].value === '5') {
                this.currentUrl = '/token/shop/order/getMyRefundOrderList';
            } else {
                this.currentUrl = '/token/shop/order/getShopOrderList';
            }
            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);
            }
        },
        addCartAjax(orderId) {
            uni.showLoading({ title: '处理中' });
            this.$u.api.orderAddToCartAjax({
                orderId: orderId
            }).then(res => {
                uni.hideLoading();
                if (res.code == 200) {
                    uni.showToast({
                        title: '已加入购物车',
                        icon: 'success',
                        duration: 3000
                    });
                    this.$updateCartBadge();
                }
            });
        },
        processAction(type, order) {
            if (type === 'rebuy') {
                uni.showLoading({ title: '加载中...' });
                this.$u.api.orderAddToCartAjax({
                    orderId: order.orderId
                }).then(res => {
                    uni.hideLoading();
                    if (res.code === 200) {
                        // 加入购物车成功，跳转到确认订单页面
                        // 将 cartIdList 作为参数传递
                        const cartIdList = res.data || [];
                        uni.navigateTo({
                            url: '/pages-car/pages/confirm-order?cartIdList=' + JSON.stringify(cartIdList)
                        });
                    } else {
                        this.$u.toast(res.msg || '加入购物车失败');
                    }
                }).catch(() => {
                    uni.hideLoading();
                });
            } else if (type === 'addToCart') {
                this.addCartAjax(order.orderId);
            } else if (type === 'remind') {
                this.$refs.urgeDialog.open(order);
            } else if (type === 'overtime') {
                // 超时发货补偿
                uni.showModal({
                    title: '提示',
                    content: '确认申请超时发货补偿？',
                    success: (res) => {
                        if (res.confirm) {
                            this.$u.api.sendTimeoutCompensationAjax(order.orderId).then(res => {
                                if (res.code == 200) {
                                    uni.showToast({
                                        title: '申请成功',
                                        icon: 'success'
                                    });
                                    this.loadOrders(true, this.params);
                                }
                            });
                        }
                    }
                });
            } else if (type === 'priceMatch') {
                // 降价补差
                uni.showModal({
                    title: '提示',
                    content: '确认申请降价补差？',
                    success: (res) => {
                        if (res.confirm) {
                            this.$u.api.priceReductionCompensationAjax(order.orderId).then(res => {
                                if (res.code == 200) {
                                    uni.showToast({
                                        title: '申请成功',
                                        icon: 'success'
                                    });
                                    this.loadOrders(true, this.params);
                                }
                            });
                        }
                    }
                });
            } 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.navigateTo({
                    url: `/pages-car/pages/logistics-detail?orderId=${order.orderId}`
                });
            } 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`
                });
            } 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 if (type === 'extend') {
                uni.showModal({
                    title: '提示',
                    content: '每笔订单只能延长一次收货时间，确认延长收货？',
                    success: (res) => {
                        if (res.confirm) {
                            this.$u.api.orderAddDeadlineAjax(order.orderId).then(res => {
                                if (res.code == 200) {
                                    uni.showToast({
                                        title: '延长收货成功',
                                        icon: 'success'
                                    });
                                    this.loadOrders(true, this.params);
                                }
                            });
                        }
                    }
                });
            } else if (type === 'complaint') {
                uni.setStorageSync('tempComplaintOrder', order);
                uni.navigateTo({
                    url: `/pages-car/pages/complaint?orderId=${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>