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

<template>
	<view class="industrial-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 }"
			>
				<text class="tab-label">{{ item.label }}</text>
				<view class="tab-indicator" v-if="currentTab === item.value"></view>
			</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: {
		TypingVue,
		ApartVue,
		MergeVue,
		TraceVue
	},
	computed: {
		username() {
			return this.$store.state.user.name
		},
		avatar() {
			return this.$store.state.user.avatar
		},
		windowHeight() {
			return uni.getSystemInfoSync().windowHeight - 50
		},
		currentComponent() {
			const componentMap = {
				'typing': 'TypingVue',
				'apart': 'ApartVue',
				'merge': 'MergeVue',
				'trace': 'TraceVue'
			};
			return componentMap[this.currentTab] || 'TypingVue';
		}
	},
	
	onLoad() {
		uni.setNavigationBarTitle({
			title: '扫码（' + this.username + '）',
		});
	},
	
	methods: {
		// 切换标签
		switchTab(tabValue) {
			this.currentTab = tabValue
		}
	}
}
</script>

<style scoped lang="scss">
.industrial-content {
	min-height: 100vh;
	background: #f6f6f6;
	padding-bottom: 30rpx;
}

/* 顶部装饰 */
.header-decoration {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx 30rpx 30rpx;
	margin-bottom: 20rpx;
	
	.decorative-text {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		letter-spacing: 2rpx;
		padding: 0 30rpx;
	}
	
	.decorative-line {
		height: 2rpx;
		background: linear-gradient(90deg, transparent, #ddd, transparent);
		flex: 1;
		max-width: 100rpx;
		
		&.line-left {
			background: linear-gradient(90deg, transparent, #ddd);
		}
		
		&.line-right {
			background: linear-gradient(90deg, #ddd, transparent);
		}
	}
}

/* 简约标签栏 */
.tab-container {
	display: flex;
	width: 100%;
	background: #fff;
	padding: 0 20rpx;
	margin-bottom: 20rpx;
	position: relative;
	border-bottom: 1rpx solid #e8e8e8;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 30rpx 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	
	.tab-label {
		font-size: 28rpx;
		color: #666;
		font-weight: 400;
		transition: all 0.3s ease;
	}
	
	&.tab-active {
		.tab-label {
			color: #007aff;
			font-weight: 600;
		}
	}
	
	.tab-indicator {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 50rpx;
		height: 4rpx;
		background: #007aff;
		border-radius: 2rpx;
	}
}

/* 组件容器 */
.component-container {
	width: 100%;
	min-height: 400rpx;
	padding: 0 30rpx;
}
</style>