shuhi-app/pages/index/express/quick-check.vue

<template>
	<view class="container">
		<!-- 批次选择区域 -->
		<view class="select-section">
			<view class="batch-select">
				<text class="required">*</text>
				<text>批次：</text>
				<u-input v-model="selectedBatch" placeholder="请选择/新建批次" readonly border="surround"
					@click="openBatchSelector">
					<template #suffix>
						<u-icon name="arrow-down" size="14" />
					</template>
				</u-input>
			</view>

		</view>

		<!-- 数量显示 -->
		<view class="count-badge">
			数量{{ count }}
		</view>

		<!-- 底部按钮 -->
		<view class="footer">
			<!-- 查询区域 -->
			<view class="query-section">
				<u-radio-group v-model="queryType">
					<u-radio label="查订单" name="order" />
					<u-radio label="查物流" custom-style="margin-left:20px" name="logistics" />
				</u-radio-group>

				<view class="search-box">
					<u-input custom-style="width:100rpx" v-model="searchKeyword" placeholder="扫描/输入物流单号"
						border="surround" clearable>
					</u-input>
					<u-button color="#c8c8c8" text="查询" @click="handleSearch" />
				</view>
			</view>

			<u-divider></u-divider>

			<view style="display: flex;">
				<u-button size="large" type="warning" text="验收扫码" @click="handleScan" />
				<u-button size="large" type="primary" text="提交批次" @click="handleSubmitBatch" />
			</view>
		</view>

		<!-- 批次选择弹窗 -->
		<u-popup :show="showBatchSelector" mode="bottom" @close="showBatchSelector = false">
			<view class="batch-popup">
				<view class="popup-header">
					<text>批次</text>
					<view class="header-right">
						<text class="new-batch">新建批次</text>
						<u-button type="primary" text="确定" @click="confirmBatch" />
					</view>
				</view>

				<scroll-view scroll-y class="batch-list">
					<view v-for="batch in batchList" :key="batch.id" class="batch-item"
						:class="{ active: selectedBatchId === batch.id }" @click="selectBatch(batch)">
						<text>{{ batch.date }}</text>
						<text>{{ batch.count }}</text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

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

	const queryType = ref('order');
	const searchKeyword = ref('');
	const selectedBatch = ref('');
	const selectedBatchId = ref('');
	const showBatchSelector = ref(false);
	const count = ref(0);

	// 批次列表数据
	const batchList = ref([{
			id: '1',
			date: '202401601',
			count: '0'
		},
		{
			id: '2',
			date: '202401605',
			count: '265'
		},
		{
			id: '3',
			date: '202405601',
			count: '111'
		},
		{
			id: '4',
			date: '202405601',
			count: '111'
		}
	]);

	// 打开批次选择器
	const openBatchSelector = () => {
		showBatchSelector.value = true;
	};

	// 选择批次
	const selectBatch = (batch) => {
		selectedBatchId.value = batch.id;
		selectedBatch.value = `${batch.date} ${batch.count}`;
		count.value = Number(batch.count);
	};

	// 确认批次选择
	const confirmBatch = () => {
		showBatchSelector.value = false;
	};

	// 处理查询
	const handleSearch = () => {
		console.log('查询:', searchKeyword.value);
	};

	// 处理扫码
	const handleScan = () => {
		uni.scanCode({
			success: (res) => {
				searchKeyword.value = res.result;
				handleSearch();
			}
		});
	};

	// 提交批次
	const handleSubmitBatch = () => {
		console.log('提交批次');
	};
</script>

<style lang="scss" scoped>
	.select-section {
		background-color: #fff;
		padding: 12px;
		border-radius: 4px;
		margin-bottom: 12px;
		position: relative;
	}

	.batch-select {
		display: flex;
		align-items: center;

		.required {
			color: #ff0000;
			margin-right: 4px;
		}
	}

	.count-badge {
		position: absolute;
		right: 0;
		top: 50%;
		background-color: #4CAF50;
		color: #fff;
		padding: 8px;
		font-size: 13px;
	}

	.query-section {
		background-color: #fff;
		padding: 12px;
		border-radius: 4px;
	}

	.search-box {
		display: flex;
		gap: 12px;
		margin-top: 12px;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.u-button {
			flex: 1;
			border-radius: 0;
		}
	}

	.batch-popup {
		background-color: #fff;
		border-radius: 16px 16px 0 0;

		.popup-header {
			padding: 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eee;
			box-sizing: border-box;

			.header-right {
				display: flex;
				align-items: center;
				gap: 12px;

				.new-batch {
					color: #2979ff;
					min-width: 70px;
				}
				.u-button{
					height: 64rpx;
				}
			}
		}

		.batch-list {
			max-height: 60vh;
			padding: 0 16px;
			box-sizing: border-box;
		}

		.batch-item {
			padding: 13px 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eee;

			&.active {
				color: #2979ff;
			}
		}
	}
</style>