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

<template>
    <view class="common-page" style="padding: 0;">
        <view class="filter-bar">
            <view class="picker-trigger" @tap.stop="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/getMyHandleWorkOrder" @updateList="updateList" ref="scrollRef"
            :otherParams="otherParams" method="get" :diffHeight="150">
            <WorkorderItem v-for="(cell, idx) in dataList" :key="idx" :item="cell" :showDuration="true"
                @click="goDetail(cell)" class="mt-20" />
        </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 = ref([])

// 获取任务类型字典
const getTaskTypeOptions = async () => {
    try {
        const res = await uni.$u.http.get('/system/dict/data/type/task_type')
        if (res.code === 200 && res.data) {
            // 添加"全部"选项
            taskTypeOptions.value = [
                { text: '全部', value: '' }
            ].concat(res.data.map(item => ({
                text: item.dictLabel,
                value: parseInt(item.dictValue)
            })))
        }
    } catch (e) {
        console.error('获取任务类型失败', e)
    }
}

const otherParams = ref({
    type: 2, // 工单类型：2-收书
    taskType: '' // 任务类型
})

const updateList = (data) => {
    console.log(data, 'data')
    // 如果data是响应对象，提取rows
    dataList.value = data
}

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

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

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

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

onShow(() => {
    // 加载任务类型字典
    getTaskTypeOptions()
    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>