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

<template>
	<view class="container" style="padding-top: 84px;padding-bottom: 10px;">
        <u-navbar title="选择商品" :border="false" fixed safe-area-inset-top bgColor="#22ac38"
        titleStyle="font-size:36rpx;color:#fff">
            <template #left>
                <u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon>
            </template>
            <template #right>
                <text style="color: #ffffff;" @click="onSubmit">确定</text>
            </template>
        </u-navbar>

		<!-- 库位显示 -->
		<view class="location-info">
			<text>库位: {{ location }}</text>
			<text v-if="godownName">仓库: {{ godownName }}</text>
			<text v-if="orderNum">订单号: {{ orderNum }}</text>
		</view>

		<!-- 订单列表 -->
		<view class="product-details">
			<LocationOrderItem isCheck v-for="(item, index) in products" :key="index" :item="item"
				@select="toggleItemSelect" :isLink="false" />
		</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 { onLoad,onUnload } from "@dcloudio/uni-app";
	import LocationOrderItem from './components/LocationOrderItem.vue'

	// 库位相关
	const location = ref('')
	const products = ref([])
	const orderNum = ref('')
	const godownName = ref('')

	// 获取库位订单
	const getOrderByPositionCode = (positionCode) => {
		uni.$u.http.get('/app/stock/getOrderByPositionCode?positionCode=' + positionCode).then(res => {
			if (res.code === 200) {
				const data = res.data
				orderNum.value = data.orderNum
				godownName.value = data.godownName
				products.value = data.godownStockLogResults || []
				// 初始化选中状态
				products.value.forEach(item => {
					item.checked = false
				})
			} else {
				uni.$u.toast(res.msg)
			}
		})
	}

	onLoad((options) => {
		if (options.location) {
			location.value = options.location
			getOrderByPositionCode(options.location)
		}
	})

	// 计算是否全选
	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)
		goBack()
	}

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

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

		text {
			display: block;
			margin-bottom: 10rpx;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.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>