book-hi/pages-mine/components/order-actions.vue

<template>
    <view class="order-container" style="width: 100%;" :class="{ 'large-size': size === 'large' }">
        <view class="order-actions">
            <!-- 未提交 -->
            <button v-if="status == 0" class="action-btn" @click.stop="handleAction('submit')">提交订单</button>

            <!-- 显示复审按钮 -->
            <template v-if="order.showReview > 0">
                <!-- 1-可申请 2-已申请 3-已复审(展示审核图片按钮) -->
                <button v-if="order.showReview == 1" class="action-btn"
                    @click.stop="handleAction('review')">申请复审</button>
                <!-- 2-已申请 -->
                <div style="display: flex;align-items: center;font-size: 14px;" v-if="order.showReview == 2">
                    已用时长：
                    <time-clock :initialSeconds="order.reviewCostTime"></time-clock>
                </div>
                <button v-if="order.showReview == 2" class="action-btn plain">已申请复审</button>
                <button class="action-btn" v-if="order.showReview == 3"
                    @click.stop="handleAction('reviewImage')">审核图片</button>
            </template>

            <!-- 待初审 -->
            <template v-if="status == 2">
                <view class="flex-row w-full" style="display: flex;justify-content: space-between;">
                    <button class="action-btn info-btn" @click.stop="handleAction('cancel')">取消订单</button>
                    <view class="flex-row">
                        <button class="action-btn plain" @click.stop="handleAction('editAddress')">修改地址</button>
                        <button v-if="item.canReport == 1" class="action-btn"
                            @click.stop="handleAction('report')">一键上报</button>
                    </view>
                </view>
            </template>

            <!-- 待取件 -->
            <button v-if="status == 3 && item.canReport == 1" class="action-btn"
                @click.stop="handleAction('report')">一键上报</button>

            <!-- 待审核 -->
            <template v-if="status == 8">
                <button class="action-btn" @click.stop="handleAction('remindAudit')"
                    v-if="item.canNotice == 1">提醒审核</button>
                <button class="action-btn plain" v-if="item.canComplaints == 1"
                    @click.stop="handleAction('complaint')">订单投诉</button>

            </template>

            <!-- 待到款 -->
            <button v-if="status == 10" class="action-btn" @click.stop="handleAction('complaint')">订单投诉</button>

            <!-- 已完成 -->
            <template v-if="status == 11">
                <button class="action-btn plain" v-if="item.canComplaints == 1"
                    @click.stop="handleAction('complaint')">订单投诉</button>
                <button v-if="showCompensation" class="action-btn"
                    @click.stop="handleAction('compensation')">卖亏补差</button>
            </template>
        </view>
        <u-action-sheet v-model="showReportSheet" :list="actionList" @close="showReportSheet = false"
            @click="handleReportSelect" cancelText="取消" :mask-close-able="false" :safe-area-inset-bottom="true" />
    </view>
</template>

<script>
import timeClock from './time-clock.vue';
export default {
    name: 'OrderActions',
    components: {
        timeClock
    },
    props: {
        status: {
            type: [Number, String],
            required: true
        },
        order: {
            type: Object,
            default: () => ({})
        },
        size: {
            type: String,
            default: 'normal'
        }
    },
    methods: {
        handleAction(type) {
            this.$emit('action', {
                type,
                order: this.order
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.order-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16rpx 0;
    padding-bottom: 10rpx;
    width: 100%;

    .w-full {
        width: 100%;
    }

    .action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 166rpx;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 10rpx;
        font-size: 28rpx;
        background-color: #38C148;
        color: #ffffff;
        cursor: pointer;
        margin: 0;
        border: 0;
        max-width: 200rpx;

        &::after {
            border: 0;
        }

        &+.action-btn {
            margin-left: 16rpx;
        }

        &.info-btn {
            background-color: #DBDBDB;
            color: #ffffff;
        }

        &.plain {
            border: 1px solid #38C148;
            color: #38C148;
            background-color: #fff;
        }
    }
}

.large-size {
    .order-actions {
        .action-btn {
            max-width: 200rpx;
            height: 72rpx;
            line-height: 72rpx;
        }
    }
}
</style>