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'
	import { onLoad } from '@dcloudio/uni-app'

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

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


	// 仓库列表
	const warehouseList = ref([])
	// 获取仓库列表
	const getWarehouseList = () => {
		uni.$u.http.post('/app/appUser/searchGodown?name=').then(res => {
			if (res.code == 200) {
				warehouseList.value = res.data.filter(v => v.useStatus == 1).map(v => ({
					text: v.godownName,
					value: v.id
				}))
			}
		})
	}
	onLoad(() => {
	    // 获取仓库列表
		getWarehouseList()
	    getWarehouse()
	})

	getWarehouseList()
	//获取默认仓库
	const getWarehouse = () => {
		uni.$u.http.get('/app/appUser/getUserBindGodown').then(res => {
			if (res.code == 200) {
				selectedWarehouse.value = res.data?.godownName
			}
		})
	}
	//保存
	const saveWarehouse = (godownId) => {
		uni.$u.http.post('/app/appUser/bingowGodown?godownId=' + godownId).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '设置默认仓库成功',
					icon: 'success'
				})
			}
		})
	}

	// 确认选择
	const onConfirm = (e) => {
		const [{
			value,
			text
		}] = e.value
		selectedWarehouse.value = text
		showPicker.value = false
		console.log(e,'xxxxxx')
		saveWarehouse(value)
	}
</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>