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>
	@import "../components/common.scss"
</style>