klp-mono/apps/hand-factory/pages/code/code.vue

<template>
	<view class="content">
		<!-- 标签栏 -->
		<view class="tab-container">
			<view 
				v-for="item in tabs" 
				:key="item.value"
				@click="switchTab(item.value)"
				class="tab-item"
				:class="{ 'tab-active': currentTab === item.value }"
			>
				{{ item.label }}
			</view>
		</view>
		
		<!-- 动态组件区域 - 根据当前标签显示对应组件 -->
		<view class="component-container">
			<component 
				:is="currentComponent" 
			></component>
		</view>
	</view>
</template>

<script>
	import ApartVue from '@/components/panels/code/apart.vue'
	import MergeVue from '@/components/panels/code/merge.vue'
	import TraceVue from '@/components/panels/code/trace.vue'
	import TypingVue from '@/components/panels/code/typing.vue'

	export default {
		data() {
			return {
				scanResult: null, // 扫码结果（传递给组件）
				currentTime: '', // 扫码时间（传递给组件）
				recordId: undefined,
				codeStatus: undefined,
				remark: '',
				currentTab: 'typing', // 当前激活的标签
				tabs: [
					{ label: '录入', value: 'typing' },
					{ label: '分卷', value: 'apart' },
					// { label: '合卷', value: 'merge' },
					{ label: '追溯', value: 'trace' }
				]
			};
		},
		components: {
			ApartVue,
			MergeVue,
			TraceVue,
			TypingVue
		},
		computed: {
			username() {
				return this.$store.state.user.name
			},
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			},
			// 根据当前标签计算要显示的组件
			currentComponent() {
				// 转换为组件名（如 'typing' -> 'TypingVue'）
				return this.currentTab.charAt(0).toUpperCase() + this.currentTab.slice(1) + 'Vue'
			}
		},
		
		onLoad() {
			uni.setNavigationBarTitle({
			  title: '扫码（' + this.username + '）',
			});
		},
		
		methods: {
			// 切换标签
			switchTab(tabValue) {
				this.currentTab = tabValue
			},
			
			// 处理确认录入
			handleConfirm() {
				if (!this.scanResult && this.currentTab !== 'trace') {
					uni.showToast({
						title: '请先扫码获取信息',
						icon: 'none'
					})
					return
				}
				
				// 这里添加确认录入的逻辑
				console.log('确认录入信息：', {
					tab: this.currentTab,
					scanResult: this.scanResult,
					currentTime: this.currentTime,
					recordId: this.recordId,
					codeStatus: this.codeStatus,
					remark: this.remark,
					operator: this.username
				})
				
				uni.showToast({
					title: '录入成功',
					icon: 'success'
				})
			}
		}
	}
</script>

<style>
	/* 父页面样式：保留原有样式，新增标签栏样式 */
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 标签栏容器 */
	.tab-container {
		display: flex;
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	/* 标签项样式 */
	.tab-item {
		flex: 1;
		text-align: center;
		padding: 25rpx 0;
		font-size: 32rpx;
		color: #666;
		position: relative;
		transition: all 0.3s;
	}

	/* 激活标签样式 */
	.tab-active {
		color: #007aff;
		font-weight: 500;
	}

	/* 激活标签下划线 */
	.tab-active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 6rpx;
		background-color: #007aff;
		border-radius: 3rpx 3rpx 0 0;
	}

	/* 组件容器样式 */
	.component-container {
		width: 100%;
		min-height: 400rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
	}
</style>