shuhi-app/pages/index/express/components/WarehouseSelector.vue

<template>
	<u-popup :show="show" @close="handleClose" mode="bottom" round="10">
		<view class="warehouse-selector">
			<view style="flex:1">
				<!-- 标题 -->
				<view class="header">
					<text class="title">绑定仓库</text>
				</view>

				<!-- 搜索框 -->
				<view class="search-box">
					<u-search :inputStyle="{ 'height': '80rpx', 'font-size': '16px' }"
						:actionStyle="{ 'font-size': '16px', color: '#22ac38' }" v-model="searchKeyword"
						placeholder="搜索仓库" :show-action="true" action-text="搜索" @search="handleSearch"
						@custom="handleSearch" />
				</view>

				<!-- 搜索结果 -->
				<view class="search-result" v-if="searchResults.length > 0">
					<text class="section-title">搜索结果</text>
					<view class="tag-group">
						<u-tag v-for="item in searchResults" :key="item" :text="item.godownName"
							:plain="selectedWarehouse!==item.godownName" shape="circle" @click="selectWarehouse(item)"
							size="large" />
					</view>
				</view>

				<!-- 历史绑定 -->
				<view class="history-section" v-if="historyWarehouses.length>0">
					<text class="section-title">历史绑定</text>
					<view class="tag-group">
						<u-tag v-for="item in historyWarehouses" :key="item" :text="item"
							:plain="selectedWarehouse!==item.godownName" shape="circle" @click="selectWarehouse(item)"
							size="large" />
					</view>
				</view>
			</view>
			<!-- 底部按钮 -->
			<view class="footer">
				<u-button @click="handleClose" text="取消" plain shape="circle" />
				<u-button type="primary" @click="handleConfirm" text="确定" shape="circle" />
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}
	})

	const emit = defineEmits(['update:show', 'warehouse-selected'])

	const searchKeyword = ref('')
	const searchResults = ref([])
	const historyWarehouses = ref([''])
	const selectedWarehouse = ref('')

	//仓库搜索
	const warehouseSearch = (name) => {
		console.log(name)
		uni.$u.http.post('/app/appUser/searchGodown?name=' + name).then(res => {
			if (res.code == 200) {
				searchResults.value = res.data
			}
		})
	}
	//获取用户绑定历史
	const getUserBindHistory = () => {
		uni.$u.http.get('/app/appUser/getUserBindGodownReocrd').then(res => {
			if (res.code == 200) {
				historyWarehouses.value = res.data
			}
		})
	}
	getUserBindHistory()


	const handleSearch = () => {
		// 实现搜索逻辑
		warehouseSearch(searchKeyword.value)
	}

	const selectItem = ref({})
	const selectWarehouse = (item) => {
		selectedWarehouse.value = item.godownName
		selectItem.value = item
	}

	const handleClose = () => {
		emit('update:show', false)
		searchKeyword.value = ''
	}

	const handleConfirm = () => {
		if (selectedWarehouse.value) {
			emit('warehouse-selected', selectItem.value)
			handleClose()
		}
	}
</script>

<style lang="scss" scoped>
	.warehouse-selector {
		padding: 30rpx;
		min-height: 35vh;
		max-height: 80vh;
		overflow: auto;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.header {
		text-align: center;
		margin-bottom: 20px;

		.title {
			font-size: 18px;
			font-weight: 500;
		}
	}

	.search-box {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 16px;
		color: #666;
		margin-bottom: 10px;
		display: block;
	}

	.tag-group {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 20px;
	}

	.footer {
		position: sticky;
		bottom: 0;
		padding: 20px 0;
		padding-bottom: 0;
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}
</style>