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 v-model="searchKeyword" placeholder="搜索仓库" :show-action="true" action-text="搜索"
						action-style="color: #4CAF50" @search="handleSearch" @custom="handleSearch" />
				</view>

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

				<!-- 历史绑定 -->
				<view class="history-section">
					<text class="section-title">历史绑定</text>
					<view class="tag-group">
						<u-tag v-for="item in historyWarehouses" :key="item" :text="item" plain shape="circle"
							@click="selectWarehouse(item)" />
					</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 handleSearch = () => {
		// 实现搜索逻辑
	}

	const selectWarehouse = (warehouse) => {
		selectedWarehouse.value = warehouse
	}

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

	const handleConfirm = () => {
		if (selectedWarehouse.value) {
			emit('warehouse-selected', selectedWarehouse.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: 16px;
			font-weight: 500;
		}
	}

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

	.section-title {
		font-size: 14px;
		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>