book-hi/pages-mine/pages/return-detail.vue

<template>
    <view class="order-detail">
        <!-- 时间轴组件 -->
        <order-timeline :logVoList="orderInfo.logVoList" isReturn :trackingVoList="orderInfo.trackingVoList"></order-timeline>
        <!-- 书籍列表组件 -->
        <book-list :books="bookList" :totalNum="orderInfo.totalNum" isReturn></book-list>

        <!-- 收入信息区块 -->
        <view class="info-block">
            <view class=" flex-a flex-j-b">
                <text class="common-title font-32">退回邮费：</text>
                <text class="common-text" style="color: #FF0000;font-weight: 600;">{{
                    orderInfo.expressMoney ? `¥${orderInfo.expressMoney}` : '首单免费退回' }}</text>
            </view>
            <view class="desc-bg">
                <view class="flex-a flex-j-b">
                    <text class="common-text-2 font-26">书籍数量：</text>
                    <text class="common-text font-26">{{ orderInfo.totalNum }}</text>
                </view>
            </view>
        </view>
        <!-- 订单信息区块 -->
        <view class="info-block">
            <view class=" flex-a flex-j-b">
                <text class="common-title font-32">卖书编号：</text>
                <view class="common-text-2 font-26 flex-a">{{ orderInfo.orderId || '-' }}
                    <image src="../static/copy.png" style="width: 42rpx;height:42rpx;margin-left: 20rpx;"
                        @click="copyOrderNo"></image>
                </view>
            </view>
            <view class="desc-bg">
                <view class="flex-a flex-j-b">
                    <view class="common-text-2 font-26">退回编号：</view>
                    <text class="common-text font-26">{{ orderInfo.refundOrderId || '-' }}</text>
                    <image src="../static/copy.png" style="width: 42rpx;height:42rpx;margin-left: 20rpx;"
                        @click="copyRefundNo"></image>
                </view>
            </view>
        </view>

        <!-- 地址信息区块 -->
        <view class="info-block">
            <view class=" flex-a flex-j-b">
                <text class="common-title font-32" style="width: 220rpx;">收货地址：</text>

                <view class="flex-d flex-j-e flex-1">
                    <view class="common-text-2 font-26 mb-12">
                        <text>{{ orderInfo.receiveName }}</text>
                        <text class="ml-40">{{ orderInfo.receiveMobile }}</text>
                    </view>
                    <text class="common-text" style="line-height: 42rpx;">
                        {{ orderInfo.receiveAddress }}
                    </text>
                </view>
            </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="bottom-fixed-con detail-bottom flex-d">
            <service-info :firstOrder="orderInfo.firstOrder"></service-info>
            <view class="flex-a" style="width: 100%;padding: 0 30rpx;">
                <order-return-actions :order="orderInfo" :status="orderInfo.status" @action="handleAction"
                    style="width: 100%;" size="large" isDetail></order-return-actions>
            </view>
        </view>

        <!-- 弹窗 -->
        <common-dialog ref="dialog" :title="dialogTitle" @confirm="handleConfirm">{{dialogContent}}</common-dialog>
    </view>
</template>

<script>
import OrderTimeline from '../components/order-timeline.vue'
import BookList from '../components/book-list.vue'
import ServiceInfo from '@/pages/home/components/ServiceInfo.vue';
import OrderReturnActions from '../components/order-return-actions.vue';
import CommonDialog from '@/components/common-dialog.vue';

export default {
    components: {
        OrderTimeline,
        BookList,
        ServiceInfo,
        OrderReturnActions,
        CommonDialog
    },
    data() {
        return {
            bookList: [],
            // 订单信息
            orderInfo: {},
            // 弹窗
            dialogTitle: '提示',
            dialogContent: '',
            actionType: '',
            orderId: '',
            fromCanReturn: false // 新增：标记是否从可退回tab进入
        }
    },
    onLoad(options) {
        if (options.orderId) {
            this.orderId = options.orderId
            this.fromCanReturn = options.fromCanReturn === 'true' // 新增：记录来源
            this.getOrderInfo(options.orderId)
        }
    },
    methods: {
        copyOrderNo() {
            uni.setClipboardData({
                data: this.orderInfo.orderId.toString(),
                success: () => {
                    uni.$u.toast('复制成功')
                }
            })
        },
        //复制退回编号
        copyRefundNo() {
            uni.setClipboardData({
                data: this.orderInfo.refundOrderId.toString(),
                success: () => {
                    uni.$u.toast('复制成功')
                }
            })
        },

        //获取订单信息
        getOrderInfo() {
            uni.$u.http.get('/token/order/getRefundOrderDetail?refundOrderId=' + this.orderId).then(res => {
                if (res.code === 200) {
                    this.orderInfo = res.data
                    this.bookList = res.data.detailVoList
                }
            })
        },

        //操作按钮
        handleAction({ type, order }) {
            console.log(type, 'action')
            this.actionType = type
            switch (type) {
                case 'cancel':
                    this.dialogContent = '确定取消退回？'
                    this.$refs.dialog?.openPopup()
                    break;
                case 'confirm':
                    this.dialogContent = '确定收货？'
                    this.$refs.dialog?.openPopup()
                    break;
            }
        },

        //取消退回
        handleCancel() {
            console.log('cancel')
            uni.$u.http.post('/token/order/refundOrderCancel', {
                refundOrderId: this.orderInfo.refundOrderId
            }).then(res => {
                if (res.code === 200) {
                    uni.$u.toast('取消退回成功')
                    this.getOrderInfo()
                } else {
                    uni.$u.toast(res.msg)
                }
            })
        },

        //确认收货
        handleConfirmReceipt() {
            uni.$u.http.post('/token/order/refundOrderFinish', {
                refundOrderId: this.orderInfo.refundOrderId
            }).then(res => {
                if (res.code === 200) {
                    uni.$u.toast('确认收货成功')
                    this.getOrderInfo()
                } else {
                    uni.$u.toast(res.msg)
                }
            })
        },

        //弹窗确认按钮
        handleConfirm() {
            console.log('confirm')
            switch (this.actionType) {
                case 'cancel':
                    this.handleCancel()
                    break;
                case 'confirm':
                    this.handleConfirmReceipt()
                    break;
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.order-detail {
    min-height: 100vh;
    background: #f8f8f8;
    padding-bottom: 230rpx;

    .desc-bg {
        background: #fafafa;
        padding: 20rpx 30rpx;
        border-radius: 10rpx;
        margin-top: 20rpx;
    }

    .info-block {
        background: #FFFFFF;
        padding: 30rpx;
        margin: 30rpx;
        border-radius: 10rpx;
    }

    .detail-bottom {
        flex-direction: column;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    }
}
</style>