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

<template>
    <view class="order-page">
        <!-- 标签页 -->
        <view class="tabs-wrapper">
            <u-tabs :list="tabList" :current="currentTab" @change="handleTabChange" :is-scroll="false"
                active-color="#38C148" bar-width="60"></u-tabs>
        </view>

        <!-- 订单列表 -->
        <page-scroll v-if="currentTab == 0" :page-size="12" @updateList="handleUpdateList" ref="pageRef" slotEmpty
            url="/token/order/refundOrderList" :immediate="false">
            <view v-if="orderList.length > 0" class="pad-20">
                <order-return-item v-for="order in orderList" :key="order.orderId" :order="order"
                    @action="handleAction"></order-return-item>
            </view>
        </page-scroll>


        <page-scroll v-if="currentTab == 1" :page-size="12" @updateList="handleUpdateList" ref="pageRef" slotEmpty
            url="/token/order/canRefundOrderList" :immediate="false">
            <view v-if="orderList.length > 0" class="pad-20">
                <order-return-item v-for="order in orderList" :key="order.orderId" :order="order"
                    :showAction="false" @click="handleItemClick(order)" :hasReturn="currentTab==1"></order-return-item>
            </view>
        </page-scroll>

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

<script>
import pageScroll from '@/components/pageScroll/index.vue'
import OrderReturnItem from '../components/order-return-item.vue'
import CommonDialog from '@/components/common-dialog.vue'

export default {
    components: {
        pageScroll,
        OrderReturnItem,
        CommonDialog
    },
    data() {
        return {
            tabList: [{
                name: '已申请'
            },
            {
                name: '可退回'
            },
            ],
            currentTab: 0,
            orderList: [],
            requestUrl: '/token/order/refundOrderList',
            refundUrl: '/token/order/refundOrderList',
            canRefundUrl: '/token/order/canRefundOrderList',
            dialogTitle: '提示',
            dialogContent: '',
            actionType: '',
            orderInfo: {} // 订单信息
        }
    },
    onLoad(options) {
        // 如果有传入状态，切换到对应tab
        this.refreshList()
    },
    onShow(){
        this.refreshList()
    },
    methods: {
        refreshList() { 
            this.requestUrl = this.currentTab == 0 ? this.refundUrl : this.canRefundUrl
            this.$nextTick(() => {
                this.$refs.pageRef?.loadData(true)
            })
        },
        handleTabChange(index) {
            this.currentTab = index
            this.$nextTick(() => {
                this.$refs.pageRef?.loadData(true)
            })
        },

        handleUpdateList(list) {
            this.orderList = list
            console.log(this.orderList, 'list')
        },

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

        //取消退回
        handleCancel() {
            let { refundOrderId, orderId } = this.orderInfo
            uni.$u.http.post('/token/order/refundOrderCancel', {
                refundOrderId: orderId || refundOrderId,
            }).then(res => {
                if (res.code === 200) {
                    uni.$u.toast('取消退回成功')
                    this.$refs.pageRef.loadData(true)
                } else {
                    uni.$u.toast(res.msg)
                }
            })
        },

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

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

        handleItemClick(order) {
            // 从可退回tab点击时，带上fromCanReturn参数
            if (this.currentTab === 1) {
                uni.navigateTo({
                    url: `/pages-mine/pages/return-detail?orderId=${order.orderId}`
                })
            } else {
                uni.navigateTo({
                    url: `/pages-mine/pages/return-detail?orderId=${order.orderId}`
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.order-page {
    min-height: 100vh;
    background-color: #F5F5F5;

    .tabs-wrapper {
        position: sticky;
        top: 0;
        z-index: 99;
        background: #FFFFFF;
    }
}
</style>