book-hi/pages-car/components/buy-order-item.vue

<template>
    <view class="buy-order-item" @click="goToDetail">
        <!-- 订单头部：订单号和状态 -->
        <view class="order-header">
            <text class="order-no">订单号：{{ order.orderId }}</text>
            <text class="order-status">{{ getStatusText(order) }}</text>
        </view>

        <!-- 商品信息 -->
        <view class="goods-list">
            <scroll-view scroll-x class="goods-scroll" v-if="order.detailCoverList && order.detailCoverList.length > 0">
                <view class="goods-wrapper">
                    <image v-for="(cover, index) in order.detailCoverList" :key="index" :src="cover || defaultCover"
                        mode="aspectFill" class="goods-cover"></image>
                </view>
            </scroll-view>

            <!-- 单本书样式 -->
            <view class="single-book" v-else>
                <image :src="order.bookCover || defaultCover" mode="aspectFit" class="book-cover"></image>
                <view class="book-info">
                    <view class="info-top">
                        <text class="book-name u-line-2">{{ order.bookName }}</text>
                        <view class="price-box">
                            <text class="price">¥ {{ order.bookPrice || '0.00' }}</text>
                            <text class="num">x{{ order.bookNum }}</text>
                        </view>
                    </view>
                    <view class="book-sku" v-if="order.bookConditionType">
                        品相：{{ order.bookConditionType | conditionText }}
                    </view>
                </view>
            </view>
        </view>

        <!-- 价格汇总 -->
        <view class="order-total">
            <text class="ml-20">总价 ¥{{ order.totalMoney || 0 }}</text>
            <text class="ml-20">实付款 ¥{{ order.payMoney || 0 }}</text>
        </view>

        <!-- 操作按钮 -->
        <view class="action-box">
            <!-- 付款 (未包含在Flags中，保留原逻辑: 待付款且未取消) -->
            <u-button v-if="order.status == '1' && order.cancelStatus == '0'" size="mini" shape="circle"
                :custom-style="themeBtnStyle" @click.stop="handleAction('pay', order)">付款</u-button>

            <!-- 确认收货 -->
            <u-button v-if="order.showConfirmShop == 1" size="mini" shape="circle" :custom-style="themeBtnStyle"
                @click.stop="handleAction('confirm', order)">确认收货</u-button>

            <!-- 加入购物车 -->
            <u-button v-if="order.showAddToCart == 1" size="mini" shape="circle" :custom-style="themeBtnStyle"
                @click.stop="handleAction('addToCart', order)">加入购物车</u-button>

            <!-- 再来一单 -->
            <u-button v-if="order.showBuyAgain == 1" size="mini" shape="circle" type="primary" plain
                :custom-style="btnStyle" @click.stop="handleAction('rebuy', order)">再买一单</u-button>

            <!-- 评价 -->
            <u-button v-if="order.showEvaluation == 1" size="mini" shape="circle" type="primary" plain
                :custom-style="btnStyle" @click.stop="handleAction('evaluate', order)">评价</u-button>

            <!-- 查看物流 -->
            <u-button v-if="order.showCheckExpress == 1 && order.status != '4'" size="mini" shape="circle"
                type="primary" plain :custom-style="btnStyle"
                @click.stop="handleAction('logistics', order)">查看物流</u-button>

            <!-- 延长收货 -->
            <u-button v-if="order.showExtendReceivingTime == 1" size="mini" shape="circle" plain
                :custom-style="btnStyle" @click.stop="handleAction('extend', order)">延长收货</u-button>

            <!-- 催发货 -->
            <u-button v-if="order.showUrge == 1" size="mini" shape="circle" type="warning" plain
                :custom-style="btnStyle" @click.stop="handleAction('remind', order)">催发货</u-button>


            <!-- 申请售后 -->
            <u-button v-if="order.showAfterSales == 1 && order.status != '4'" size="mini" shape="circle" type="error"
                plain :custom-style="btnStyle" @click.stop="handleAction('refund', order)">申请售后</u-button>

            <!-- 取消订单 (未包含在Flags中，保留原逻辑: 待付款且未取消) -->
            <u-button v-if="order.showCancel" size="mini" shape="circle" type="error" plain :custom-style="btnStyle"
                @click.stop="handleAction('cancel', order)">取消订单</u-button>

            <!-- 钱款去向 -->
            <u-button v-if="order.showMoneyDestination == 1" size="mini" shape="circle" type="primary" plain
                :custom-style="btnStyle" @click.stop="handleAction('moneyWhere', order)">钱款去向</u-button>

            <!-- 查看详情 -->
            <u-button v-if="order.showShowDetail == 1" size="mini" shape="circle" plain :custom-style="btnStyle"
                @click.stop="handleAction('detail', order)">查看详情</u-button>

            <!-- 申请开票 -->
            <u-button v-if="order.showApplyInvoice == 1 && order.status != '4'" size="mini" shape="circle" plain
                :custom-style="btnStyle" @click.stop="handleAction('invoice', order)">申请开票</u-button>

            <!-- 投诉 -->
            <u-button v-if="order.showComplaint == 1" size="mini" shape="circle" plain :custom-style="btnStyle"
                @click.stop="handleAction('complaint', order)">投诉</u-button>

            <!-- 修改地址 -->
            <u-button v-if="order.showModifyAddress == 1" size="mini" shape="circle" plain :custom-style="btnStyle"
                @click.stop="handleAction('address', order)">修改地址</u-button>

            <!-- 更多操作 (仅在已完成状态下显示) -->
            <u-button
                v-if="(order.showAfterSales == 1 || order.showCheckExpress == 1 || order.showApplyInvoice == 1) && order.status == '4'"
                size="mini" shape="circle" plain :custom-style="btnStyle" @click.stop="handleMoreAction">更多</u-button>

        </view>
    </view>
