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

<template>
	<view class="container">
		<view class="header">
			<view class="flex-d">
				<text>订单编号: {{ orderNumber }}</text>
				<text class="mt-16">库位: {{ location }}</text>
			</view>
			<view class="status">
				<text>已出库</text>
			</view>
		</view>

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

		<view v-if="activeTab === 0" class="product-details">
			<bad-out-card v-for="(item, index) in products" :key="index" :item="item" />
		</view>
		<view v-else class="operation-logs mt-20">
			<view v-for="(log, index) in operationLogs" :key="index" class="log-item">
				<text>{{ log.date }}</text>
				<text>{{ log.user }}</text>
				<text>{{ log.action }}</text>
			</view>
		</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 BadOutCard from './components/BadOutCard.vue'

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

	const orderNumber = '4654114'
	const location = 'K01-01-1A'
	const activeTab = ref(0)
	const searchValue = ref('')

	const products = ref([{
			image: 'https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png',
			title: '公文写作教程',
			isbn: '978704051555',
			price: 49.5,
			discount: 0.85,
			quantity: 5,
			set: '不是',
			estimate: 4.11,
			review: 0,
			good: 0,
			average: 0,
			bad: 1,
			reason: '明显泛黄水印/发霉/明显异味'
		},
		{
			image: 'https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png',
			title: '公文写作教程',
			isbn: '978704051555',
			price: 49.5,
			discount: 0.85,
			quantity: 5,
			set: '不是',
			estimate: 4.11,
			review: 0,
			good: 0,
			average: 0,
			bad: 1,
			reason: '明显泛黄水印/发霉/明显异味'
		}
	])

	const operationLogs = ref([
		// Example log data
		{
			date: '2024-01-12 14:18:01',
			user: '张张张',
			action: '提交出库'
		},
		{
			date: '2024-01-12 14:18:01',
			user: '张张张',
			action: '提交入库'
		}
	])

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

	const onSearch = () => {
		// Implement search logic here
	}

	function openScan() {

	}
</script>

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

	.status {
		color: green;
	}


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