shuhi-app/pages/index/express/route-exception.vue

<template>
    <view class="container">
        <!-- 列表区域 -->
        <page-scroll ref="pageScrollRef" height="100vh" :requestStr="requestStr" @updateList="updateList"
            :otherParams="otherParams">
            <u-sticky :offset-top="0">
                <!-- 顶部标签页 -->
                <u-subsection fontSize="16" :list="tabList" :current="curNow" @change="sectionChange" mode="subsection"
                    class="tabs-list"></u-subsection>

            </u-sticky>
            <view class="list-container">
                <exception-item v-for="item in exceptionList" :key="item.orderNo" :order="item" @refresh="handleSearch" />
            </view>
        </page-scroll>

        <!-- 底部搜索框 -->
        <view class="search-bar fixed-bottom">
            <u-search v-model="otherParams.search" placeholder="请输入物流单号/订单编号" :show-action="false"
                :inputStyle="{ fontSize: '32rpx' }" @search="handleSearch" height="80rpx" shape="round">
            </u-search>
            <u-icon name="scan" size="28" color="#19be6b" @click="handleScan" />
        </view>
    </view>
</template>

<script setup>
import {
    ref,
} from 'vue';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import ExceptionItem from './components/ExceptionItem.vue';
import PageScroll from '@/components/pageScroll/index.vue';

// 标签页配置
const tabList = ['待处理订单', '历史异常签收'];
const curNow = ref(0);

// 列表数据
const exceptionList = ref([]);
let urlList = ['/app/orderexception/pagelist', '/app/orderexception/getPageLoglist'];
//历史 /app/orderexception/getPageLoglist
const requestStr = ref(urlList[0]);

// 定义方法，注意在 setup 中不需要 this，直接访问响应式引用  
function sectionChange(index) {
    curNow.value = index;
    requestStr.value = urlList[index];
    handleSearch();
}

// 搜索相关
const pageScrollRef = ref(null);
const otherParams = ref({ search: '' });

const updateList = (list) => {
    exceptionList.value = list;
}

// 搜索处理
const handleSearch = () => {
    pageScrollRef.value?.resetUpScroll();
};

// 扫码处理
const handleScan = () => {
    uni.scanCode({
        success: (res) => {
            otherParams.value.search = res.result;
            handleSearch();
        }
    });
};

onLoad(() => {
    // #ifdef APP-PLUS
    uni.$u.useGlobalEvent((e) => {
        otherParams.value.search = e.barcode
        handleSearch()
    })
    // #endif
})
onShow(() => {
    uni.$u.updateActivePageOnShow()
})
onUnload(() => {
    uni.$u.cleanupOnPageUnload();
});
</script>

<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: 140rpx;

    :deep(.tabs-list) {
        padding: 0 20rpx;
        height: 80rpx;
        margin-top: 20rpx;

        .u-subsection__item {
            height: 80rpx
        }
    }
	/* #ifdef H5 */
	:deep(.u-sticky){
		top: 0 !important;
	}
	/* #endif */
}

.list-container {
    flex: 1;
    padding: 24rpx;
    box-sizing: border-box;
}

.search-bar {
    padding: 12px;
    box-sizing: border-box;
    background-color: #fff;
    border-top: 2rpx solid #eee;

    :deep(.u-search) {
        background-color: #f5f5f5;
        font-size: 32rpx;
    }
}
</style>