warehouse-select.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <view class="container">
  3. <!-- 搜索框 -->
  4. <view class="search-area">
  5. <u-search v-model="searchText" placeholder="请输入仓库名称" :show-action="false" :clearabled="true"
  6. @change="onSearch" height="40"></u-search>
  7. </view>
  8. <!-- 仓库列表 -->
  9. <view class="warehouse-list">
  10. <view v-for="(item, index) in filteredWarehouses" :key="index" class="warehouse-item"
  11. hover-class="warehouse-item-hover" @click="selectWarehouse(item)">
  12. <text>{{ index + 1 }}.{{ item.name }}</text>
  13. </view>
  14. </view>
  15. </view>
  16. </template>
  17. <script setup>
  18. import { ref, computed } from 'vue'
  19. // 搜索文本
  20. const searchText = ref('')
  21. // 仓库列表数据
  22. const warehouses = ref([
  23. { id: 1, name: '河南仓' },
  24. { id: 2, name: '河北仓' },
  25. { id: 3, name: '山东仓' }
  26. ])
  27. // 过滤后的仓库列表
  28. const filteredWarehouses = computed(() => {
  29. if (!searchText.value) return warehouses.value
  30. return warehouses.value.filter(item =>
  31. item.name.toLowerCase().includes(searchText.value.toLowerCase())
  32. )
  33. })
  34. // 搜索处理
  35. const onSearch = () => {
  36. // 实现搜索逻辑
  37. }
  38. // 选择仓库
  39. const selectWarehouse = (item) => {
  40. // 使用事件总线传递数据
  41. uni.$emit('updateWarehouse', item.name)
  42. // 返回上一页
  43. uni.navigateBack()
  44. }
  45. </script>
  46. <style scoped>
  47. .warehouse-list {
  48. margin-top: 12px;
  49. }
  50. .warehouse-item {
  51. background-color: #fff;
  52. padding: 15px;
  53. margin-bottom: 1px;
  54. font-size: 14px;
  55. }
  56. </style>