项目uniapp，结合fastadmin后端开发

picker组件的官方文档说明

https://en.uniapp.dcloud.io/component/picker.html#普通选择器

先看效果：

 

1、实现设备类型的筛选；2、实现设备状态的筛选；

前端代码（节选）

<template>
  <view class="camera-list-container">
    <!-- 搜索栏 -->
  <view class="search-bar">
      <uni-search-bar v-model="keyword" @confirm="search"></uni-search-bar>
    </view>
   <!-- 筛选栏 -->
       <view class="filter-bar">
         <!-- 分类筛选 -->
         <view class="filter-item">
           <picker
             :range="typeList"
			 range-key="name"
             :value="selectedTypeIndex"
             @change="handleTypeChange"
             mode="selector"
           >
             <view class="uni-input">
               {{ typeList[selectedTypeIndex].name }}
               <uni-icons type="down" size="24" class="picker-icon"></uni-icons>
             </view>
           </picker>
         </view>
   
         <!-- 状态筛选 -->
         <view class="filter-item">
           <picker
             :range="statusList"
			 range-key="name"
             :value="selectedStatusIndex"
             @change="handleStatusChange"
             mode="selector"
           >
             <view class="uni-input">
               {{ statusList[selectedStatusIndex].name }}
               <uni-icons type="down" size="24" class="picker-icon"></uni-icons>
             </view>
           </picker>
         </view>
       </view>
    
    <!-- 相机列表 -->
    <view class="camera-items">
      <view class="camera-item" v-for="(item, index) in cameraList" :key="index">
        <view class="camera-img-container">
          <image :src="item.image || 'https://3f.gde.cc/uploads/20250527/83e99b5e7f4979dc4868aed335fa265d.jpg'" mode="aspectFill" class="camera-img"></image>
        </view>
        <view class="camera-info">
          <text class="name">{{ item.name }}</text>
          <text class="name">可借数量：{{item.stock}}</text>
          <text class="price">¥{{ item.rent_price }}/天</text>
          <text class="status" :class="item.stock > 0 ? 'available' : 'unavailable'">
            {{ item.status_zh }}
          </text>
        </view>
        <view class="checkbox-container">
			<uni-number-box :min="0" :max="(item.stock)" 
            :value="selectedQuantities.get(item.id) || 0"
            @change="handleQuantityChange(item, $event)"
            :disabled="item.stock <= 0"></uni-number-box>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <uni-load-more :status="loadStatus" @clickload="loadMore"></uni-load-more>
    
     <!-- 底部租用工具栏 -->
        <view v-if="totalSelectedQuantity > 0" class="bottom-toolbar">
          <view class="toolbar-left">
            <text>已选 {{ totalSelectedQuantity }} 台设备</text>
            <text class="total-price">总计: ¥{{ totalPrice }}/天</text>
          </view>
          <view class="toolbar-right" @click="rentSelectedDevices">
            <text>立即预约</text>
          </view>
        </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import request from '@/utils/http.js'
import request2 from '@/utils/http2.js'

const keyword = ref('')
const selectType = ref({ id: 0, name: '产品分类' })
const selectStatus = ref({ id: '', name: '设备状态' })
const page = ref(1)
const cameraList = ref([])
const loadStatus = ref('loading')

// 新增：选中项索引
const selectedTypeIndex = ref(0); // 初始全部分类
const selectedStatusIndex = ref(0); // 初始全部状态

// 筛选数据
const typeList = ref([])

const statusList = ref([])

// 修改筛选事件处理
const handleTypeChange = (e) => {
  selectedTypeIndex.value = e.detail.value;
  fetchCameraList(true); // 切换分类时刷新列表
};

const handleStatusChange = (e) => {
  selectedStatusIndex.value = e.detail.value;
  fetchCameraList(true); // 切换状态时刷新列表
};


// 获取相机列表
const fetchCameraList = async (isRefresh = false) => {
  if (isRefresh) {
    page.value = 1
    cameraList.value = []
    selectedQuantities.value.clear() // 刷新时清空选中数量
  }

  try {
    const res = await request2({
      url: '/api/ffep/device/index',
      method: 'POST',
      data:{
        keyword: keyword.value,
        type: typeList.value[selectedTypeIndex.value].id, // 使用value作为参数
		status: statusList.value[selectedStatusIndex.value].id, // 使用value作为参数
      }
    })

    if (res.code) {
      cameraList.value = [...cameraList.value, ...res.data.list]
      page.value++
      loadStatus.value = res.data.list.length < res.data.pageSize ? 'noMore' : 'loading'
    } else {
      uni.showToast({ title: res.msg || '获取失败', icon: 'none' })
      loadStatus.value = 'error'
    }
  } catch (error) {
    uni.showToast({ title: '网络错误', icon: 'none' })
    loadStatus.value = 'error'
  }
}

// 页面初始化
onMounted(() => {
  request2({
    url: '/api/ffep/device/init',
    method: 'POST',
  }).then(res=>{
	  typeList.value = [{id:0,name:'全部类型'},...res.data.typeList]
	  statusList.value = [{id:0,name:'全部状态'},...res.data.statusList] 
	fetchCameraList()
	  
  })
  uni.setNavigationBarTitle({
    title:'IT设备借用/领用/归还'
  })
})

</script>

画几个重点：

1、如果数据源是二维数组，需要指定标签的名称；

 

 

2、如果接口没有默认选项，要补一个

 

3、事件改变

 

 

后端处理：

1、picker需要的数据接口

    public function init(){
        $typelist = CategoryModel::field('id,name')->select();
        $statuslist = (new ApplyModel())->getStatusList();
        foreach ($statuslist as $key=>$val){
            $statusList[] = ['id'=>$key,'name'=>$val];
        }
        return $this->success('ok',[
            'typeList'=>$typelist,
            'statusList' => $statusList,
        ]);
    }

返回的数据格式：

 

 2、查询事件的后端处理