shuhi-app/pages/index/wms/speedy-check.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="select-area" style="margin-top: 44px;">
            <u-cell-group>
                <u-cell title="盘点方式" :value="checkMethod" @click="showCheckMethodPicker = true" isLink />
                <u-cell title="目标库位" :value="location" @click="handleLocationSelect" isLink />
            </u-cell-group>
        </view>

        <!-- 盘点方式选择器 -->
        <u-picker :show="showCheckMethodPicker" :columns="[checkMethodOptions]" @confirm="onCheckMethodConfirm"
            @cancel="showCheckMethodPicker = false" />

        <!-- 订单列表 -->
        <view class="product-details">
            <LocationOrderItem v-for="(item, index) in products" :key="index" :item="item" />
        </view>
		
		<view class="add-btn" @click="handleAdd">
			<u-icon name="plus-circle" size="40" color="#19be6b" @click="openScan"></u-icon>
		</view>

        <!-- 底部扫码输入框 -->
        <view class="fixed-bottom pad-20" style="background: #ffffff;">
            <u-search placeholder="请输入快递单号/订单编号" v-model="searchValue" @confirm="onSearch" :show-action="false"
                custom-style="margin-right:10px"></u-search>
            <u-icon name="scan" size="28" color="#19be6b" @click="openScan"></u-icon>
        </view>
    </view>
</template>

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

// 盘点方式相关
const showCheckMethodPicker = ref(false)
const checkMethod = ref('实际数量')
const checkMethodOptions = ['实际数量', '增加数量', '减少数量']

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

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

// 方法
const onCheckMethodConfirm = (e) => {
    checkMethod.value = e.value[0]
    showCheckMethodPicker.value = false
}

const handleLocationSelect = () => {
    // 跳转到库位选择页面
    uni.navigateTo({
        url: '/pages/location-select/index'
    })
}

const onSearch = () => {
    // 实现搜索逻辑
}

const openScan = () => {
    // 实现扫描逻辑
}

function handleAdd(){
	uni.navigateTo({
		url:"/pages/index/wms/speedy-check-add"
	})
}
</script>

<style lang="scss" scoped>
.select-area {
    background-color: #fff;
}

.product-details {
    margin-bottom: 120rpx; // 为底部搜索框留出空间
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: #ffffff;
    box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.add-btn{
	position: absolute;
	right: 0;
	bottom: 30%;
	z-index: 99;
	cursor: pointer;
}
</style>