shuhi-app/pages/my/page/warehouse.vue

<template>
	<view class="warehouse-select">
		<view class="select-wrap" @click="showPicker = true">
			<text class="required-label">*</text>
			<text class="label">默认仓库</text>
			<view class="picker-value">
				<text :class="['value-text', !selectedWarehouse && 'placeholder']">
					{{ selectedWarehouse || '请选择仓库' }}
				</text>
				<u-icon name="arrow-right" color="#999" size="16"></u-icon>
			</view>
		</view>

		<!-- 仓库选择器 -->
		<u-picker :show="showPicker" :columns="[warehouseList]" @confirm="onConfirm" @cancel="showPicker = false"
			@close="showPicker = false" title="选择仓库" confirmText="确定" cancelText="取消"></u-picker>
	</view>
</template>

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

	// 选择器显示状态
	const showPicker = ref(false)

	// 选中的仓库
	const selectedWarehouse = ref('')


	// 仓库列表
	const warehouseList = ref([{
			text: '北京仓库',
			value: '1'
		},
		{
			text: '上海仓库',
			value: '2'
		},
		{
			text: '广州仓库',
			value: '3'
		},
		{
			text: '深圳仓库',
			value: '4'
		},
	])

	// 确认选择
	const onConfirm = (e) => {
		const [{
			value,
			text
		}] = e.value
		selectedWarehouse.value = text
		showPicker.value = false
		// 触发选择事件
		emit('change', value)
	}

	// 定义事件
	const emit = defineEmits(['change'])
</script>

<style lang="scss" scoped>
	.warehouse-select {
		padding: 20rpx;

		.select-wrap {
			display: flex;
			align-items: center;
			background: #FFFFFF;
			min-height: 88rpx;
			padding: 0 20rpx;
			position: relative;

			.required-label {
				color: #FF4D4F;
				font-size: 28rpx;
				margin-right: 4rpx;
			}

			.label {
				font-size: 28rpx;
				color: #333333;
				margin-right: 20rpx;
				white-space: nowrap;
			}

			.picker-value {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.value-text {
					font-size: 28rpx;
					color: #333333;

					&.placeholder {
						color: #999999;
					}
				}

				.count {
					font-size: 24rpx;
					color: #999999;
					margin-right: 10rpx;
				}
			}

			&::after {
				content: '';
				position: absolute;
				left: 20rpx;
				right: 20rpx;
				bottom: 0;
				height: 1px;
				background: #EEEEEE;
				transform: scaleY(0.5);
			}

			&:active {
				background: #F5F5F5;
			}
		}
	}
</style>