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

<template>
	<view class="container" @click="playGlobalSound">
		<!-- 库位列表 -->
		<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"
				@search="onSearch" height="40" @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,
		onShow,
		onUnload
	} from '@dcloudio/uni-app'
	// 搜索文本
	const searchText = ref('')

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

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

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

	// 滚动区域高度
	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, 'select')
			}
		})
		// #endif
	})
	onShow(() => {
		uni.$u.updateActivePageOnShow()
	})
	onUnload(() => {
		uni.$u.cleanupOnPageUnload();
	});
</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>