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 style="font-size: 32rpx;">批次：</text>
                <view class="batch-input">
                    <view class="batch-input-text" @tap="openBatchSelector"></view>
                    <u-input v-model="formData.batchNum" placeholder="请选择/新建批次" readonly border="surround"
                        placeholder-style="font-size: 32rpx" custom-style="font-size: 32rpx;height: 88rpx;">
                        <template #suffix>
                            <u-icon name="arrow-down" size="18" />
                        </template>
                    </u-input>
                </view>
            </view>

        </view>

        <!-- 数量显示 -->
        <view class="count-badge">
            数量 <text style="font-size: 32rpx;">{{ count }}</text>
        </view>

        <!-- 底部按钮 -->
        <view class="footer">
            <!-- 查询区域 -->
            <view class="query-section">
                <u-radio-group v-model="formData.searchType" class="query-radio">
                    <u-radio label="查订单" name="1" labelSize="16px" iconSize="16px" />
                    <u-radio label="查物流" custom-style="margin-left:20px" name="2" labelSize="16px" iconSize="16px" />
                </u-radio-group>

                <view class="search-box">
                    <u-input custom-style="font-size: 32rpx;" placeholder-style="font-size: 32rpx;"
                        v-model="formData.packageCode" :adjustPosition="true" 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"
                    v-permission="'app:express:quickCheck:confirm'" />
            </view>
        </view>

        <!-- 批次选择弹窗 -->
        <u-popup :show="showBatchSelector" mode="bottom" @close="showBatchSelector = false">
            <view class="batch-popup" style="min-height: 300px;">
                <view class="popup-header">
                    <text style="font-size: 32rpx;">批次</text>
                    <view style="font-size: 32rpx;color: #007AFF;" @click="createNewBatch">
                        <text>新建批次</text>
                    </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.batchNum }}</text>
                        <text>{{ batch.num }}</text>
                    </view>
                </scroll-view>
            </view>
        </u-popup>
    </view>
</template>

<script setup>
import {
    ref
} from 'vue';
import { onLoad, onShow } from "@dcloudio/uni-app"

const selectedBatchId = ref('');
const showBatchSelector = ref(false);
const count = ref(0);

const formData = ref({
    batchNum: '',
    packageCode: '',
    searchType: '2',
    packageStatus: ''
})

// 批次列表数据
const batchList = ref([]);
function getBatchList() {
    uni.$u.http.get('/app/batchnum/pagelist').then(res => {
        batchList.value = res.rows
    })
}
getBatchList()


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

// 选择批次
const selectBatch = (batch) => {
    selectedBatchId.value = batch.id;
    count.value = Number(batch.num);
    formData.value.batchNum = batch.batchNum;
    showBatchSelector.value = false;
};

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

//处理提交批次
const handleSubmitBatch = () => {
    console.log('提交批次:', formData.value.batchNum);
    if (!formData.value.batchNum) {
        uni.$u.toast('请选择批次')
        return
    }
    if (!formData.value.packageCode) {
        uni.$u.toast('请扫描/输入物流单号')
        return
    }
    uni.$u.http.post('/app/ordersign/deliverySign', formData.value).then(res => {
        console.log(res)
        if (res.code == 200) {
            let text = code + '快递验收成功'
            uni.$u.ttsModule.speak(text)
        } else {
            let text = code + '订单不存在'
            uni.$u.ttsModule.speak(text)
        }
    })
};

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

// Function to handle creating a new batch
const createNewBatch = () => {
    uni.$u.http.post('/app/batchnum/add').then(res => {
        if (res.code == 200) {
            getBatchList()
        }
    })
};

onLoad(() => {
    // #ifdef APP-PLUS
    uni.$u.useGlobalEvent((e) => {
        formData.value.packageCode = e.barcode
        handleSubmitBatch()
    })
    // #endif
})
onShow(() => {
    uni.$u.updateActivePageOnShow()
})
</script>

<style lang="scss" scoped>
@import "../components/common.scss";
</style>
<style>
.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
}
</style>