shuhi-app/pages/order/recycle/pending.vue

<template>
    <view class="common-page" style="padding: 0;">
        <view class="filter-bar">
            <view class="picker-trigger" @tap="pickerShow = true">
                <text class="picker-label">{{ selectedTaskType?.text || '任务类型' }}</text>
                <u-icon name="arrow-down" size="16" color="#666"></u-icon>
            </view>
            <u-button class="ml-10" type="primary" size="small" @click="onQuery">查询</u-button>
            <u-button class="ml-10" size="small" @click="onReset">重置</u-button>
        </view>

        <u-picker
            :show="pickerShow"
            :columns="[taskTypeOptions]"
            title="选择任务类型"
            @confirm="onPickConfirm"
            @cancel="pickerShow = false"
            @close="pickerShow = false"
        ></u-picker>

        <PageScroll
            requestStr="/app/workorder/pending"
            @updateList="updateList"
            ref="scrollRef"
            :otherParams="otherParams"
            method="get"
            :diffHeight="150"
        >
            <view class="list-con" v-if="dataList.length">
                <WorkorderItem
                    v-for="(cell, idx) in dataList"
                    :key="idx"
                    :item="cell"
                    :showDuration="true"
                    @click="goDetail(cell)"
                    class="mt-20"
                />
            </view>
        </PageScroll>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import PageScroll from '@/components/pageScroll/index.vue'
import WorkorderItem from '../components/workorder-item.vue'

const dataList = ref([])
const scrollRef = ref(null)
const pickerShow = ref(false)
const selectedTaskType = ref(null)

const taskTypeOptions = [
    { text: '全部', value: '' },
    { text: '书单不符', value: 'MISMATCH' },
    { text: '破损', value: 'BROKEN' },
    { text: '缺件', value: 'LACK' },
    { text: '其他', value: 'OTHER' },
]

const otherParams = ref({
    type: 'recycle',
    status: 'pending',
    taskType: ''
})

const updateList = (data, page) => {
    const mock = [
        { waybillCode: 'YT54454654564', taskTypeName: '书单不符', createTime: '2026-05-11 15:00:00', waitingTime: 15 * 3600 + 5 * 60 + 26 },
        { waybillCode: 'YT54454654564', taskTypeName: '书单不符', createTime: '2026-05-11 15:00:00', waitingTime: 15 * 3600 + 5 * 60 + 26 },
        { waybillCode: 'YT54454654564', taskTypeName: '书单不符', createTime: '2026-05-11 15:00:00', waitingTime: 15 * 3600 + 5 * 60 + 26 },
        { waybillCode: 'YT54454654564', taskTypeName: '书单不符', createTime: '2026-05-11 15:00:00', waitingTime: 15 * 3600 + 5 * 60 + 26 },
        { waybillCode: 'YT54454654564', taskTypeName: '书单不符', createTime: '2026-05-11 15:00:00', waitingTime: 15 * 3600 + 5 * 60 + 26 },
    ]
    dataList.value = Array.isArray(data) && data.length ? data : mock
}

const refreshList = () => {
    scrollRef.value?.resetUpScroll()
}

const onPickConfirm = (e) => {
    const val = e?.value?.[0]
    selectedTaskType.value = val
    otherParams.value.taskType = val?.value || ''
    pickerShow.value = false
}

const onQuery = () => {
    refreshList()
}
const onReset = () => {
    selectedTaskType.value = null
    otherParams.value.taskType = ''
    refreshList()
}

const goDetail = (cell) => {
    const code = cell?.waybillCode || ''
    uni.navigateTo({
        url: `/pages/order/recycle/detail?waybillCode=${code}`
    })
}

onShow(() => {
    refreshList()
})
</script>

<style lang="scss" scoped>
.filter-bar {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background-color: #ffffff;
    gap: 16rpx;
}
.picker-trigger {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx 20rpx;
    border: 1rpx solid #e6e8eb;
    border-radius: 8rpx;
    min-width: 200px;
}
.picker-label {
    font-size: 28rpx;
    color: #333;
}
.list-con {
    padding: 10rpx 30rpx;
    gap: 30rpx;
}
.ml-10 {
    margin-left: 10rpx;
}
</style>