shuhi-app/pages/index/wms/warehouse-select.vue

<template>
    <view class="container" @click="playGlobalSound">
        <!-- 搜索框 -->
        <view class="search-area">
            <u-search v-model="searchText" placeholder="请输入仓库名称" :show-action="false" :clearabled="true"
                @change="onSearch" height="40" placeholder-style="font-size:16px"></u-search>
        </view>

        <!-- 仓库列表 -->
        <view class="warehouse-list">
            <view v-for="(item, index) in warehouses" :key="index" 
                :class="['warehouse-item', { 'warehouse-item-active': item.id == selectedId }]"
                hover-class="warehouse-item-hover" @click="selectWarehouse(item)">
                <text>{{ index + 1 }}.{{ item.godownName }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 点击全局音效
function playGlobalSound(){
    uni.$u.playClickSound()
}

// 搜索文本
const searchText = ref('')

// 仓库列表数据
const warehouses = ref([])

//根据name查询仓库列表 /app/appUser/searchGodown
function getGodownListByName(name = "") {
    uni.$u.http.post('/app/appUser/searchGodown?name=' + name).then(res => {
        if (res.code == 200) {
            warehouses.value = res.data
        }
    })
}
getGodownListByName()


// 搜索处理
const onSearch = () => {
    getGodownListByName(searchText.value)
}

// 选择仓库
const selectWarehouse = (item) => {
    // 使用事件总线传递数据
    uni.$emit('updateWarehouse', item)

    // 返回上一页
    uni.navigateBack()
}

const selectedId = ref()
onLoad((options) => {
    if (options.godownId) {
        selectedId.value = options.godownId       
    }
})
</script>

<style scoped>
.warehouse-list {
    margin-top: 12px;
}

.warehouse-item {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 1px;
    font-size: 16px;
}

.warehouse-item-active {
    background-color: #e1f3ff;
    color: #2979ff;
}

.warehouse-item-hover {
    background-color: #f5f5f5;
}
</style>