185 lines
3.4 KiB
Vue
185 lines
3.4 KiB
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>
|