</template>

<script>
    export default {
        props: {
            order: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                defaultCover: 'https://uviewui.com/album/1.jpg',
                btnStyle: {
                    marginLeft: '20rpx',
                    height: '60rpx',
                    lineHeight: '60rpx',
                    padding: '0 24rpx',
                    fontSize: '26rpx',
                },
                themeBtnStyle: {
                    marginLeft: '20rpx',
                    height: '60rpx',
                    lineHeight: '60rpx',
                    padding: '0 30rpx',
                    backgroundColor: '#38C148',
                    color: '#fff',
                    fontSize: '26rpx',
                }
            }
        },
        methods: {
            goToDetail() {
                uni.navigateTo({
                    url: `/pages-car/pages/order-detail?orderId=${this.order.orderId}`
                })
            },
            getStatusText(order) {
                //订单状态:1-待付款 2-待发货 3-待收货 4-已完成 5-已取消 6-退款中 7-已退款
                const map = {
                    '1': '待付款',
                    '2': '待发货',
                    '3': '待收货',
                    '4': '已完成',
                    '5': '已取消',
                    '6': '退款中',
                    '7': '已退款'
                }
                return map[order.status] || '未知状态'
            },
            handleAction(type, data) {
                if (type === 'complaint') {
                    uni.setStorageSync('tempComplaintOrder', data);
                    uni.navigateTo({
                        url: `/pages-car/pages/complaint?orderId=${data.orderId}`
                    });
                    return;
                }
                if (type === 'detail') {
                    uni.navigateTo({
                        url: `/pages-car/pages/order-detail?orderId=${data.orderId}`
                    });
                    return;
                }
                if (type === 'confirm') {
                    uni.showModal({
                        title: '提示',
                        content: '是否确认收货？',
                        success: (res) => {
                            if (res.confirm) {
                                uni.showLoading({ title: '处理中' });
                                this.$u.api.confirmReceiveAjax({ orderId: data.orderId }).then(res => {
                                    uni.hideLoading();
                                    if (res.code == 200) {
                                        uni.showToast({ title: '收货成功', icon: 'success' });
                                        this.$emit('refresh'); // 通知父组件刷新列表
                                    }
                                });
                            }
                        }
                    });
                    return;
                }
                console.log('handleAction', type, data)
                this.$emit('action', { type, order: data })
            },
            handleMoreAction() {
                // 收集更多按钮下的操作
                const actions = [];
                if (this.order.showAfterSales == 1) actions.push('applyAfterSales');
                if (this.order.showCheckExpress == 1) actions.push('logistics');
                if (this.order.showApplyInvoice == 1) actions.push('invoice');

                this.$emit('action', { type: 'more', order: this.order, data: actions });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .buy-order-item {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 30rpx 20rpx;
        margin-bottom: 20rpx;

        .order-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20rpx;
            font-size: 28rpx;

            .order-no {
                color: #333;
                font-weight: 500;
            }

            .order-status {
                color: #999;
            }
        }

        .goods-list {
            margin-bottom: 20rpx;

            .goods-scroll {
                white-space: nowrap;
                width: 100%;

                .goods-wrapper {
                    display: flex;
                }

                .goods-cover {
                    width: 140rpx;
                    height: 140rpx;
                    margin-right: 20rpx;
                    border-radius: 8rpx;
                    flex-shrink: 0;
                }
            }

            .single-book {
                display: flex;

                .book-cover {
                    width: 140rpx;
                    height: 140rpx;
                    margin-right: 10rpx;
                    border-radius: 8rpx;
                    flex-shrink: 0;
                }

                .book-info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .info-top {
                        display: flex;
                        justify-content: space-between;

                        .book-name {
                            flex: 1;
                            font-size: 28rpx;
                            color: #333;
                            font-weight: bold;
                            margin-right: 30rpx;
                        }

                        .price-box {
                            text-align: right;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-end;

                            .price {
                                font-size: 28rpx;
                                color: #333;
                                font-weight: 500;
                            }

                            .num {
                                font-size: 24rpx;
                                color: #999;
                                margin-top: 6rpx;
                            }
                        }
                    }

                    .book-sku {
                        background: rgb(56, 193, 72, 0.1);
                        color: #333;
                        font-size: 24rpx;
                        padding: 4rpx 12rpx;
                        border-radius: 4rpx;
                        align-self: flex-start;
                        margin-top: 10rpx;
                    }
                }
            }
        }

        .order-total {
            text-align: right;
            font-size: 26rpx;
            color: #333;
            margin-bottom: 20rpx;

            .ml-20 {
                margin-left: 20rpx;
                font-weight: 500;
            }
        }

        .action-box {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-wrap: wrap; // 防止按钮过多换行问题

            u-button {
                margin-bottom: 10rpx; // 如果换行，增加间距
            }

            .status-desc {
                font-size: 26rpx;
                color: #999;
            }
        }
    }
</style>