| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <template>
- <view class="container">
- <!-- 搜索框 -->
- <view class="search-area">
- <u-search v-model="searchText" placeholder="请输入仓库名称" :show-action="false" :clearabled="true"
- @change="onSearch" height="40"></u-search>
- </view>
- <!-- 仓库列表 -->
- <view class="warehouse-list">
- <view v-for="(item, index) in filteredWarehouses" :key="index" class="warehouse-item"
- hover-class="warehouse-item-hover" @click="selectWarehouse(item)">
- <text>{{ index + 1 }}.{{ item.name }}</text>
- </view>
- </view>
- </view>
- </template>
- <script setup>
- import { ref, computed } from 'vue'
- // 搜索文本
- const searchText = ref('')
- // 仓库列表数据
- const warehouses = ref([
- { id: 1, name: '河南仓' },
- { id: 2, name: '河北仓' },
- { id: 3, name: '山东仓' }
- ])
- // 过滤后的仓库列表
- const filteredWarehouses = computed(() => {
- if (!searchText.value) return warehouses.value
- return warehouses.value.filter(item =>
- item.name.toLowerCase().includes(searchText.value.toLowerCase())
- )
- })
- // 搜索处理
- const onSearch = () => {
- // 实现搜索逻辑
- }
- // 选择仓库
- const selectWarehouse = (item) => {
- // 使用事件总线传递数据
- uni.$emit('updateWarehouse', item.name)
- // 返回上一页
- uni.navigateBack()
- }
- </script>
- <style scoped>
- .warehouse-list {
- margin-top: 12px;
- }
- .warehouse-item {
- background-color: #fff;
- padding: 15px;
- margin-bottom: 1px;
- font-size: 14px;
- }
- </style>
|