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

<template>
    <view class="container">
        <!-- 库位列表 -->
        <scroll-view scroll-y class="location-list" :style="{ height: scrollHeight + 'px' }">
            <view v-for="(item, index) in locations" :key="index" 
                :class="['location-item', item === positionCode ? 'location-item-selected' : '']"
                hover-class="location-item-hover" @click="selectLocation(item)">
                <text>{{ item }}</text>
            </view>
        </scroll-view>

        <!-- 底部搜索框 -->
        <view class="fixed-bottom pad-20" style="background: #ffffff;">
            <u-search v-model="searchText" placeholder="请输入库位条码" :show-action="false" :clearabled="true"
                @change="onSearch" height="40" :disabled="true" @click="searchText = ''">
            </u-search>
            <u-icon name="scan" size="28" color="#19be6b" @click="openScan"></u-icon>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 搜索文本
const searchText = ref('')

// 库位列表数据
const locations = ref([])

//根据仓库id获取库位列表
function getLocationListByGodownId(godownId, code = "") {
    uni.$u.http.get('/app/stock/getGodownPosition?godownId=' + godownId + '&code=' + code).then(res => {
        if (res.code == 200) {
            locations.value = res.data
        }
    })
}

// 滚动区域高度
const scrollHeight = ref(0)


// 搜索处理
const onSearch = () => {
    // 实现搜索逻辑
    getLocationListByGodownId(godownId.value, searchText.value)
}

// 打开扫码
const openScan = () => {
    // #ifdef APP-PLUS || MP-WEIXIN
    uni.scanCode({
        success: (res) => {
            searchText.value = res.result
            onSearch()
        },
        fail: (err) => {
            uni.showToast({
                title: '扫码失败',
                icon: 'error'
            })
        }
    })
    // #endif

    // #ifdef H5
    uni.showToast({
        title: 'H5环境不支持扫码',
        icon: 'none'
    })
    // #endif
}

// 选择库位
const selectLocation = (item) => {
    // 也可以使用事件总线或页面参数的方式传值
    uni.$emit('updateLocation', item)

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

const godownId = ref('')
const positionCode = ref('')
onLoad((opts) => {
    godownId.value = opts.godownId
    positionCode.value = opts.positionCode
    getLocationListByGodownId(godownId.value)

    scrollHeight.value = uni.getSystemInfoSync().windowHeight - 44 - 60

    // #ifdef APP-PLUS
    uni.$u.useGlobalEvent((e) => {
        if (e.barcode) {
            searchText.value = e.barcode
            getLocationListByGodownId(godownId.value, e.barcode)
        }
    })
    // #endif
})
</script>

<style scoped>
.container {
    position: relative;
}

.location-list {
    padding: 12px 0 60px;
}

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

.location-item-selected {
    background-color: #e8f5e9;
    border-left: 4px solid #19be6b;
}

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