feat: 重构扫码与巡检模块,优化页面路由
1. 新增钢卷详情、扫码页面与设备巡检组件 2. 调整首页跳转逻辑至扫码页面,更新tabBar配置 3. 隐藏旧的分条、其他操作模块,替换钢卷详情弹窗为页面跳转 4. 复用巡检组件到扫码页面与设备巡检页
This commit is contained in:
105
apps/hand-factory/pages/scan/scan.vue
Normal file
105
apps/hand-factory/pages/scan/scan.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- Tab 切换栏 -->
|
||||
<view class="tabs-bar">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ 'tab-active': currentTab === 'coil' }"
|
||||
@click="currentTab = 'coil'"
|
||||
>
|
||||
<text class="tab-text">钢卷操作</text>
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ 'tab-active': currentTab === 'inspect' }"
|
||||
@click="currentTab = 'inspect'"
|
||||
>
|
||||
<text class="tab-text">设备巡检</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Tab 内容 -->
|
||||
<view class="tab-content">
|
||||
<view v-show="currentTab === 'coil'" class="tab-panel">
|
||||
<scan-coil ref="scanCoil" />
|
||||
</view>
|
||||
<view v-show="currentTab === 'inspect'" class="tab-panel">
|
||||
<scan-inspect ref="scanInspect" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ScanCoil from '@/components/scan-coil/scan-coil.vue'
|
||||
import ScanInspect from '@/components/scan-inspect/scan-inspect.vue'
|
||||
|
||||
export default {
|
||||
components: { ScanCoil, ScanInspect },
|
||||
data() {
|
||||
return {
|
||||
currentTab: 'coil'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// ========== Tab 栏 ==========
|
||||
.tabs-bar {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-bottom: 2rpx solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
position: relative;
|
||||
|
||||
.tab-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&.tab-active {
|
||||
.tab-text {
|
||||
color: #1a73e8;
|
||||
font-weight: 600;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
height: 4rpx;
|
||||
background: #1a73e8;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========== Tab 内容 ==========
|
||||
.tab-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-panel {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 15rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user