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

<template>
    <view class="order-container" style="width: 100%;" :class="{ 'large-size': size === 'large' }">
        <view class="order-return-actions">
            <button v-if="status == 0" class="action-btn" @click.stop="handleAction('pay')">去付款</button>

            <!-- 待初审 -->
            <template v-if="status == 2 || status == 1">
                <button class="action-btn" @click.stop="handleAction('cancel')">取消退回</button>
            </template>

            <!-- 待取件 -->
            <button v-if="status === 2" class="action-btn" @click.stop="handleAction('confirm')">确认收货</button>
        </view>
    </view>
</template>

<script>

export default {
    name: 'OrderActions',
    props: {
        status: {
            type: Number,
            required: true
        },
        order: {
            type: Object,
            default: () => ({})
        },
        size: {
            type: String,
            default: 'normal'
        },
        isDetail: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        handleAction(type) {
            if (type == 'pay') {
                //先校验支付参数
                if (this.order.orderId) {
                    uni.$u.http.post('/token/order/refundGoPay', {
                        refundOrderId: this.isDetail ? this.order.refundOrderId : this.order.orderId
                    }).then(res => {
                        if (res.code == 200) {
                            //如果有微信订单，则跳转去微信支付
                            if (res.data.prepayId) {
                                uni.requestPayment({
                                    timeStamp: res.data.timeStamp,
                                    nonceStr: res.data.nonceStr,
                                    package: `prepay_id=${res.data.prepayId}`,
                                    signType: res.data.signType,
                                    paySign: res.data.paySign,
                                    provider: 'wxpay',
                                    success: (res) => {
                                        console.log(res)
                                        //支付成功之后，跳转支付成功页面
                                        uni.navigateTo({
                                            url: `/pages-mine/pages/pay-success?orderId=${this.order.orderId}`
                                        })
                                    },
                                    fail: (err) => {
                                        console.log(err)
                                    }
                                })
                            } else {
                                uni.navigateTo({
                                    url: `/pages-mine/pages/cashier-desk?id=${res.data.refundOrderId}`
                                })
                            }
                        }
                    })
                }
            } else {
                this.$emit('action', {
                    type,
                    order: this.order
                })
            }
        }
    }
}
</script>

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

    .w-full {
        width: 100%;
    }

    .action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 160rpx;
        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-return-actions {
        .action-btn {
            max-width: 200rpx;
            height: 80rpx;
            line-height: 80rpx;
        }
    }
}
</style>