shuhi-app/pages/index/wms/order-query-list.vue

<template>
    <view class="container">
        <view class="header" v-if="detail.orderId">
            <view class="flex-d">
                <text>订单编号: {{ detail.orderId }}</text>
                <text class="mt-16">库位: {{ detail.positionCode }}</text>
            </view>
            <view class="status">
                <text>{{ detail.stockStatus == 1 ? '已入库' : '已出库' }}</text>
            </view>
        </view>

        <view style="background-color: #ffffff" class="pad-5 mt-20 content-info" v-if="detail.orderId">
            <u-tabs :list="list1" v-model="activeTab" :itemStyle="{ height: '44px', width: '48%' }"
                @change="handleTabChange"></u-tabs>

            <view v-if="activeTab === 0" class="product-details">
                <BookInfo :bookList="detail.detailVoList" :detail="detail" :isShow="false" />
            </view>
            <view v-else class="operation-logs mt-20">
                <view v-for="(log, index) in operationLogs" :key="index" class="log-item">
                    <text>{{ log.createTime }}</text>
                    <text>{{ log.createName }}</text>
                    <text>{{ log.content }}</text>
                </view>
            </view>
        </view>

        <!-- 底部扫码输入框 -->
        <view class="fixed-bottom pad-20" style="background: #ffffff;">
            <u-search placeholder="请输入快递单号/订单编号" :searchIconSize="24" bgColor="#f6f7f6"
                    @search="orderQuery" v-model="query.search" custom-style="font-size:32rpx"
                    placeholder-style="font-size:32rpx" :clearabled="true" :focus="false" :showAction="false"
                    :height="42"></u-search>
            <u-icon name="scan" size="34" color="#19be6b" @click="openScan"></u-icon>
        </view>
    </view>
</template>

<script setup>
import {
    reactive,
    ref
} from 'vue'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import BookInfo from '../detail/components/BookInfo.vue'

const list1 = reactive([{
    name: '商品明细'
}, {
    name: "操作记录"
}])

const activeTab = ref(0)

const query = reactive({
    searchType: 2,
    search: ''
})

// 判断搜索类型
const determineSearchType = (search) => {
    // 判断是否为纯数字的字符串
    const isNumberString = /^\d+$/.test(search.toString())
    return isNumberString ? 1 : 2
}

//订单查询 /app/stock/findOrder
const detail = ref({})
const orderQuery = () => {
    if (!query.search) {
        uni.$u.toast('请输入快递单号/订单编号')
        uni.$u.ttsModule.speak('请输入快递单号/订单编号')
        return
    }
    // 设置搜索类型
    query.searchType = determineSearchType(query.search)
    
    uni.$u.http.get('/app/stock/findOrder', { params: query }).then(res => {
        if (res.code == 200) {
            detail.value = res.data
            uni.$u.ttsModule.speak('查询成功')
            getOperationLogs(res.data.orderId)
        } else {
            uni.$u.toast(res.msg)
            uni.$u.ttsModule.speak(res.msg)
        }
    })
}
//获取操作记录
const operationLogs = ref([])
const getOperationLogs = (orderId) => {
    uni.$u.http.get('/app/stock/getGodownStocklog', {params: {orderId}}).then(res => {
        if(res.code == 200){
            operationLogs.value = res.data
        }
    })
}


function handleTabChange(tab) {
    activeTab.value = tab.index
}


function openScan() {
    uni.scanCode({
        success: (res) => {
            query.search = res.result
            orderQuery()
        }
    })
}

onLoad((options) => {
    if(options.id){
        query.search = options.id
        orderQuery()
    }
     // #ifdef APP-PLUS
     uni.$u.useGlobalEvent((e) => {
        if (e.barcode) {
            getDetailByCode(e.barcode)
        }
    })
    // #endif
})
onShow(() => {
    uni.$u.updateActivePageOnShow()
})
onUnload(() => {
    uni.$u.cleanupOnPageUnload();
});
</script>

<style lang="scss" scoped>
.header {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
}

.status {
    color: green;
}
.content-info{
    padding-bottom: 60px;
}

.log-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #e0e0e0;
}
</style>