shuhi-app/pages/index/wms/speedy-check-add.vue

<template>
	<view class="container">
		<u-navbar title="选择商品" :border="false" fixed safe-area-inset-top>
			<template #left>
				<u-icon name="arrow-left" color="#333333" size="20" @click="goBack"></u-icon>
			</template>
			<template #right>
				<u-text type="primary" text="确定" @click="onSubmit"></u-text>
			</template>
		</u-navbar>

		<!-- 库位显示 -->
		<view class="location-info">
			<text>{{ location }}</text>
		</view>

		<!-- 订单列表 -->
		<view class="product-details">
			<LocationOrderItem isCheck v-for="(item, index) in products" :key="index" :item="item"
				@select="toggleItemSelect" />
		</view>

		<!-- 底部全选栏 -->
		<view class="fixed-bottom">
			<view class="select-all" @click="toggleSelectAll">
				<u-icon :name="isAllSelected ? 'checkmark-circle-fill' : 'checkmark-circle'"
					:color="isAllSelected ? '#19be6b' : '#c8c9cc'" size="28"></u-icon>
				<text class="select-text">全选</text>
			</view>
			<text class="order-count">订单总数: {{ products.length }}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import LocationOrderItem from './components/LocationOrderItem.vue'

	// 库位相关
	const location = ref('k01-01-4A')

	// 其他数据
	const searchValue = ref('')
	const products = ref([{
			orderNo: '4846464',
			logisticsNo: "DPK2023497491611",
			inspectionDate: "2024-11-14",
			badCount: 5,
			operator: '李程雪',
			checked: false
		},
		{
			orderNo: '4846464',
			logisticsNo: "DPK2023497491611",
			inspectionDate: "2024-11-14",
			badCount: 5,
			operator: '李程雪',
			checked: false
		}
	])

	// 计算是否全选
	const isAllSelected = computed(() => {
		return products.value.length > 0 && products.value.every(item => item.checked)
	})

	// 切换单个选择
	const toggleItemSelect = (item) => {
		item.checked = !item.checked
	}

	// 切换全选
	const toggleSelectAll = () => {
		const newState = !isAllSelected.value
		products.value.forEach(item => {
			item.checked = newState
		})
	}

	// 确认选择
	const onSubmit = () => {
		const selectedItems = products.value.filter(item => item.checked)
		// 这里可以通过 uni.$emit 传递选中的数据到上一页
		uni.$emit('selectedProducts', selectedItems)
		uni.navigateBack()
	}

	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.location-info {
		background-color: #fff;
		padding: 20rpx;
		text-align: center;
		font-size: 32rpx;
		margin-bottom: 16rpx;
	}

	.product-details {
		margin-bottom: 100rpx;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

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

		.select-text {
			margin-left: 12rpx;
			font-size: 28rpx;
		}
	}

	.order-count {
		font-size: 28rpx;
		color: #666;
	}
</style>